스크롤 트리거 차트 애니메이션 — Phase A 모크업
각 차트는 IntersectionObserver 로 뷰포트 근처 도달 시 1회 entry 애니메이션을 재생합니다.
스크롤 성능 영향은 첫 1회 ~600ms 만, 이후엔 정적 SVG. prefers-reduced-motion 또는 상단 토글로 즉시 off.
Bubble/Network 의 ambient drift 는 별도 토글 (Phase B 후보).
아래 차트들은 의도적으로 큰 간격을 두고 배치되어 있어 스크롤하며 트리거되는 모습을 확인할 수 있습니다.
바로 화면에 보이는 차트도 IO 가 즉시 트리거합니다.
1. Line — stroke-dashoffset 그리기
선이 왼쪽에서 오른쪽으로 그어지듯 등장 (800ms ease-out). 가장 보편적이고 mono 톤과 잘 맞음.
USD/KRW 환율 추이
2026년 1월 ~ 5월 (예시 데이터)
↓ 스크롤하면 다음 차트가 트리거됩니다 ↓
2. Bar — 막대 stagger grow
막대가 바닥에서 위로 자라남. 30ms stagger 로 순차 등장.
3. Candle — OHLC 캔들 stagger
캔들이 좌측부터 등장. 심지(wick) 먼저 그어지고 몸통이 펴짐.
KOSPI 일봉 (예시)
2026-05 마지막 20거래일
↓ 더 스크롤 ↓
4. Bubble — r=0 → r 확장 + (옵션) ambient drift
버블 반지름이 0에서 자연 크기로 확대. ambient toggle on 시 ±3px 의 미세한 부유.
국가별 GDP × 무역 의존도
버블 크기 = 인구
5. Network — 노드 fade + 링크 dashoffset
링크가 먼저 그어지고 노드가 페이드 인. ambient on 시 force sim 미세 alphaTarget.
행위자 관계도
노드 = 조직, 엣지 = 협력/경쟁
↓ 더 스크롤 ↓
6. Map — 베이스맵 fade + 경로 dashoffset
국경 페이드 인 → 경로(arc) 가 출발지에서 도착지로 그어짐 → 마커 pop.
주요 무역 경로
예시 — Seoul → Tokyo / Singapore / Frankfurt
7. Donut — arc tween (0 → 실제 각도)
호(arc)가 12시 방향에서 시계 방향으로 그려짐.
↓ 마지막 ↓
8. Gantt — 바 width grow (left→right)
각 바가 시작점에서 종료점으로 확장. 30ms stagger.
━━━ Part B: production 빠진 6종 ━━━
9. Stacked Bar — 누적 막대 (카테고리별 stagger)
각 카테고리 안에서 아래 segment 부터 차례로 자라남.
10. Heatmap — 셀 fade-in (좌상 → 우하 wave)
대각선 방향 wave 로 셀이 페이드 인. 시간 대비 강도 패턴 가시화.
11. Dual Line — 두 시리즈 dashoffset (slight stagger)
두 선이 60ms 간격으로 같은 방향으로 그어짐.
12. Forecast — 실측 → 점선 예측 + 신뢰구간 fade
실측선 먼저 → 점선 예측선 → 신뢰구간 영역 fade-in.
GDP 성장률 전망
2024 실측 → 2026 예측 ±1σ
↓ 더 스크롤 ↓
13. Area — 영역 sweep reveal (clip rect 확장)
clip-path 가 왼쪽에서 오른쪽으로 펼쳐지며 영역이 드러남.
14. Choropleth — 베이스맵 fade → 국가별 stagger fill
국경 페이드 인 후, 값 순서로 국가가 색칠됨.
━━━ Part C: 신규 7종 (FT/Economist 스타일) ━━━
15. Scatter — 라벨 산점도 (FT 좌측 스타일)
점이 위치로 fade + scale-up, 라벨은 짧은 지연 후 페이드 인.
국가별 AI 수용도
% 'excited' vs % 'nervous' (예시)
16. Stacked Area — 시계열 누적 영역 (FT 우측 스타일)
각 레이어가 아래부터 위로 차례로 sweep reveal.
지역별 점유율 변화
2021-2025 분기별 (%)
↓ 더 스크롤 ↓
17. Lollipop — bar 의 우아한 대안 (stem 그리기 + dot pop)
stem 이 stroke-dashoffset 으로 그어진 후 dot 이 r=0→r 로 등장.
18. Slope (slopegraph) — 두 시점 비교, 순위 변화
좌측 점 등장 → 우측 점 등장 → 연결선 dashoffset 으로 그어짐.
19. Small Multiples — 같은 차트 4면 그리드 비교
4개의 미니 line 이 0.1초 간격으로 순차 등장.
4개국 인플레이션 추이
2022-2026 월별 (%)
↓ 마지막 두 개 ↓
20. Waterfall — 증감 누적 분해 (P&L 스타일)
각 막대가 이전 baseline 에서 자라남. +/- 색 분리.
영업이익 brücke
2024 → 2025 (억 원)
21. Range Bar (Dumbbell) — 두 값 사이 갭
연결선 dashoffset → 좌측 점 → 우측 점 순서.
국가별 남녀 임금 격차
2024 (USD/시간, 예시)
━━━ Part D: Sankey (재무·수익성 분석) ━━━
22. Sankey — 다단계 흐름 분해 (재무제표 / 자본 배분)
링크가 좌→우 순차로 그어짐. 적자 flow 는 빨간색 자동.
삼성전자 2024 연간 손익계산서 분해 (예시)
사업부 → 매출 300.9조 → 원가/이익 분해 → 영업이익 32.7조 → 법인세/당기순이익. 단위: 조원. 영업외 손익 단순화.
검토 포인트:
(1) entry 속도가 스크롤 흐름을 방해하지 않는가
(2) ambient drift 가 mono 톤(신문/잡지) 과 충돌하지 않는가
(3) 차트 종류별 모션 metaphor 가 일관된가
(4) motion off 시 즉시 정적 렌더가 깔끔한가
(5) 신규 7종: scatter / stacked_area / lollipop / slope / small_multiples / waterfall / range_bar 가 mono 톤에 어울리는가, production 도입 가치가 있는가