명확한 레이블, 넉넉한 간격

KRDS CP-291 — 옵션의 레이블을 분명하고 정확하게 제공하고, 옵션 간 간격을 충분히 제공하고 있다.

0. 들어가며 — 무엇을 켜는 건지

이번 411편은 체크박스 옵션 레이블을 분명·정확하게 제공하고, 옵션 간 간격을 충분히 제공하라는 규칙입니다.

체크박스는 다중 선택(CP-289)이라 옵션이 많은 경우가 흔합니다. 각 옵션이 무엇인지 레이블로 분명히 전하고, 옵션 들이 충분히 떨어져 있어야 — 오선택과 혼동을 막죠. CP-291은 레이블 명확성과 옵션 간격을 함께 규정합니다. 라디오 CP-283과 평행한 규칙이죠. 이번 편을 풀어냅니다.

1. 원문 — 분명한 레이블 + 충분한 간격

CP-291 (컴포넌트 > 체크박스) “옵션의 레이블을 분명하고 정확하게 제공하고, 옵션 간 간격을 충분히 제공하고 있다.”

각 체크박스 옵션의 레이블을 명확·정확하게 작성하고, 옵션들 사이에 충분한 간격을 둬 구별·조작이 쉽게 하라는 뜻입니다.

정리: 옵션 레이블은 분명하게, 옵션 간격은 충분하게. 이게 CP-291입니다.

2. 왜 명확한 레이블과 충분한 간격인가

체크박스는 — 각 항목을 독립적으로 켜고/끄는 컨트롤입니다. 사용자가 올바로 켜고/끄려면 — 각 옵션이 ’무엇인지 분명히 이해’되고(레이블), ’정확히 조작’할 수 있어야(간격) 하죠. CP-291은 이 둘을 함께 다룹니다.

① 분명하고 정확한 레이블. 각 옵션의 레이블은 — 그 옵션이 무엇인지 명확히 전해야 합니다.

모호한 레이블의 문제 — 레이블이 애매하면(예: ‘옵션 A’, ‘항목 1’, 줄임말) — 사용자가 무엇을 켜는지 몰라 잘못 선택하죠. 특히 체크박스는 여러 개를 동시에 고르므로, 각 옵션의 의미가 분명해야 올바른 조합을 선택합니다.

명확한 레이블 — 각 옵션을 정확히 설명. ’이메일 알림 / SMS 알림 / 앱 푸시 알림’처럼 — 차이를 분명히.

동의·약관 체크박스 — 단일 on/off 체크박스(동의 등)의 레이블은 특히 정확해야 합니다. ’개인정보 수집·이용에 동의합니다’처럼 — 무엇에 동의하는지 분명히. 모호한 동의 레이블은 동의 유효성 문제가 되죠.

② 충분한 옵션 간 간격. 체크박스 옵션들이 너무 붙어 있으면 여러 문제가 생깁니다:

오선택 — 옵션(체크박스 + 레이블)들이 다닥다닥 붙으면 — 클릭/터치 시 옆 옵션을 잘못 켜기 쉽죠. 특히 모바일 터치는 정밀하지 않아(버튼 크기 CP-276, 라디오 CP-283 정신), 붙은 옵션은 오선택을 부릅니다. 체크박스는 다중 선택이라 여러 번 클릭하므로 오선택 위험이 더 크죠.

레이블-박스 혼동 — 옵션들이 붙으면 — 어느 레이블이 어느 체크박스에 속하는지 헷갈립니다.

스캔 어려움 — 옵션들이 뭉쳐 있으면 각 옵션을 또렷이 구별해 읽기 어렵습니다.

그래서 — 옵션 사이에 충분한 세로 간격을 둡니다. 각 옵션(박스+레이블)이 또렷이 분리되어, 어느 레이블이 어느 박스 것인지 분명하고, 정확히 누르며, 빠르게 스캔하죠.

레이블-박스 연결도 함께(CP-296 연계). 레이블 명확성·간격에 더해 — 레이블이 그 체크박스와 연결돼야 합 니다. <label>을 체크박스와 연결(for/id 또는 감싸기)하면 — 레이블을 클릭해도 체크박스가 토글되고(클릭 영역 확대), 스크린 리더가 박스와 레이블을 함께 읽죠(CP-296의 레이블 제공). 즉 시각적 명확성·간격(291)과 프로그래밍적 연결(296)이 함께 갑니다. 체크박스(작은 네모)뿐 아니라 레이블 전체가 클릭되면 터치 영역이 넓어집니다.

이 규칙은 체크박스의 ’명확성·조작성’을 담당합니다 — 레이블이 분명해 무엇을 켜는지 알고(291 레이블), 간격이 충분해 정확히 토글하죠(291 간격). 라디오 CP-283과 평행하며, 다중 선택 특성상 더 중요합니다.

정리하면 — 체크박스 옵션은 레이블로 무엇인지 정확히 전하고, 옵션 간 충분한 간격으로 또렷이 구별·정확히 토글하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

레이블 명확 — 각 옵션 레이블이 무엇인지 분명·정확한가(특히 동의 체크박스).

옵션 간격 — 옵션들 사이에 충분한 간격이 있어 오선택·혼동이 없는가.

레이블 연결·터치 — 레이블이 체크박스와 연결되고 클릭 영역이 충분한가.

개선 방향

모호한 옵션 레이블을 명확·정확하게(동의는 무엇에 동의인지 분명히). 옵션 간 충분한 세로 간격.

<label> 연결로 클릭 영역 확대·스크린 리더 연결(CP-296).

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

역할	책임
콘텐츠/UX	옵션 레이블 명확 작성
디자이너/개발	옵션 간격·레이블 연결 구현

기관 유형	CP-291 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (체크박스 사용 시)

체크박스를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 각 옵션 레이블이 분명·정확한가요(동의 체크박스는 무엇에 동의인지 명확)?

□ 옵션들 사이에 충분한 간격이 있어 오선택·혼동이 없나요?

□ 레이블이 체크박스와 연결되고 클릭 영역이 충분한가요?

❓ FAQ

Q1. 동의 체크박스 레이블도 중요한가요? 특히 중요합니다. 무엇에 동의하는지 모호하면 동의 유효성 문제가 됩니다. 정확히 작성하죠. Q2. 옵션이 붙으면 뭐가 문제죠? 옆 옵션 오선택, 레이블-박스 혼동이 생깁니다. 다중 선택이라 위험이 더 크죠. 충분한 간격으로 분리합니다. Q3. 레이블 클릭으로 토글되게 하려면? <label>을 체크박스와 연결(for/id 또는 감싸기)하면 됩니다(CP-296).

6. 마무리

CP-291의 메시지:

명확한 레이블, 넉넉한 간격 — 옵션을 분명히, 충분히 떨어지게 제공하라.

체크박스 옵션은 레이블로 무엇인지 정확히 전하고, 충분한 간격으로 또렷이 구별·정확히 토글하게 해야 합니다. 다중 선택이라 오선택 위험이 커 간격이 더 중요하죠. 레이블 연결로 클릭 영역도 넓힙니다. 다음 편은 전체 선택의 중간 상태입니다.

다음 편 예고 ▶ 「412. (CP-292) 전체 선택 옵션이 제공되는 경우 중간 상태를 명확하게 표현하고 있다.」

ViewCheck는 체크박스 옵션 레이블의 명확성과 옵션 간격을 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 체크박스(Checkbox) 가이드 — https://www.krds.go.kr/html/site/component/component_27.html

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

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