회색 안내 글자에 의존하지 마라

KRDS CP-400 — 모든 텍스트 입력 필드에는 레이블을 제공하고, 도움말의 대체 수단으로 플레이스홀더를 사용하고 있지 않다.

0. 들어가며 — 입력하면 사라지는 안내

이번 520편은 모든 텍스트 입력 필드에 레이블을 제공하고, 도움말의 대체 수단으로 플레이스홀더를 사용하지 않게 하라는 규칙입니다.

플레이스홀더(입력 전 회색 안내 글자)를 — 레이블이나 도움말 대신 쓰면, 입력 후 무슨 칸인지·어떻게 쓰는지 알 수 없게 되죠. CP-400은 레이블 필수 + 플레이스홀더 오남용 금지를 규정합니다. 텍스트 영역 CP-394의 텍스트 입력 버전 이죠. 이번 편을 풀어냅니다.

1. 원문 — 레이블 제공 + 플레이스홀더 대체 금지

CP-400 (컴포넌트 > 텍스트 입력 필드) “모든 텍스트 입력 필드에는 레이블을 제공하고, 도움말의 대체 수단으로 플레이스홀더를 사용하고 있지 않다.”

모든 텍스트 입력 필드에 항상 보이는 레이블을 두고, 레이블·도움말을 플레이스홀더로 대체하지 말라는 뜻입니다.

정리: 입력 필드에 레이블 필수, 플레이스홀더로 레이블·도움말 대체 금지. 이게 CP-400입니다.

2. 왜 레이블 + 플레이스홀더 한계인가

CP-400은 텍스트 영역 CP-394와 동일한 원칙을 텍스트 입력 필드에 적용합니다. 두 가지죠: ①모든 입력 필드에 레이블, ②플레이스홀더를 레이블·도움말 대신 쓰지 않기.

① 모든 입력 필드에 레이블. 각 입력 필드에 — 무엇을 입력하는지 알리는 레이블이 항상 있어야 합니다.

용도 명확 — ‘이름’, ‘이메일’, ’전화번호’처럼 — 그 필드에 무엇을 적는지 레이블로 분명히. 레이블 없으면 무엇을 적을지 모르죠.

항상 보임 — 레이블은 입력 전·후 항상 보입니다. 작성 중에도 ’이게 이메일 칸이지’를 계속 알게요.

프로그래밍 연결 — <label for>로 입력 필드와 연결해(CP-405), 스크린 리더도 읽게 합니다.

② 플레이스홀더를 레이블·도움말 대신 쓰지 않기. 플레이스홀더 — 입력 전 입력창에 흐리게 보이는 안내 글자 (‘홍길동’, ‘example@email.com’)를 — 레이블이나 도움말의 대체로 쓰면 안 됩니다.

플레이스홀더의 치명적 한계(텍스트 영역 CP-394와 동일):

입력하면 사라짐 플레이스홀더는 글자를 입력하기 시작하면 사라집니다. 플레이스홀더에만 ‘무슨 칸인지’ (레이블)나 ‘어떻게 쓰는지’(형식)를 담으면, 입력 후엔 그 정보가 없어지죠. 특히 여러 필드를 채우다 보면 이미 입력한 필드가 무슨 칸이었는지 헷갈립니다(레이블이 없으니).

검토 시 혼란 — 폼을 다 채우고 검토할 때 — 입력값만 있고 레이블이 없으면, 각 칸이 무엇이었는지 모르죠.

대비 약함 — 플레이스홀더는 흐린 회색이라 — 저시력 사용자가 읽기 어렵고, 명도 대비(CP-403)도 부족하기 쉽습니다.

스크린 리더 불일관 — 플레이스홀더의 스크린 리더 읽기는 브라우저·기기마다 일관되지 않죠.

그래서 CP-400은 — 레이블·도움말을 항상 보이는 별도 요소로 두고, 플레이스홀더는 보조로만(또는 안 쓰거나) 하라고 합니다:

레이블 — 항상 보이는 <label>로(필수). 입력 필드 위나 옆에요.

도움말 — 형식·입력 안내는 — 항상 보이는 도움말 텍스트로(필요시).

플레이스홀더 — 써야 한다면 — 예시 정도의 보조로만. 레이블·도움말을 대체하지 않게요.

플레이스홀더 안티패턴 ‘떠다니는 레이블’. 입력하면 플레이스홀더가 위로 올라가 레이블이 되는 ‘플로팅 레이블’ 패턴도 있는데 잘 구현하면 레이블이 유지되지만, 대비·접근성에 주의해야 하죠. 핵심은 입력 후에도 레이블이 보이고 스크린 리더에 연결되는 것입니다.

텍스트 영역 CP-394와의 일관. 텍스트 영역(CP-394)·셀렉트(CP-300)와 동일한 정신입니다. 모든 폼 컨트롤에서 — 플레이스홀더는 레이블의 대체물이 아니라는 원칙이죠.

이 규칙은 텍스트 입력 필드의 ’정체성·안내 지속성’을 담당합니다 — 레이블을 항상 보이게 두고(400), 플레이스홀더 의존을 피해 사용자가 작성·검토 내내 무슨 칸인지 알게 하죠.

정리하면 — 플레이스홀더는 입력 시 사라지고 대비·스크린 리더가 불안정하므로, 모든 텍스트 입력 필드에 항상 보이는 레이블·도움말을 제공하고 플레이스홀더를 그 대체로 쓰지 말아야 합니다.

3. 점검 / 개선

무엇을 점검하나

레이블 필수 — 모든 입력 필드에 항상 보이는 레이블이 있는가.

플레이스홀더 대체 배제 — 레이블·도움말이 플레이스홀더로만 제공되지 않는가.

도움말 지속 — 형식·입력 안내가 항상 보이는 도움말 텍스트인가.

개선 방향

모든 입력 필드에 항상 보이는 <label>(CP-405 연결). 형식 안내는 도움말 텍스트.

플레이스홀더는 예시 보조로만. 플로팅 레이블이면 대비·접근성 주의.

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

역할	책임
콘텐츠/UX	레이블·도움말 작성
퍼블리셔/개발	레이블 연결·플레이스홀더 정리

기관 유형	CP-400 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (텍스트 입력 사용 시)

텍스트 입력을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모든 입력 필드에 항상 보이는 레이블이 있나요?

□ 레이블·도움말이 플레이스홀더로만 제공되지 않나요?

□ 형식·입력 안내가 항상 보이는 도움말 텍스트인가요?

❓ FAQ

Q1. 플레이스홀더에 ‘example@email.com’을 넣으면 안 되나요?** 예시 보조로는 좋습니다. 단, 레이블(’이메일’)은 별도로 항상 보이게 둬야 하죠. 플레이스홀더만으로 레이블을 대체하면 안 됩니다. Q2. 플로팅 레이블은요?** 입력 후 레이블이 유지되고 스크린 리더에 연결되면 괜찮습니다. 대비·접근성에 주의하죠. Q3. 텍스트 영역 CP-394와 같나요? 같은 정신입니다. 플레이스홀더는 레이블이 아니라는 원칙을 입력 필드에 적용한 거죠.

6. 마무리

CP-400의 메시지:

회색 안내 글자에 의존하지 마라 — 레이블을 항상 보이게, 플레이스홀더로 대체하지 마라.

플레이스홀더는 입력 시 사라지고 대비·스크린 리더가 불안정합니다. 모든 입력 필드에 항상 보이는 레이블·도움말을 두고 플레이스홀더 의존을 피하는 게 핵심이죠. 다음 편은 복사·붙여넣기 제한 금지입니다.

다음 편 예고 ▶ 「521. (CP-401) 복사, 붙여쓰기를 제한하고 있지 않다.」

ViewCheck는 입력 필드에 레이블이 제공되고 플레이스홀더가 오남용되지 않는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 텍스트 입력 필드(Text input) 가이드 — https://www.krds.go.kr/html/site/component/component_40.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컴포넌트,웹표준