목차는 본문 오른쪽에

KRDS CP-107 — 콘텐츠 내 탐색은 본문 우측에 배치하여 표시하고 있다.

0. 들어가며 — 본문을 가리지 않는 자리

이번 227편은 콘텐츠 내 탐색(페이지 목차)을 본문 우측에 배치하라는 규칙입니다.

페이지 목차는 본문과 함께 보여야 쓸모가 있습니다 — 본문을 읽다가 ’다른 섹션으로 점프’하려면 목차가 늘 곁에 있어야 하죠. 그럼 어디에 둘까요? KRDS는 데스크톱 기준 본문 우측으로 정합니다. 좌측 사이드 메뉴와 충돌하지 않고, 본문 읽기를 방해하지 않으면서, 목차를 늘 곁에 두는 자리죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 본문 우측 배치

CP-107 (컴포넌트 > 콘텐츠 내 탐색) “콘텐츠 내 탐색은 본문 우측에 배치하여 표시하고 있다.”

데스크톱 등 넓은 화면에서 콘텐츠 내 탐색(페이지 목차)을 본문 영역의 오른쪽에 두어, 본문과 나란히 보이게 하라는 뜻입니다(모바일 배치는 CP-110·111에서 별도 규정).

정리: 페이지 목차는 본문 우측에 배치하라. 이게 CP-107입니다.

2. 왜 본문 우측인가

페이지 목차의 위치는 몇 가지 제약과 관습을 함께 고려해 정해집니다.

① 좌측은 이미 점유돼 있다. 공공 사이트의 일반적 레이아웃에서 본문 왼쪽에는 사이드 메뉴(섹션 내 탐색, CP-089~105)가 옵니다. 만약 페이지 목차까지 왼쪽에 두면 — 좌측에 ’사이트 탐색(사이드 메뉴)’과 ’페이지 안 탐색 (목차)’이 겹쳐 혼란스럽고, 본문이 양쪽 사이에 끼어 더 좁아지죠. 그래서 페이지 목차는 비어 있는 오른쪽으로 보냅니다. 역할이 다른 두 내비게이션(사이트 탐색=좌, 페이지 탐색=우)을 좌우로 분리하는 셈입니다.

② 본문 읽기를 방해하지 않는다. 한국어·영어는 왼→오로 읽습니다. 본문 콘텐츠는 좌측~중앙에 흐르고, 시선은 주로 그쪽에 머물죠. 페이지 목차를 본문 오른쪽 여백에 두면, 본문 읽기 흐름을 침범하지 않으면서도 시야 주변(peripheral)에 늘 머물러 필요할 때 바로 쓸 수 있습니다. 목차는 ’보조 도구’라 본문보다 시각적 우선순위가 낮아야 하는데, 우측 배치가 이 위계에 맞죠.

③ 일관성·관습. ’페이지 우측의 On this page 목차’는 기술 문서·정부 사이트에서 널리 쓰이는 관습적 패턴 입니다. 사용자가 이미 학습한 위치라, 우측에 두면 ’아, 여기 페이지 목차구나’를 빠르게 인지하죠. 보통 본문을 스크롤해도 목차가 따라오도록 고정(sticky) 처리해, 페이지 어디서든 목차에 접근하게 합니다.

핵심은 — 페이지 목차는 본문과 공존하되 본문을 방해하지 않는 자리에 있어야 한다는 것입니다. 우측은 좌측 사이드 메뉴와의 충돌을 피하고, 읽기 흐름을 보존하며, 관습에 맞는 최적의 위치죠. 다만 이 ‘우측’ 원칙은 넓은 화면(데스크톱) 기준입니다 — 모바일은 우측 여백이 없으므로, CP-110·111에 따라 제목과 본문 사이로 옮깁니다. 즉 넓으면 우측, 좁으면 제목 아래로 반응형 대응을 하죠.

연결해서 — CP-106(일관 너비·링크다움)에서 목차의 ’외형’을, CP-107에서 ’위치’를 정합니다. 정돈된 외형 + 적절한 위치가 합쳐져 사용자가 페이지 목차를 신뢰하고 활용하게 됩니다.

3. 점검 / 개선

무엇을 점검하나

우측 배치 — 데스크톱에서 페이지 목차가 본문 오른쪽에 있는가.

사이드 메뉴 비충돌 — 좌측 사이드 메뉴와 겹치지 않는가.

고정 접근 — 스크롤 시에도 목차에 접근 가능한가(sticky 등).

개선 방향

데스크톱 레이아웃에서 페이지 목차를 본문 우측 컬럼에 배치.

필요 시 sticky로 스크롤 추적. 모바일은 제목-본문 사이로 전환(CP-110·111).

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

역할	책임
디자이너	데스크톱 우측 배치·반응형 전환 설계
퍼블리셔/개발	우측 컬럼·sticky·반응형 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 데스크톱에서 페이지 목차가 본문 우측에 있나요?

□ 좌측 사이드 메뉴와 겹치지 않나요?

□ 스크롤해도 목차에 접근할 수 있나요(고정 등)?

❓ FAQ

Q1. 왜 왼쪽이 아니라 오른쪽인가요? 왼쪽은 사이드 메뉴(사이트 탐색)가 점유합니다. 역할이 다른 페이지 목차는 오른쪽으로 분리해 충돌을 피합니다. Q2. 모바일도 우측인가요? 아닙니다. 모바일은 우측 여백이 없어 제목과 본문 사이로 옮깁니다(CP-110·111). Q3. 목차를 고정(sticky)해야 하나요? 필수는 아니지만, 스크롤 시 따라오면 긴 문서에서 어디서든 점프할 수 있어 권장됩니다.

6. 마무리

CP-107의 메시지:

목차는 본문 오른쪽에 — 사이드 메뉴와 충돌 없이, 읽기를 방해하지 않게.

페이지 목차는 본문과 공존하되 방해하지 않아야 합니다. 좌측은 사이드 메뉴가 점유하므로 우측에 두어 충돌을 피하고, 읽기 흐름을 보존하며, 관습에도 맞죠. 단 이는 데스크톱 기준이고, 모바일은 제목-본문 사이로 전환합니다. 다음 편은 목차 텍스트와 섹션 제목의 일치입니다.

다음 편 예고 ▶ 「228. (CP-108) 개요 목록 텍스트는 연결된 섹션 제목과 일치하는 내용으로 제공하고 있다.」

ViewCheck는 콘텐츠 내 탐색이 본문 우측에 적절히 배치됐는지를 진단합니다.

📚 참고 출처

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

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

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