스크롤스파이Scrollspy

스크롤을 몰래 지켜보다(spy) 지금 어디쯤인지 목차에 표시합니다. 문서 페이지에서 "얼마나 남았지", "그 부분으로 가고 싶다"를 동시에 해결합니다.

언제 쓰나요

제목이 4개 이상인 긴 문서에 씁니다. 가이드, API 문서, 약관, 긴 블로그 글. 데스크톱에서는 옆에 고정(sticky)하고, 모바일에서는 위에 접었다 펴는 목차나 생략합니다.

강조 기준은 "화면 상단을 막 지난 제목"이 자연스럽습니다. 목차 항목을 누르면 해당 제목으로 부드럽게 이동하되, 고정 헤더에 가리지 않게 여백(scroll-margin-top)을 둡니다. 목차가 본문보다 길어지면 안 됩니다. h2·h3 까지만 넣습니다.

AI에게 시키기

가이드 글 오른쪽에 스크롤스파이 목차를 붙여줘.
- 본문의 h2·h3 를 읽어 목차 자동 생성, 데스크톱에서 sticky, 1024px 이하에서는 숨김
- IntersectionObserver 로 지금 보이는 섹션의 항목을 강조
- 항목 클릭 시 smooth scroll, 고정 헤더 높이만큼 scroll-margin-top
- 목차는 nav[aria-label="목차"] 로, 강조 항목은 aria-current="true"

"목차 만들어줘"라고 하면 링크 목록만 나오고 따라오지 않습니다. 스크롤스파이라는 이름을 적어야 강조가 붙습니다.

혼동 주의

• 정적 목차: 강조 없이 링크만 있는 목차입니다. 스크롤스파이는 그 목차가 스크롤을 따라 움직이는 것입니다.
• 탭: 내용을 바꿔 보여 줍니다. 스크롤스파이는 내용은 그대로 두고 위치만 표시합니다.
• 앵커 링크: 제목 옆의 # 링크처럼 특정 위치로 가는 링크입니다. 스크롤스파이는 앵커 링크 묶음 + 현재 위치 표시입니다.
• 진행 막대(읽기 진행률): 페이지 상단에 얼마나 읽었는지 가는 선입니다. 위치는 알려 주지만 이동은 못 합니다.