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

KRDS BP-025 — [플레이스홀더] 레이블이나 도움말의 대체 수단으로 사용하지 않고 있다.

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

이번 591편은 플레이스홀더를 레이블이나 도움말의 대체 수단으로 사용하지 않게 하라는 규칙입니다.

플레이스홀더(입력 전 회색 안내 글자)는 — 입력하면 사라지죠. 이걸 레이블·도움말 대신 쓰면, 입력 후 무슨 칸인지·어떻게 쓰는지 알 수 없습니다. BP-025는 플레이스홀더 오남용을 금지합니다. 텍스트 입력·셀렉트·텍스트 영역(CP-300·394·400) 규칙의 도움 패턴 종합이죠. 이번 편을 풀어냅니다.

1. 원문 — 플레이스홀더 대체 금지

BP-025 (기본 패턴 > 도움 [플레이스홀더]) “[플레이스홀더] 레이블이나 도움말의 대체 수단으로 사용하지 있지 않다.”

플레이스홀더를 레이블이나 도움말의 대체 수단으로 쓰지 말라는 뜻입니다.

정리: 플레이스홀더로 레이블·도움말을 대체하지 마라. 이게 BP-025입니다.

2. 왜 플레이스홀더를 대체로 쓰지 않나

플레이스홀더(placeholder) 는 — 입력 필드에 입력하기 전 흐리게 보이는 안내 글자입니다(‘홍길동’, ‘예: 010-1234- 5678’ 등). 입력 힌트·예시로 유용하지만 — 레이블이나 도움말의 대체로 쓰면 안 됩니다. BP-025는 이를 도움 패턴 차원에서 종합 규정합니다(이미 셀렉트 CP-300, 텍스트 영역 CP-394, 텍스트 입력 CP-400에서 다룬 원칙).

플레이스홀더의 치명적 한계:

입력하면 사라짐 플레이스홀더는 글자를 입력하기 시작하면 사라집니다. 그래서 플레이스홀더에만 ‘무슨 칸인지’(레이블)나 ‘어떻게 쓰는지’(도움말)를 담으면, 입력 후엔 그 정보가 없어지죠. 작성 중·검토 시 ‘이게 무슨 칸이었지? 형식이 뭐였지?’ 다시 봐도 안 보입니다. 특히 여러 필드를 채우다 보면 이미 채운 필드가 무슨 칸인지 모릅니다.

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

스크린 리더 불일관 — 플레이스홀더의 스크린 리더 읽기는 — 브라우저·기기마다 일관되지 않습니다. 접근가능한 이름으로 신뢰할 수 없죠.

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

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

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

플레이스홀더 — 써야 한다면 — 예시 정도의 보조로만(‘예: 010-1234-5678’). 레이블·도움말을 대체하지 않게요.

**‘도움’으로서의 한계.** 이 규칙이 ’도움’ 패턴 그룹에 있는 이유는 플레이스홀더가 ’도움말 역할’로 오용되기 쉽기 때문이죠. 도움말은 항상 보이고 신뢰할 수 있어야 하는데, 플레이스홀더는 사라지고 불안정합니다. 그래서 도움말 대체로 부적합하죠. 진짜 도움말은 인라인 텍스트(BP-026), 도움말 텍스트로 항상 보이게 줍니다.

컴포넌트 규칙의 종합. 셀렉트(CP-300), 텍스트 영역(CP-394), 텍스트 입력(CP-400)에서 각각 ’플레이스홀더는 레이블이 아니다’를 다뤘는데, BP-025는 — 이를 모든 폼 컨트롤·도움 차원에서 종합한 원칙입니다. 어떤 입력이든 — 플레이스홀더로 레이블·도움말을 대체하지 않죠.

이 규칙은 도움 패턴의 ’안내 지속성’을 담당합니다 — 플레이스홀더 의존을 막아(025), 레이블·도움말이 항상 보이게 하죠. 사용자가 작성·검토 내내 무슨 칸인지·어떻게 쓰는지 알게요.

정리하면 — 플레이스홀더는 입력 시 사라지고 대비·스크린 리더가 불안정하므로, 레이블·도움말을 항상 보이는 별도 요소로 두고 플레이스홀더를 그 대체로 쓰지 말아야 합니다.

3. 점검 / 개선

무엇을 점검하나

레이블 별도 — 레이블이 플레이스홀더가 아닌 항상 보이는 별도 요소인가.

도움말 별도 — 형식·입력 안내가 플레이스홀더가 아닌 항상 보이는 도움말인가.

플레이스홀더 보조 — 플레이스홀더가 예시 보조로만 쓰이는가(대체 아님).

개선 방향

레이블·도움말을 항상 보이는 별도 요소로(셀렉트 CP-300·텍스트영역 CP-394·텍스트입력 CP-400).

플레이스홀더는 예시 보조로만. 도움말 대체 제거.

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

역할	책임
콘텐츠/UX	레이블·도움말 작성
퍼블리셔/개발	레이블·도움말 별도 구현

기관 유형	BP-025 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (입력 폼 사용 시)

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 레이블이 플레이스홀더가 아닌 항상 보이는 별도 요소인가요?

□ 형식·입력 안내가 플레이스홀더가 아닌 항상 보이는 도움말인가요?

□ 플레이스홀더가 예시 보조로만 쓰이나요(대체 아님)?

❓ FAQ

Q1. 플레이스홀더에 안내를 넣으면 안 되나요? 입력하면 사라져 작성 중 정보를 잃습니다. 레이블·도움말은 항상 보이는 별도 요소로 두고, 플레이스홀더는 예시 보조로만 쓰죠. Q2. 왜 도움 패턴에 있나요? 플레이스홀더가 ’도움말 역할’로 오용되기 쉽기 때문입니다. 진짜 도움말은 항상 보이고 신뢰할 수 있어야 하죠(인라인 텍스트 BP-026). Q3. 컴포넌트 규칙(CP-300 등)과 같나요? 셀렉트·텍스트영역·텍스트입력의 플레이스홀더 규칙을 모든 폼·도움 차원 에서 종합한 게 BP-025입니다.

6. 마무리

BP-025의 메시지:

회색 안내 글자에 의존하지 마라 — 플레이스홀더로 레이블·도움말을 대체하지 마라.

플레이스홀더는 입력 시 사라지고 대비·스크린 리더가 불안정합니다. 레이블·도움말을 항상 보이는 별도 요소로 두고 플레이스홀더 의존을 피하는 게 핵심이죠. 다음 편은 인라인 텍스트입니다.

다음 편 예고 ▶ 「592. (BP-026) [인라인 텍스트] 사용자가 작업을 완료하는 데 필요한 중요한 정보는 인라인 텍스트로 제공하고 있다.」

ViewCheck는 플레이스홀더가 레이블·도움말 대체로 오용되지 않는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 도움 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_02.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컴포넌트,웹표준