Scroll-Driven Navigation

설명 / Description

스크롤 기반 탐색은 페이지의 수직(또는 수평) 스크롤 위치를 시각화 내의 연속적인 탐색 매개변수 — 보통 시간, 지리적 위치, 또는 순위 목록 상의 위치 — 에 직접 매핑합니다. 웨이포인트에서 이산적인 상태 변화를 촉발하는 스크롤리텔링과 달리, 스크롤 기반 탐색은 연속적이고 비례적인 매핑을 제공합니다: 페이지를 30% 스크롤했다는 것은 데이터 공간을 30% 진행했다는 의미입니다.

Scroll-driven navigation maps the vertical (or horizontal) scroll position of the page directly to a continuous navigation parameter in the visualization — typically time, geographic position, or position along a ranked list. Unlike scrollytelling, which triggers discrete state changes at waypoints, scroll-driven navigation provides a continuous, proportional mapping: scrolling 30% of the way down the page means you are 30% of the way through the data space.

이 패턴은 웹에서 가장 보편적인 인터랙션인 스크롤을 활용하여 이를 데이터 탐색의 기본 요소로 전환합니다. 사용자의 스크롤 위치는 타임라인에 표시되는 현재 연도, 지도 플라이오버의 카메라 위도, 또는 순위 목록에서의 항목 위치를 제어할 수 있습니다. 시각화는 뷰포트에 고정된 채로 유지되고, 진행 표시기나 맥락 레이블이 업데이트되어 데이터 공간 내 현재 위치를 반영합니다.

This pattern leverages the most universal interaction on the web — scrolling — and converts it into a data exploration primitive. The user's scroll position might control the current year displayed on a timeline, the camera latitude on a map flyover, or the position along a ranked list of items. The visualization stays sticky in the viewport while a progress indicator or contextual labels update to reflect the current position within the data space.

스크롤 기반 탐색은 자연스러운 순서(시간, 순위, 경로를 따른 지리)를 가진 데이터에 특히 효과적이며, 사용자가 이산적 상태 사이를 점프하기보다 매끄러운 이동에서 이득을 얻는 경우에 유용합니다. 이 연속적인 매핑은 비디오 타임라인을 스크러빙하는 것과 유사하게 데이터를 "스크러빙하는" 느낌을 만들어냅니다. 주된 설계 과제는 스크롤-데이터 매핑을 보정하여 속도가 자연스럽게 느껴지도록 하는 것입니다 — 너무 빠르면 사용자가 흥미로운 영역을 지나치고, 너무 느리면 이동이 지루해집니다.

Scroll-driven navigation is particularly effective for data that has a natural ordering (time, rank, geography along a path) and where the user benefits from smooth traversal rather than jumping between discrete states. The continuous mapping creates a sense of "scrubbing through" the data, similar to scrubbing through a video timeline. The main design challenge is calibrating the scroll-to-data mapping so that the pace feels natural — too fast and the user overshoots interesting regions, too slow and traversal becomes tedious.

Scroll-Driven Navigation — try it yourself

언제 사용하나 / When to Use

데이터가 자연스러운 선형 순서(시간, 순위, 경로를 따른 거리)를 가지고 있어 사용자가 매끄럽게 이동하고 싶어할 때.
When the data has a natural linear ordering (time, rank, distance along a path) that the user wants to traverse smoothly.
시각화가 이산적인 점프보다 연속적인 탐색에서 이득을 얻는 큰 데이터 공간을 나타낼 때.
When the visualization represents a large data space that benefits from continuous exploration rather than discrete jumps.
독자의 스크롤이 어떤 데이터가 보일지 직접 제어해야 하는 롱폼 기사나 데이터 스토리에서.
In long-form articles or data stories where the reader's scroll should directly control what data is visible.
독자가 웹 스크롤에 익숙하여 학습 곡선이 전혀 없는 탐색을 원할 때.
When the audience is accustomed to web scrolling and you want zero-learning-curve navigation.
하나의 뷰포트에 담을 수 없는 파노라마형 또는 넓은 시각화(넓은 타임라인, 긴 순위 목록)에.
For panoramic or wide visualizations (wide timelines, long ranked lists) that cannot fit in one viewport.

이럴 땐 피하세요 / When NOT to Use

데이터에 의미 있는 선형 순서가 없을 때 — 스크롤 매핑이 자의적으로 느껴질 것입니다.
When the data does not have a meaningful linear ordering — scroll-mapping would feel arbitrary.
사용자가 데이터 공간의 멀리 떨어진 부분 사이를 빠르게 이동해야 할 때 — 스크롤은 무작위 접근에 느립니다.
When the user needs to jump quickly between distant parts of the data space — scrolling is slow for random access.
페이지가 이미 다른 콘텐츠에 스크롤을 사용하고 있어 시각화를 위해 스크롤을 가로채면 사용자가 불편함을 느낄 때.
When the page already uses scroll for other content and hijacking scroll for the visualization would frustrate users.
스크롤이 "차트를 탐색"이 아니라 "텍스트를 더 읽기"를 의미해야 하는 혼합 콘텐츠 페이지에서.
On pages with mixed content where scroll should mean "read more text," not "navigate the chart."
시각화가 이산적인 의미 있는 상태를 가질 때 — 단계 트리거가 있는 스크롤리텔링이 더 적합합니다.
When the visualization has discrete meaningful states — scrollytelling with step triggers is a better fit.

작동 방식 / How It Works

시각화는 스티키 컨테이너 안에 배치되어 뷰포트에 고정된 채로 유지됩니다.
The visualization is placed in a sticky container that remains fixed in the viewport.
키가 큰 스크롤 컨테이너(보통 뷰포트 높이의 몇 배)가 시각화를 감싸며 스크롤 활주로를 제공합니다.
A tall scroll container (often several viewport heights) wraps the visualization, providing the scroll runway.
스크롤 리스너가 사용자가 얼마나 스크롤했는지에 기반해 정규화된 진행값(0~1)을 계산합니다.
A scroll listener computes a normalized progress value (0 to 1) based on how far the user has scrolled.
진행값은 데이터 위치에 매핑됩니다 — 예를 들어 타임라인의 경우 progress * (maxYear - minYear) + minYear.
The progress value maps to a data position — for example, progress * (maxYear - minYear) + minYear for a timeline.
시각화는 현재 데이터 위치를 반영하도록 지속적으로 업데이트됩니다: 시간 커서가 이동하거나, 지도가 팬되거나, 하이라이트된 항목이 바뀝니다.
The visualization updates continuously to reflect the current data position: the time cursor moves, the map pans, or the highlighted item shifts.
진행 표시기(타임라인, 미니맵, 또는 진행 바)는 사용자가 전체 데이터 공간 안에서 어디에 있는지 보여줍니다.
A progress indicator (timeline, minimap, or progress bar) shows the user where they are in the overall data space.
어느 방향으로든 스크롤하면 데이터를 앞뒤로 이동하며, 매끄러운 전환이 일어납니다.
Scrolling in either direction moves forward or backward through the data, with smooth transitions.

변형 / Variations

스크롤-투-타임: 스크롤 위치가 타임라인의 날짜에 매핑됩니다. 역사적 데이터 스토리와 연간 리뷰에서 흔히 사용됩니다.
Scroll-to-time: Scroll position maps to a date on a timeline. Commonly used in historical data stories and annual reviews.
스크롤-투-지오그래피: 스크롤 위치가 지리적 경로의 카메라 플라이오버를 제어합니다(예: 스크롤이 강, 이주 경로, 또는 로드트립을 따라감).
Scroll-to-geography: Scroll position drives a camera flyover of a geographic path (e.g., scrolling follows a river, a migration route, or a road trip).
스크롤-투-랭크: 스크롤 위치가 순위 목록을 이동하며 한 번에 하나의 항목을 관련 데이터와 함께 하이라이트합니다.
Scroll-to-rank: Scroll position moves through a ranked list, highlighting one item at a time with its associated data.
수평 스크롤 탐색: 스크롤 축이 수평이며, 넓은 타임라인이나 간트형 차트에 자주 사용됩니다.
Horizontal scroll navigation: The scroll axis is horizontal, often used for wide timelines or Gantt-like charts.
모멘텀이 있는 스크롤: 매핑에 이징이 포함되어 빠른 스크롤이 매끄럽고 감속하는 탐색을 만들어냅니다.
Scroll with momentum: The mapping includes easing so that quick scrolls produce smooth, decelerating navigation.
디텐트가 있는 스크롤: 연속적인 매핑에 중요한 데이터 포인트(예: 타임라인의 주요 사건)에서 약간의 "고정" 영역이 있어 잠시 멈춤이 발생합니다.
Scroll with detents: The continuous mapping has slight "sticky" zones at important data points (e.g., major events on a timeline), causing a brief pause.

코드 레퍼런스 / Code Reference

// Scroll-driven timeline navigation
const scrollContainer = document.querySelector(".scroll-runway");
const totalHeight = scrollContainer.scrollHeight - window.innerHeight;
const yearScale = d3.scaleLinear()
  .domain([0, totalHeight])
  .range([1960, 2024])
  .clamp(true);

window.addEventListener("scroll", () => {
  const scrollY = window.scrollY;
  const currentYear = Math.round(yearScale(scrollY));
  // Update visualization to show data for currentYear
  updateChart(currentYear);
  d3.select("#year-label").text(currentYear);
  d3.select("#progress-bar")
    .style("width", `${(scrollY / totalHeight) * 100}%`);
});