목차는 목차처럼 보여야

KRDS CP-106 — 텍스트 길이에 따라 줄바꿈이 발생하지 않는 일관된 너비로 정의하여 버튼이나 다른 컨트롤과 혼동되지 않도록 하고 있다.

0. 들어가며 — 콘텐츠 내 탐색 그룹의 첫 규칙

이번 226편부터 콘텐츠 내 탐색(In-page navigation) 그룹(CP-106~113, 8개)으로 들어갑니다. 첫 규칙은 텍스트 길이에 따라 줄바꿈되지 않는 일관된 너비로 정의해, 버튼이나 다른 컨트롤과 혼동되지 않게 하라는 내용이죠.

콘텐츠 내 탐색은 긴 문서 안에서 ’이 페이지 안의 섹션들’로 바로 점프하게 해주는 목차형 내비게이션입니다 — 흔히 보는 ’페이지 목차(On this page)’죠. 그런데 이 목차의 항목들이 제각각 너비로 들쭉날쭉하면, 사용자는 이게 ’링크 목록’인지 ’버튼 묶음’인지 헷갈립니다. CP-106은 일관된 너비로 정돈해 목차임을 분명히 하라고 규정 합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 일관된 너비 + 컨트롤 혼동 방지

CP-106 (컴포넌트 > 콘텐츠 내 탐색) “텍스트 길이에 따라 줄바꿈이 발생하지 않는 일관된 너비로 정의하여 버튼이나 다른 컨트롤과 혼동되지 않도록 하고 있다.”

콘텐츠 내 탐색(페이지 목차)의 각 항목을, 텍스트 길이에 좌우되지 않는 일정한 너비로 정의해 줄바꿈을 막고, 그 외형이 버튼·입력창 같은 다른 컨트롤로 오인되지 않게 하라는 뜻입니다.

정리: 페이지 목차 항목은 일관된 너비로, 줄바꿈 없이, 버튼과 헷갈리지 않게 하라. 이게 CP-106입니다.

2. 왜 일관된 너비와 혼동 방지가 필요한가

콘텐츠 내 탐색은 한 페이지 안 섹션들의 목록입니다 — “1. 개요 / 2. 추진 배경 / 3. 주요 내용 / 4. 기대 효과”. 각 항목을 클릭하면 해당 섹션으로 스크롤·점프하죠. 이 목차가 제 역할을 하려면 사용자가 한눈에 ’아, 이건 페이지 안 목차구나’를 인지해야 합니다. 그런데 두 가지 시각 문제가 이 인지를 방해할 수 있죠.

① 들쭉날쭉한 너비. 항목 텍스트 길이가 제각각이라(“개요”는 짧고 “정보 접근성 향상을 위한 세부 추진 과제”는 긺) 그에 맞춰 각 항목의 너비도 제각각이면 — 목록이 정돈돼 보이지 않고 어수선합니다. 특히 항목에 배경·테두리 같은 박스 스타일이 있으면, 박스 크기가 글자 길이마다 달라져 들쭉날쭉한 계단 모양이 되죠. 또 긴 텍스트가 좁은 너비를 만나면 줄바꿈이 일어나, 한 항목이 두 줄로 접히며 목록 구조가 더 흐트러집니다. 그래서 일관된 너비로 정의해, 글자 길이와 무관하게 모든 항목이 같은 폭을 갖고 줄바꿈 없이 한 줄로 유지되게 합니다.

② 컨트롤과의 혼동. 더 중요한 문제입니다. 각 항목이 박스·배경·테두리로 감싸여 있으면, 사용자는 이를 버튼으로 오인할 수 있습니다 — ‘이걸 누르면 무슨 동작(제출·실행)이 일어나나?’ 하고요. 반대로 너무 입력창 처럼 생기면 ‘여기 뭘 입력하나?’ 싶죠. 콘텐츠 내 탐색 항목은 ‘섹션으로 점프하는 링크’ 일 뿐, 동작 버튼이나 입력 컨트롤이 아닙니다. 그래서 외형이 버튼·입력창과 명확히 구별되는 링크 목록처럼 보여야 하죠. 보통은 텍스트 링크 형태(밑줄·링크색)로, 박스형 버튼 스타일을 피해 구현합니다.

이 두 가지가 합쳐져 — 콘텐츠 내 탐색은 ’정돈된, 링크임이 분명한 목차’로 보입니다. 사용자는 망설임 없이 ’이건 페이지 안 이동 링크’임을 알고 활용하죠. 어수선하거나 버튼처럼 보이면, 사용자는 목차를 인지·신뢰하지 못하고 지나칩니다. 이는 이어지는 규칙들(CP-107 본문 우측 배치, CP-108 섹션 제목과 일치 등)과 함께 ’신뢰할 수 있는 페이지 목차’를 만드는 시각적 토대입니다.

3. 점검 / 개선

무엇을 점검하나

일관 너비 — 모든 목차 항목이 글자 길이와 무관하게 같은 너비인가.

줄바꿈 없음 — 긴 항목이 두 줄로 접히지 않는가(또는 말줄임 처리).

링크다움 — 항목이 버튼·입력창이 아니라 링크 목록으로 보이는가.

개선 방향

목차 컨테이너에 고정/최대 너비 지정, 항목에 white-space:nowrap + 필요 시 말줄임.

박스형 버튼 스타일 대신 텍스트 링크(밑줄·링크색) 형태로 구현.

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

역할	책임
디자이너	목차 너비·링크 외형(버튼 비혼동) 정의
퍼블리셔/개발	일관 너비·줄바꿈 방지·링크 스타일 구현

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

긴 정책·안내 문서에 페이지 목차를 쓰는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 목차 항목들이 글자 길이와 무관하게 같은 너비인가요?

□ 긴 항목이 두 줄로 줄바꿈되지 않나요?

□ 항목이 버튼·입력창이 아니라 링크 목록으로 보이나요?

❓ FAQ

Q1. 콘텐츠 내 탐색이 정확히 뭔가요? 한 페이지 안의 섹션으로 바로 점프하는 목차형 내비게이션(‘On this page’)입니다. 사이트 메뉴(메인/사이드)와 달리 같은 페이지 안 이동입니다. Q2. 긴 항목은 어떻게 처리하나요? 일관 너비를 유지하고 말줄임표로 줄이거나, 애초에 섹션 제목을 짧게 씁니다. 줄바꿈은 피합니다. Q3. 왜 버튼처럼 보이면 안 되나요? 사용자가 ’동작 버튼’으로 오인해 망설입니다. 섹션 점프 ’링크’임이 분명해야 합니다.

6. 마무리

CP-106의 메시지:

목차는 목차처럼 보여야 — 일관된 너비로, 줄바꿈 없이, 버튼과 헷갈리지 않게.

콘텐츠 내 탐색은 페이지 안 섹션 점프 목차입니다. 항목 너비가 들쭉날쭉하거나 버튼처럼 보이면 사용자가 목차임을 인지·신뢰하지 못하죠. 일관 너비로 정돈하고 링크 외형을 유지해 ’신뢰할 수 있는 목차’로 보이게 해야 합니다. 다음 편은 그 배치 위치 — 본문 우측입니다.

다음 편 예고 ▶ 「227. (CP-107) 콘텐츠 내 탐색은 본문 우측에 배치하여 표시하고 있다.」

ViewCheck는 콘텐츠 내 탐색이 일관된 너비로 컨트롤과 혼동되지 않게 구현됐는지를 진단합니다.

📚 참고 출처

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

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

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