이름·이메일을 또 치게 하지 말고

KRDS CP-402 — 사용자가 자주, 반복적으로 입력하는 값은 자동 완성될 수 있도록 구현하고 있다.

0. 들어가며 — 매번 같은 정보를 또 적어야 하면

이번 522편은 사용자가 자주, 반복적으로 입력하는 값은 자동 완성될 수 있게 구현하라는 규칙입니다.

이름, 이메일, 전화번호, 주소처럼 — 여러 폼에서 반복 입력하는 값을 매번 손으로 치게 하면 번거롭고 오류가 나죠. CP-402는 이런 값을 자동 완성하라고 규정합니다. 날짜 입력 CP-389의 텍스트 입력 버전이자 WCAG 1.3.5(입력 목적 식별) 정신이죠. 이번 편을 풀어냅니다.

1. 원문 — 반복 입력 값 자동 완성

CP-402 (컴포넌트 > 텍스트 입력 필드) “사용자가 자주, 반복적으로 입력하는 값은 자동 완성될 수 있도록 구현하고 있다.”

자주·반복적으로 입력하는 값(이름·이메일·전화번호·주소 등)을 자동 완성·자동 채움할 수 있게 구현하라는 뜻입니다.

정리: 자주 쓰는 값은 자동 완성되게 하라. 이게 CP-402입니다.

2. 왜 자동 완성인가

텍스트 입력 필드에는 — 사용자가 자주·반복적으로 적는 값들이 많습니다:

개인정보 — 이름, 이메일, 전화번호, 생년월일.

주소 — 우편번호, 도로명 주소, 상세 주소.

결제 정보 — 카드번호, 유효기간(민감하니 주의).

이런 값을 — 사용자가 여러 폼(신청, 회원가입, 결제)에서 반복 입력합니다. 매번 처음부터 손으로 치게 하면:

반복 노동 — 같은 이름·이메일·주소를 여러 번 치는 건 번거롭죠. 특히 — 긴 주소·이메일은 더요.

입력 오류 — 손으로 칠 때마다 오타가 날 수 있습니다. 같은 값을 매번 정확히 치기 어렵죠.

접근성 부담 — 손 떨림·운동 장애 사용자에겐 — 반복 타이핑이 큰 부담입니다.

그래서 CP-402는 — 자주·반복 입력 값을 자동 완성하라고 합니다:

브라우저 자동 완성(autocomplete) 입력 필드에 적절한 autocomplete 속성을 줍니다. 예: name, email, tel, postal-code, street-address, cc-number 등. 그러면 브라우저가 저장된 사용자 정보로 자동 완성 목록을 띄우죠. 사용자가 전에 입력한 값을 다시 안 치고 선택합니다.

WCAG 1.3.5 입력 목적 식별 이 autocomplete 속성은 WCAG 1.3.5 Identify Input Purpose 기준이기도 합니다. 필드의 목적(이름·이메일 등)을 프로그래밍적으로 식별하게 해 브라우저·보조기술이 자동 완성·맞춤 지원을 하게요. 인지 장애 사용자에게 특히 도움이 되죠(직접 안 쳐도 되니).

이전 입력·프로필 활용 — 로그인 사용자면 — 프로필에 저장된 정보를 자동 채우거나 제안할 수 있습니다.

자동 완성의 효과:

편의·속도 — 반복 입력 없이 — 자동 채움·선택으로 빠르게요.

오류 감소 — 손 타이핑이 줄어 오타가 줄죠.

접근성 — 운동 장애·인지 장애 사용자의 부담이 크게 줍니다.

민감 정보 주의. 카드번호·비밀번호 같은 민감 정보는 — 자동 완성을 신중히 합니다. 공용 PC에서 자동 완성된 값이 노출될 위험이 있죠. 비밀번호는 — autocomplete="current-password"/"new-password"로 적절히(브라우저 비밀번호 관리자와 연동), 카드 정보는 보안 정책에 맞게 다룹니다. 편의와 보안의 균형이죠.

autocomplete 비활성 남용 금지. 일부 사이트가 — autocomplete="off"로 자동 완성을 막는데, 정당한 이유(공용 단말 특정 필드 등) 없이 남용하면 — 사용자 편의·접근성(WCAG 1.3.5)을 해칩니다. 대부분의 일반 입력 필드는 자동 완성을 허용하죠.

이 규칙은 텍스트 입력 필드의 ’입력 효율·접근성’을 담당합니다 — 반복 값을 자동 완성해(402), 사용자의 반복 노동· 오류·접근성 부담을 줄이죠. autocomplete 속성으로 브라우저·보조기술 지원을 받습니다.

정리하면 — 자주·반복 입력하는 값을 매번 손으로 치게 하면 번거롭고 오류가 나므로, 적절한 autocomplete 속성으로 자동 완성을 지원해 입력 부담을 줄이되 민감 정보는 보안을 함께 고려해야 합니다.

3. 점검 / 개선

무엇을 점검하나

autocomplete 속성 — 이름·이메일·주소 등 필드에 적절한 autocomplete 속성이 있는가.

자동 완성 동작 — 자주 쓰는 값이 자동 완성·채움되는가.

민감 정보·off 남용 — 민감 정보 보안을 고려하고, 정당 이유 없이 autocomplete=“off”를 남용하지 않는가.

개선 방향

입력 필드에 적절한 autocomplete 속성(name/email/tel/postal-code 등, WCAG 1.3.5).

비밀번호는 current/new-password. 민감 정보 보안 고려. off 남용 제거.

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
퍼블리셔/개발	autocomplete 속성·자동 완성 구현
기획/UX	자동 완성 대상·민감 정보 정책

기관 유형	CP-402 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (반복 값 입력 시)

개인정보·주소 등 반복 값을 받는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 이름·이메일·주소 등 필드에 적절한 autocomplete 속성이 있나요?

□ 자주 쓰는 값이 자동 완성·채움되나요?

□ 민감 정보 보안을 고려하고, 정당 이유 없이 autocomplete=“off”를 남용하지 않나요?

❓ FAQ

Q1. autocomplete 속성이 뭔가요? 필드의 목적(name·email·tel 등)을 명시해 브라우저·보조기술이 저장된 정보로 자동 완성하게 하는 HTML 속성입니다(WCAG 1.3.5). Q2. 보안을 위해 autocomplete=“off”를 쓰면 안 되나요? 정당한 이유(공용 단말 특정 필드) 없이 남용하면 편의· 접근성을 해칩니다. 비밀번호는 current/new-password로 적절히 다루죠. Q3. 자동 완성이 접근성에 도움되나요? 네. 운동 장애·인지 장애 사용자가 직접 안 쳐도 돼 부담이 크게 줍니다.

6. 마무리

CP-402의 메시지:

이름·이메일을 또 치게 하지 말고 — 자주 쓰는 값은 자동 완성되게 구현하라.

반복 값을 매번 손으로 치게 하면 번거롭고 오류가 납니다. 적절한 autocomplete 속성으로 자동 완성을 지원해 입력 부담을 줄이되 민감 정보 보안을 함께 고려하는 게 핵심이죠. 다음 편은 입력 필드 명도 대비입니다.

다음 편 예고 ▶ 「523. (CP-403) 입력 필드와 인접 배경 간 명도 대비를 3:1 이상으로 준수하고 있다.」

ViewCheck는 반복 값이 자동 완성되게 구현됐는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 텍스트 입력 필드(Text input) 가이드 — https://www.krds.go.kr/html/site/component/component_40.html

WCAG 2.1 SC 1.3.5 Identify Input Purpose — https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준