Stepper (Step Navigation)

설명 / Description

스테퍼는 시각화 상태 시퀀스를 이산적으로 앞뒤로 탐색할 수 있게 합니다. 스크롤로 촉발되는 전환(스크롤리텔링)이나 연속적인 애니메이션(재생) 대신, 사용자가 명시적으로 "다음"과 "이전" 버튼을 클릭하거나 — 또는 화살표 키를 눌러 — 한 번에 한 단계씩 진행합니다. 각 단계는 시각화의 뚜렷한 상태를 보여줍니다: 새로운 데이터 부분집합, 바뀐 주석, 다른 하이라이트, 또는 변형된 뷰입니다.

A stepper provides discrete forward and back navigation through a sequence of visualization states. Instead of scroll-triggered transitions (scrollytelling) or continuous animation (playback), the user explicitly clicks "Next" and "Previous" buttons — or presses arrow keys — to advance one step at a time. Each step shows a distinct state of the visualization: a new data subset, a changed annotation, a different highlight, or a transformed view.

스테퍼는 가장 단순한 저자 주도형 내비게이션 패턴입니다. 저자에게는 독자가 마주하는 상태의 시퀀스에 대한 완전한 통제권을, 독자에게는 속도 조절에 대한 완전한 통제권을 부여합니다 — 준비가 되었을 때만 진행합니다. 이 조합 덕분에 스테퍼는 교육 콘텐츠, 가이드형 분석 안내, 웹 페이지에 삽입된 프레젠테이션 슬라이드에 이상적입니다. 사용자가 올바른 전환을 촉발하기 위해 스크롤 속도를 조절할 필요가 없기 때문에 스크롤리텔링보다 인지 부하가 낮습니다; 버튼 클릭 하나가 정확히 하나의 상태 변화를 만들어냅니다.

Steppers are the simplest author-directed navigation pattern. They give the author full control over the sequence of states the reader encounters, while giving the reader full control over pacing — they advance only when ready. This combination makes steppers ideal for educational content, guided analysis walkthroughs, and presentation slides embedded within a web page. The cognitive load is lower than scrollytelling because the user does not need to calibrate their scroll speed to trigger the right transitions; each button click produces exactly one state change.

번호가 매겨진 단계 표시기(흔히 점이나 진행 표시줄로 표시됨)는 방향 감각을 제공합니다 — 사용자는 자신이 7단계 중 3단계에 있음을 알고 남은 콘텐츠의 양을 가늠할 수 있습니다. 일부 스테퍼는 특정 단계 번호를 클릭해 직접 이동할 수 있게 하여, 선형 진행과 임의 접근을 결합합니다. 키보드 지원(좌/우 화살표)은 구현이 쉽고 접근성에 중요합니다.

The numbered step indicator (often shown as dots or a progress bar) provides orientation — the user knows they are on step 3 of 7 and can gauge how much content remains. Some steppers allow direct navigation by clicking on a specific step number, combining linear progression with random access. Keyboard support (left/right arrows) is easy to implement and important for accessibility.

Stepper (Step Navigation) — try it yourself

언제 사용하나 / When to Use

각 단계가 하나의 개념이나 통찰을 소개하고 독자가 다음으로 넘어가기 전에 이를 흡수할 시간이 필요한 교육 콘텐츠에서.
In educational content where each step introduces one concept or insight and the reader needs time to absorb it before moving on.
분석가가 비전문가 대상 독자에게 자신의 발견을 단계별로 안내하는 가이드형 분석 안내에서.
In guided analysis walkthroughs where an analyst walks a non-technical audience through their findings step by step.
시각화가 서로를 기반으로 쌓이는 3~15개의 이산적이고 의미 있는 상태를 가질 때.
When the visualization has 3-15 discrete meaningful states that build on each other.
스크롤 기반 인터랙션이 네이티브 페이지 스크롤과 충돌하는 모바일 기기에서.
On mobile devices where scroll-driven interactions conflict with native page scrolling.
콘텐츠가 라이브로 발표될 때(강연, 회의)이고 발표자가 클릭으로 진행하는 제어가 필요할 때.
When the content will be presented live (talks, meetings) and the presenter needs click-to-advance control.
스크롤 하이재킹이 페이지 경험을 방해할 때 스크롤리텔링의 대안으로.
As an alternative to scrollytelling when scroll-hijacking would be disruptive to the page experience.

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

데이터가 이산적 단계가 아니라 연속적으로 변할 때 — 재생/스크럽이 더 적합합니다.
When the data changes continuously rather than in discrete steps — playback/scrub is more appropriate.
시퀀스에 상태가 1~2개뿐일 때 — 단순한 토글이나 전/후 비교로 충분합니다.
When the sequence has only 1-2 states — a simple toggle or before/after comparison suffices.
사용자가 데이터를 자유롭게 탐색해야 할 때 — 스테퍼는 본질적으로 선형적이고 제약적입니다.
When the user needs to explore the data freely — steppers are inherently linear and constrained.
단계가 서로를 기반으로 쌓이지 않을 때 — 순서가 중요하지 않다면 탭이나 드롭다운이 더 나을 수 있습니다.
When the steps do not build on each other — if the order does not matter, tabs or a dropdown might be better.
단계가 15~20개를 넘을 때 — 시퀀스가 지루해지고 사용자가 자신의 위치를 놓치게 됩니다.
When there are more than 15-20 steps — the sequence becomes tedious and the user loses track of their position.

작동 방식 / How It Works

시각화에는 내비게이션 컨트롤이 함께 제공됩니다: "이전"과 "다음" 버튼, 그리고 선택적으로 번호가 매겨진 단계 표시기(점, 숫자, 또는 진행 표시줄)입니다.
The visualization is accompanied by navigation controls: "Previous" and "Next" buttons, and optionally numbered step indicators (dots, numbers, or a progress bar).
각 단계는 미리 정의된 시각화 상태에 대응합니다: 특정 데이터 필터, 주석 세트, 하이라이트 패턴, 또는 차트 구성입니다.
Each step corresponds to a predefined visualization state: a specific data filter, annotation set, highlight pattern, or chart configuration.
"다음"을 클릭하면 현재 상태에서 다음 상태로의 전환이 트리거됩니다. 애니메이션 전환이 무엇이 바뀌었는지 보여줍니다.
Clicking "Next" triggers a transition from the current state to the next state. An animated transition shows what changed.
"이전"을 클릭하면 전환이 반대로 진행되어 이전 상태로 돌아갑니다.
Clicking "Previous" reverses the transition, returning to the prior state.
단계 표시기가 갱신되어 시퀀스 내 현재 위치를 보여줍니다.
The step indicator updates to show the current position in the sequence.
선택적으로, 설명 텍스트가 시각화와 함께 갱신되어 현재 단계가 무엇을 보여주는지, 왜 중요한지를 설명합니다.
Optionally, explanatory text updates alongside the visualization, describing what the current step shows and why it matters.
키보드 화살표 키도 접근성과 프레젠테이션 모드를 위해 내비게이션을 구동할 수 있습니다.
Keyboard arrow keys can also drive the navigation for accessibility and presentation mode.

변형 / Variations

버튼 스테퍼: 차트 아래나 옆에 있는 단순한 "이전 / 다음" 버튼입니다. 가장 기본적인 형태입니다.
Button stepper: Simple "Previous / Next" buttons below or beside the chart. The most basic form.
도트 스테퍼: 슬라이드쇼 표시기처럼 각 점이 하나의 단계를 나타내고 현재 점이 하이라이트되는 한 줄의 점들입니다. 점을 클릭하면 해당 단계로 이동합니다.
Dot stepper: A row of dots (like a slideshow indicator) where each dot represents a step and the current dot is highlighted. Clicking a dot jumps to that step.
번호 스테퍼: 단계에 제목과 함께 번호(1, 2, 3, ...)가 매겨져, 사용자가 탐색하기 전에 전체 구조를 이해할 수 있게 합니다.
Numbered stepper: Steps are labeled (1, 2, 3, ...) with titles, allowing the user to understand the overall structure before navigating.
진행 표시줄 스테퍼: 사용자가 진행함에 따라 수평 막대가 채워져 연속적인 진행 감각을 제공합니다.
Progress bar stepper: A horizontal bar fills as the user advances, giving a continuous sense of progress.
키보드 구동 스테퍼: 눈에 보이는 버튼 없이 화살표 키로 단계를 구동합니다. 프레젠테이션 모드에서 사용됩니다.
Keyboard-driven stepper: Arrow keys drive the steps, with no visible buttons. Used in presentation mode.
분기 스테퍼: 특정 단계에서 사용자가 두 경로 중 하나를 선택할 수 있어(예: "지역별 보기" 또는 "시간별 보기"), 비선형적 내러티브를 만듭니다.
Branching stepper: At certain steps, the user can choose between two paths (e.g., "See by region" or "See by time"), creating a non-linear narrative.
자동 진행 스테퍼: 슬라이드쇼처럼 타이머에 따라 단계가 자동으로 진행되지만, 사용자가 일시 정지하고 수동으로 제어할 수 있습니다.
Auto-advance stepper: Steps advance automatically on a timer, like a slideshow, but the user can pause and take manual control.

코드 레퍼런스 / Code Reference

// Stepper with forward/back navigation and step indicators
const steps = [
  { filter: null, annotation: "Overview of all data" },
  { filter: d => d.region === "Asia", annotation: "Focus: Asia" },
  { filter: d => d.region === "Europe", annotation: "Focus: Europe" },
  { filter: d => d.year >= 2020, annotation: "Recent data (2020+)" },
];
let currentStep = 0;

function goToStep(i) {
  currentStep = Math.max(0, Math.min(i, steps.length - 1));
  const step = steps[currentStep];
  const filtered = step.filter ? data.filter(step.filter) : data;
  updateChart(filtered);
  d3.select("#annotation").text(step.annotation);
  d3.selectAll(".step-dot")
    .classed("active", (_, j) => j === currentStep);
  d3.select("#prev-btn").attr("disabled", currentStep === 0 ? true : null);
  d3.select("#next-btn")
    .attr("disabled", currentStep === steps.length - 1 ? true : null);
}

d3.select("#next-btn").on("click", () => goToStep(currentStep + 1));
d3.select("#prev-btn").on("click", () => goToStep(currentStep - 1));
d3.select("body").on("keydown", (event) => {
  if (event.key === "ArrowRight") goToStep(currentStep + 1);
  if (event.key === "ArrowLeft") goToStep(currentStep - 1);
});