이 드롭다운이 무엇을 묻는지

KRDS CP-300 — 모든 셀렉트에는 레이블을 제공하고 있다.

0. 들어가며 — 무엇을 고르는 드롭다운인지

이번 420편은 모든 셀렉트에 레이블을 제공하라는 규칙입니다. 시리즈 420편째 — 통산 절반에 다다랐네요.

셀렉트(드롭다운)는 — 무엇을 고르는 것인지(지역? 연령대? 카테고리?) 알려주는 레이블이 있어야 합니다. 레이블 없이 드롭다운만 덩그러니 있으면, 사용자는 그게 무엇을 묻는지 모르죠. 특히 플레이스홀더(‘선택하세요’)는 펼치면 사라져 레이블 역할을 못 합니다. CP-300은 모든 셀렉트에 레이블을 두라고 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 모든 셀렉트에 레이블

CP-300 (컴포넌트 > 셀렉트) “모든 셀렉트에는 레이블을 제공하고 있다.”

예외 없이 모든 셀렉트(드롭다운)에, 그것이 무엇을 선택하는 것인지 알려주는 레이블을 제공하라는 뜻입니다.

정리: 모든 셀렉트에 레이블을 제공하라. 이게 CP-300입니다.

2. 왜 레이블이 필요한가

셀렉트(드롭다운)는 — 닫혀 있을 때 ‘선택된 값’ 또는 ‘선택하세요’ 같은 안내만 보입니다. 이 컨트롤이 무엇을 고르는 것인지(지역인지, 연령대인지, 카테고리인지)는 — 별도의 레이블이 알려줘야 하죠. 레이블이 없으면 여러 문제가 생깁니다.

레이블이 없을 때:

용도 불명 드롭다운만 덩그러니 있으면 사용자는 그게 무엇을 묻는지 추측해야 합니다. 닫힌 셀렉트에 ‘선택 하세요’만 있으면 ’무엇을 선택하라는 건지’ 모르죠.

플레이스홀더의 함정 — ‘선택하세요’, ‘시/도 선택’ 같은 플레이스홀더(첫 옵션)를 레이블 대신 쓰면 — 사용 자가 값을 고르는 순간 그 안내가 사라집니다. 그러면 나중에 폼을 검토할 때, 이 드롭다운이 무엇이었는지 다시 모르게 되죠. 플레이스홀더는 레이블의 대체물이 아닙니다.

스크린 리더 용도 불명 — 레이블이 프로그래밍적으로 연결 안 되면 — 스크린 리더는 ’콤보박스’라고만 읽고 무엇을 고르는지 못 알립니다(이건 CP-303에서 상세히).

그래서 CP-300은 — 모든 셀렉트에 보이는 레이블을 두라고 합니다:

시각적 레이블 — 셀렉트 위(또는 옆)에 ‘지역’, ‘연령대’ 같은 — 무엇을 고르는지 알리는 텍스트 레이블을 둡니다. 이 레이블은 값을 골라도 사라지지 않고 계속 보이죠(플레이스홀더와 다름).

프로그래밍적 연결 — 그 레이블을 <label for>/id로 셀렉트와 연결합니다(CP-303). 그러면 시각·접근성 둘 다 충족하죠. 레이블 클릭 시 셀렉트가 포커스/펼침되기도 하고요.

레이블 vs 플레이스홀더. 둘은 역할이 다릅니다:

레이블 — ‘이 셀렉트가 무엇인가’(지역). 항상 보임. 필수.

플레이스홀더(첫 옵션) — ‘아직 안 골랐음’ 안내(‘선택하세요’). 값을 고르면 사라짐. 레이블의 보조일 뿐.

플레이스홀더만 두고 레이블을 생략하면 안 됩니다 — 값 선택 후 용도를 알 수 없게 되니까요. 레이블은 필수, 플레이스 홀더는 선택적 보조입니다.

이 규칙은 셀렉트의 ’정체성 제공’을 담당합니다 — 적정 개수(298)·옵션 길이(299)에 더해, 이 셀렉트가 무엇을 묻는지 (300)를 항상 보이는 레이블로 알려, 사용자가 용도를 명확히 알게 하죠. 다음 편(CP-303)의 스크린 리더 레이블과 짝을 이룹니다(CP-300=레이블 존재, CP-303=4방식으로 프로그래밍 연결).

정리하면 — 셀렉트는 무엇을 고르는지 레이블이 없으면 용도가 불명하고 플레이스홀더는 선택 시 사라지므로, 모든 셀렉트에 항상 보이는 레이블을 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

레이블 존재 — 모든 셀렉트에 무엇을 고르는지 알리는 보이는 레이블이 있는가.

플레이스홀더 의존 배제 — ‘선택하세요’ 플레이스홀더만으로 레이블을 대체하지 않았는가.

연결 — 레이블이 셀렉트와 프로그래밍적으로 연결됐는가(CP-303).

개선 방향

모든 셀렉트 위/옆에 항상 보이는 텍스트 레이블 추가.

플레이스홀더는 보조로만 두고, 별도 레이블 필수. <label for> 연결(CP-303).

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

역할	책임
콘텐츠/UX	셀렉트 레이블 텍스트 작성
퍼블리셔/개발	레이블 배치·연결 구현

기관 유형	CP-300 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (셀렉트 사용 시)

셀렉트를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모든 셀렉트에 무엇을 고르는지 알리는 보이는 레이블이 있나요?

□ ‘선택하세요’ 플레이스홀더만으로 레이블을 대체하진 않았나요?

□ 레이블이 셀렉트와 프로그래밍적으로 연결됐나요?

❓ FAQ

**Q1. ‘선택하세요’가 있으면 레이블 아닌가요?** 아닙니다. 플레이스홀더는 값을 고르면 사라져 용도를 알 수 없게 됩니다. 항상 보이는 별도 레이블이 필요하죠. Q2. 레이블을 꼭 보이게 둬야 하나요? 네. 사용자가 값 선택 후에도 무엇을 고른 항목인지 알아야 합니다. 시각적 으로 항상 보여야 하죠. Q3. CP-303과 뭐가 다른가요? CP-300은 ’레이블이 있는가’, CP-303은 ’4방식(label/aria 등)으로 스크린 리더에 연결됐는가’입니다. 함께 적용하죠.

6. 마무리

CP-300의 메시지:

이 드롭다운이 무엇을 묻는지 — 모든 셀렉트에 항상 보이는 레이블을 제공하라.

셀렉트는 무엇을 고르는지 레이블이 없으면 용도가 불명합니다. ‘선택하세요’ 플레이스홀더는 선택 시 사라져 레이블을 대체 못 하죠. 항상 보이는 별도 레이블을 모든 셀렉트에 두는 게 핵심입니다. 다음 편은 값 변경 시 자동 제출 방지 입니다.

다음 편 예고 ▶ 「421. (CP-301) 셀렉트에 값을 변경하였을 때 폼이 제출되지 않게 구현하고 있다.」

ViewCheck는 모든 셀렉트에 레이블이 제공되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 셀렉트(Select) 가이드 — https://www.krds.go.kr/html/site/component/component_28.html

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

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