항목 사이를 넉넉하게

KRDS BP-038 — 목록을 구성하고 있는 항목들이 서로 명확하게 구분될 수 있도록 충분한 간격을 제공하고 있다.

0. 들어가며 — 항목이 다닥다닥 붙어 있으면

이번 604편은 목록 항목들이 서로 명확하게 구분되도록 충분한 간격을 제공하라는 규칙입니다.

목록 항목이 — 간격 없이 다닥다닥 붙어 있으면, 어디서 한 항목이 끝나고 다음이 시작되는지 헷갈리고 답답하죠. BP-038은 항목 간 충분한 간격을 규정합니다. 라디오·체크박스 옵션 간격(CP-283·291)의 목록 적용이죠. 이번 편을 풀어냅니다.

1. 원문 — 항목 구분 위한 충분한 간격

BP-038 (기본 패턴 > 목록 탐색) “목록을 구성하고 있는 항목들이 서로 명확하게 구분될 수 있도록 충분한 간격을 제공하고 있다.”

목록의 각 항목이 서로 명확히 구별되도록 항목 사이에 충분한 간격을 제공하라는 뜻입니다.

정리: 목록 항목 사이에 충분한 간격을 두라. 이게 BP-038입니다.

2. 왜 충분한 간격인가

목록은 여러 항목을 세로로 나열합니다. 이 항목들이 서로 명확히 구분돼야, 사용자가 각 항목을 또렷이 인식 하죠. 그 핵심이 항목 간 간격입니다. BP-038은 충분한 간격을 요구합니다.

간격이 부족할 때의 문제:

항목 경계 모호 항목들이 간격 없이 다닥다닥 붙어 있으면, 어디서 한 항목이 끝나고 다음이 시작되는지 헷갈립니다. 특히 각 항목이 여러 줄(제목+요약+날짜)이면, 간격이 없으면 어느 줄이 어느 항목 것인지 모르죠.

답답함·피로 — 빽빽한 목록은 — 시각적으로 답답하고, 읽기 피로합니다. 항목을 또렷이 구별해 스캔하기 어렵죠.

오선택 — 항목이 클릭 가능하면(목록에서 항목 선택), 붙어 있으면 — 옆 항목을 잘못 누르기 쉽습니다(터치 환경에서 특히, 라디오·체크박스 간격 CP-283·291 정신).

그래서 BP-038은 — 항목 사이에 충분한 간격을 두라고 합니다:

항목 간 간격 — 각 항목 사이에 — 충분한 세로 간격(패딩·마진)을 둬, 항목이 또렷이 분리되게 합니다. 한 항목의 내용(제목·요약·메타)이 한 묶음으로 보이고, 항목 간에는 여백으로 구분되게요.

구분선·배경 보조 간격에 더해 구분선(divider)이나 항목별 배경(카드·스트라이프)으로 구분을 보조할 수 있죠. 다만 과한 구분선·배경보다 충분한 간격이 기본입니다.

클릭 영역·터치 — 항목이 클릭 가능하면 — 충분한 간격과 함께 각 항목의 클릭/터치 영역도 충분히(오선택 방지, 터치 타깃 정신).

간격과 밀도의 균형. 간격이 충분하되 — 너무 과해서 한 화면에 너무 적은 항목만 보이면(스크롤 과다) 비효율적 이죠. 명확히 구분되면서도 적절한 밀도를 유지합니다. 8pt 그리드 등 디자인 시스템의 간격 체계를 따르면 일관되고요.

가독성과 접근성. 충분한 간격은 — 시각적 가독성뿐 아니라, 저시력·인지 장애 사용자가 항목을 구별하기 쉽게 합니다. 모두에게 이로운 보편적 가독성이죠.

이 규칙은 목록 탐색의 ’항목 구분 명료성’을 담당합니다 — 항목 간 충분한 간격으로(038), 각 항목이 또렷이 구별되고 스캔·선택하기 쉽게 하죠. BP-037(논리적 정렬)이 순서라면, BP-038은 각 항목의 시각적 분리입니다.

정리하면 — 목록 항목이 간격 없이 붙어 있으면 경계가 모호하고 답답하며 오선택이 생기므로, 항목 사이에 충분한 간격을 둬 각 항목이 명확히 구분되게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

항목 간 간격 — 항목 사이에 충분한 세로 간격이 있어 또렷이 구분되는가.

경계 명확 — 여러 줄 항목도 어느 줄이 어느 항목인지 분명한가.

오선택 방지 — 클릭 가능 항목이 붙어 있어 오선택되지 않는가.

개선 방향

항목 사이 충분한 세로 간격(디자인 시스템 간격 체계). 한 항목 내용은 한 묶음으로.

필요시 구분선·배경 보조. 클릭 영역·터치 충분히. 간격·밀도 균형.

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

역할	책임
디자이너	목록 항목 간격 정의
퍼블리셔/개발	간격 구현

기관 유형	BP-038 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (목록 사용 시)

목록을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 항목 사이에 충분한 세로 간격이 있어 또렷이 구분되나요?

□ 여러 줄 항목도 어느 줄이 어느 항목인지 분명한가요?

□ 클릭 가능 항목이 붙어 있어 오선택되지 않나요?

❓ FAQ

Q1. 간격이 없으면 뭐가 문제죠? 항목 경계가 모호해 어디서 끝나고 시작하는지 헷갈리고, 답답하며, 클릭 시 옆 항목을 잘못 누릅니다. Q2. 간격을 너무 넓히면요? 한 화면에 항목이 너무 적게 보여 스크롤이 과해집니다. 명확히 구분되면서 적절한 밀도를 유지하죠. Q3. 구분선만으로 충분한가요? 충분한 간격이 기본이고, 구분선·배경은 보조입니다. 간격 없이 선만 있으면 여전히 답답하죠.

6. 마무리

BP-038의 메시지:

항목 사이를 넉넉하게 — 목록 항목이 명확히 구분되도록 충분한 간격을 제공하라.

항목이 간격 없이 붙어 있으면 경계가 모호하고 답답하며 오선택이 생깁니다. 충분한 간격으로 각 항목이 또렷이 구분 되게 하는 게 핵심이죠. 다음 편은 강조 컴포넌트 절제입니다.

다음 편 예고 ▶ 「605. (BP-039) 강조를 위한 아이콘, 배지, 태그 등의 컴포넌트를 과도하게 사용하고 있지 않다.」

ViewCheck는 목록 항목 간 충분한 간격을 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 목록 탐색 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_04.html

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

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