하나만 고를 때 라디오

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

0. 들어가며 — 라디오 버튼 그룹의 첫 규칙

이번 398편부터 라디오 버튼(Radio button) 그룹(CP-278~288, 11개)으로 들어갑니다. 첫 규칙은 옵션 목록에서 한 개의 값만 선택하는 경우에 라디오 버튼을 사용하라는 내용이죠.

라디오 버튼은 — 여러 옵션 중 하나만 고르는 입력 컨트롤입니다(성별, 결제 방법, 동의 여부 등). 하나를 고르면 이전 선택이 해제되죠. 반면 여러 개를 고를 수 있으면 체크박스를 씁니다. CP-278은 ’단일 선택’이라는 라디오 버튼의 용도를 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 단일 값 선택 시 사용

CP-278 (컴포넌트 > 라디오 버튼) “사용자가 옵션 목록에서 한 개의 값만 선택할 수 있는 경우에 사용하고 있다.”

여러 옵션 중 하나만 선택해야 하는 입력에 라디오 버튼을 사용하라는 뜻입니다(여러 개 선택은 체크박스).

정리: 하나만 고르는 입력에 라디오 버튼을 써라. 이게 CP-278입니다.

2. 왜 단일 선택에 라디오 버튼인가

폼 입력 컨트롤은 — ’무엇을 선택하게 하느냐’에 따라 적절한 종류가 다릅니다. 라디오 버튼·체크박스·셀렉트 등이 각각 다른 선택 방식에 맞죠. 라디오 버튼의 본질은 ‘상호 배타적 단일 선택(mutually exclusive)’ 입니다.

라디오 버튼 = 하나만. 라디오 버튼 그룹은 — 여러 옵션 중 하나만 선택할 수 있습니다. 한 옵션을 고르면 다른 옵션 선택이 자동으로 해제되죠(상호 배타). 라디오(라디오 주파수 선택)의 이름처럼 — ’하나의 채널만’이죠. 예를 들어:

성별 — 남/여/기타 중 하나.

결제 방법 — 카드/계좌이체/간편결제 중 하나.

동의 여부 — 동의/비동의 중 하나.

배송 방법 — 일반/빠른배송 중 하나.

이런 ’여러 선택지 중 정확히 하나’를 고르는 입력에 라디오 버튼이 맞습니다.

체크박스와의 구분. 반대로 — 여러 개를 동시에 선택할 수 있으면 체크박스를 씁니다(다음 그룹 CP-289~). 예를 들어 ‘관심 분야(복수 선택)’, ’받고 싶은 알림(여러 개)’은 체크박스죠. 라디오와 체크박스를 잘못 쓰면 — 사용 자가 선택 방식을 오해합니다:

단일 선택인데 체크박스를 쓰면 — 사용자가 ‘여러 개 골라도 되나?’ 오해하죠.

복수 선택인데 라디오를 쓰면 — 하나만 골라야 해 다른 걸 못 고릅니다.

셀렉트(드롭다운)와의 관계. 단일 선택은 — 라디오 버튼 외에 셀렉트(드롭다운)로도 할 수 있습니다. 둘의 차이:

라디오 버튼 — 모든 옵션이 펼쳐져 보임. 옵션이 적을 때(보통 7개 이내, CP-279) 적합. 한눈에 비교하며 고르죠.

셀렉트 — 옵션이 접혀 있다 펼침. 옵션이 많을 때(국가·지역 등) 공간 절약에 적합.

즉 단일 선택이면서 옵션이 적으면 라디오 버튼, 많으면 셀렉트가 낫죠. CP-279(7개 초과 시 라디오 미사용)가 이 경계를 다룹니다.

올바른 선택의 가치. 입력 방식이 선택 성격에 맞으면 — 사용자가 직관적으로 ’하나만 고르는구나/여러 개 고르는 구나’를 알고 정확히 입력하죠. 라디오 버튼의 둥근 모양은 ’단일 선택’의, 체크박스의 네모는 ’복수 선택’의 관습적 신호이기도 합니다. 이 관습을 지키면 사용자가 모양만 봐도 선택 방식을 압니다.

이 규칙은 라디오 버튼의 ’용도 게이트’입니다 — 단일 선택에 쓰라는 것이죠(278), 옵션 적을 때(279), 가나다순 정렬(280) 등 제대로 쓰는 법으로 이어집니다. 긴급 공지(CP-151), 탭(CP-229), 표(CP-238)에서 본 ’컴포넌트를 용도에 맞게’의 라디오 버전입니다.

정리하면 — 라디오 버튼은 상호 배타적 단일 선택 컨트롤이므로, 여러 옵션 중 하나만 고르는 입력에 사용하고, 복수 선택은 체크박스, 옵션이 많으면 셀렉트를 써야 합니다.

3. 점검 / 개선

무엇을 점검하나

단일 선택 용도 — 라디오 버튼이 하나만 고르는 입력에 쓰이는가.

체크박스 구분 — 복수 선택에 라디오를 잘못 쓰지 않았는가(체크박스로).

셀렉트 검토 — 옵션이 많으면 셀렉트가 나은지 검토했는가(CP-279).

개선 방향

단일 선택은 라디오, 복수 선택은 체크박스로 구분.

옵션 많으면(7개 초과) 셀렉트 검토(CP-279).

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

역할	책임
기획/UX	선택 방식(단일/복수)에 맞는 컨트롤 선택
퍼블리셔/개발	라디오/체크박스/셀렉트 적절 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 라디오 버튼이 하나만 고르는 입력에 쓰이나요?

□ 복수 선택에 라디오를 잘못 쓰지 않았나요(체크박스로)?

□ 옵션이 많으면 셀렉트가 나은지 검토했나요?

❓ FAQ

Q1. 라디오와 체크박스 차이가 뭔가요? 라디오는 하나만(상호 배타), 체크박스는 여러 개 선택입니다. 모양도 둥근(라디오)/네모(체크박스)로 구분되죠. Q2. 단일 선택인데 셀렉트를 쓰면 안 되나요? 됩니다. 옵션이 적으면(7개 이내) 라디오가 한눈에 보기 좋고, 많으면 셀렉트가 공간을 아끼죠(CP-279). Q3. 복수 선택에 라디오를 쓰면요? 하나만 골라야 해 다른 걸 못 고릅니다. 복수는 체크박스를 씁니다.

6. 마무리

CP-278의 메시지:

하나만 고를 때 라디오 — 단일 선택 입력에 라디오 버튼을 쓴다.

라디오 버튼은 상호 배타적 단일 선택 컨트롤입니다. 여러 옵션 중 하나만 고르는 입력에 쓰고, 복수 선택은 체크박스, 옵션이 많으면 셀렉트를 쓰죠. 선택 방식에 맞는 컨트롤이 직관적 입력을 만듭니다. 다음 편은 옵션 개수 제한입니다.

다음 편 예고 ▶ 「399. (CP-279) 옵션의 개수가 7개를 초과하는 경우 사용하지 않고 있다.」

ViewCheck는 라디오 버튼이 단일 선택 입력에 적절히 사용되는지를 진단합니다.

📚 참고 출처

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

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

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