[HTML] `autocomplete` 속성: 웹 개발자가 알아야 할 모든 것

HTML autocomplete 속성: 웹 개발자가 알아야 할 모든 것

---

브라우저 콘솔에서 다음과 같은 경고 메시지를 본 적이 있는가?

[DOM] Input elements should have autocomplete attributes (suggested: "current-password"): (More info: https://goo.gl/9p2vKq)

이 메시지는 당신의 웹 페이지 입력 필드에 autocomplete 속성이 없거나 올바르게 지정되지 않았다는 것을 의미한다. 특히 비밀번호 입력 필드에서 자주 발생하곤 한다. 이 경고가 왜 뜨는지, 그리고 어떻게 해결하는지 블로그 포스팅으로 상세하게 알아보자.

1. autocomplete 속성이란 무엇일까?

autocomplete 속성은 HTML 양식 필드에서 브라우저가 사용자 정보를 자동으로 완성할지 여부와 어떤 종류의 정보를 자동 완성할 수 있는지 알려주는 아주 유용한 속성이다. 예를 들어, 웹사이트 로그인 시 아이디와 비밀번호를 한 번 입력해두면 다음 방문 시 브라우저가 자동으로 채워주는 기능이 바로 이 autocomplete 속성 덕분이다.

• 사용자 편의성 향상: 사용자가 반복적으로 정보를 입력할 필요 없이 양식을 빠르게 채울 수 있도록 돕는 편리한 기능이다.
• 비밀번호 관리자 지원: 브라우저 내장 비밀번호 관리자나 LastPass와 같은 외부 비밀번호 관리자가 필드의 목적을 정확히 파악하여, 저장된 데이터를 올바르게 자동 채울 수 있도록 돕는 중요한 역할을 한다.
• 보안 강화: 올바른 autocomplete 값을 사용하면 브라우저가 안전한 비밀번호를 제안하거나, 잘못된 데이터가 자동 채워지는 것을 방지하는 데 도움을 줄 수 있다.

---

2. 왜 autocomplete 경고가 발생할까?

이 경고는 주로 type="password"와 같이 민감하거나 중요한 입력 필드에 autocomplete 속성이 명시적으로 지정되지 않았을 때 나타나는 경고이다. 브라우저는 이 필드가 어떤 종류의 비밀번호인지 (현재 비밀번호인지, 새 비밀번호인지 등) 알지 못하므로, 사용자 경험이나 보안에 문제가 생길 수 있다고 판단하여 경고를 띄우는 것이다.

---

3. autocomplete 경고 해결 방법은?

해결 방법은 간단하다. 해당 input 태그에 적절한 autocomplete 속성 값을 추가하는 것이다.

3.1. 로그인 페이지의 비밀번호 필드

로그인 페이지에서 사용자의 현재 비밀번호를 입력하는 필드라면 autocomplete="current-password"를 추가해야 한다.

<input type="password" name="password" autocomplete="current-password">

3.2. 회원가입 또는 비밀번호 변경 페이지의 새 비밀번호 필드

회원가입 시 새 비밀번호를 설정하거나, 비밀번호 변경 페이지에서 새로운 비밀번호를 입력하는 필드라면 autocomplete="new-password"를 추가해야 한다.

<input type="password" name="new-password" autocomplete="new-password">

3.3. ID/사용자 이름 입력 필드

사용자 이름이나 ID를 입력하는 필드에는 autocomplete="username"을 사용해야 한다.

<input type="text" id="username" name="username" autocomplete="username">

3.4. 자동 완성을 원치 않을 경우 (off)

특정 필드에 브라우저의 자동 완성 기능을 사용하고 싶지 않다면 autocomplete="off"를 사용할 수 있다. 하지만 이는 사용자 경험을 저해할 수 있으므로, 특별한 이유가 없는 한 권장되지 않는 방법이다.

<input type="text" name="some_field" autocomplete="off">

---

4. 회원 가입 시에도 autocomplete 속성은 필수일까?

물론이다! 회원 가입 페이지에서도 autocomplete 속성은 매우 유용하며 필수적이다. 사용자 편의성 향상과 비밀번호 관리자 연동, 그리고 웹 표준 준수를 위해 적극적으로 활용해야 한다.

회원 가입 시 주로 사용되는 autocomplete 속성 값

• 이메일 주소:

  <input type="email" name="email" autocomplete="email">

• 이름 (성/이름):

  <input type="text" name="given-name" autocomplete="given-name"> (이름)

  <input type="text" name="family-name" autocomplete="family-name"> (성)

• 전화번호:

  <input type="tel" name="phone" autocomplete="tel">

• 주소:

  <input type="text" name="address-line1" autocomplete="address-line1"> (주소 1)

  <input type="text" name="postal-code" autocomplete="postal-code"> (우편번호)

---

5. React에서는 autoComplete라고 써야 할까? (대문자 C?)

정답은 그렇다! React 컴포넌트에서 HTML autocomplete 속성을 사용할 때는 autoComplete라고 표기하는 것이 맞다. 이는 React의 JSX(JavaScript XML) 문법이 HTML과 유사하지만 JavaScript의 규칙을 따르기 때문이다. JavaScript에서는 - (하이픈)이 연산자로 인식될 수 있어, HTML 속성 중 일부는 camelCase (카멜 케이스)로 변환하여 사용한다.

// React (JSX)에서의 사용 예시
<input
  type="password"
  id="password"
  name="password"
  autoComplete="current-password" // C가 대문자인 autoComplete
/>

자주 변환되는 HTML 속성 이름

• class (HTML) → className (React)
• for (HTML) → htmlFor (React)
• maxlength (HTML) → maxLength (React)
• autocomplete (HTML) → autoComplete (React)

---

6. autocomplete 속성에 지정 가능한 모든 값은?

autocomplete 속성에는 on, off와 같은 일반적인 제어 값 외에도 필드가 나타내는 데이터 종류를 브라우저에 명확히 알려주는 다양한 의미 있는 토큰 값이 있다.

6.1. 일반적인 제어 값

• on: 브라우저가 자동 완성 기능을 허용하도록 지시한다. (기본값)
• off: 브라우저가 자동 완성 기능을 사용하지 않도록 지시한다. (보안상 민감한 정보 등에 사용, 하지만 브라우저가 강제할 수도 있음)

6.2. 주요 의미 있는 토큰 값

• name: 전체 이름
• given-name: 이름, family-name: 성
• username: 사용자 이름 또는 ID
• new-password: 새로운 비밀번호
• current-password: 현재 비밀번호
• organization-title: 직책, organization: 회사/조직 이름
• street-address: 전체 거리 주소, address-line1: 주소 첫 번째 줄
• country: 국가 코드, postal-code: 우편 번호
• cc-name: 신용카드에 표시된 이름, cc-number: 신용카드 번호, cc-exp: 신용카드 만료일, cc-csc: 신용카드 보안 코드
• tel: 전체 전화번호, email: 이메일 주소
• one-time-code: SMS 등으로 전송되는 일회성 인증 코드 (OTP)

이 외에도 bday (생년월일), sex (성별), url (웹사이트 URL) 등 수많은 값이 존재하며, 특정 필드의 목적에 맞게 사용할 수 있다.

더 자세한 정보는 MDN Web Docs의 autocomplete 속성 문서 참고하는 것이 좋다.