HAHS.
디자인 원칙으로 돌아가기

스토리텔링 구조

composition

Storytelling Structure

설명 / Description

스토리 없는 데이터 시각화는 백과사전 항목과 같습니다. 기술적으로는 완전하지만, 누군가의 생각을 바꾸거나 기억에 남을 가능성은 낮습니다. 스토리텔링 구조란 하나의 차트 또는 일련의 차트에서 시각적 정보를 조직하여, 시작(맥락과 배경 설정), 중간(데이터와 패턴), 결말(인사이트와 함의)이 있는 내러티브를 통해 관객을 이끄는 원칙입니다. 이것은 과장이나 장식이 아니라, 이해와 영향력을 극대화하기 위한 의도적인 정보 배치입니다.

Edward Segel과 Jeffrey Heer의 2010년 논문 “Narrative Visualization”에서는 저자 주도형 내러티브(디자이너가 순서를 통제하고 관객이 선형 경로를 따라가는 방식)와 독자 주도형 탐색(관객이 자유롭게 데이터를 탐색하는 방식) 사이의 스펙트럼을 제시했습니다. 가장 효과적인 데이터 스토리는 이 둘의 중간 지점인 마티니 글라스 구조를 취합니다. 좁은 줄기 부분은 맥락을 설정하고 핵심 인사이트로 관객을 이끄는 저자 주도형 도입부이고, 넓은 잔 부분은 관객이 자유롭게 탐색할 수 있는 독자 주도형 탐색 영역입니다. 이 하이브리드 구조는 디자이너의 전문성(무엇이 중요한지 아는 것)과 관객의 호기심(더 알아보고 싶어하는 것) 모두를 존중합니다.

단일 차트 수준에서 스토리텔링 구조는 제목-부제-주석 프레임워크로 구현됩니다. 제목은 주제를 명시하고, 부제는 인사이트를 전달하며(“제품 출시 후 매출 40% 성장”), 차트 내 주석은 인사이트를 구체적인 데이터 포인트에 연결합니다. 복수 차트 수준에서는 순서를 결정합니다: 가장 넓은 맥락(전체 트렌드)에서 시작하여 핵심 기간이나 카테고리로 확대한 다음, 인과관계 설명의 근거를 제시합니다. “무엇이 일어났는가”에서 “왜 중요한가”로 이어지는 내러티브 아크를 구성하는 것입니다.

A data visualization without a story is an encyclopedia entry: technically complete, but unlikely to change anyone’s mind or linger in anyone’s memory. Storytelling structure is the principle of organizing visual information — across one chart or a sequence of charts — so that the viewer is led through a narrative with a beginning (context and setup), a middle (the data and its patterns), and an end (the insight and its implications). This is not about embellishment or dramatization; it is about the deliberate sequencing of information to maximize comprehension and impact.

Edward Segel and Jeffrey Heer’s foundational 2010 paper “Narrative Visualization” identified a spectrum between author-driven narratives (where the designer controls the sequence and the viewer follows a linear path) and reader-driven exploration (where the viewer freely explores the data). Most effective data stories occupy a middle ground they call the martini glass structure: the narrow stem is an author-driven introduction that establishes context and guides the viewer to the key insight, and then the glass opens into a wide bowl of reader-driven exploration where the viewer can investigate further. This hybrid structure respects both the designer’s expertise (they know what matters) and the viewer’s curiosity (they want to explore).

At the single-chart level, storytelling structure is embodied in the title-subtitle-annotation framework. The title states the topic, the subtitle delivers the insight (“Revenue grew 40% after the product launch”), and annotations within the chart connect the insight to specific data features. At the multi-chart level, storytelling structure governs the sequence: start with the broadest context (the overall trend), then zoom into the key period or category, then present the evidence for the causal explanation. The narrative arc builds from “what happened” to “why it matters.”

Storytelling structure illustration

마티니 글라스 구조: 저자 주도형 도입부에서 독자 주도형 탐색으로 전환 / The martini glass structure: author-driven intro transitioning to reader-driven exploration

핵심 아이디어 / Key Ideas

  • 마티니 글라스 구조: 맥락을 설정하는 저자 주도형 선형 내러티브로 시작한 다음, 독자 주도형 탐색으로 전환합니다. 관객이 탐색하기 전에 먼저 방향을 잡아줍니다.
  • The martini glass structure: begin with an author-driven linear narrative that establishes context, then open into reader-driven exploration. The viewer is oriented before they are released.
  • 헤드라인으로서의 제목: 차트 제목은 단순 주제가 아니라 인사이트를 전달해야 합니다. “2020년 미국 실업률 급등”은 스토리이고, “미국 실업률, 2000–2024”는 라벨입니다.
  • Title as headline: the chart title should state the insight, not just the topic. “US unemployment spiked in 2020” is a story; “US unemployment rate, 2000–2024” is a label.
  • 점진적 공개: 모든 정보를 한 번에 보여주지 말고, 단계별로 공개합니다. 스크롤리텔링에서는 각 스크롤 단계가 하나의 데이터 레이어나 주석을 추가하고, 프레젠테이션에서는 각 슬라이드가 이전 슬라이드 위에 구축됩니다.
  • Progressive disclosure: reveal information in stages, not all at once. In scrollytelling, each scroll step adds one layer of data or annotation. In a presentation, each slide builds on the previous one.
  • 세부 사항 전에 맥락: 큰 그림(전체 트렌드, 전체 분포)을 먼저 보여주고, 중요한 구체적 특징으로 확대합니다. 맥락 없는 세부 사항은 의미가 없습니다.
  • Context before detail: show the big picture first (the overall trend, the full distribution), then zoom into the specific feature that matters. Without context, the detail is meaningless.
  • “그래서 뭐?” 테스트: 내러티브 시퀀스의 모든 차트는 질문에 답하거나 질문을 제기해야 합니다. 차트가 스토리를 발전시키지 않는다면 — 관객이 건너뛰어도 흐름을 놓치지 않는다면 — 제거합니다.
  • The “so what?” test: every chart in a narrative sequence should answer or raise a question. If a chart does not advance the story — if the viewer could skip it without losing the thread — remove it.
  • 감정적 공감: 숫자를 인간 경험과 연결하는 데이터 스토리가 더 기억에 남습니다. “1만 명 해고”는 통계이지만, 회사 이벤트 타임라인과 함께 보여주는 차트는 스토리가 됩니다.
  • Emotional resonance: data stories that connect numbers to human experiences are more memorable. “10,000 layoffs” is a statistic; a chart showing the spike alongside a timeline of company events is a story.

좋은 예시 / Good Examples

  • 뉴욕 타임스와 The Pudding의 스크롤리텔링 작업물: 관객이 주석이 달린 일련의 차트를 스크롤하며, 각각이 주장의 한 단계를 드러냅니다. 선형 포맷이 내러티브 구조를 강제합니다.
  • Scrollytelling pieces by The New York Times and The Pudding: the viewer scrolls through a sequence of annotated charts, each revealing one step of the argument. The linear format enforces narrative structure.
  • Hans Rosling의 Gapminder 프레젠테이션: 애니메이션 버블 차트가 200년간의 발전 데이터를 시간순으로 보여주며, Rosling이 각 움직임의 스토리를 내레이션합니다. 애니메이션은 저자 주도형이지만 도구 자체는 독자 주도형 탐색을 허용합니다.
  • Hans Rosling’s Gapminder presentations: the animated bubble chart walks the viewer through 200 years of development data, with Rosling narrating the story of each movement. The animation is author-driven but the underlying tool allows reader-driven exploration.
  • Knaflic의 “이전과 이후” 차트 재디자인: Storytelling with Data에서 각 예시는 복잡한 차트를 명확한 제목, 집중된 주석, 줄어든 잡동사니로 재설계하여 데이터를 내러티브로 변환합니다.
  • Knaflic’s “before and after” chart redesigns: in Storytelling with Data, each example starts with a cluttered, story-less chart and redesigns it with a clear title, focused annotation, and reduced clutter — transforming data into narrative.
  • 연차 보고서: 거시적 맥락(시장 환경)에서 회사 성과(매출, 성장), 미래 전망으로 이어지는 차트 시퀀스로 자연스러운 내러티브 아크를 만듭니다.
  • Annual reports that sequence charts from macro context (market conditions) to company performance (revenue, growth) to forward-looking projections, creating a natural narrative arc.

안티 패턴 / Anti-Patterns

  • “데이터 덤프” 대시보드: 위계, 순서, 주석 없이 12개의 차트가 그리드에 배치됩니다. 관객에게 모든 데이터가 한꺼번에 주어지고 스토리를 스스로 구성해야 합니다. 대부분 포기합니다.
  • The “data dump” dashboard: a grid of 12 charts with no hierarchy, no sequence, and no annotations. The viewer is presented with all the data at once and must construct the story themselves. Most give up.
  • 오도하는 내러티브: 시간 범위를 선별적으로 선택하거나, 축을 자르거나, 차트 순서를 조작하여 데이터가 뒷받침하지 않는 인과관계를 암시합니다. 스토리텔링 구조는 진실을 위해 봉사해야 합니다.
  • Misleading narrative: cherry-picking time ranges, truncating axes, or sequencing charts to imply a causal relationship that the data does not support. Storytelling structure must serve truth, not spin.
  • 탐색만 있고 안내는 없음: 50개의 필터가 있지만 기본 뷰가 없는 인터랙티브 도구. 새 사용자는 출발점도, 무엇을 찾아야 하는지도 모릅니다. 큐레이팅된 진입점을 제공하세요.
  • All exploration, no guidance: an interactive tool with 50 filters and no default view. New users have no starting point and no idea what to look for. Provide a curated entry point.
  • 핵심을 묻어버리기: 가장 중요한 인사이트를 20번째 차트에 배치하고 그 전에 방대한 배경 설명을 넣는 것. 5번째 차트 즈음이면 대부분의 관객이 이탈합니다. 가장 설득력 있는 발견으로 시작하고, 뒷받침하는 증거를 이어서 제시하세요.
  • Burying the lead: placing the most important insight in the last of 20 charts, preceded by extensive background context. By chart 5, most viewers have disengaged. Lead with the most compelling finding, then provide supporting evidence.
  • 뻔한 것을 설명하기: “보시는 바와 같이, 선이 올라갑니다.” 좋은 내러티브 텍스트는 관객이 이미 볼 수 있는 것의 묘사가 아니라 맥락, 인과관계, 함의를 추가합니다.
  • Narrating the obvious: “As we can see, the line goes up.” Good narrative text adds context, causation, or implication — not description of what the viewer can already see.

더 읽어보기 / Further Reading

  • Knaflic, C. N. (2015). Storytelling with Data: A Data Visualization Guide for Business Professionals. Wiley.
  • Segel, E., & Heer, J. (2010). Narrative Visualization: Telling Stories with Data. IEEE Transactions on Visualization and Computer Graphics, 16(6), 1139–1148.
  • Kirk, A. (2019). Data Visualisation: A Handbook for Data Driven Design (2nd ed.). SAGE Publications.
  • Rosling, H., Rosling, O., & Rosling Ronnlund, A. (2018). Factfulness. Flatiron Books.