플레이스홀더에 중요 정보 담지 말기

KRDS SP-021 — 플레이스홀더를 사용하는 경우, 유도 문구 외에 검색에 대한 단서나 레이블을 포함하여 제공하고 있지 않다.

0. 들어가며 — 플레이스홀더에 의지하면 안 되는 이유

이번 695편은 플레이스홀더를 사용하는 경우, 유도 문구 외에 검색에 대한 단서나 레이블을 포함하여 제공하지 않게 하라는 규칙입니다.

플레이스홀더(입력창 안 흐린 안내문)는 — 입력하면 사라지죠. 그래서 거기에 — 중요한 단서·레이블을 담으면, 입력 시 사라져 정보가 손실됩니다. SP-021은 플레이스홀더에 중요 정보를 의존하지 말라고 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 플레이스홀더에 단서·레이블 미포함

SP-021 (서비스 패턴 > 검색 > 검색어 입력) “플레이스홀더를 사용하는 경우, 유도 문구 외에 검색에 대한 단서나 레이블을 포함하여 제공하고 있지 않다.”

플레이스홀더에 단순 유도 문구 외의 단서·레이블을 담지 말라는 뜻입니다.

정리: 플레이스홀더에 중요 단서·레이블을 담지 마라. 이게 SP-021입니다.

2. 왜 플레이스홀더 제한인가

플레이스홀더(placeholder)는 입력창 안에 흐리게 표시되는 안내문입니다(‘검색어를 입력하세요’ 등). 그런데 이건 입력하면 사라지고, 대비도 낮습니다(흐린 회색). 그래서 여기에 중요한 정보를 담으면, 손실되죠. SP-021은 플레이스홀더 사용을 제한합니다.

플레이스홀더에 중요 정보를 담을 때의 문제:

입력 시 사라짐 플레이스홀더는 사용자가 입력을 시작하면 사라집니다. 거기에 중요한 단서(‘띄어쓰기로 여러 검색어 가능’ 등)나 레이블을 담으면, 입력 중에는 안 보이죠. 사용자가 그 정보를 잊거나 못 봅니다.

낮은 대비 플레이스홀더는 흐린 회색이라, 저시력·고령 사용자가 잘 못 읽습니다(명도 대비 부족 BP-057). 중요 정보를 여기 두면 못 보죠.

레이블 오인 플레이스홀더를 레이블로 착각해, 진짜 레이블(SP-020, BP-074)을 빼면, 입력 시 레이블이 사라져 무슨 입력인지 모릅니다.

그래서 SP-021은 — 유도 문구만 두라고 합니다:

유도 문구만 플레이스홀더에는 단순 유도 문구(예: ‘검색어를 입력하세요’)만 둡니다. 입력을 유도하는 가벼운 안내죠. 중요한 정보는 담지 않습니다.

단서·레이블은 별도로 검색에 대한 중요 단서(사용법·예시)나 레이블은, 플레이스홀더가 아니라 입력 필드 밖(레이블, 도움말 텍스트, 별도 안내)에 제공합니다. 입력해도 안 사라지게요.

레이블 필수 레이블은 항상 보이는 진짜 레이블로요(SP-020, BP-074). 플레이스홀더로 대체하지 않습니다.

플레이스홀더의 올바른 역할. 플레이스홀더는 ’보조 예시·가벼운 유도’용입니다. 레이블도, 중요 단서도 아니죠. 입력 하면 사라져도 괜찮은, 부가적인 안내만요. 중요한 건 항상 보이는 곳에 둡니다.

접근성 플레이스홀더의 함정. 플레이스홀더에 의존하는 건 흔한 접근성 실수입니다. 입력 시 사라짐·낮은 대비·스크린 리더 처리 불일치 등 문제가 있죠. 그래서 레이블·도움말은 별도로, 플레이스홀더는 보조로만 씁니다(WCAG 3.3.2).

이 규칙은 검색(SP)의 ’플레이스홀더 올바른 사용’을 담당합니다 — 플레이스홀더에 중요 단서·레이블을 담지 않아(021), 입력 시 정보 손실을 막죠. 레이블(SP-020)·입력 도움(SP-022)과 함께 검색어 입력 안내를 완성합니다.

정리하면 — 플레이스홀더는 입력 시 사라지고 대비가 낮으므로, 거기에 중요 단서·레이블을 담지 말고 단순 유도 문구만 두며, 레이블·중요 안내는 입력 필드 밖에 항상 보이게 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

유도 문구만 — 플레이스홀더에 단순 유도 문구만 있는가(중요 단서·레이블 없음).

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

단서 별도 — 검색 사용법·예시가 입력 필드 밖에 있는가.

개선 방향

플레이스홀더는 가벼운 유도 문구만. 중요 단서·레이블은 필드 밖.

항상 보이는 레이블(SP-020). 플레이스홀더 의존 금지(WCAG 3.3.2).

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

역할	책임
UX 라이터/기획	플레이스홀더·레이블·도움말 분리
퍼블리셔/개발	레이블·도움말 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 플레이스홀더에 단순 유도 문구만 있나요(중요 단서·레이블 없음)?

□ 레이블이 플레이스홀더가 아닌 항상 보이는 진짜 레이블인가요?

□ 검색 사용법·예시가 입력 필드 밖에 있나요?

❓ FAQ

Q1. 플레이스홀더가 왜 문제인가요? 입력을 시작하면 사라지고 대비가 낮습니다(흐린 회색). 거기에 중요 단서·레이블을 담으면 입력 중 안 보이고 저시력자가 못 읽죠. 정보가 손실됩니다. Q2. 플레이스홀더에 뭘 둘 수 있나요? 단순 유도 문구(‘검색어를 입력하세요’)만요. 가벼운 안내죠. 중요한 단서·레이블은 입력 필드 밖에 항상 보이게 둡니다. Q3. 레이블을 플레이스홀더로 대신하면요? 안 됩니다. 입력 시 레이블이 사라져 무슨 입력인지 모르죠. 항상 보이는 진짜 레이블(SP-020, BP-074)을 씁니다.

6. 마무리

SP-021의 메시지:

플레이스홀더에 중요 정보 담지 말기 — 유도 문구만 두고 단서·레이블은 별도로.

플레이스홀더는 입력 시 사라지고 대비가 낮습니다. 중요 단서·레이블을 담지 말고 항상 보이는 곳에 두는 게 핵심이죠. 다음 편은 다양한 검색어 입력 도움입니다.

다음 편 예고 ▶ 「696. (SP-022) 사용자에게 다양한 방식의 검색어 입력 도움을 제공하고 있다.」

ViewCheck는 플레이스홀더에 중요 단서·레이블이 담기지 않는지를 진단합니다.

📚 참고 출처

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