가로로 놓인 선택지는 더 넓게(24px+)

KRDS DS-072 — 체크박스나 라디오 버튼을 가로형으로 사용해야 하는 경우 간격을 gap7(24px)이상의 토큰을 사용하고 있다.

0. 들어가며 — 가로 선택지는 더 넓게

지난 71편(세로 선택지, 16~24px)에 이어, 이번 72편은 가로형 체크박스·라디오 버튼의 간격 — gap7(24px) 이상 입니다.

흥미롭게도 가로형은 세로형보다 간격이 더 넓습니다(24px 이상). 69편에서 가로 입력은 16px이었는데, 가로 선택지는 24px 이상이죠. 왜 선택 컨트롤은 가로일 때 더 넓을까요? 핵심은 선택 오류 방지 입니다. 이번 편은 가로 선택지 간격의 의미를 풀어냅니다.

1. 규칙 원문 — 24px 이상

DS-072 (디자인 스타일 > 레이아웃) “체크박스나 라디오 버튼을 가로형으로 사용해야 하는 경우 간격을 gap7(24px)이상의 토큰을 사용하고 있다.”

가로로 나열된 체크박스·라디오 버튼 사이 간격을 24px(gap-7) 이상으로 하라는 뜻입니다.

정리: 가로형 체크박스·라디오 간격은 gap-7(24px) 이상으로 넓게 하라. 이게 DS-072입니다.

2. 왜 가로 선택지는 더 넓게(24px+)인가

가로로 놓인 선택지는 세로보다 잘못 선택할 위험이 큽니다.

선택지가 가로로 나란히 붙어 있으면, 사용자가 의도한 것 바로 옆 선택지를 잘못 누르기 쉽습니다. 특히 터치 환경에서는 손가락이 둔탁해 인접 선택지를 건드리기 쉽죠. 세로 리스트는 선택지가 위아래로 떨어져 비교적 안전하지만, 가로 배치는 좌우로 붙어 더 위험합니다. 그래서 가로 선택지는 더 넓은 간격(24px 이상)으로 선택지 사이를 확실히 띄워, 잘못 선택을 막습니다.

이는 52편(모바일 터치 마진)에서 본 ‘터치 오류 방지’와 같은 원리입니다. 조작 정확성이 중요한 곳일수록 간격을 넉넉히 두는 것이죠. 선택 컨트롤은 사용자의 의사를 정확히 반영해야 하는 중요한 요소라(잘못 체크하면 잘못된 신청), 가로 배치 시 특히 간격을 확보합니다. 가로 입력(16px, 69편)보다 가로 선택지(24px+)가 넓은 것은 이 ’선택 정확성’ 때문입니다.

3. 흔한 위반 / 점검 / 개선

흔한 위반 패턴

함정 ① 가로 선택지 좁음. 24px 미만 → 잘못 선택. → 24px 이상. 함정 ② 입력과 동일 간격. 가로 선택지를 16px로 → 선택 오류. → 선택지는 24px+.

무엇을 점검하나

가로 선택지 간격 — 24px(gap-7) 이상인가.

선택 정확성 — 인접 선택지를 잘못 누르지 않는가.

Before / After

/* ✅ 가로 선택지 — gap-7(24px) 이상 */ .radio-row { display: flex; gap: 24px; } /* 선택 오류 방지 */

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

역할	책임
퍼블리셔/개발	가로 선택지 간격을 24px 이상으로 구현

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

가로 체크박스·라디오를 쓰는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 가로 선택지 간격이 24px 이상인가요?

□ 인접 선택지를 잘못 누를 위험이 없나요?

□ 가로 입력(16px)과 구분해 더 넓게 두나요?

❓ FAQ

Q1. 왜 가로 입력(16px)보다 넓나요? 선택지는 잘못 선택하면 잘못된 의사 반영으로 이어집니다. 가로 배치는 좌우로 붙어 오선택 위험이 커, 더 넓은 24px+로 안전을 확보합니다. Q2. 세로(71편)와 다른가요? 세로는 16~24px, 가로는 24px 이상입니다. 가로가 오선택 위험이 커 더 넓습니다. Q3. 가능하면 세로가 낫나요? 선택지는 세로 배치가 일반적으로 더 안전합니다. 가로는 공간 제약 등으로 불가피한 경우에 쓰되, 간격을 넉넉히 합니다.

6. 마무리

DS-072의 메시지:

가로로 놓인 선택지는 더 넓게(24px+) — 잘못 선택을 막기 위해.

가로 선택지는 좌우로 붙어 오선택 위험이 크므로, 24px 이상으로 넓혀 선택 정확성을 확보합니다. 이는 터치 오류 방지(52편)와 같은 ‘조작 정확성을 위한 간격’ 원리입니다.

다음 편은 컨테이너 내부 패딩을 다룹니다. DS-073 — “카드·모달·인포박스·알럿 등 컨테이너 내부 패딩을 padding-card 토큰으로 적용하고, 모바일에서는 다르게 한다.”

다음 편 예고 ▶ 「073. 카드, 모달, 인포박스, 알럿 등의 컨테이너 내부의 패딩을 padding-card 토큰으로 적용하고, 모바일에서는 공간 제약을 반영하여 패딩 크기를 다르게 적용하고 있다.」

ViewCheck는 가로 선택지 간격이 24px 이상인지를 진단합니다.

📚 참고 출처

KRDS 레이아웃(Layout)·디자인 토큰 가이드 — https://www.krds.go.kr/html/site/style/style_04.html

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

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