비밀번호 관리자가 로그인 폼을 못 알아봐서 autocomplete를 다시 본 이유

문제 발생

로그인 폼에서 비밀번호 관리자가 자동 채우기를 제안하지 않거나, 회원가입 폼에서 기존 비밀번호를 채워 넣었습니다. 보안을 위해 이렇게 막아 뒀던 것이 원인이라고 생각했습니다.

<input type="password" name="pw" autocomplete="off" />

원인 분석

autocomplete="off"는 기대한 일을 하지 않습니다. MDN이 명시합니다 — 대부분의 최신 브라우저에서 off는 비밀번호 관리자가 저장을 제안하거나 로그인 폼을 자동으로 채우는 것을 막지 못합니다. 보안상 얻는 것은 없고, 잃는 것은 분명합니다.

• 인지 장애가 있는 사용자는 개인정보를 다시 떠올려 입력해야 합니다.
• 운동 장애가 있는 사용자는 타이핑 양이 늘어납니다.
• WCAG 2.2의 1.3.5(입력 목적 식별, AA)를 위반합니다.

이 속성의 진짜 역할은 필드의 의미를 브라우저에 알려 주는 것입니다. 값을 정확히 적어 주면 비밀번호 관리자와 자동 채우기가 제대로 동작합니다. 자동 채우기가 안 되던 원인은 막아 둬서가 아니라 의미를 알려 주지 않아서인 경우가 많습니다.

해결 방안

1. 로그인과 가입을 구분해 적습니다. 이 구분이 비밀번호 관리자의 동작을 가릅니다.

<!-- 로그인 -->
<input type="text" name="id" autocomplete="username" />
<input type="password" name="pw" autocomplete="current-password" />

<!-- 가입 / 비밀번호 변경 -->
<input type="text" name="id" autocomplete="username" />
<input type="password" name="pw" autocomplete="new-password" />
<input type="password" name="pw2" autocomplete="new-password" />

2. 일회용 코드에는 one-time-code를 씁니다. SMS나 인증 앱의 코드를 iOS·Android가 키보드 위에 제안해 줍니다.

<input type="text" inputmode="numeric" autocomplete="one-time-code" />

3. 주소가 둘 이상이면 그룹으로 묶습니다. 배송지와 청구지가 섞이지 않게 합니다. section-* 토큰은 반드시 첫 번째에 와야 합니다.

<input autocomplete="section-shipping shipping street-address" />
<input autocomplete="section-billing billing street-address" />

4. off는 정말 필요한 곳에만 씁니다. 캡차 입력처럼 이전 값을 다시 쓸 이유가 전혀 없는 필드가 그 예입니다. 비밀번호 필드는 해당하지 않습니다.
5. type도 함께 맞춥니다. type="email", type="tel"은 모바일 키보드까지 바꿔 주므로 autocomplete와 함께 쓰면 입력 경험이 크게 달라집니다.

공식 문서

• MDN: autocomplete 속성
• WCAG 2.2: 입력 목적 식별 (1.3.5)
• MDN: 자동 완성 끄기