7개에서 20개 사이엔 셀렉트

KRDS CP-298 — 사용자에게 제공할 옵션 목록이 7개 이상, 20개 이하인 경우 사용하고 있다.

0. 들어가며 — 라디오도 텍스트입력도 아닐 때

이번 418편부터 셀렉트(Select, 드롭다운) 그룹입니다. 첫 규칙은 옵션이 7개 이상 20개 이하일 때 셀렉트를 사용하라는 규칙입니다.

옵션이 적으면(2~6개) 라디오 버튼으로 다 펼쳐 보여주는 게 낫고, 너무 많으면(20개 초과) 셀렉트로도 찾기 힘들어 검색형 입력이 낫죠. 그 사이 — 7~20개 구간이 셀렉트(드롭다운)의 영역입니다. CP-298은 이 옵션 개수 기준으로 컨트롤을 고르라고 규정합니다. 라디오 CP-279(‘7개 초과 미사용’)와 짝을 이루죠. 이번 편을 풀어냅니다.

1. 원문 — 옵션 7개 이상 20개 이하

CP-298 (컴포넌트 > 셀렉트) “사용자에게 제공할 옵션 목록이 7개 이상, 20개 이하인 경우 사용하고 있다.”

셀렉트(드롭다운)는 선택 옵션이 7개 이상 20개 이하인 경우에 적합하므로, 그 범위에서 사용하라는 뜻입니다.

정리: 옵션이 7~20개면 셀렉트(드롭다운)를 쓰라. 이게 CP-298입니다.

2. 왜 7~20개에 셀렉트인가

’여럿 중 하나’를 고르는 컨트롤은 — 옵션 개수에 따라 적합한 게 달라집니다. KRDS는 개수 구간별로 컨트롤을 권장하죠:

옵션 ~6개: 라디오 버튼 — 옵션이 적으면(2~6개), 라디오 버튼으로 전부 펼쳐 보여주는 게 낫습니다. 모든 선택지가 한눈에 보여 — 비교·선택이 빠르죠. 라디오는 7개 초과면 쓰지 말라고 했고(CP-279), 그 경계가 셀렉트와 맞닿습니다.

옵션 7~20개: 셀렉트(드롭다운) — 옵션이 7개를 넘으면 — 라디오로 다 펼치면 화면을 너무 차지하죠. 이때 셀렉트가 적합합니다. 평소엔 접혀 있어 공간을 아끼고, 누르면 목록이 펼쳐져 하나를 고르죠. 7~20개 정도는 펼친 목록에서 스크롤로 찾을 만합니다.

옵션 20개 초과: 검색형 입력(콤보박스/자동완성) — 옵션이 너무 많으면(20개 초과), 셀렉트로도 — 긴 목록을 스크롤해 찾기 힘들죠. 이땐 검색·자동완성이 결합된 입력(타이핑하면 후보가 좁혀지는)이 낫습니다. 예: 국가 선택(200여 개), 시·군·구 선택.

왜 개수로 컨트롤을 나누나. 각 컨트롤은 — 특정 옵션 개수에서 가장 효율적입니다:

적은데 셀렉트 — 옵션 3개를 셀렉트로 만들면, 사용자가 펼치는 클릭을 한 번 더 해야 하죠(라디오면 바로 보임). 불필요한 조작입니다.

많은데 라디오 — 옵션 30개를 라디오로 펼치면, 화면이 끝없이 길어져 스캔이 어렵습니다.

아주 많은데 셀렉트 — 옵션 200개를 셀렉트로 만들면, 펼친 목록을 한참 스크롤해야 찾죠. 검색이 필요합니다.

그래서 CP-298은 — ’7~20개’라는 셀렉트가 가장 잘 맞는 구간을 정해, 그 범위에서 셀렉트를 쓰라고 합니다. 옵션 개수를 보고 — 적으면 라디오, 중간이면 셀렉트, 많으면 검색형으로 컨트롤을 골라야, 사용자가 가장 효율적으로 고르죠.

셀렉트의 특성. 셀렉트는 ‘여럿 중 하나’(단일 선택)가 기본입니다. 공간을 아끼는 게 장점이지만, 옵션이 접혀 있어 펼치기 전엔 선택지가 안 보이는 단점도 있죠(라디오는 다 보임). 그래서 ’한눈에 비교가 중요한 적은 옵션’은 라디오가, ’공간 절약이 중요한 중간 옵션’은 셀렉트가 맞습니다.

이 규칙은 셀렉트의 ’용도 정의’를 담당합니다 — 옵션 7~20개라는 적정 구간에 셀렉트를 써(라디오 CP-279·검색형과 구분), 옵션 개수와 컨트롤을 맞추죠. 이후 셀렉트 규칙들(옵션 길이·레이블·자동제출 방지·대비·접근성)이 이 위에 쌓입니다.

정리하면 — 옵션이 7개 미만이면 라디오, 20개 초과면 검색형이 낫고, 그 사이 7~20개 구간이 셀렉트의 영역이므로, 옵션 개수에 맞춰 셀렉트를 사용해야 합니다.

3. 점검 / 개선

무엇을 점검하나

셀렉트 적정 구간 — 셀렉트의 옵션이 7~20개 범위인가.

적은 옵션 — 6개 이하인데 셀렉트를 쓰지 않았는가(라디오가 나음).

많은 옵션 — 20개 초과인데 일반 셀렉트를 쓰지 않았는가(검색형이 나음).

개선 방향

옵션 6개 이하는 라디오로, 20개 초과는 검색·자동완성형으로 교정.

7~20개는 셀렉트 유지.

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

역할	책임
기획/UX	옵션 개수 분석·컨트롤 선정
퍼블리셔/개발	셀렉트/라디오/검색형 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 셀렉트의 옵션이 7~20개 범위인가요?

□ 6개 이하인데 셀렉트를 쓰진 않았나요(라디오가 나음)?

□ 20개 초과인데 일반 셀렉트를 쓰진 않았나요(검색형이 나음)?

❓ FAQ

Q1. 옵션이 3개인데 셀렉트를 쓰면 안 되나요? 적은 옵션은 라디오로 다 펼치는 게 낫습니다. 셀렉트는 펼치는 클릭이 한 번 더 필요해 불필요하죠. Q2. 국가 선택(200개)도 셀렉트인가요? 너무 많으면 셀렉트도 스크롤이 힘듭니다. 검색·자동완성형 입력이 낫죠. Q3. 7~20개는 절대 기준인가요? 권장 가이드입니다. 경계 근처는 맥락(공간·비교 중요도)을 함께 고려하되, 무작정 적은 옵션을 셀렉트로 숨기지는 마세요.

6. 마무리

CP-298의 메시지:

7개에서 20개 사이엔 셀렉트 — 옵션 개수에 맞는 컨트롤을 고르라.

옵션이 적으면(~6개) 라디오로 펼치고, 많으면(20개 초과) 검색형이 낫습니다. 그 사이 7~20개가 셀렉트(드롭다운)의 적정 영역이죠. 옵션 개수와 컨트롤을 맞추는 게 핵심입니다. 다음 편은 옵션 텍스트 길이입니다.

다음 편 예고 ▶ 「419. (CP-299) 옵션 텍스트는 컨테이너와 옵션 목록 영역에 표현될 수 있는 적절한 길이로 제공하고 있다.」

ViewCheck는 셀렉트의 옵션 개수가 적정 구간(7~20개)인지를 진단합니다.

📚 참고 출처

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

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

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