깊어야 셋까지

KRDS CP-251 — 목록은 3수준 이내로 구성하고 있다.

0. 들어가며 — 들여쓰기가 너무 깊어지면

이번 371편은 목록을 3수준 이내로 구성하라는 규칙입니다.

앞 편(CP-250)에서 들여쓰기로 계층을 표현했습니다. 그런데 계층이 4수준, 5수준으로 깊어지면 — 들여쓰기가 과해져 화면 오른쪽으로 한참 밀리고, 사용자는 ‘몇 단계나 들어왔지?’ 하며 구조를 놓치죠. CP-251은 목록 계층을 3수준 이내로 제한해 단순하게 유지하라고 규정합니다. 사이드 메뉴 2수준(CP-092), 콘텐츠 내 탐색 3단계(CP-109) 정신 이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 3수준 이내

CP-251 (컴포넌트 > 텍스트 목록) “목록은 3수준 이내로 구성하고 있다.”

목록의 계층(중첩) 깊이를 최대 3수준으로 제한해, 사용자가 구조를 파악하기 쉽게 하라는 뜻입니다.

정리: 목록 계층은 최대 3수준 이내로 구성하라. 이게 CP-251입니다.

2. 왜 3수준 이내인가

목록 계층은 정보의 구조를 표현하지만, 너무 깊어지면 — 표현 수단(들여쓰기)도, 사용자의 인지도 한계에 부딪힙 니다. 이는 사이드 메뉴 2수준 제한(CP-092), 콘텐츠 내 탐색 3단계(CP-109), 아코디언 중첩 금지(CP-193)에서 반복된 ’깊은 계층은 미로’라는 원리의 목록 버전이죠.

깊은 계층의 문제:

들여쓰기 과다 — 계층이 깊어질수록 하위 항목이 점점 더 안으로 들여 써집니다(CP-250). 4수준, 5수준이면 — 맨 아래 항목이 화면 오른쪽으로 한참 밀려, 텍스트가 들어갈 공간이 좁아지고(좁은 화면에선 줄바꿈 폭증), 레이아 웃이 어색해지죠.

인지 부담 — 사람이 한 번에 머릿속에 유지하는 계층 깊이에는 한계가 있습니다. 1수준 → 2수준 → 3수준 정도는 ’대분류 > 중분류 > 소분류’로 따라가지만, 4수준 이상이면 — ’내가 지금 몇 단계 깊이의 어느 항목에 있는지’를 추적하기 어렵죠. 깊은 중첩 목록은 ’미로’처럼 느껴집니다.

구조 파악 실패 — 깊은 목록은 전체 구조가 한눈에 안 들어옵니다. 사용자가 상위-하위 관계를 여러 단계 거슬러 올라가며 파악해야 하죠.

그래서 CP-251은 — 목록을 3수준 이내로 제한합니다. 3수준(대-중-소)이면 — 대부분의 정보 구조를 표현하기에 충분하면서, 사용자가 따라갈 수 있는 적정 깊이죠. 들여쓰기도 과하지 않고요.

3수준을 넘으면? 정보가 정말 3수준보다 깊다면 — 목록을 더 깊게 중첩하지 말고 구조를 재설계합니다:

상위 분류로 묶기 — 깊은 항목들을 상위 개념으로 묶어 깊이를 줄임.

섹션 분리 — 깊은 하위를 별도 섹션·제목 아래로 분리해, 한 목록의 깊이를 줄임.

다른 형식 — 깊고 복잡한 구조는 목록보다 다른 형식(표, 페이지 분리, 사이드 메뉴 등)이 나을 수 있죠.

핵심은 — 목록을 깊게 파서 미로를 만들지 말고, 3수준 안에서 단순하게 유지하거나 구조를 재설계하라는 것입니다. 콘텐츠 내 탐색(CP-109)도 같은 3단계 제한을 뒀듯, 목록도 3수준이 인지 가능한 적정선이죠.

시맨틱·접근성과의 관계. 3수준 이내로 제한하면 — 중첩 마크업(CP-250·252)도 단순해지고, 스크린 리더 사용자도 계층을 따라가기 쉽죠. 깊은 중첩은 스크린 리더가 “목록, 목록 안의 목록, 또 그 안의 목록…”을 여러 번 안내해 혼란스럽습니다. 3수준 제한이 시각·접근성 양쪽에서 구조를 단순하게 유지하죠.

이 규칙은 CP-250(들여쓰기 구분)과 짝입니다 — 계층을 들여쓰기로 명확히 하되(250), 그 깊이는 3수준으로 제한 (251). 함께 ‘명확하면서도 단순한’ 계층 목록을 만듭니다.

정리하면 — 목록 계층이 깊으면 들여쓰기 과다·인지 부담·구조 파악 실패가 생기므로, 3수준 이내로 제한해 단순하게 유지하고, 더 깊으면 구조를 재설계해야 합니다.

3. 점검 / 개선

무엇을 점검하나

3수준 이내 — 목록 계층이 3수준을 넘지 않는가.

들여쓰기 적정 — 깊은 중첩으로 들여쓰기가 과하거나 레이아웃이 어색하지 않은가.

재설계 — 3수준을 넘는 정보는 구조 재설계·다른 형식으로 처리됐는가.

개선 방향

목록 계층을 3수준 이내로. 4수준 이상은 상위 묶기·섹션 분리·다른 형식으로.

깊은 구조는 표·페이지 분리·사이드 메뉴 검토.

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

역할	책임
콘텐츠/기획	목록 계층 깊이(3수준 이내) 설계
퍼블리셔/개발	3수준 제한 구현

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

계층이 깊은 목록을 쓰는 사이트에서 특히 중요합니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 목록 계층이 3수준을 넘지 않나요?

□ 깊은 중첩으로 들여쓰기가 과하거나 레이아웃이 어색하지 않나요?

□ 3수준을 넘는 정보는 구조 재설계·다른 형식으로 처리됐나요?

❓ FAQ

Q1. 왜 3수준인가요? 대-중-소 3수준이면 대부분의 구조를 표현하기 충분하고, 사용자가 따라갈 수 있는 적정 깊이입니다. 더 깊으면 미로가 되죠. Q2. 정보가 더 깊으면요? 목록을 더 파지 말고 상위로 묶거나 섹션 분리, 또는 표·페이지 분리 등 다른 형식을 검토합니다. Q3. 사이드 메뉴는 2수준(CP-092)인데 목록은 3수준인가요? 컴포넌트마다 적정 깊이가 다릅니다. 목록은 콘텐츠 내 탐색(CP-109)처럼 3수준이 상한입니다.

6. 마무리

CP-251의 메시지:

깊어야 셋까지 — 목록 계층은 3수준 이내로 구성하라.

계층이 깊으면 들여쓰기가 과해지고 사용자가 미로에 빠집니다. 3수준이면 대부분 구조를 표현하면서 따라갈 수 있는 적정선이죠. 더 깊으면 구조를 재설계합니다. CP-250(들여쓰기)과 함께 명확하고 단순한 계층을 만듭니다. 다음 편은 목록 유형별 적합한 태그입니다.

**다음 편 예고 ▶ 「372. (CP-252) 목록 유형에 적합한 태그를 사용하고 있다. (글머리 기호는

,

태그, 번호로 구분은

,

태그로 마크업)」**

ViewCheck는 목록 계층이 3수준 이내로 구성됐는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 텍스트 목록(Text list) 가이드 — https://www.krds.go.kr/html/site/component/component_23.html

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

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