Scrollytelling

설명 / Description

스크롤리텔링은 사용자의 스크롤 위치가 시각화의 전환을 이끄는 내러티브 인터랙션 패턴입니다. 독자가 설명 텍스트 블록을 스크롤해 내려가면 그에 맞춰 차트가 업데이트됩니다 — 서로 다른 데이터 부분집합을 강조하거나, 축을 바꾸거나, 주석을 추가하거나, 차트 유형 사이를 전환하거나, 관심 영역으로 확대합니다. 시각화는 보통 제자리에 고정("스티키")되어 텍스트가 그 옆을 스쳐 지나가며, 글과 그래픽 사이에 영화 같은 상호작용을 만들어냅니다.

Scrollytelling is a narrative interaction pattern in which the user's scroll position drives transitions in a visualization. As the reader scrolls through blocks of explanatory text, the accompanying chart updates — highlighting different data subsets, changing the axis, adding annotations, transitioning between chart types, or zooming into a region of interest. The visualization typically stays fixed (or "sticky") in place while the text scrolls past it, creating a cinematic interplay between prose and graphics.

이 패턴은 2012~2014년경 데이터 저널리즘에서 등장했으며, 뉴욕타임스의 "Snow Fall"(2012)과 "How the Recession Reshaped the Economy"(2014) 같은 대표작들이 스크롤 기반 스토리텔링이 정적 그래픽이나 자유 탐색형 대시보드보다 더 몰입감 있을 수 있음을 보여주었습니다. 이 기법의 근본적인 설계 원칙은 스크롤이 웹에서 가장 저항이 적은 인터랙션이라는 점입니다 — 모든 독자는 이미 스크롤을 하고 있으므로, 분석적 단계를 스크롤 위치에 매핑함으로써 저자는 수동적인 독자조차 복잡한 데이터 이야기를 통과하도록 안내할 수 있습니다.

The pattern emerged in data journalism around 2012-2014, with landmark pieces like the New York Times' "Snow Fall" (2012) and "How the Recession Reshaped the Economy" (2014) demonstrating that scroll-driven storytelling could be more engaging than either static graphics or free-exploration dashboards. The underlying design principle is that scroll is the lowest-friction interaction on the web — every reader already scrolls — so by mapping analytical steps to scroll positions, the author can guide even passive readers through a complex data story.

기술적으로 스크롤리텔링은 Intersection Observer API나 스크롤 위치 리스너에 의존하여 정의된 지점마다 상태 변화를 일으킵니다. Scrollama, GSAP ScrollTrigger, Svelte의 내장 스크롤 처리 같은 라이브러리가 구현을 단순화해줍니다. 설계상의 과제는 속도를 조절하는 것입니다: 스크롤로 촉발되는 각 단계는 정확히 하나의 새로운 통찰만을 도입해야 하며, 단계 사이의 전환은 내러티브 흐름을 유지할 만큼 부드러우면서도 무언가 바뀌었다는 신호를 줄 만큼 뚜렷해야 합니다.

Technically, scrollytelling relies on Intersection Observer APIs or scroll-position listeners that trigger state changes at defined waypoints. Libraries like Scrollama, GSAP ScrollTrigger, and Svelte's built-in scroll handling simplify implementation. The design challenge is calibrating the pace: each scroll-triggered step should introduce exactly one new insight, and the transition between steps should be smooth enough to maintain narrative flow but distinct enough to signal that something changed.

Scrollytelling — try it yourself

프롬프트 예시 / Prompt Examples

다음 프롬프트를 Claude, ChatGPT, 또는 다른 AI 도구와 함께 사용해보세요:

Try these prompts with Claude, ChatGPT, or other AI tools:

"스크롤에 따라 4단계로 데이터가 변화하는 스크롤리텔링 시각화를 만들어주세요."

"Create a scrollytelling piece that reveals data step by step as the user scrolls."

언제 사용하나 / When to Use

독자를 일련의 분석적 통찰을 통해 안내하는 것이 목표인 데이터 저널리즘과 에디토리얼 콘텐츠에서.
In data journalism and editorial content where the goal is to walk the reader through a sequence of analytical insights.
데이터 이야기가 시작, 중간, 끝이 있는 명확한 선형 내러티브를 가질 때.
When the data story has a clear linear narrative with a beginning, middle, and end.
청중이 일반 대중이거나 비전문가여서 열린 탐색 도구로부터 이득을 얻지 못할 때.
When the audience is general/non-technical and would not benefit from open-ended exploration tools.
시각화가 순차적으로 쌓이는 4~15개의 의미 있는 상태를 가질 때.
When the visualization has 4-15 meaningful states that build on each other sequentially.
저자가 속도와 초점을 통제하는 것이 이야기에 유리할 때(설명형 모드).
When the story benefits from the author controlling the pace and focus (explanatory mode).

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

청중이 데이터를 자유롭게 탐색하고 싶어할 때 — 스크롤리텔링은 본질적으로 저자 주도적입니다.
When the audience wants to explore the data freely — scrollytelling is inherently author-directed.
시각화에 상태가 1~2개뿐일 때(이 패턴을 정당화할 만큼 전환이 충분하지 않습니다).
When the visualization has only 1-2 states (not enough transitions to justify the pattern).
콘텐츠가 정적인 주석 차트나 짧은 애니메이션으로 더 잘 작동할 때(스크롤 기반 속도 조절이 필요하지 않습니다).
When the content works better as a static annotated chart or a short animation (no need for scroll-driven pacing).
의미 있는 지점을 만들 만큼 스크롤 거리가 충분하지 않은 매우 짧은 페이지에서.
On very short pages where there is not enough scroll distance to create meaningful waypoints.
접근성이 주된 관심사일 때 — 세심한 ARIA 주석이 추가되지 않으면 스크린 리더와 키보드만 사용하는 사용자는 스크롤로 촉발되는 시각적 변화를 놓칠 수 있습니다.
When accessibility is a primary concern — screen readers and keyboard-only users may miss scroll-triggered visual changes unless careful ARIA annotations are added.

작동 방식 / How It Works

페이지 레이아웃은 시각화를 스티키 컨테이너(CSS position: sticky) 안에 배치하여 사용자가 스크롤해도 계속 보이게 합니다.
The page layout positions the visualization in a sticky container (CSS position: sticky) that remains visible as the user scrolls.
내러티브 텍스트 블록("단계")이 스티키 시각화 옆의 스크롤 가능한 열에 배치됩니다.
Narrative text blocks ("steps") are placed in a scrollable column alongside the sticky visualization.
각 텍스트 블록이 뷰포트에 진입하면(Intersection Observer나 스크롤 오프셋 계산으로 감지) 시각화에서 그에 대응하는 상태 변화가 촉발됩니다.
As each text block enters the viewport (detected via Intersection Observer or scroll offset calculation), a corresponding state change is triggered on the visualization.
시각화가 새로운 상태로 전환됩니다: 데이터가 필터링되거나, 마크가 애니메이션되거나, 주석이 나타나거나, 축이 바뀌거나, 차트 유형 전체가 변형될 수 있습니다.
The visualization transitions to the new state: data may be filtered, marks may animate, annotations may appear, axes may change, or the entire chart type may transform.
텍스트는 현재 상태에서 시청자가 무엇을 주목해야 하는지 설명하며, 해석적 맥락을 제공합니다.
The text explains what the viewer should notice in the current state, providing interpretive context.
더 스크롤하면 다음 단계로 진행합니다. 뒤로 스크롤하면 전환이 역순으로 진행되어 독자가 이전 단계를 다시 볼 수 있습니다.
Scrolling further advances to the next step. Scrolling backward reverses the transitions, allowing the reader to revisit previous steps.
시퀀스가 끝나면 시각화가 탐색 모드나 정적인 요약 상태로 전환될 수 있습니다.
At the end of the sequence, the visualization may transition into an exploratory mode or a static summary state.

변형 / Variations

사이드 스티키 스크롤리텔링: 텍스트는 한쪽 열에서 스크롤되고, 차트는 인접한 열에 고정됩니다. 데스크톱에서 가장 흔한 레이아웃입니다.
Sticky-side scrollytelling: Text scrolls in one column, the chart is sticky in the adjacent column. The most common layout on desktop.
풀블리드 스크롤리텔링: 시각화가 전체 뷰포트를 채우고, 텍스트 카드가 그 위에 오버레이됩니다. 더 몰입감 있지만 읽기는 더 어렵습니다.
Full-bleed scrollytelling: The visualization covers the full viewport, and text cards overlay it. More immersive but harder to read.
스테퍼(버튼 방식): 스크롤 대신 앞으로/뒤로 버튼이나 키보드 화살표로 상태를 진행합니다. 스크롤 하이재킹 문제를 피할 수 있습니다.
Stepper (button-driven): Instead of scroll, forward/back buttons or keyboard arrows advance through states. Avoids scroll-hijacking issues.
스크롤 트리거 애니메이션: 이산적인 상태 변화 대신, 스크롤 위치가 애니메이션 매개변수를 연속적으로 제어합니다(예: 스크롤 위치가 타임랩스의 시간에 매핑).
Scroll-triggered animation: Rather than discrete state changes, the scroll position continuously drives an animation parameter (e.g., scroll position maps to time in a time-lapse).
모바일 최적화 스크롤리텔링: 차트가 하나의 열 안에서 텍스트 위에 쌓입니다. 텍스트가 아래에서 스크롤되면서 단계가 차트 변화를 촉발합니다.
Mobile-optimized scrollytelling: Chart stacks above text in a single column. Steps trigger chart changes as text scrolls beneath.
분기형 스크롤리텔링: 특정 지점에서 독자가 어떤 갈래를 따라갈지 선택할 수 있어, 선택형 모험 방식의 데이터 이야기를 만들어냅니다.
Branching scrollytelling: At certain points, the reader can choose which branch to follow, creating a choose-your-own-adventure data story.

코드 레퍼런스 / Code Reference

// Scrollama-based scrollytelling setup
const scroller = scrollama();
scroller.setup({
  step: ".scroll-step",
  offset: 0.5,
  debug: false,
})
.onStepEnter(({ index }) => {
  // Transition the chart to state matching the current step
  if (index === 0) showOverview();
  if (index === 1) highlightOutliers();
  if (index === 2) zoomIntoRegion("Northeast");
  if (index === 3) showTimeTrend();
})
.onStepExit(({ index, direction }) => {
  if (direction === "up" && index === 1) showOverview();
});