자동완성, 왜 같은 폼인데 사람마다 다르게 동작할까
로그인, 주소, 결제 폼은 입력 칸이 같아 보여도 브라우저가 읽는 힌트는 제각각입니다. autocomplete 토큰을 제대로 쓰지 않으면 자동완성이 엉뚱한 값으로 채워지거나 아예 뜨지 않습니다.
실무에서는 label, placeholder만 신경 쓰고 name이나 autocomplete 속성은 대충 두는 경우가 많습니다. 그 결과 이탈, 재입력, 결제 오류가 늘고 모바일 전환율이 떨어질 수 있습니다.
이 글은 HTML의 표준 토큰을 상황별로 정확히 고르는 방법을 다룹니다. 로그인(이메일/비밀번호), 주소(수취인/도로명/우편번호), 결제(카드번호/만료/보안코드) 순서로 실무 예시와 함께 바로 적용할 수 있는 조합을 제시합니다.
> 안티패턴: 필드마다 임의의 name을 쓰고 autocomplete를 비워두면 브라우저가 필드 역할을 추정하느라 실패합니다. 최소한 필수 필드에는 표준 토큰을 지정하세요.
브라우저가 이해하는 ‘토큰’은 무엇이고 어디에 쓰나
폼 필드에 붙이는 autocomplete 속성 값이 바로 ‘토큰’입니다. 이 토큰은 “이 입력칸은 이메일이다/카드번호다”처럼 브라우저에게 역할을 선언하는 라벨입니다.
토큰이 있으면 브라우저 저장 데이터와 매칭해 적절한 후보를 보여주고, 없거나 틀리면 다른 필드의 값이 섞이거나 자동완성이 비활성화됩니다.
사례로 보면 이해가 빠릅니다. 로그인에서 email과 current-password를 쓰면 이메일 앱 계정이 아닌 웹 로그인 계정이 노출되고, 주소에서는 name, postal-code, address-line1을 조합해야 수취인·우편번호·도로명이 각각 정확히 채워집니다.
결제에서는 cc-number, cc-exp, cc-csc가 카드번호·유효기간·보안코드로 분리되어 모바일 키보드 타입과 제안 값까지 맞춰집니다.
실무 적용 순서는 간단합니다. - 필드의 실제 의미를 먼저 정합니다(예: 사용자 ID가 이메일인지, 별도 아이디인지).
- 표준 토큰 표를 보고 가장 가까운 항목을 매칭합니다(예: 이메일이면 email, 아이디면 username). - 하나의 역할에 하나의 토큰만 지정하고, 중복 의미를 피합니다.
- 시뮬레이션: 저장된 브라우저 프로필로 데스크톱·모바일에서 자동완성 동작을 확인합니다.
> 팁: placeholder나 label 문구는 제안 품질에 큰 영향을 주지 않습니다. name 속성은 의미 있는 키로, autocomplete는 표준 토큰으로 분리해 관리하세요.
토큰 조합 빠른 체크리스트
자동완성은 필드 의미와 맞는 토큰을 써야 잘 동작합니다. 필드 의미와 토큰 일치가 품질을 결정합니다.
- 로그인: email | username 중 1개 → current-password → 새 비밀번호는 new-password
- 주소: name → postal-code → address-line1/2 → address-level2(시·군·구) → address-level1(시·도) → country
- 결제: cc-name → cc-number → cc-exp(또는 cc-exp-month/cc-exp-year) → cc-csc
아래는 최소 HTML 예시입니다. 각 입력칸은 용도가 보이게 한 줄씩 작성합니다.
<!-- 로그인 -->
<input type="email" name="email" autocomplete="email">
<input type="password" name="password" autocomplete="current-password">
<!-- 주소 -->
<input type="text" name="recipient" autocomplete="name">
<input type="text" name="zip" inputmode="numeric" autocomplete="postal-code">
<input type="text" name="addr1" autocomplete="address-line1">
<input type="text" name="addr2" autocomplete="address-line2">
<input type="text" name="city" autocomplete="address-level2">
<input type="text" name="state" autocomplete="address-level1">
<input type="text" name="country" autocomplete="country">
<!-- 결제 -->
<input type="text" name="cardName" autocomplete="cc-name">
<input type="text" name="cardNumber" inputmode="numeric" autocomplete="cc-number">
<input type="text" name="exp" inputmode="numeric" placeholder="MM/YY" autocomplete="cc-exp">
<input type="password" name="cvc" inputmode="numeric" autocomplete="cc-csc">
type과 inputmode를 같이 쓰면 모바일에서 숫자 키패드가 열려 오입력이 줄어듭니다. placeholder는 안내일 뿐, 자동완성 기준은 아닙니다.
> 실무 팁: 같은 의미의 입력을 한 화면에 중복 배치하지 마세요(예: 헤더·모달). 숨김 필드는 autocomplete="off"로 충돌을 줄이세요.
자동완성 점검과 선택 기준
자동완성이 불안정한 주된 이유는 이름 짓기와 속성 불일치입니다. 라벨·placeholder는 사람용, autocomplete는 브라우저용으로 분리해 생각하면 혼선을 줄일 수 있습니다.
팀 규칙으로 필드 이름은 유지하되, autocomplete만 표준 토큰으로 맞추세요. 그러면 브라우저가 필드 의미를 정확히 인식합니다.
- 로그인/가입 비밀번호가 함께 있으면 current-password와 new-password를 구분
- 사용자 ID가 이메일이 아니면 email 대신 username 사용
- 주소1/주소2는 address-line1/2, 시·군·구는 address-level2, 시·도는 address-level1
- 카드 만료는 cc-exp 또는 cc-exp-month/cc-exp-year 중 하나로 일관
- 휴대전화는 tel-national, 국가코드는 tel-country-code 고려
보안을 이유로 폼 전체에 autocomplete="off"를 적용하는 실수가 잦습니다. 민감한 필드만 선별 비활성화하고, 결제용 iframe 같은 외부 위젯은 제공사 가이드를 따르세요.
> 안티패턴: 모든 input에 autocomplete="off"를 일괄 적용하면 재로그인 편의와 모바일 결제 전환이 크게 떨어질 수 있습니다. 필요한 필드에만 최소 토큰을 지정하세요.
토큰이 겹치면 브라우저는 최근 기록이나 위치 등으로 임의 추정합니다. 필드 의미 → 단일 토큰 선택 → name/type 일관 정리 순서로 설정하면 매칭 흐름이 명확해져 채움 성공률이 높아집니다.
지금 적용할 실행 체크리스트
폼 자동완성은 토큰 선택만 정확하면 바로 개선됩니다. 오늘은 로그인·주소·결제 핵심 필드에 표준 토큰을 붙이고 라벨·placeholder와 분리해 관리하세요.
- 로그인: email 또는 username → current-password/new-password 구분
- 주소: name, postal-code, address-line1/2, address-level2, address-level1, country 점검
- 결제: cc-name, cc-number, cc-exp(또는 cc-exp-month/year), cc-csc 일관 설정
- 전화: tel-national, 필요한 경우 tel-country-code 추가
- 팀 규칙: name은 기존대로, autocomplete만 표준 토큰으로 통일
적용 뒤에는 실제 저장 데이터로 브라우저별 제안을 확인하세요. 테스트 흐름은 저장 프로필 생성 → 폼 접속 → 필드 포커스 → 자동완성 값 매칭 확인입니다.
> 실무 팁: 폼 전체에 autocomplete="off"를 주고 필드에 토큰을 넣지 않는 방식은 자동완성 실패의 흔한 원인입니다. 최소한 필수 필드에는 토큰을 지정하고, 민감 필드만 선별적으로 off를 고려하세요.
폼 토큰을 정확히 매칭하는 법
토큰(autocomplete 값)은 한 글자만 달라도 자동완성이 빗나갑니다. 각 필드의 의미와 토큰을 1:1로 맞추는 것이 핵심입니다.
아래 순서를 지키면 브라우저가 올바르게 채웁니다.
- 로그인: email 또는 username 중 1개 → current-password → 신규 설정 시 new-password
- 주소: name → postal-code → address-line1/2 → address-level2(시·군·구) → address-level1(시·도) → country
- 결제: cc-name → cc-number → cc-exp(또는 cc-exp-month/cc-exp-year) → cc-csc
아래 예시는 로그인·주소·결제를 한 화면에 넣을 때 최소 설정입니다. 각 입력에 type과 autocomplete를 함께 둡니다.
<!-- 로그인 -->
<input type="email" name="loginEmail" autocomplete="email">
<input type="password" name="loginPw" autocomplete="current-password">
<!-- 배송지 -->
<input type="text" name="recipient" autocomplete="name">
<input type="text" name="zip" inputmode="numeric" autocomplete="postal-code">
<input type="text" name="addr1" autocomplete="address-line1">
<input type="text" name="addr2" autocomplete="address-line2">
<input type="text" name="city" autocomplete="address-level2">
<input type="text" name="state" autocomplete="address-level1">
<input type="text" name="country" autocomplete="country">
<input type="tel" name="mobile" inputmode="tel" autocomplete="tel-national">
<!-- 결제 -->
<input type="text" name="cardName" autocomplete="cc-name">
<input type="text" name="cardNumber" inputmode="numeric" autocomplete="cc-number">
<input type="text" name="cardExp" inputmode="numeric" placeholder="MM/YY" autocomplete="cc-exp">
<input type="text" name="cardCvc" inputmode="numeric" autocomplete="cc-csc">
type과 inputmode를 함께 지정하면 모바일에서 숫자·이메일 키보드가 열려 오입력을 줄입니다. label·placeholder는 바꿔도 name과 autocomplete의 의미는 유지하세요.
> 안티패턴: 만료일을 단순 text와 “만료일” placeholder만 쓰면 cc-exp로 인식되지 않습니다. cc-exp 또는 월·년 분리 토큰을 명시하세요.