일곱 넘으면 드롭다운으로

KRDS CP-279 — 옵션의 개수가 7개를 초과하는 경우 사용하지 않고 있다.

0. 들어가며 — 옵션이 너무 많으면

이번 399편은 옵션 개수가 7개를 초과하는 경우 라디오 버튼을 사용하지 않는다는 규칙입니다.

라디오 버튼은 모든 옵션을 펼쳐 보여줍니다 — 옵션이 적으면 한눈에 비교하며 고르기 좋죠. 그런데 옵션이 10개, 20개로 많으면 — 화면을 길게 차지하고 훑기 어렵습니다. 이때는 셀렉트(드롭다운)가 낫죠. CP-279는 라디오 버튼을 7개 이내 옵션에만 쓰라고 규정합니다. 탭 바 5개(CP-137), 캐러셀 5개(CP-210) 정신이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 7개 초과 시 미사용

CP-279 (컴포넌트 > 라디오 버튼) “옵션의 개수가 7개를 초과하는 경우 사용하지 않고 있다.”

라디오 버튼의 옵션이 7개를 넘으면 라디오 버튼을 쓰지 말고, 셀렉트(드롭다운) 등 다른 방식을 사용하라는 뜻입니다.

정리: 옵션이 7개를 초과하면 라디오 대신 셀렉트 등을 써라. 이게 CP-279입니다.

2. 왜 7개 이내인가

라디오 버튼의 특징은 — 모든 옵션이 펼쳐져 한눈에 보임입니다. 이게 장점(비교하며 고르기 쉬움)이자 한계 (공간 차지)죠. 옵션 개수에 따라 이 특성이 장점이 되기도, 단점이 되기도 합니다.

적은 옵션(7개 이내) — 라디오의 장점. 옵션이 적으면 — 모든 옵션이 펼쳐 보여, 사용자가 한눈에 비교하며 고르죠. 클릭 한 번에 선택되고, 전체 선택지를 다 봅니다. 성별(3개), 결제 방법(3~4개), 동의 여부(2개)처럼 적은 옵션에 딱이죠.

많은 옵션(7개 초과) — 라디오의 단점:

공간 과다 — 옵션이 10개, 20개면 — 라디오 버튼이 화면을 길게 차지합니다(세로로 다 펼쳐지니). 폼이 한없이 길어져 다른 입력이 밀리죠.

훑기 어려움 — 옵션이 많으면 — 한눈에 파악이 안 되고, 원하는 옵션을 찾아 길게 스캔해야 합니다. 사람이 한눈에 처리하는 항목 수에 한계가 있어(작업 기억), 7개 정도가 ‘한눈에 비교’되는 적정선이죠(밀러의 법칙 ’7±2’ 와도 통함).

선택 부담 — 펼쳐진 많은 옵션은 시각적 부담을 줍니다.

그래서 CP-279는 — 옵션이 7개 초과면 라디오 버튼을 쓰지 말라고 합니다. 대안:

셀렉트(드롭다운) — 옵션을 접어두고 펼쳐 고르는 방식. 옵션이 많아도 공간을 적게 차지하죠(평소엔 선택된 값만 보임). 국가·지역·연도처럼 옵션이 많은 단일 선택에 적합합니다(셀렉트 그룹 CP 후반).

검색·자동완성 — 옵션이 매우 많으면(수십·수백 개), 검색·자동완성 입력이 낫기도 하죠.

즉 단일 선택이라도 — 옵션이 적으면 라디오(한눈 비교), 많으면 셀렉트(공간 절약). 7개가 그 경계입니다.

**‘7개’의 의미.** 7개는 — 절대 규칙이라기보다 적정 경계선입니다. 핵심은 ’옵션이 한눈에 비교될 만큼 적은가’ 이고, 7개 정도까지가 그 적정선이죠. 옵션이 5~6개면 라디오가 편하고, 8개를 넘어가면 셀렉트가 나아집니다. 경계 근처(7~8개)는 맥락(공간, 옵션 성격)을 함께 고려하고요.

이 규칙은 라디오 버튼의 ‘적정 규모’를 정합니다 — 단일 선택(CP-278) + 옵션 7개 이내(CP-279)일 때 라디오가 빛나죠. 탭 바 5개(CP-137), 배지 하나(CP-188), 캐러셀 5개(CP-210)에서 본 ’컴포넌트는 적정 규모에서 잘 작동’ 원리의 라디오 버전입니다.

정리하면 — 라디오 버튼은 옵션이 적을 때 한눈에 비교하기 좋지만 많으면 공간 과다·훑기 어려움이 생기므로, 옵션 7개 이내에만 쓰고 그보다 많으면 셀렉트 등을 써야 합니다.

3. 점검 / 개선

무엇을 점검하나

옵션 ≤7 — 라디오 버튼의 옵션이 7개 이내인가.

많을 때 대안 — 7개 초과면 셀렉트 등으로 전환했는가.

공간·가독성 — 라디오가 화면을 과도하게 차지하지 않는가.

개선 방향

옵션 7개 초과면 셀렉트(드롭다운)로 전환. 매우 많으면 검색·자동완성.

옵션 5~7개는 라디오 유지(한눈 비교).

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

역할	책임
기획/UX	옵션 개수 따라 라디오/셀렉트 선택
퍼블리셔/개발	적절 컨트롤 구현

기관 유형	CP-279 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (라디오 버튼 사용 시)

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 라디오 버튼의 옵션이 7개 이내인가요?

□ 7개 초과면 셀렉트 등으로 전환했나요?

□ 라디오가 화면을 과도하게 차지하지 않나요?

❓ FAQ

Q1. 왜 7개인가요? 사람이 한눈에 비교하는 항목 수 한계(7±2)와 공간 고려입니다. 7개까지가 라디오로 한눈에 보기 좋은 적정선이죠. Q2. 옵션이 많으면 뭘 쓰나요? 셀렉트(드롭다운)가 공간을 아낍니다. 매우 많으면(수십 개) 검색·자동완성이 낫죠. Q3. 정확히 8개면 안 되나요? 7개가 경계선입니다. 경계 근처는 공간·옵션 성격을 함께 고려하되, 많아질수록 셀렉트가 나아집니다.

6. 마무리

CP-279의 메시지:

일곱 넘으면 드롭다운으로 — 옵션이 7개를 초과하면 라디오를 쓰지 마라.

라디오 버튼은 옵션이 적을 때 한눈에 비교하기 좋지만, 많으면 공간을 과하게 차지하고 훑기 어렵습니다. 7개 이내에 쓰고, 그보다 많으면 셀렉트 등을 쓰죠. 단일 선택(CP-278) + 적은 옵션(279)이 라디오의 적정 영역입니다. 다음 편은 옵션 정렬입니다.

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

ViewCheck는 라디오 버튼 옵션이 7개 이내인지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 라디오 버튼(Radio button) 가이드 — https://www.krds.go.kr/html/site/component/component_26.html

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

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