현재 위치를 비춰주는 스크롤 스파이 섹션

제작 과정

한 줄 요약

IntersectionObserver로 현재 보이는 섹션을 감지해 목차를 강조하고, 목차 클릭으로 그 섹션까지 부드럽게 이동하는 패턴입니다.

이럴 때 필요해요

약관문서긴 랜딩페이지처럼 섹션이 많은 콘텐츠는 사용자가 전체 구조 속 자기 위치를 잃기 쉽습니다. 스크롤 스파이는 "지금 어디를 읽고 있는지"를 목차에 비춰주고, 원하는 곳으로 한 번에 점프하게 해줍니다.

어떻게 동작하나

각 섹션을 IntersectionObserver로 관찰합니다(스크롤 컨테이너를 root로 지정).
rootMargin으로 상단 밴드에 들어온 섹션을 활성으로 표시합니다.
목차 항목을 누르면 scrollIntoView로 해당 섹션까지 스무스하게 이동합니다.

놓치기 쉬운 것

스크롤 위치를 직접 계산하면 리플로우가 잦습니다 IntersectionObserver가 가볍고 정확합니다.
내부 스크롤 영역이라면 observer의 root를 그 컨테이너로 지정해야 합니다.
prefers-reduced-motion이면 스무스 대신 즉시 이동, 목차엔 aria-current를 줍니다.

이런 곳에 써요

약관정책 문서, API 레퍼런스
긴 랜딩페이지의 사이드 목차 네비게이션

import type { Metadata } from "next"; import { Scrollspy } from "./-components/Scrollspy"; export const metadata: Metadata = { title: "스크롤 스파이 섹션 (데모)", description: "스크롤하면 현재 보이는 섹션을 IntersectionObserver로 감지해 목차를 강조하고, 목차 클릭 시 해당 섹션으로 스무스 스크롤하는 섹션 패턴.", robots: { index: false, follow: false }, }; export default function Page() { return ( <main className="min-h-[100dvh]"> <Scrollspy /> </main> ); }