여러 개 고를 땐 체크박스

KRDS CP-289 — 사용자가 옵션 목록에서 여러 개의 값을 선택할 수 있는 경우에 사용하고 있다.

0. 들어가며 — 체크박스 vs 라디오 버튼

이번 409편부터 체크박스(Checkbox) 그룹입니다. 첫 규칙은 여러 개의 값을 선택할 수 있는 경우에 체크박스를 사용하라는 규칙입니다.

앞서 본 라디오 버튼(CP-278~288)은 — ’여럿 중 하나’를 고르는 컨트롤이었죠. 체크박스는 그 반대 — ’여럿 중 여러 개’를 고르거나, 하나의 항목을 켜고/끄는 컨트롤입니다. 둘은 모양도 동작도 의미도 달라서, 상황에 맞게 골라 써야 하죠. CP-289는 ’다중 선택이면 체크박스’라는 컨트롤 선택의 기본을 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 다중 선택 시 체크박스 사용

CP-289 (컴포넌트 > 체크박스) “사용자가 옵션 목록에서 여러 개의 값을 선택할 수 있는 경우에 사용하고 있다.”

옵션 목록에서 사용자가 여러 개를 동시에 선택할 수 있어야 하는 상황이면, 그 컨트롤로 체크박스를 사용하라는 뜻입니다.

정리: 여러 개를 고를 수 있으면 체크박스를 쓰라. 이게 CP-289입니다.

2. 왜 다중 선택에 체크박스인가

폼에서 ’여러 옵션 중 선택’을 받을 때 — 컨트롤은 크게 라디오 버튼과 체크박스가 있습니다. 둘의 핵심 차이는 선택 개수죠:

라디오 버튼 — 여럿 중 하나만(CP-278). 상호 배타적 선택. 하나 고르면 다른 게 해제됨.

체크박스 — 여럿 중 여러 개(0개~전체). 각 옵션이 독립적으로 켜짐/꺼짐.

체크박스의 본질은 — 각 항목이 독립된 on/off 스위치라는 점입니다. 한 체크박스를 켜도 다른 건 영향 없죠. 그래서:

다중 선택 — ‘관심 분야를 모두 고르세요(복수)’, ‘받고 싶은 알림을 선택’ 같은 — 여러 개를 동시에 고를 수 있는 상황에 맞습니다.

단일 on/off — ‘약관에 동의합니다’, ‘이 정보를 저장’ 같은 — 하나의 항목을 켜거나 끄는(예/아니오) 상황에도 체크박스를 씁니다(단일 체크박스).

왜 컨트롤을 맞게 골라야 하나. 컨트롤의 모양은 — 사용자에게 ’몇 개 고를 수 있는지’를 알려주는 시각적 약속입니다:

동그라미(○) = 라디오 = 하나만 — 사용자는 동그란 컨트롤을 보면 ’하나만 고르는구나’를 직관적으로 압니다.

네모(☐) = 체크박스 = 여러 개 — 네모 컨트롤을 보면 ’여러 개 고를 수 있구나’를 압니다.

이 약속이 잘못되면 사용자가 혼란스럽죠. 예를 들어 여러 개를 골라야 하는데 라디오 버튼(동그라미)을 쓰면, 사용자는 ‘하나만 골라야 하나?’ 하고 망설이거나, 하나 고르면 앞 선택이 해제돼 당황합니다. 반대로 하나만 골라야 하는데 체크박스(네모)를 쓰면, 사용자가 여러 개를 골라 잘못된 입력이 들어오죠.

그래서 CP-289는 — ’여러 개 선택 가능’이라는 요구에 맞춰 체크박스라는 올바른 컨트롤을 쓰라고 합니다. 요구(다중)와 컨트롤(체크박스)이 일치해야, 사용자가 ’몇 개 고를 수 있는지’를 모양만 보고 알고, 올바로 입력하죠.

체크박스의 또 다른 특성 — 해제 가능. 라디오 버튼은 한 번 고르면 해제가 안 됐지만(CP-282의 ‘선택 안 함’ 필요), 체크박스는 — 다시 클릭하면 해제됩니다. 켜고/끄기가 자유롭죠. 그래서 체크박스는 ‘선택 안 함’을 별도 옵션 으로 둘 필요가 없습니다(체크 안 하면 그게 ’선택 안 함’). 이 자유로운 on/off가 다중 선택에 자연스럽죠.

이 규칙은 체크박스 그룹의 ’용도 정의’를 담당합니다 — 다중 선택·단일 on/off에는 체크박스를, 단일 배타 선택에는 라디오를 써(CP-278), 컨트롤 모양과 선택 규칙을 일치시키죠. 이후 체크박스 규칙들(정렬·레이블·중간상태·대비· 키보드·접근성)이 이 위에 쌓입니다.

정리하면 — 옵션을 여러 개 동시에 고를 수 있는 상황(또는 단일 on/off)이면, 그 시각적 약속에 맞게 체크박스를 써서 사용자가 ’여러 개 고를 수 있음’을 모양으로 알고 올바로 입력하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

컨트롤 일치 — 다중 선택 가능한 곳에 체크박스(네모)를 쓰는가(라디오 오용 없음).

단일 배타 구분 — 하나만 골라야 하는 곳에 라디오를 쓰는가(체크박스 오용 없음).

on/off 항목 — 동의·저장 등 단일 켜기/끄기에 체크박스를 쓰는가.

개선 방향

다중 선택·on/off는 체크박스, 단일 배타 선택은 라디오로 교정.

컨트롤 모양(네모/동그라미)과 선택 규칙(여러개/하나) 일치 확인.

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

역할	책임
기획/UX	선택 요구(다중/단일) 분석·컨트롤 선정
퍼블리셔/개발	체크박스/라디오 구현

기관 유형	CP-289 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (선택 폼 사용 시)

옵션 선택 폼을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 여러 개를 고를 수 있는 곳에 체크박스(네모) 를 쓰나요?

□ 하나만 골라야 하는 곳에 라디오(동그라미)를 쓰나요?

□ 동의·저장 등 단일 on/off에 체크박스를 쓰나요?

❓ FAQ

Q1. 체크박스와 라디오 버튼 차이가 뭔가요? 체크박스는 여러 개 독립 선택(네모), 라디오는 하나만 배타 선택 (동그라미)입니다. 선택 개수가 핵심 차이죠. Q2. 약관 동의는 라디오 아닌가요? 단일 on/off(동의/미동의)는 체크박스 하나로 표현하는 게 표준입니다. Q3. 체크박스는 ‘선택 안 함’ 옵션이 필요 없나요? 네. 체크박스는 다시 클릭해 해제할 수 있어, 체크 안 하면 그게 ’선택 안 함’입니다.

6. 마무리

CP-289의 메시지:

여러 개 고를 땐 체크박스 — 다중 선택·on/off에는 체크박스를 쓰라.

체크박스는 각 항목이 독립된 on/off 스위치라 여러 개를 동시에 고르거나 켜고/끌 수 있습니다. 다중 선택이면 체크박스(네모), 단일 배타면 라디오(동그라미)로 컨트롤과 선택 규칙을 일치시키죠. 다음 편은 체크박스 옵션 정렬 입니다.

다음 편 예고 ▶ 「410. (CP-290) 옵션은 가나다순으로 정렬하여 사용하고 있다.」

ViewCheck는 다중 선택 상황에 체크박스가 올바로 사용됐는지를 진단합니다.

📚 참고 출처

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

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

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