목차와 제목이 같아야

KRDS CP-108 — 개요 목록 텍스트는 연결된 섹션 제목과 일치하는 내용으로 제공하고 있다.

0. 들어가며 — 눌렀더니 다른 제목이 나오면

이번 228편은 목차(개요 목록) 텍스트가 연결된 섹션 제목과 일치하게 하라는 규칙입니다.

페이지 목차에 “3. 주요 내용”이라 적혀 있어 클릭했는데, 점프해 보니 그 섹션 제목이 “핵심 추진 사항”이라면? 사용자는 “내가 맞게 온 건가?” 하고 헷갈립니다. 목차 항목과 그것이 가리키는 섹션 제목은 같은 말이어야 사용자가 ’아, 여기가 그 섹션이구나’를 확신하죠. CP-108은 이 일치를 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 목차-제목 일치

CP-108 (컴포넌트 > 콘텐츠 내 탐색) “개요 목록 텍스트는 연결된 섹션 제목과 일치하는 내용으로 제공하고 있다.”

콘텐츠 내 탐색(페이지 목차)의 각 항목 텍스트가, 그 항목이 가리키는 본문 섹션의 제목과 동일(또는 일치하는 내용) 하게 하라는 뜻입니다.

정리: 목차 항목 텍스트 = 그 섹션의 제목. 다르게 적지 마라. 이게 CP-108입니다.

2. 왜 목차와 제목이 일치해야 하나

페이지 목차는 본문 섹션 제목들의 ’거울’입니다 — 목차를 보면 본문에 어떤 섹션들이 있는지 미리 알고, 항목을 클릭하면 그 섹션으로 갑니다. 이 거울이 제 역할을 하려면 목차 항목 = 섹션 제목이라는 1:1 대응이 지켜져야 하죠. 둘이 어긋나면 여러 문제가 생깁니다:

① 도착 확인 실패. 사용자가 “3. 주요 내용”을 클릭해 점프했을 때, 그 자리의 섹션 제목도 “주요 내용”이어야 ‘제대로 도착했다’고 확신합니다. 그런데 제목이 “핵심 추진 사항”이라면 — 사용자는 ’잘못 왔나? 페이지가 바뀐 건가?’ 하고 멈칫하죠. 특히 긴 문서에서 점프 후 자기 위치를 제목으로 확인하는데, 그 단서가 어긋나면 길을 잃습니다.

② 예측 불일치. 목차는 본문을 읽기 전 ‘미리보기’ 역할도 합니다. 목차 항목으로 ’이 섹션엔 이런 내용이 있겠구나’를 예상하죠. 항목 텍스트와 실제 제목이 다르면 이 예측이 빗나가, 목차에 대한 신뢰가 떨어집니다.

③ 접근성 혼란. 스크린 리더 사용자는 목차 링크를 듣고 점프한 뒤, 도착한 섹션의 제목(<h2> 등)을 다시 듣습니다. 둘이 다르면 ‘내가 들은 링크와 도착한 제목이 왜 다르지?’ 하는 혼란이 가중되죠. 비시각 사용자에게는 이 일치가 더욱 중요합니다 — 시각적 맥락 없이 텍스트에만 의존하니까요.

그래서 CP-108은 목차 텍스트를 섹션 제목과 일치시키라고 합니다. 가장 안전하고 권장되는 구현은 — 섹션 제목을 단일 출처(SSOT) 로 삼아, 목차를 그 제목들로부터 자동 생성하는 것입니다. 제목을 바꾸면 목차도 자동으로 따라 바뀌니, 수동 관리에서 생기는 불일치가 원천 차단되죠. 수동으로 목차를 적는다면, 제목을 수정할 때마다 목차도 함께 고쳐야 하는데 누락되기 쉽습니다.

’일치하는 내용’이라는 표현은 — 글자 한 자까지 똑같아야 한다기보다, 사용자가 동일한 섹션임을 확신할 수 있을 만큼 의미·핵심 단어가 같아야 한다는 뜻입니다. 다만 혼란을 막으려면 가능한 한 동일하게 맞추는 것이 안전 하죠. 목차에서만 번호를 붙이거나 약간 다듬는 정도는 허용되지만, 아예 다른 표현으로 바꾸는 것은 피합니다.

이 규칙은 CP-106(외형)·CP-107(위치)에 이어 목차의 ’내용 정확성’을 담당합니다 — 정돈된 외형, 적절한 위치, 그리고 제목과 일치하는 텍스트가 합쳐져 믿을 수 있는 페이지 목차가 완성됩니다.

3. 점검 / 개선

무엇을 점검하나

텍스트 일치 — 각 목차 항목이 가리키는 섹션 제목과 일치하는가.

점프 후 확인 — 클릭해 도착한 섹션의 제목이 목차 항목과 같은가.

자동 생성 — 목차가 섹션 제목에서 자동 생성되어 동기화되는가.

개선 방향

섹션 제목(<h2> 등)을 SSOT로 삼아 목차 자동 생성.

수동 관리 시 제목 수정과 목차 수정을 함께(누락 방지).

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

역할	책임
콘텐츠/편집	목차-제목 텍스트 일치 유지
퍼블리셔/개발	제목 기반 목차 자동 생성 구현

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

페이지 목차를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 각 목차 항목이 가리키는 섹션 제목과 일치하나요?

□ 클릭해 도착한 섹션 제목이 목차 항목과 같나요?

□ 목차가 섹션 제목에서 자동 생성되나요?

❓ FAQ

Q1. 글자 하나까지 똑같아야 하나요? 핵심 단어·의미가 같아 동일 섹션임을 확신할 정도면 됩니다. 다만 가능한 한 동일하게 맞추는 것이 안전합니다. Q2. 목차에 번호를 붙여도 되나요? 번호 추가 정도는 괜찮습니다. 아예 다른 표현으로 바꾸는 것이 문제입니다. Q3. 어떻게 불일치를 막나요? 섹션 제목을 출처로 목차를 자동 생성하면, 제목 변경 시 목차도 자동 갱신되어 불일치가 사라집니다.

6. 마무리

CP-108의 메시지:

목차와 제목이 같아야 — 개요 목록 텍스트는 섹션 제목과 일치한다.

페이지 목차는 섹션 제목의 거울입니다. 목차 항목과 도착 섹션 제목이 다르면 사용자는 ‘제대로 왔나’ 헷갈리고 목차를 불신하죠. 제목을 출처로 목차를 자동 생성하면 일치가 보장됩니다. 다음 편은 목차의 깊이 — 가능한 한 1단계, 최대 3단계입니다.

다음 편 예고 ▶ 「229. (CP-109) 목록 수준은 가능한 한 1단계 수준으로 구성하되 수준 표현이 필요한 경우 최대 3단계까지만 사용하고 있다.」

ViewCheck는 콘텐츠 내 탐색 목차 텍스트가 섹션 제목과 일치하는지를 진단합니다.

📚 참고 출처

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

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

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