아이디 형식은 레이블에

KRDS SP-076 — 아이디 형식에 대한 단서를 플레이스홀더가 아닌 레이블로 제공하고 있다.

0. 들어가며 — 로그인 정보 입력 서브섹션의 시작

이번 750편부터 ‘로그인 정보 입력’ 서브섹션(SP-076~080)입니다. 로그인 정보(아이디·비밀번호)를 어떻게 입력받을지의 규칙들이죠. 첫 편 SP-076은 — 아이디 형식에 대한 단서를 플레이스홀더가 아닌 레이블로 제공하라는 규칙입니다.

아이디 형식 단서(이메일 형식? 휴대폰 번호?)를 — 플레이스홀더에만 두면, 입력 시 사라져 사용자가 헷갈리죠. SP-076은 레이블로 제공하라고 규정합니다. SP-021(플레이스홀더 규칙)·BP-074의 로그인 적용이죠. 이번 편을 풀어냅니다.

1. 원문 — 아이디 형식 레이블 제공

SP-076 (서비스 패턴 > 로그인 > 로그인 정보 입력) “아이디 형식에 대한 단서를 플레이스홀더가 아닌 레이블로 제공하고 있다.”

아이디 형식 단서를 플레이스홀더가 아닌 레이블로 제공하라는 뜻입니다.

정리: 아이디 형식 단서를 레이블로 제공하라. 이게 SP-076입니다.

2. 왜 레이블로인가

로그인 아이디는, 서비스마다 형식이 다릅니다: 이메일 형식, 휴대폰 번호, 사용자가 정한 아이디 등이요. 사용자는 무슨 형식으로 넣어야 하는지 알아야 하죠. 이 형식 단서를, 플레이스홀더가 아닌 레이블로 제공하라는 게 SP-076입니다.

형식 단서를 플레이스홀더에만 둘 때의 문제:

입력 시 사라짐 아이디 형식 단서를(‘이메일 주소를 입력하세요’ 등) 플레이스홀더에만 두면, 사용자가 입력을 시작하면 사라집니다(SP-021). 입력 중에 형식을 확인 못 하죠.

낮은 대비 플레이스홀더는 흐린 회색이라(BP-057), 저시력·고령 사용자가 잘 못 읽습니다. 형식 단서가 안 보이죠.

헷갈림 형식을 모르면, 잘못 입력해 로그인 실패합니다(이메일인데 아이디만 넣는 등).

그래서 SP-076은 — 레이블로 제공을 요구합니다:

형식 단서를 레이블에 아이디 형식 단서를, 항상 보이는 레이블·도움말로요. ‘아이디(이메일 주소)’, ’아이디 (휴대폰 번호)’처럼 레이블에 형식을 명시하거나, 레이블 아래 도움말로요. 입력해도 안 사라지게요.

플레이스홀더는 보조 플레이스홀더는 보조 예시로만요(예: ‘example@email.com’). 중요 형식 단서는 레이블에, 플레이스홀더는 예시만요(SP-021).

명확한 형식 안내 사용자가 무슨 형식으로 넣어야 하는지 명확히요. 이메일이면 ‘이메일 형식’, 휴대폰이면 ’휴대폰 번호 형식’을요.

SP-021·076의 연결. SP-021(플레이스홀더에 중요 단서·레이블 미포함)을, 로그인 아이디에 구체 적용한 게 SP-076 입니다. SP-021은 일반 원칙, SP-076은 아이디 형식이라는 구체 사례죠. 형식 단서는 사라지면 안 되는 중요 정보 이므로, 레이블로요.

BP-074(레이블·설명·단위)의 적용. BP-074(입력 필드에 레이블·설명 제공)를, 로그인 아이디 형식에 적용한 것이기도 합니다. 형식이 설명의 일종이죠. 항상 보이는 레이블·도움말로요.

이 규칙은 로그인(SP)의 ’아이디 형식 안내’를 담당합니다 — 아이디 형식 단서를 레이블로 제공해(076), 사용자가 입력 중 에도 형식을 알고 올바르게 입력하게 하죠. 로그인 정보 입력 서브섹션의 출발점입니다.

정리하면 — 아이디 형식 단서를 플레이스홀더에만 두면 입력 시 사라지고 대비가 낮아 헷갈리므로, 형식 단서를 항상 보이는 레이블·도움말로 제공해야 합니다(플레이스홀더는 보조 예시만).

3. 점검 / 개선

무엇을 점검하나

레이블 형식 단서 — 아이디 형식이 레이블·도움말에 명시되는가(‘아이디(이메일)’).

플레이스홀더 보조 — 플레이스홀더는 예시만이고 형식 단서를 의존하지 않는가(SP-021).

명확성 — 무슨 형식으로 넣는지 명확히 안내되는가.

개선 방향

아이디 형식을 레이블·도움말에(‘아이디(이메일 주소)’). 입력해도 유지.

플레이스홀더는 예시만(SP-021). 명확한 형식 안내.

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

역할	책임
UX 라이터/기획	형식 단서 문구
퍼블리셔/개발	레이블 구현

기관 유형	SP-076 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 권장 (아이디 로그인 제공 시)

아이디 입력 로그인을 제공하는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 아이디 형식이 레이블·도움말에 명시되나요(‘아이디(이메일)’)?

□ 플레이스홀더는 예시만이고 형식 단서를 의존하지 않나요(SP-021)?

□ 무슨 형식으로 넣는지 명확히 안내되나요?

❓ FAQ

Q1. 형식 단서를 플레이스홀더에 두면 왜 안 되나요? 입력을 시작하면 사라지고(SP-021) 대비가 낮아 잘 안 보입니다. 입력 중에 형식을 확인 못 해 잘못 입력하죠. 항상 보이는 레이블로 둬야 합니다. Q2. 어떻게 레이블로 제공하나요? ‘아이디(이메일 주소)’, ‘아이디(휴대폰 번호)’처럼 레이블에 형식을 명시하거나, 레이블 아래 도움말로요. 입력해도 안 사라지게요. Q3. 플레이스홀더는 못 쓰나요? 보조 예시로만요(’example@email.com’). 중요 형식 단서는 레이블에, 플레이스홀더는 예시만 둡니다(SP-021).

6. 마무리

SP-076의 메시지:

아이디 형식은 레이블에 — 아이디 형식 단서를 플레이스홀더가 아닌 레이블로 제공하라.

형식 단서를 플레이스홀더에만 두면 입력 시 사라져 헷갈립니다. 항상 보이는 레이블·도움말로 제공해 올바르게 입력하게 하는 게 핵심이죠. 다음 편은 비밀번호 표시 옵션입니다.

다음 편 예고 ▶ 「751. (SP-077) 비밀번호를 표시할 수 있는 옵션을 제공하고 있다.」

ViewCheck는 아이디 형식 단서가 레이블로 제공되는지를 진단합니다.

📚 참고 출처

KRDS 서비스 패턴 — 로그인 가이드 — https://www.krds.go.kr/html/site/service/service_03.html

WCAG 2.1 SC 3.3.2 Labels or Instructions — https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html

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

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