autocomplete 속성으로 자동 완성

KRDS SP-083 — 웹사이트에서는 HTML 표준인 autocomplete 속성을 사용하여 입력 필드에 자동 완성 속성을 설정하고 있다.

0. 들어가며 — 브라우저 자동 완성이 안 먹으면

이번 757편은 웹사이트에서는 HTML 표준인 autocomplete 속성을 사용하여 입력 필드에 자동 완성 속성을 설정하라는 규칙입니다.

로그인 필드에 — autocomplete 속성을 제대로 설정하지 않으면, 브라우저·비밀번호 관리자의 자동 완성이 안 먹죠. SP-083은 표준 autocomplete 속성 설정을 규정합니다. BP-076(자동 완성)·WCAG 1.3.5의 로그인 적용이죠. 이번 편을 풀어냅니다.

1. 원문 — autocomplete 속성 설정

SP-083 (서비스 패턴 > 로그인 > 로그인 정보 입력) “웹사이트에서는 HTML 표준인 autocomplete 속성을 사용하여 입력 필드에 자동 완성 속성을 설정하고 있다.”

표준 autocomplete 속성으로 입력 필드의 자동 완성을 설정하라는 뜻입니다.

정리: 로그인 필드에 표준 autocomplete 속성을 설정하라. 이게 SP-083입니다.

2. 왜 autocomplete 속성인가

브라우저·비밀번호 관리자는, 저장된 로그인 정보를 자동 완성해줍니다. 그런데 이게 잘 작동하려면, 입력 필드에 표준 autocomplete 속성이 제대로 설정돼야 하죠. SP-083은 이를 요구합니다. BP-076(자동 완성)·SP-078·079 (복붙·저장)와 함께 로그인 입력 편의를 완성합니다.

autocomplete 속성이 없을 때의 문제:

자동 완성 안 먹음 입력 필드에 적절한 autocomplete가 없으면, 브라우저·비밀번호 관리자가 그 필드가 아이디인지 비밀번호인지 정확히 모릅니다. 자동 완성이 안 되거나 엉뚱하게 채워지죠.

사용성 저하 자동 완성이 안 되면, 사용자가 매번 손으로 쳐야 합니다(SP-079 저장 무력화).

그래서 SP-083은 — 표준 autocomplete 설정을 요구합니다:

아이디 autocomplete="username" 아이디(사용자명) 필드에 username을요. 브라우저가 저장된 아이디를 채우죠.

비밀번호 autocomplete="current-password" 로그인 비밀번호 필드에 current-password를요. 저장된 비밀번호를 채우게요. (회원가입·변경의 새 비밀번호는 new-password로 구분.)

표준 토큰 사용 HTML 표준 autocomplete 토큰을 정확히요(WCAG 1.3.5 입력 목적 식별의 토큰). 임의 값이 아니라요.

복붙·저장과 함께 — autocomplete(SP-083) + 복붙 허용(SP-078) + 저장 옵션(SP-079)이 — 함께, 비밀번호 관리자 친화 로그인을 완성합니다.

WCAG 1.3.5(입력 목적 식별). autocomplete 속성은, 접근성 기준이기도 합니다(WCAG 1.3.5). 입력 필드의 목적(아이디·비밀번호)을 프로그램적으로 식별하게 해, 보조 기술·자동 채움이 작동하게요. 인지 장애 사용자에게 특히 도움이 되죠.

BP-076의 로그인 적용. BP-076(자주 쓰는 데이터 autocomplete 속성)을, 로그인 필드에 구체 적용한 게 SP-083입니다. BP-076은 일반 입력, SP-083은 로그인(username·current-password)의 구체 토큰이죠.

보안 측면. 표준 autocomplete는 보안에도 좋습니다. 비밀번호 관리자가 올바른 필드를 인식해, 강한 비밀번호를 정확히 채우게 하죠(피싱 사이트엔 안 채워지는 보호도). 표준을 따르는 게 사용성·보안 양쪽에 이롭습니다.

이 규칙은 로그인(SP)의 ’자동 완성 표준’을 담당합니다 — 표준 autocomplete 속성을 설정해(083), 브라우저·비밀번호 관리자 자동 완성이 작동하게, 입력 편의·접근성을 높이죠. SP-078·079·BP-076과 함께 갑니다.

정리하면 — autocomplete 속성이 없으면 브라우저·비밀번호 관리자 자동 완성이 안 먹으므로, 아이디는 username, 로그인 비밀번호는 current-password 등 표준 autocomplete 토큰을 정확히 설정해야 합니다(WCAG 1.3.5).

3. 점검 / 개선

무엇을 점검하나

아이디 username — 아이디 필드에 autocomplete="username"이 있는가.

비밀번호 current-password — 로그인 비밀번호 필드에 current-password가 있는가.

표준 토큰 — HTML 표준 autocomplete 토큰을 정확히 쓰는가(WCAG 1.3.5).

개선 방향

아이디 username, 로그인 비밀번호 current-password(새 비밀번호는 new-password).

표준 토큰 정확히. 복붙(SP-078)·저장(SP-079)과 함께 관리자 친화.

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

역할	책임
퍼블리셔/개발	autocomplete 속성 설정
QA/접근성	자동 완성·WCAG 1.3.5 검증

기관 유형	SP-083 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (웹접근성 의무)

웹접근성 의무 대상이며 로그인을 제공하는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 아이디 필드에 autocomplete="username"이 있나요?

□ 로그인 비밀번호 필드에 current-password가 있나요?

□ HTML 표준 autocomplete 토큰을 정확히 쓰나요(WCAG 1.3.5)?

❓ FAQ

Q1. autocomplete 속성이 왜 필요한가요? 없으면 브라우저·비밀번호 관리자가 그 필드가 아이디인지 비밀번호인지 몰라 자동 완성이 안 됩니다. 매번 손으로 쳐야 하죠. 표준 속성으로 작동하게 합니다. Q2. 어떤 토큰을 쓰나요? 아이디는 username, 로그인 비밀번호는 current-password요. 회원가입·변경의 새 비밀번호 는 new-password로 구분합니다. HTML 표준 토큰을 정확히 써야 하죠. Q3. 접근성과도 관련 있나요? 네. WCAG 1.3.5(입력 목적 식별)입니다. 입력 필드 목적을 프로그램적으로 식별해 보조 기술·자동 채움이 작동하게 하죠. 인지 장애 사용자에게 도움이 됩니다.

6. 마무리

SP-083의 메시지:

autocomplete 속성으로 자동 완성 — 표준 autocomplete 속성을 설정하라.

autocomplete 속성이 없으면 자동 완성이 안 먹습니다. 아이디 username, 비밀번호 current-password 등 표준 토큰을 설정해 입력 편의·접근성을 높이는 게 핵심이죠. 다음 편은 포커스 아웃 실시간 유효성 검사입니다.

다음 편 예고 ▶ 「758. (SP-084) 입력된 로그인 정보에 대하여 입력 필드가 포커스를 잃었을 때 실시간 유효성 검사를 하고 있다.」

ViewCheck는 로그인 필드에 표준 autocomplete 속성이 설정되는지를 진단합니다.

📚 참고 출처

KRDS 서비스 패턴 — 로그인 가이드 — https://www.krds.go.kr/html/site/service/service_03.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컴포넌트,웹표준