스크롤 스파이 섹션

스크롤 스파이는 긴 문서에서 지금 읽고 있는 위치를 목차에 비춰주는 패턴입니다. 페이지가 길어질수록 사용자는 "내가 전체에서 어디쯤 있는지"를 잃기 쉬운데, 목차가 현재 섹션을 따라 강조되면 그 감각을 되찾을 수 있습니다.

동시에 목차는 지도이자 리모컨 역할을 합니다. 항목을 누르면 그 섹션으로 바로 이동하니, 위에서 아래로 차례대로 읽지 않아도 원하는 부분만 골라 볼 수 있습니다.

이 데모는 내부 스크롤 영역 안에서 동작합니다. 실제 페이지에서는 보통 window 스크롤을 기준으로 삼지만, 원리는 같습니다 — 지금 화면 상단에 걸린 섹션이 무엇인지 감지해 목차에 반영하는 것이죠.

아래로 천천히 스크롤하면서 왼쪽(모바일은 위쪽) 목차의 강조가 어떻게 따라오는지 지켜봐 주세요.

핵심은 IntersectionObserver입니다. 각 섹션을 관찰 대상으로 등록하고, 화면 상단의 좁은 밴드에 어떤 섹션이 걸쳐 있는지를 브라우저가 알려주게 합니다.

스크롤 이벤트마다 모든 섹션의 위치를 getBoundingClientRect로 직접 재는 방식도 가능하지만, 그러면 매 프레임 레이아웃을 읽어 리플로우가 잦아지고 성능이 떨어집니다. IntersectionObserver는 이 계산을 브라우저 내부에 맡겨 훨씬 가볍습니다.

관찰자의 rootMargin을 조절하면 "어느 지점을 지나야 활성으로 칠지" 기준선을 옮길 수 있습니다. 이 데모는 컨테이너 상단 약 30% 지점을 기준으로 삼습니다.

여러 섹션이 동시에 그 밴드에 걸칠 수 있는데, 이때는 문서 순서상 가장 위에 있는 섹션 하나를 활성으로 고릅니다. 그래야 강조가 아래로 튀지 않고 자연스럽게 한 칸씩 내려갑니다.

목차는 단순한 표시가 아니라 조작 수단이기도 합니다. 항목을 누르면 scrollIntoView로 해당 섹션이 부드럽게 화면 상단으로 올라옵니다.

현재 섹션은 굵게 강조되고 작은 점 표시가 붙어, 여러 항목 중에서도 지금 위치가 한눈에 들어옵니다. 강조는 색만이 아니라 굵기로도 주는 편이 색각 이상 사용자에게 더 안전합니다.

모바일에서는 사이드 목차를 둘 폭이 없으므로 상단에 가로 스크롤 칩으로 바꿉니다. 활성 칩이 배경색으로 또렷하게 구분되어, 좁은 화면에서도 현재 위치를 놓치지 않습니다.

이렇게 같은 데이터(섹션 목록)를 데스크톱은 세로 목차로, 모바일은 가로 칩으로 다르게 그리되 동작은 하나로 묶는 것이 반응형 설계의 핵심입니다.

현재 목차 항목에는 aria-current를 붙여 스크린리더가 "지금 이 항목이 활성"이라고 읽을 수 있게 합니다. 시각적 강조만으로는 보조기기 사용자에게 전달되지 않습니다.

prefers-reduced-motion을 켠 사용자에겐 부드러운 스크롤 대신 즉시 이동을 제공합니다. 멀미를 유발할 수 있는 큰 모션을 강요하지 않는 것이 원칙입니다.

목차 항목은 실제 버튼이어야 키보드 포커스와 Enter 동작이 자연스럽게 따라옵니다. div에 onClick만 거는 방식은 키보드 사용자를 배제합니다.

강조 색의 대비도 충분히 확보해야 합니다. 활성/비활성 텍스트가 비슷한 회색이면 어디가 현재인지 구분이 안 되니, 명도 차이를 분명히 둡니다.

스크롤 스파이는 섹션이 많은 콘텐츠에서 빛을 발합니다. 이용약관·개인정보 처리방침처럼 조항이 길게 이어지는 문서가 대표적입니다.

API 레퍼런스나 컴포넌트 문서처럼 항목을 빠르게 오가며 참고하는 페이지에서도, 목차가 현재 위치를 비춰주면 탐색 비용이 크게 줄어듭니다.

마케팅 랜딩페이지의 긴 한 페이지 구성에서도 섹션 목차로 활용할 수 있습니다. "기능 → 가격 → 후기 → FAQ" 같은 흐름을 목차로 노출하면 사용자가 관심 있는 곳으로 바로 점프합니다.

정리하면, 한 페이지가 화면 높이를 여러 배 넘기고 의미 단위로 나뉘어 있다면 스크롤 스파이를 얹을 가치가 있습니다.