선택지 목록도 크기에 따라 16~24px

KRDS DS-071 — 체크박스나 라디오 버튼을 리스트 형태로 사용 시 컴포넌트 사이즈에 따라 gap5-gap7(16px-24px)의 토큰을 사용하고 있다.

0. 들어가며 — 선택 컨트롤의 간격

폼 요소 간격을 이어갑니다. 이번 71편은 체크박스·라디오 버튼을 세로 리스트로 쓸 때의 간격 — 컴포넌트 크기에 따라 gap5-gap7(16~24px) 입니다.

신청서에는 선택지 목록이 자주 나옵니다 — “다음 중 해당하는 것을 모두 고르세요”(체크박스), “성별을 선택 하세요”(라디오). 이 선택지들이 세로로 나열될 때 간격을 컴포넌트 크기에 따라 16~24px로 정합니다. 70편(세로 입력)과 같은 비례 원리죠. 이번 편은 선택 컨트롤 리스트 간격을 풀어냅니다.

1. 규칙 원문 — 크기에 따른 범위

DS-071 (디자인 스타일 > 레이아웃) “체크박스나 라디오 버튼을 리스트 형태로 사용 시 컴포넌트 사이즈에 따라 gap5-gap7(16px-24px) 의 토큰을 사용하고 있다.”

체크박스·라디오 버튼 리스트의 간격을 컴포넌트 크기에 따라 1624px(gap-5gap-7) 로 하라는 뜻입니다.

정리: 체크박스·라디오 리스트 간격은 크기에 따라 16~24px로 비례 조정하라. 이게 DS-071입니다.

2. 왜 16~24px 범위인가

70편(세로 입력)과 같은 원리입니다 — 컴포넌트 크기에 비례해야 하기 때문이죠.

체크박스·라디오 버튼도 크기가 다양합니다. 작은 컨트롤(짧은 라벨)들 사이는 16px이 적당하고, 큰 컨트롤 (긴 설명이 딸린 선택지)들 사이는 24px이 더 자연스럽습니다. 큰 요소에는 큰 간격을 두어 균형을 맞추는 것이죠(레디어스·입력 비례와 같음). 그래서 크기에 따라 16~24px 범위에서 조정합니다.

또한 적절한 간격은 선택 정확성과도 관련됩니다. 선택지들이 너무 붙어 있으면 사용자가 의도와 다른 항목을 잘못 선택하기 쉽습니다(특히 터치 환경). 충분한 간격(16px 이상)은 선택 오류를 줄이죠. 그래서 선택 컨트롤 간격은 단순 미관이 아니라 조작 정확성의 문제이기도 합니다. 16~24px은 선택지를 명확히 구분하고 정확히 선택하게 하는 적정 범위입니다.

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

흔한 위반 패턴

함정 ① 너무 좁은 간격. 선택지가 붙어 잘못 선택. → 16px 이상. 함정 ② 일률적 간격. 크기 무관 같은 간격. → 크기 비례 16~24px.

무엇을 점검하나

선택지 간격 — 체크박스·라디오 리스트가 16~24px인가.

크기 비례 — 컨트롤 크기에 따라 조정되는가.

선택 정확성 — 선택지가 명확히 구분되는가.

Before / After

/* ✅ 선택지 리스트 — 크기에 따라 16~24px */ .checkbox-list-small { display: flex; flex-direction: column; gap: 16px; } .checkbox-list-large { display: flex; flex-direction: column; gap: 24px; }

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

역할	책임
퍼블리셔/개발	선택지 리스트 간격을 크기에 따라 16~24px로 구현

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

체크박스·라디오 선택지가 있는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 선택지 리스트 간격이 16~24px인가요?

□ 컨트롤 크기에 따라 조정되나요?

□ 선택지가 붙어 잘못 선택되지 않나요?

❓ FAQ

Q1. 70편(세로 입력)과 같은가요? 원리가 같습니다(크기 비례 16~24px). 70편은 인풋, 71편은 체크박스·라디오 입니다. 둘 다 세로 리스트의 크기 비례 간격입니다. Q2. 왜 선택 정확성과 관련되나요? 선택지가 너무 붙으면 잘못 선택하기 쉽습니다(특히 터치). 충분한 간격이 선택 오류를 줄입니다. Q3. KRDS를 채택하면 자동인가요? KRDS 선택 컨트롤은 크기별 간격이 정의돼 있습니다. 채택하면 충족됩니다.

6. 마무리

DS-071의 메시지:

선택지 리스트도 크기에 따라 16~24px — 비례하되, 선택 정확성을 위해 충분히.

체크박스·라디오 리스트 간격은 크기에 비례(16~24px)하되, 선택지를 명확히 구분해 잘못 선택을 막습니다. 간격은 미관이자 조작 정확성의 문제죠.

다음 편은 가로형 선택 컨트롤을 다룹니다. DS-072 — “체크박스나 라디오 버튼을 가로형으로 사용 시 간격을 gap7(24px) 이상으로 한다.”

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

ViewCheck는 선택지 리스트 간격이 크기에 따라 16~24px로 적용됐는지를 진단합니다.

📚 참고 출처

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

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

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