좁으면 제목 아래로

KRDS CP-110 — [모바일] 콘텐츠 내 탐색은 제목과 본문 사이에 배치하고 있다.

0. 들어가며 — 우측 여백이 없는 화면

이번 230편은 모바일에서 콘텐츠 내 탐색(페이지 목차)을 제목과 본문 사이에 배치하라는 규칙입니다.

데스크톱에선 목차를 본문 우측에 뒀습니다(CP-107). 하지만 모바일은 가로가 좁아 우측 여백이 없죠. 그래서 모바일 에서는 목차를 본문 위쪽 — 정확히는 페이지 제목과 본문 시작 사이로 옮깁니다. 사용자가 본문을 읽기 전에 목차를 먼저 보고, 원하는 섹션으로 점프할 수 있게요. 데스크톱 우측 → 모바일 제목 아래로 반응형 전환하는 것입니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 모바일은 제목-본문 사이

CP-110 (컴포넌트 > 콘텐츠 내 탐색) [모바일] “콘텐츠 내 탐색은 제목과 본문 사이에 배치하고 있다.”

모바일 등 좁은 화면에서는 페이지 목차를 본문 우측이 아니라, 페이지 제목 바로 아래 · 본문 시작 위(제목과 본문 사이)에 두라는 뜻입니다.

정리: 모바일 목차는 제목과 본문 사이에 배치하라. 이게 CP-110입니다.

2. 왜 제목과 본문 사이인가

모바일은 세로로 긴 단일 컬럼 레이아웃입니다 — 요소들이 위에서 아래로 한 줄로 흐르죠. 데스크톱처럼 본문 옆에 별도 컬럼(우측 목차)을 둘 가로 공간이 없습니다. 그래서 목차를 본문과 같은 흐름 안에 끼워 넣되, 어디에 끼울지가 문제죠. CP-110은 그 자리를 제목과 본문 사이로 정합니다. 이유는 분명합니다.

① 읽기 흐름상 자연스럽다. 모바일 사용자는 위→아래로 스크롤하며 읽습니다. 페이지 제목(이 문서가 무엇인지) 을 본 직후, 본문을 읽기 전에 목차를 만나면 — ‘이 문서엔 이런 섹션들이 있구나’를 먼저 파악하고, 필요하면 원하는 섹션으로 바로 점프합니다. ’제목 → 목차(미리보기) → 본문’ 순서가 자연스러운 인지 흐름이죠. 목차가 본문 중간이나 끝에 있으면, 정작 점프 도구가 필요한 시점(읽기 시작 전)에 안 보입니다.

② 점프의 실효성. 목차의 핵심 기능은 ’긴 본문을 다 스크롤하지 않고 원하는 섹션으로 바로 가기’입니다. 그런데 모바일에서 본문은 매우 길어 세로로 한참 이어지죠. 목차가 본문 시작 전에 있어야 — 사용자가 긴 본문에 진입하기 전에 목차에서 목표 섹션을 골라 점프할 수 있습니다. 본문을 한참 읽다 만나는 목차는 이미 늦죠.

③ 데스크톱 우측의 대체. 데스크톱에서 우측 목차가 하던 ‘본문과 나란히, 항상 곁에’ 역할을, 모바일에서는 ’본문 바로 위’가 대신합니다. 우측 컬럼이 불가능한 좁은 화면에서 가장 가까운 대안이죠. 사용자가 스크롤하면 목차는 위로 사라지지만, 필요하면 맨 위로 올려 다시 볼 수 있고, 일부 구현은 목차를 접을 수 있는(아코디언/토글) 형태로 두어 본문 공간을 아끼기도 합니다.

핵심은 — 목차는 화면 너비에 따라 위치를 바꾸되 기능(본문 전 섹션 점프)은 유지한다는 반응형 원칙입니다. 넓으면 우측(CP-107), 좁으면 제목 아래(CP-110)로요. 이는 사이드 메뉴(CP-096·097 모바일 처리)나 브레드크럼 (CP-084 모바일 축약)에서 본 ’좁은 화면 대응’의 콘텐츠 내 탐색 버전입니다.

바로 다음 편 CP-111도 ’제목과 본문 사이 배치’를 다시 언급하며 거기에 ’키보드 접근·조작’을 더합니다 — 즉 CP-110이 모바일 배치 위치, CP-111이 그 배치 + 키보드 접근성으로, 함께 목차의 위치·조작을 규정하죠.

3. 점검 / 개선

무엇을 점검하나

모바일 위치 — 좁은 화면에서 목차가 제목과 본문 사이에 있는가.

본문 전 노출 — 사용자가 본문 읽기 전에 목차를 만나는가.

반응형 전환 — 데스크톱 우측(CP-107) ↔ 모바일 제목 아래로 전환되는가.

개선 방향

반응형 분기: 데스크톱 우측 컬럼 / 모바일 제목-본문 사이.

필요 시 모바일 목차를 접기(토글)로 본문 공간 절약.

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

역할	책임
디자이너	모바일 목차 위치·반응형 전환 설계
퍼블리셔/개발	제목-본문 사이 배치·반응형 구현

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

모바일 트래픽이 있고 페이지 목차를 쓰는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모바일에서 목차가 제목과 본문 사이에 있나요?

□ 사용자가 본문 읽기 전에 목차를 만나나요?

□ 데스크톱 우측 ↔ 모바일 제목 아래로 전환되나요?

❓ FAQ

Q1. 모바일에서도 우측에 두면 안 되나요? 좁은 화면엔 우측 여백이 없어 본문이 짓눌립니다. 제목 아래 단일 컬럼 흐름에 끼우는 게 정석입니다. Q2. 목차가 본문을 너무 밀어내지 않나요? 접기(토글) 형태로 두면 평소엔 접혀 있다가 필요할 때 펼쳐 공간을 아낄 수 있습니다. Q3. 본문 중간/끝에 두면요? 점프 도구가 필요한 시점(읽기 시작 전)에 안 보여 실효성이 떨어집니다. 제목 아래가 적절합니다.

6. 마무리

CP-110의 메시지:

좁으면 제목 아래로 — 모바일 목차는 제목과 본문 사이에 배치한다.

모바일은 우측 컬럼을 둘 수 없어, 목차를 제목과 본문 사이에 끼웁니다. 본문 읽기 전 미리보기·점프 도구로 가장 자연스러운 자리죠. 넓으면 우측(CP-107), 좁으면 제목 아래(CP-110)로 위치는 바뀌되 기능은 유지하는 반응형 원칙입니다. 다음 편은 이 배치에 키보드 접근성을 더합니다.

다음 편 예고 ▶ 「231. (CP-111) 키보드로 접근과 조작이 가능하도록 구현하고, 제목과 본문 사이에 배치하고 있다.」

ViewCheck는 모바일에서 콘텐츠 내 탐색이 제목-본문 사이에 배치되는지를 진단합니다.

📚 참고 출처

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

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

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