명확한 레이블, 넉넉한 간격

KRDS CP-283 — 옵션의 레이블을 분명하고 정확하게 제공하고, 옵션 간 간격을 충분히 제공하고 있다.

0. 들어가며 — 옵션을 분명하게, 떨어지게

이번 403편은 옵션 레이블을 분명·정확하게 제공하고, 옵션 간 간격을 충분히 제공하라는 규칙입니다.

라디오 버튼 옵션의 레이블이 모호하면 — 사용자가 ‘뭘 고르는 건지’ 헷갈리죠. 또 옵션들이 다닥다닥 붙어 있으면 — 옆 옵션을 잘못 누르거나 어느 레이블이 어느 버튼 것인지 혼동됩니다. CP-283은 레이블 명확성과 옵션 간격을 함께 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 분명한 레이블 + 충분한 간격

CP-283 (컴포넌트 > 라디오 버튼) “옵션의 레이블을 분명하고 정확하게 제공하고, 옵션 간 간격을 충분히 제공하고 있다.”

각 라디오 옵션의 레이블을 명확·정확하게 작성하고, 옵션들 사이에 충분한 간격을 둬 구별·조작이 쉽게 하라는 뜻입니다.

정리: 옵션 레이블은 분명하게, 옵션 간격은 충분하게. 이게 CP-283입니다.

2. 왜 명확한 레이블과 충분한 간격인가

라디오 버튼은 — 옵션 중 하나를 골라 입력하는 컨트롤입니다. 사용자가 정확히 고르려면 — 각 옵션이 ’무엇인지 분명히 이해’되고(레이블), ’정확히 선택’할 수 있어야(간격) 하죠. CP-283은 이 둘을 함께 다룹니다.

① 분명하고 정확한 레이블. 각 옵션의 레이블은 — 그 옵션이 무엇인지 명확히 전해야 합니다. 사용자가 레이블을 읽고 ’아, 이 옵션은 이거구나’를 정확히 이해해야 올바로 선택하죠.

모호한 레이블의 문제 레이블이 애매하면(예: ‘기타1’, ‘옵션 A’, 줄임말) 사용자가 무엇인지 몰라 잘못 고르거나 망설입니다. 특히 선택의 결과가 다른 옵션들은 레이블로 차이가 분명해야 하죠.

명확한 레이블 — 각 옵션을 정확히 설명하는 레이블. ’일반 배송(2~3일) / 빠른 배송(당일)’처럼 — 차이를 분명히. 옵션 간 의미가 구별되게요.

② 충분한 옵션 간 간격. 라디오 옵션들이 너무 붙어 있으면 여러 문제가 생깁니다:

오선택 — 옵션(라디오 버튼 + 레이블)들이 다닥다닥 붙으면 — 클릭/터치 시 옆 옵션을 잘못 누르기 쉽죠. 특히 모바일 터치는 정밀하지 않아(브레드크럼 간격 CP-082, 버튼 크기 CP-276 정신), 붙은 옵션은 오선택을 부릅니다.

레이블-버튼 혼동 — 옵션들이 붙으면 — 어느 레이블이 어느 라디오 버튼에 속하는지 헷갈리죠. 특히 레이블이 길어 줄바꿈되면 더 혼란스럽습니다.

스캔 어려움 — 옵션들이 뭉쳐 있으면 — 각 옵션을 또렷이 구별해 읽기 어렵습니다.

그래서 — 옵션 사이에 충분한 세로 간격을 둡니다. 각 옵션(버튼+레이블)이 또렷이 분리되어, 어느 레이블이 어느 버튼 것인지 분명하고, 정확히 누르며, 빠르게 스캔하죠.

레이블-버튼 연결도 함께. 레이블 명확성·간격에 더해 — 레이블이 그 라디오 버튼과 연결돼야 합니다. <label> 을 라디오 버튼과 연결(for/id 또는 감싸기)하면 — 레이블을 클릭해도 그 버튼이 선택되고(클릭 영역 확대), 스크린 리더가 버튼과 레이블을 함께 읽죠(CP-287의 레이블 제공). 즉 시각적 명확성·간격(283)과 프로그래밍적 연결(287)이 함께 갑니다.

터치 영역. 충분한 간격에 더해 — 각 옵션의 클릭/터치 영역도 충분해야 하죠. 라디오 버튼(작은 원)뿐 아니라 레이블 전체가 클릭되게 하면(<label> 연결) 터치 영역이 넓어져 누르기 쉽습니다(버튼 크기 CP-276 정신).

이 규칙은 라디오 버튼의 ’명확성·조작성’을 담당합니다 — 레이블이 분명해 무엇인지 알고(283 레이블), 간격이 충분해 정확히 고르죠(283 간격). 텍스트 목록 일관 어투(CP-249), 버튼 레이블(CP-270)에서 본 명확성과, 페이지네이션· 버튼의 크기·간격 정신을 함께 담습니다.

정리하면 — 라디오 옵션은 레이블로 무엇인지 정확히 전하고, 옵션 간 충분한 간격으로 또렷이 구별·정확히 선택하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

레이블 명확 — 각 옵션 레이블이 무엇인지 분명·정확한가(모호함 배제).

옵션 간격 — 옵션들 사이에 충분한 간격이 있어 오선택·혼동이 없는가.

레이블 연결·터치 — 레이블이 버튼과 연결되고 클릭 영역이 충분한가.

개선 방향

모호한 옵션 레이블을 명확·정확하게. 옵션 간 충분한 세로 간격.

<label> 연결로 클릭 영역 확대·스크린 리더 연결(CP-287).

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

역할	책임
콘텐츠/UX	옵션 레이블 명확 작성
디자이너/개발	옵션 간격·레이블 연결 구현

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

라디오 버튼을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 각 옵션 레이블이 무엇인지 분명·정확한가요(모호함 배제)?

□ 옵션들 사이에 충분한 간격이 있어 오선택·혼동이 없나요?

□ 레이블이 버튼과 연결되고 클릭 영역이 충분한가요?

❓ FAQ

Q1. 레이블이 짧으면 명확하지 않나요? 짧아도 모호하면(예: ‘기타1’) 안 됩니다. 옵션 차이가 분명히 구별되게 정확히 작성하죠. Q2. 옵션이 붙으면 뭐가 문제죠? 옆 옵션 오선택, 레이블-버튼 혼동이 생깁니다. 충분한 세로 간격으로 분리합 니다. Q3. 레이블을 클릭해도 선택되게 하려면? <label>을 라디오 버튼과 연결(for/id 또는 감싸기)하면 됩니다 (CP-287).

6. 마무리

CP-283의 메시지:

명확한 레이블, 넉넉한 간격 — 옵션을 분명히, 충분히 떨어지게 제공하라.

라디오 옵션은 레이블로 무엇인지 정확히 전하고, 충분한 간격으로 또렷이 구별·정확히 선택하게 해야 합니다. 모호한 레이블·붙은 옵션은 오선택과 혼동을 부르죠. 레이블 연결로 클릭 영역도 넓힙니다. 다음 편은 버튼 양식의 명도 대비입니다.

다음 편 예고 ▶ 「404. (CP-284) 버튼 양식과 인접 배경 간 명도 대비를 3:1 이상으로 표현하고 있다.」

ViewCheck는 라디오 옵션 레이블의 명확성과 옵션 간격을 진단합니다.

📚 참고 출처

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

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

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