목차는 얕을수록 좋다

KRDS CP-109 — 목록 수준은 가능한 한 1단계 수준으로 구성하되 수준 표현이 필요한 경우 최대 3단계까지만 사용하고 있다.

0. 들어가며 — 목차가 또 미로가 되면 안 된다

이번 229편은 페이지 목차를 가능한 한 1단계로 구성하되, 필요하면 최대 3단계까지만 쓰라는 규칙입니다.

페이지 목차도 깊어질 수 있습니다 — 대제목 아래 중제목, 그 아래 소제목까지 들여쓰며 중첩하면 트리가 깊어지죠. 그런데 목차가 너무 깊으면, 한눈에 페이지 구조를 보려던 목적이 무색해지고 목차 자체가 복잡한 미로가 됩니다. CP-109는 ’되도록 평평하게(1단계), 꼭 필요하면 최대 3단계’라는 깊이 기준을 줍니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 1단계 우선, 최대 3단계

CP-109 (컴포넌트 > 콘텐츠 내 탐색) “목록 수준은 가능한 한 1단계 수준으로 구성하되 수준 표현이 필요한 경우 최대 3단계까지만 사용하고 있다.”

페이지 목차의 계층을 기본은 1단계(평면 목록) 로 구성하고, 섹션 구조상 수준 표현이 꼭 필요한 경우에만 최대 3단계까지 중첩을 허용하라는 뜻입니다.

정리: 목차는 되도록 1단계 평면으로. 필요해도 3단계를 넘기지 마라. 이게 CP-109입니다.

2. 왜 얕게, 최대 3단계로 제한하나

페이지 목차의 핵심 가치는 ’한 페이지의 구조를 한눈에 보여주는 것’입니다. 사용자는 목차를 훑어 ’이 페이지엔 이런 섹션들이 있고, 원하는 데로 바로 갈 수 있구나’를 즉시 파악하려 하죠. 이 ’한눈에’가 성립하려면 목차가 단순하고 훑기 쉬워야 합니다. 그런데 목차가 깊게 중첩되면 이 단순함이 깨집니다.

왜 1단계가 기본인가. 평면(1단계) 목차는 섹션들이 같은 들여쓰기로 나란히 나열돼, 시선이 위→아래로 한 번에 훑고 지나갑니다. 구조 파악이 가장 빠르죠. 대부분의 문서는 주요 섹션을 1단계로 나열하는 것만으로 충분한 길잡이 가 됩니다 — 목차는 본문의 모든 소제목을 다 담는 ’완전한 트리’가 아니라, ’주요 길목’만 짚어주는 가벼운 도구가 이상적입니다. 그래서 KRDS는 가능한 한 1단계를 권합니다.

왜 깊으면 안 되나. 목차가 2단계, 3단계로 중첩되면 — 들여쓰기 단계가 늘어 시각적으로 복잡해지고, 항목 수도 급증해 목차 자체가 길어집니다. 사용자는 ‘구조를 보려고’ 목차를 열었는데 오히려 그 목차를 해독해야 하죠. 이는 사이드 메뉴의 깊이 제한(CP-092, 최대 2수준)이나 브레드크럼의 축약(CP-077~080)에서 본 것과 같은 원리입니다 — 내비게이션은 얕을수록 인지가 쉽다. 특히 우측 좁은 컬럼(CP-107)이나 모바일(CP-110)에 들어가는 목차는 공간이 제한적이라 깊은 중첩이 더 부담스럽습니다.

왜 그래도 3단계까지는 허용하나. 일부 문서는 정말로 ‘대-중-소’ 3수준의 구조를 가져, 그것을 평면으로만 나열하면 오히려 관계가 안 보일 수 있습니다. 이런 경우 수준 표현(들여쓰기 계층)이 구조 이해를 돕죠. 그래서 ’수준 표현이 필요한 경우’에 한해 최대 3단계까지 열어둡니다 — 단, 그 이상은 어떤 경우에도 금지입니다. 4단계 넘는 목차는 미로가 되니까요.

정리하면 — 목차의 깊이는 ’얕을수록 좋다’가 원칙이고(1단계 우선), 구조상 불가피할 때만 단계를 더하되 3단계가 절대 상한입니다. 그리고 그 단계(계층)는 시각적 들여쓰기뿐 아니라 시맨틱 마크업(중첩 <ul>)으로도 표현해 스크린 리더에 전달해야 하죠(CP-099의 사이드 메뉴 계층 시맨틱과 같은 맥락).

3. 점검 / 개선

무엇을 점검하나

1단계 우선 — 목차가 불필요하게 깊지 않고 가능한 한 평면인가.

3단계 상한 — 중첩이 어떤 경우에도 3단계를 넘지 않는가.

계층 표현 — 중첩이 있을 때 시각+시맨틱(중첩 <ul>)으로 전달되는가.

개선 방향

목차를 주요 섹션 위주 1단계로 단순화. 모든 소제목을 다 넣지 않기.

수준이 꼭 필요하면 최대 3단계, 중첩 <ul>로 시맨틱 계층화.

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

역할	책임
콘텐츠/편집	목차 깊이(1단계 우선) 결정
퍼블리셔/개발	최대 3단계 제한·시맨틱 계층 구현

기관 유형	CP-109 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (콘텐츠 내 탐색 사용 시)

긴·복잡한 문서에 페이지 목차를 쓰는 사이트에서 특히 중요합니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 목차가 가능한 한 1단계 평면으로 구성됐나요?

□ 중첩이 3단계를 넘지 않나요?

□ 중첩이 있을 때 시각+시맨틱(중첩 <ul>)으로 표현되나요?

❓ FAQ

Q1. 본문 소제목을 다 목차에 넣어야 하나요? 아닙니다. 목차는 주요 길목만 짚는 가벼운 도구입니다. 다 넣으면 깊고 길어져 오히려 불편합니다. Q2. 3단계가 꼭 필요한 문서는요? 대-중-소 구조가 분명한 경우 3단계까지 허용됩니다. 단 4단계 이상은 금지 입니다. Q3. 계층은 어떻게 표현하나요? 시각 들여쓰기 + 중첩 <ul> 시맨틱으로 표현해 스크린 리더에도 전달합니다.

6. 마무리

CP-109의 메시지:

목차는 얕을수록 좋다 — 1단계 우선, 꼭 필요하면 최대 3단계.

페이지 목차는 한눈에 구조를 보여주는 도구라 단순해야 합니다. 깊게 중첩하면 목차 자체가 미로가 되죠. 되도록 주요 섹션 1단계로 평평하게, 불가피할 때만 최대 3단계까지 허용합니다. 다음 편은 모바일에서의 목차 배치 — 제목과 본문 사이입니다.

다음 편 예고 ▶ 「230. (CP-110) [모바일] 콘텐츠 내 탐색은 제목과 본문 사이에 배치하고 있다.」

ViewCheck는 콘텐츠 내 탐색 목차의 계층 깊이가 1단계 우선·최대 3단계를 지키는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 콘텐츠 내 탐색(In-page navigation) 가이드 — https://www.krds.go.kr/html/site/component/component_09.html

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

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