전부도 아니고 빈 것도 아닌

KRDS CP-292 — 전체 선택 옵션이 제공되는 경우 중간 상태를 명확하게 표현하고 있다.

0. 들어가며 — 일부만 선택됐을 때 ’전체 선택’은

이번 412편은 ‘전체 선택’ 옵션이 있을 때 중간 상태를 명확하게 표현하라는 규칙입니다. 체크박스에만 있는 독특한 규칙이죠.

‘전체 선택’ 체크박스가 있는 목록에서 — 하위 항목 중 일부만 선택되면, ‘전체 선택’ 체크박스는 어떤 상태여야 할까요? 체크돼 있으면(전부 선택된 것처럼) 거짓이고, 비어 있으면(아무것도 안 된 것처럼) 역시 거짓이죠. 그래서 ‘체크도 빈 것도 아닌’ 제3의 상태 — 중간 상태(indeterminate) 가 필요합니다. CP-292는 이 중간 상태를 명확히 표현하라고 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 전체 선택의 중간 상태

CP-292 (컴포넌트 > 체크박스) “전체 선택 옵션이 제공되는 경우 중간 상태를 명확하게 표현하고 있다.”

‘전체 선택’ 체크박스가 있을 때, 하위 항목이 일부만 선택된 ’중간 상태’를 (전체 선택/전체 해제와 구별되게) 명확히 표현하라는 뜻입니다.

정리: ’전체 선택’에 일부만 선택된 중간 상태를 명확히 표현하라. 이게 CP-292입니다.

2. 왜 중간 상태가 필요한가

체크박스 목록에서 — 항목이 많으면 ‘전체 선택’ 체크박스를 맨 위에 둬, 한 번에 전부 켜고/끄게 합니다(메일함의 ‘모두 선택’, 약관 ‘전체 동의’ 등). 이 ‘전체 선택’ 체크박스와 하위 항목들의 관계에서 — 세 가지 상태가 생깁니다:

전체 선택됨(checked) — 하위 항목이 전부 선택됨 → ‘전체 선택’ 체크박스도 체크(✓).

전체 해제됨(unchecked) — 하위 항목이 하나도 선택 안 됨 → ‘전체 선택’ 체크박스도 빈 상태(☐).

일부만 선택됨(indeterminate) — 하위 항목 중 일부만 선택됨 → ’전체 선택’은 ???

세 번째 일부만 선택된 경우가 문제입니다. 이걸 ①체크(✓)로 표시하면 ’전부 선택됐다’는 거짓 정보를 주죠 (실은 일부만). ②빈 상태(☐)로 표시하면 ’아무것도 선택 안 됐다’는 거짓 정보고요(실은 일부 선택됨). 둘 다 실제 상태를 잘못 전합니다.

그래서 체크박스에는 제3의 시각 상태가 있습니다. 중간 상태(indeterminate) 죠. 보통 체크 표시(✓) 대신 가로 줄(−) 이나 네모 안 채움으로 표현합니다. 이 중간 상태는 ’전부도 아니고 빈 것도 아닌, 일부만 선택됨’을 명확히 알리죠. 사용자는 이걸 보고 ’아, 하위 중 일부만 선택됐구나’를 압니다.

왜 명확해야 하나. 중간 상태가 체크나 빈 것과 시각적으로 구별돼야 합니다. 만약 중간 상태가 체크(✓)와 비슷하게 보이면 사용자가 ’전부 선택됐다’로 오해하죠. 가로 줄(−) 같은 분명히 다른 시각 표시로, 세 상태(✓ / − / ☐)가 또렷이 구별돼야 합니다.

동작 규칙도. 중간 상태의 ’전체 선택’을 클릭하면 — 보통 전체 선택(전부 켜기) 으로 갑니다(일부→전부). 그리고 하위를 조작하면 ’전체 선택’이 자동으로 상태를 갱신하죠(전부 켜면 ✓, 전부 끄면 ☐, 일부면 −). 이 연동이 정확해야 사용자가 혼란 없이 씁니다.

구현 indeterminate는 별도 속성. HTML 체크박스에서 중간 상태는 checked와 별개인 indeterminate 프로퍼티로 설정합니다(JavaScript로 el.indeterminate = true). 주의할 점은 indeterminate는 순수 시각 상태라, 실제 값(checked)에는 영향이 없죠. 그래서 하위 선택 개수를 계산해 ‘전체 선택’ 체크박스의 checked/indeterminate를 동적으로 갱신해야 합니다.

접근성도(스크린 리더). 중간 상태는 스크린 리더에도 전달돼야 하죠. 네이티브 체크박스의 indeterminate 프로퍼티는 스크린 리더가 ‘mixed(혼합)’ 상태로 읽습니다(ARIA aria-checked="mixed"에 대응). 그래서 시각 (가로 줄)뿐 아니라 스크린 리더 사용자도 ’일부 선택됨(혼합)’을 듣죠. 네이티브 체크박스 + indeterminate 프로퍼티 면 이게 자동입니다.

이 규칙은 체크박스의 ’계층 선택 명료성’을 담당합니다 — ’전체 선택’과 하위 항목의 관계에서 ’일부만 선택’이라는 모호한 상태를 중간 상태(−)로 명확히 표현해, 사용자가 실제 선택 상황을 정확히 알게 하죠.

정리하면 — ‘전체 선택’ 체크박스가 있을 때 하위가 일부만 선택되면, 체크도 빈 것도 아닌 중간 상태(indeterminate, 가로 줄)로 명확히 표현해 사용자에게 실제 상태를 정확히 전해야 합니다.

3. 점검 / 개선

무엇을 점검하나

중간 상태 표현 — ’전체 선택’에 일부 선택 시 중간 상태(−)가 나타나는가.

3상태 구별 — 체크(✓)/중간(−)/빈 것(☐)이 시각적으로 또렷이 구별되는가.

연동·접근성 — 하위 조작 시 ‘전체 선택’ 상태가 갱신되고, 스크린 리더가 mixed로 읽는가.

개선 방향

’전체 선택’에 indeterminate 프로퍼티로 중간 상태 구현(하위 개수 계산해 동적 갱신).

중간 상태를 가로 줄 등 분명히 다른 시각으로. 네이티브 체크박스로 스크린 리더 mixed 자동.

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

역할	책임
퍼블리셔/개발	indeterminate 상태·연동 로직 구현
디자이너	중간 상태 시각 표현 정의

기관 유형	CP-292 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 조건부 (‘전체 선택’ 제공 시)

‘전체 선택’ 기능이 있는 체크박스 목록(메일함·약관 전체 동의·목록 일괄 처리)에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ ’전체 선택’에 하위 일부 선택 시 중간 상태(−)가 나타나나요?

□ 체크(✓)/중간(−)/빈 것(☐)이 또렷이 구별되나요?

□ 하위 조작 시 ‘전체 선택’ 상태가 갱신되고 스크린 리더가 mixed로 읽나요?

❓ FAQ

Q1. 중간 상태가 왜 필요한가요? 일부만 선택됐을 때 체크(전부)도 빈 것(없음)도 거짓이라, 제3의 상태로 ’일부 선택됨’을 정확히 표현해야 하죠. Q2. 어떻게 구현하나요? HTML 체크박스의 indeterminate 프로퍼티(JS로 설정)로 합니다. checked와 별개인 시각 상태죠. 하위 개수를 계산해 갱신합니다. Q3. 스크린 리더에도 전달되나요? 네. 네이티브 indeterminate는 ’mixed(혼합)’로 읽힙니다(aria-checked=“mixed” 대응).

6. 마무리

CP-292의 메시지:

전부도 아니고 빈 것도 아닌 — 일부 선택된 ’전체 선택’은 중간 상태로 명확히.

‘전체 선택’ 체크박스에서 하위가 일부만 선택되면, 체크도 빈 것도 거짓입니다. 중간 상태(indeterminate, 가로 줄)로 ’일부 선택됨’을 명확히 표현해 실제 상황을 정확히 전하죠. 스크린 리더는 mixed로 읽습니다. 다음 편은 체크박스 명도 대비입니다.

다음 편 예고 ▶ 「413. (CP-293) 체크박스, 아이콘과 인접 배경 간 명도 대비를 3:1 이상으로 표현하고 있다.」

ViewCheck는 ’전체 선택’의 중간 상태가 명확히 표현되는지를 진단합니다.

📚 참고 출처

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

WAI-ARIA APG — Checkbox (Mixed) Pattern — https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/

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

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