자동 완성과 autocomplete 토큰

자동 완성이 하는 일

사용자가 한 번 입력한 이름·주소·전화번호·카드·비밀번호를 브라우저가 저장해 두었다가, 다른 사이트의 같은 종류 칸에 한 칸 또는 폼 전체를 한 번에 채워 준다. 가입 때는 강한 비밀번호를 만들어 저장하고, 로그인 때 다시 꺼낸다.

• 가입·로그인·결제·배송·주소 폼에서 효과가 가장 크다. 입력 시간과 오타가 함께 준다.
• 기억하고 다시 쓰는 부담을 덜어 인지 장애·운동 장애 사용자에게 특히 중요하다. WCAG 성공 기준 1.3.5(Identify Input Purpose)가 개인 정보 칸에 입력 목적을 기계가 읽을 수 있게 하라고 요구하는 이유다(접근 가능한 폼과 오류 처리).

브라우저가 칸을 알아보는 방법

flowchart TB
  a["1. autocomplete 값이 있으면 그것을 믿는다<br/>(가장 확실)"] -->|"없으면"| b["2. 휴리스틱: name · id · type · label 글자 · 주변 문맥"]
  b -->|"둘 다 애매하면"| c["3. 아무것도 제안하지 않는다"]

휴리스틱은 브라우저마다 다르고 보장되지 않는다. 그래서 autocomplete를 명시하고, name·id·type도 같은 뜻으로 맞춘다.

<label for="email">이메일</label>
<input id="email" name="email" type="email" autocomplete="email">

• name·id는 배포가 바뀌어도 그대로 둔다. 빌드마다 바뀌는 해시 id는 자동 완성과 비밀번호 관리자를 헷갈리게 한다.
• 표준 요소(<input>, <select>, <textarea>)를 쓴다. <div>로 만든 커스텀 드롭다운은 채워지지 않는다. 카드 유효 기간도 커스텀 위젯이 아니라 표준 요소로 받는다.
• 하나의 값은 한 칸으로 받는다. 카드 번호·전화번호를 칸 4개로 쪼개면 자동 완성과 붙여넣기가 함께 깨진다.

토큰 문법

autocomplete는 공백으로 나눈 토큰 목록이고, 순서가 정해져 있다.

[section-이름]  [shipping | billing]  [home | work | mobile | fax | pager]  필드 토큰  [webauthn]
   묶음 이름        주소 용도              연락처 종류(tel·email·impp 앞에만)    필수       항상 맨 끝

<!-- 배송지와 청구지가 한 페이지에 있을 때 -->
<input name="ship-zip" autocomplete="shipping postal-code">
<input name="bill-zip" autocomplete="billing postal-code">
 
<!-- 같은 페이지의 두 사람 정보 -->
<input name="guest1-name" autocomplete="section-guest1 name">
<input name="guest2-name" autocomplete="section-guest2 name">
 
<input name="work-phone" autocomplete="work tel">
<input name="username" autocomplete="username webauthn">  <!-- 패스키 자동 완성 -->

자주 쓰는 토큰

전체 목록과 정의는 MDN의 autocomplete 문서에 있다. 맞는 토큰이 있으면 항상 단다.

자동 완성을 끄는 경우

autocomplete="off"는 「이 칸에는 저장된 값을 채우지 말라」는 뜻이다. 폼 요소에 달면 안의 칸이 상속한다.

• 로그인 칸에서는 off가 대개 무시된다. 대부분의 브라우저는 비밀번호 관리자를 위해 로그인 폼의 off를 따르지 않는다. 막으려 하지 말고 맞는 토큰을 준다.
• 끄는 것이 사용자에게 도움이 된다고 확신할 때만 끈다.
• 일회용 코드 칸에는 off가 아니라 one-time-code를 준다. 그래야 SMS로 온 코드를 키보드가 제안한다(로그인·가입 폼과 인증 입력).

채워진 칸 스타일링: :autofill

input:autofill,
input:-webkit-autofill {        /* 오래된 WebKit·Blink 코드용 별칭 */
  outline: 2px solid #2b6cb0;
}

• 사용자가 값을 고치면 더는 맞지 않는다.
• 브라우저 기본 스타일이 !important로 배경색·글자색을 정하므로, 포커스된 채운 칸의 background-color·color는 덮어쓸 수 없다. 테두리·outline·box-shadow로 표시한다.
• 지원이 브라우저마다 고르지 않으므로 두 선택자를 함께 쓰고, 스타일이 없어도 문제없게 만든다.

자동 완성을 깨는 흔한 실수

정리

• 자동 완성은 사용자가 가장 빨리 폼을 끝내는 길이다. 휴리스틱에 맡기지 말고 autocomplete로 명시한다.
• 토큰 순서는 section- → shipping/billing → 연락처 종류 → 필드 → webauthn.
• 이름은 name 한 칸, 주소는 street-address 또는 address-line1/2, 카드는 cc-*, 비밀번호는 new-/current-password.
• off는 허니팟처럼 확실한 경우에만. 로그인 칸에서는 어차피 무시된다.
• 표준 요소, 고정된 name·id, 한 값 한 칸이 자동 완성의 기본 조건이다.

관련 노트: HTML 입력 요소 치트시트, 로그인·가입 폼과 인증 입력, 결제·주소 폼, 접근 가능한 폼과 오류 처리, 더 나은 폼을 만드는 팁