긴 글 어디쯤인지 보이게

KRDS BP-056 — 화면 너비가 충분한 경우 콘텐츠 내 탐색을 표시하고 본문 우측의 일관된 위치에 고정하여 제공하고 있다.

0. 들어가며 — 긴 콘텐츠에서 길을 잃지 않게

이번 622편은 화면 너비가 충분한 경우 콘텐츠 내 탐색(목차)을 표시하고 본문 우측의 일관된 위치에 고정하라는 규칙입니다.

긴 콘텐츠를 — 읽다 보면 내가 어디쯤인지, 다른 섹션이 뭔지 모르죠. 콘텐츠 내 탐색(In-page navigation, 목차)이 — 우측에 고정돼 있으면 한눈에 보입니다. BP-056은 이를 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 콘텐츠 내 탐색 우측 고정

BP-056 (기본 패턴 > 상세 정보 확인) “화면 너비가 충분한 경우 콘텐츠 내 탐색을 표시하고 본문 우측의 일관된 위치에 고정하여 제공하고 있다.”

화면이 넓을 때 콘텐츠 내 탐색(목차)을 본문 우측 일관된 위치에 고정해 제공하라는 뜻입니다.

정리: 넓은 화면에선 콘텐츠 내 탐색을 본문 우측에 고정 제공하라. 이게 BP-056입니다.

2. 왜 콘텐츠 내 탐색 우측 고정인가

긴 콘텐츠(가이드·정책 설명·긴 안내문)는 여러 섹션으로 구성됩니다. 사용자가 스크롤하며 읽다 보면, ‘지금 어느 섹션인지’, ‘다른 섹션엔 뭐가 있는지’ 모르죠. 이를 돕는 게 콘텐츠 내 탐색(In-page navigation, 목차/앵커 메뉴) 입니다. BP-056은 이를 우측 고정으로 제공하라고 합니다.

콘텐츠 내 탐색이 없을 때의 문제:

현재 위치 모름 — 긴 콘텐츠에서 — 지금 어느 부분을 읽는지, 전체에서 어디쯤인지 모릅니다. 길을 잃죠.

섹션 이동 불편 다른 섹션으로 가려면, 일일이 스크롤해야 합니다. 원하는 섹션을 바로 못 가죠.

전체 구조 파악 불가 — 콘텐츠가 — 어떤 섹션들로 구성되는지, 한눈에 안 보입니다.

그래서 BP-056은 — 콘텐츠 내 탐색을 제공하라고 합니다(컴포넌트 ‘콘텐츠 내 탐색’ CP-082~089 연계):

목차 표시 콘텐츠의 섹션 목록(목차)을 보여줍니다. 사용자가 전체 구조를 한눈에 파악하죠. 각 항목을 누르 면 해당 섹션으로 점프(앵커 이동)합니다.

본문 우측 고정 이 탐색을 본문 우측의 일관된 위치에 고정(sticky)합니다. 스크롤해도 따라와 항상 보이죠. 사용자가 언제든 다른 섹션으로 갈 수 있게요. 현재 섹션을 강조(하이라이트)하면 위치도 알리죠.

일관된 위치 콘텐츠마다 같은 위치(우측)에 둡니다. 사용자가 학습해 예측하게요.

’화면 너비가 충분한 경우’의 조건. 이 우측 고정 탐색은 넓은 화면(데스크톱)에서만 제공합니다. 우측에 탐색 을 둘 공간이 있을 때요. 화면이 좁으면(모바일·태블릿) 우측 공간이 없으니, 다른 방식(본문 상단 접이식 목차 등)으로 제공하죠. 반응형 고려입니다.

고정(sticky)의 효과:

항상 접근 — 스크롤해도 — 탐색이 따라와, 언제든 다른 섹션으로 가죠.

위치 인지 — 현재 섹션 강조로 — ’지금 여기’를 알립니다.

콘텐츠 내 탐색 컴포넌트와의 관계. 컴포넌트 그룹의 ‘콘텐츠 내 탐색’(CP-082~089)이 — 이 목차의 상세 규격(구조· 스타일·접근성)이었죠. BP-056은 — 그것을 ‘상세 정보 확인’(긴 콘텐츠)이라는 맥락에서, 우측 고정으로 제공하라는 패턴 규칙입니다.

이 규칙은 상세 정보 확인의 ’긴 콘텐츠 내비게이션’을 담당합니다 — 콘텐츠 내 탐색을 우측 고정 제공해(056), 사용자가 긴 콘텐츠에서 위치를 알고 섹션을 자유롭게 오가게 하죠.

정리하면 — 긴 콘텐츠에서 위치·구조를 모르면 길을 잃으므로, 화면이 넓을 때 콘텐츠 내 탐색(목차)을 본문 우측 일관된 위치에 고정 제공해 위치 인지와 섹션 이동을 도와야 합니다.

3. 점검 / 개선

무엇을 점검하나

탐색 제공 — 긴 콘텐츠에 섹션 목차(콘텐츠 내 탐색)가 있는가.

우측 고정 — 넓은 화면에서 본문 우측에 고정(sticky)되는가.

현재 강조·반응형 — 현재 섹션을 강조하고, 좁은 화면은 대체 방식인가.

개선 방향

긴 콘텐츠에 섹션 목차(앵커 이동) 제공, 넓은 화면 우측 고정.

현재 섹션 강조. 좁은 화면은 접이식 목차 등 대체(반응형).

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

역할	책임
기획/UX	콘텐츠 내 탐색 설계
퍼블리셔/개발	우측 고정·앵커 이동 구현

기관 유형	BP-056 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 권장 (긴 콘텐츠)

긴 콘텐츠(가이드·정책 설명)를 제공하는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 긴 콘텐츠에 섹션 목차(콘텐츠 내 탐색)가 있나요?

□ 넓은 화면에서 본문 우측에 고정(sticky)되나요?

□ 현재 섹션을 강조하고, 좁은 화면은 대체 방식인가요?

❓ FAQ

Q1. 콘텐츠 내 탐색이 뭔가요? 긴 콘텐츠의 섹션 목차(앵커 메뉴)입니다. 누르면 해당 섹션으로 점프하고, 현재 위치를 강조해 길 안내를 하죠(컴포넌트 CP-082~089). Q2. 왜 우측에 고정하나요? 본문은 좌측~중앙, 탐색은 우측에 둬 본문을 방해 않게요. 고정(sticky)하면 스크롤해도 따라와 언제든 접근합니다. Q3. 모바일에선요? ’화면 너비가 충분한 경우’만 우측 고정입니다. 좁은 화면은 우측 공간이 없으니 본문 상단 접이식 목차 등으로 대체하죠(반응형).

6. 마무리

BP-056의 메시지:

긴 글 어디쯤인지 보이게 — 콘텐츠 내 탐색을 넓은 화면 본문 우측에 고정 제공하라.

긴 콘텐츠에서 위치·구조를 모르면 길을 잃습니다. 콘텐츠 내 탐색을 우측 고정 제공해 위치 인지와 섹션 이동을 돕는 게 핵심이죠. 다음 편은 텍스트 명도 대비입니다.

다음 편 예고 ▶ 「623. (BP-057) 텍스트 콘텐츠와 배경 간 명도 대비를 4.5:1 이상으로 준수하고 있다.」

ViewCheck는 긴 콘텐츠의 콘텐츠 내 탐색이 우측 고정 제공되는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 상세 정보 확인 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_06.html

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

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