안 고를 자유도 옵션으로

KRDS CP-282 — 필수 입력항목이 아닌 경우 선택하지 않아도 되는 상황을 고려하여 ‘해당없음’, ’선택 안 함’과 같은 옵션을 제공하고 있다.

0. 들어가며 — 선택하고 싶지 않은 사용자

이번 402편은 필수가 아닌 경우 ‘해당없음’, ‘선택 안 함’ 같은 옵션을 제공하라는 규칙입니다.

라디오 버튼은 하나를 고르면 — 한 번 선택한 뒤에는 선택을 해제할 수 없습니다(라디오 특성). 그래서 선택 항목인데도 — 한 번 고르면 ‘아무것도 안 고른’ 상태로 못 돌아가죠. CP-282는 ‘해당없음’, ‘선택 안 함’ 옵션을 명시적으로 제공해, 안 고르고 싶은 사용자도 표현하게 하라고 규정합니다. CP-281(기본 선택 없음)의 짝이죠. 이번 편을 풀어냅니다.

1. 원문 — 선택 안 해도 되는 옵션 제공

CP-282 (컴포넌트 > 라디오 버튼) “필수 입력항목이 아닌 경우 선택하지 않아도 되는 상황을 고려하여 ‘해당없음’, ‘선택 안 함’ 과 같은 옵션을 제공하고 있다.”

선택이 필수가 아닌 라디오 버튼 그룹에, ‘해당없음’·‘선택 안 함’ 같은 옵션을 추가해 사용자가 명시적으로 ’선택 안 함’을 고를 수 있게 하라는 뜻입니다.

정리: 선택이 필수가 아니면 ‘선택 안 함’ 옵션을 제공하라. 이게 CP-282입니다.

2. 왜 ‘선택 안 함’ 옵션이 필요한가

라디오 버튼의 특성 하나 — 한 번 선택하면 해제가 안 됩니다. 라디오 그룹에서 옵션을 하나 고르면, 다른 옵션을 고를 순 있어도 ’아무것도 안 고른 처음 상태’로는 돌아갈 수 없죠(체크박스는 다시 클릭해 해제 가능하지만 라디오는 다름). 이 특성이 — ’선택 항목’에서 문제를 만듭니다.

문제 상황:

선택 항목인데 안 고르고 싶음 — 어떤 라디오 그룹이 필수가 아닌(선택) 항목이면, 사용자는 — 안 고르고 넘어가고 싶을 수 있죠. 예를 들어 ’추가 옵션 선택(선택사항)’에서 ’아무것도 원치 않음’을 표현하고 싶을 때요.

실수로 고른 뒤 해제 불가 — 사용자가 실수로 한 옵션을 골랐는데 — 라디오는 해제가 안 되니, ‘아무것도 안 고른’ 상태로 못 돌아갑니다. 페이지를 새로고침하지 않는 한요.

CP-281(기본 선택 없음)으로 시작은 ’아무것도 안 선택’이지만 — 일단 사용자가 하나를 클릭하면 그 상태로 돌아갈 수 없는 거죠.

그래서 CP-282는 — ‘선택 안 함’, ‘해당없음’ 같은 옵션을 명시적 선택지로 추가하라고 합니다. 그러면:

’안 고름’을 명시적으로 표현 — 사용자가 ’선택 안 함’을 골라, ’나는 이 항목을 선택하지 않겠다’를 의식적으로 표현하죠. 실수로 골랐어도 ’선택 안 함’으로 되돌릴 수 있고요.

의도 명확 — ’선택 안 함’을 고른 것과 ’아직 안 고른 것(빈 상태)’을 구별하면 — 사용자 의도가 명확해집니다. ’이 사용자는 의식적으로 선택 안 함을 골랐다’를 알 수 있죠.

예:

추가 서비스 선택(선택): ‘A 서비스 / B 서비스 / 선택 안 함’.

해당 여부(선택): ‘예 / 아니오 / 해당없음’.

이렇게 ’선택 안 함’을 옵션으로 두면 — 안 고르고 싶은 사용자, 실수로 고른 사용자 모두 명시적으로 그 상태를 표현하죠.

‘필수가 아닌 경우’. 규칙은 ’필수 입력항목이 아닌 경우’로 한정합니다 — 필수 항목이면 반드시 하나를 골라야 하니 ’선택 안 함’이 의미 없죠(필수면 검증으로 선택을 요구). 선택(비필수) 항목일 때만 ’선택 안 함’을 제공합니다. 항목의 필수 여부에 따라 다르게 처리하죠.

CP-281과의 연계:

CP-281 — 기본 선택값 없음(시작 시 아무것도 안 선택).

CP-282 — ‘선택 안 함’ 옵션 제공(선택 후에도 ’안 함’을 명시).

둘이 합쳐져 — 사용자가 ①처음엔 강요 없이 시작하고, ②안 고르고 싶으면 ’선택 안 함’을 명시적으로 고를 수 있죠. 사용자의 ’선택하지 않을 자유’까지 보장하는 것입니다.

이 규칙은 라디오 버튼의 ’선택 유연성’을 담당합니다 — 사용자가 고르고 싶은 것을 고르되, 안 고를 수도 있게(명시적 으로) 하죠.

정리하면 — 라디오 버튼은 선택 해제가 안 되므로, 필수가 아닌 항목에는 ‘선택 안 함’, ‘해당없음’ 옵션을 제공해 사용자가 ’선택하지 않음’을 명시적으로 표현하고 실수도 되돌릴 수 있게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

선택 안 함 옵션 — 필수가 아닌 라디오 그룹에 ‘선택 안 함’·‘해당없음’ 옵션이 있는가.

필수 구분 — 필수 항목과 선택 항목을 구분해 처리하는가.

되돌리기 — 사용자가 실수로 고른 뒤 ’선택 안 함’으로 되돌릴 수 있는가.

개선 방향

선택(비필수) 라디오 그룹에 ‘선택 안 함’·‘해당없음’ 옵션 추가.

필수 항목은 검증으로 선택 요구(이 옵션 불필요).

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

역할	책임
기획/UX	필수/선택 구분·‘선택 안 함’ 옵션 설계
퍼블리셔/개발	‘선택 안 함’ 옵션 구현

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

선택(비필수) 라디오 버튼을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 필수가 아닌 라디오 그룹에 ‘선택 안 함’·‘해당없음’ 옵션이 있나요?

□ 필수 항목과 선택 항목을 구분해 처리하나요?

□ 사용자가 실수로 고른 뒤 ’선택 안 함’으로 되돌릴 수 있나요?

❓ FAQ

Q1. 왜 라디오는 ‘선택 안 함’이 필요한가요?** 라디오는 한 번 고르면 해제가 안 됩니다. ’선택 안 함’ 옵션이 있어야 안 고르거나 실수를 되돌릴 수 있죠. Q2. 필수 항목도 ’선택 안 함’을 주나요?** 아닙니다. 필수면 반드시 골라야 하니 의미 없죠. 검증으로 선택을 요구합니다. Q3. CP-281과 뭐가 다른가요? CP-281은 시작 시 기본 선택 없음, CP-282는 선택 후에도 ’안 함’을 명시할 옵션 제공입니다. 함께 선택 자유를 보장하죠.

6. 마무리

CP-282의 메시지:

안 고를 자유도 옵션으로 — 필수가 아니면 ‘선택 안 함’ 옵션을 제공하라.

라디오는 선택 해제가 안 되므로, 선택 항목에는 ‘선택 안 함’·‘해당없음’ 옵션을 둬 사용자가 ’선택하지 않음’을 명시하고 실수를 되돌리게 하죠. CP-281(기본 선택 없음)과 함께 사용자의 선택 자유를 보장합니다. 다음 편은 옵션 레이블과 간격입니다.

다음 편 예고 ▶ 「403. (CP-283) 옵션의 레이블을 분명하고 정확하게 제공하고, 옵션 간 간격을 충분히 제공하고 있다.」

ViewCheck는 비필수 라디오 그룹에 ‘선택 안 함’ 옵션이 제공되는지를 진단합니다.

📚 참고 출처

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

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

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