인포그래픽 모션 활용 루트

조사일·웹 확인일: 2026.09.30 · 대상: 정지·움직이는 인포그래픽 편집, 데이터 강조, 주석 등장, 전후 비교, 노션·웹 삽입

핵심 루트: 읽을 최종 화면부터 완성 → 독자의 질문과 비교 대상을 고정 → 정적으로 해결되는지 판단 → 변화 추적에 필요한 부분만 움직임 → 읽기 홀드와 사용자 제어 → 정적 대안 검수.

근거 표기: [R]은 연구, [G]는 공식 가이드·접근성 기준, [L]은 로컬 사전. [P]는 이 루트의 제작 시작값·설계 제안이야. 초·px·개수 범위는 연구에서 증명한 최적값이나 접근성 보장값이 아냐. 실제 표시 크기·문장 길이·데이터 복잡도에 맞춰 조정해. 출처 ID의 URL과 날짜는 문서 끝에서 확인해.

1. 목표와 제약

목표부터 정해

독자가 할 일	성공한 결과	기본 표현	근거와 적용 범위
핵심 수치 찾기	무엇의 값인지, 단위·기간까지 읽음	정확값·직접 라벨·한 곳 강조	장식보다 정보 위계를 먼저 정하라는 Carbon 전략을 적용 [G1]
두 상태 비교하기	전후 값과 차이를 동시에 확인	같은 축의 병렬 차트·덤벨·차이 라벨	모바일 산점도 연구에서 정적 small multiples가 대체로 더 빠른 과제 수행을 보임. 모든 차트로 일반화하지 않음 [R2]
같은 대상의 변화 따라가기	이동 전후에 같은 항목임을 식별	id·라벨을 유지한 점·막대 전환	공유 데이터 차트 사이의 적절한 전환은 지각을 도울 수 있음 [R1]
집계·변환 이해하기	원자료가 최종 수치가 되는 단계 이해	필터 → 묶기 → 집계 → 결과, 단계별 정지	Datamations의 데이터 변환 설명 방식을 적용 [R3]
노션·웹에서 다시 읽기	재생 없이도 결론·원자료 확인	완성 포스터·설명문·표·원본 링크	복잡한 이미지에 짧은 설명과 상세 정보 제공 [G4]

매체별 제약과 기본값

환경	제약	루트 선택·제작 시작값 [P]	확인 근거
정지 이미지·PDF	시간 순서·호버·재생에 기대면 정보 손실	번호·화살표·직접 라벨로 순서 표시. PNG는 실제 표시 폭의 2배 해상도부터 검토, SVG는 대상 서비스 지원 확인	복잡한 이미지의 텍스트 대안 [G4]
웹 인포그래픽	반응형 축·주석 충돌, 키보드·터치, 스크립트 실패	정적 완성 상태를 기본으로 두고 클릭한 경우만 재생. 최소 320px와 실제 임베드 폭에서 확인	반응형 삽입 방식과 고정 iframe의 잘림 위험 [G5]
노션 삽입	임의 HTML 실행을 전제할 수 없음. 외부 사이트가 임베드를 막을 수 있음	이미지 업로드 또는 호스팅한 HTTPS URL을 `/embed`에 입력. 컨트롤은 임베드 내부에 배치. 결론·표·원본 링크는 노션 본문에도 제공	외부 로그인이 필요한 임베드는 데스크톱·모바일 앱에서 동작하지 않는다는 공식 안내 [G6]
짧은 무음 영상	시청자가 재생 중간에 들어오고 읽기 속도가 다름	한 주장 8~15초, 전후 비교 12~20초, 집계 설명 20~30초부터 설계. 첫 프레임에 주제, 마지막 프레임에 결론·정확값	시간 범위는 [P]. 빠른 모션의 오류·느린 모션의 지연 위험 [R1]
GIF·자동 반복 미디어	개별 정지 제어·모션 축소 대응이 어려울 수 있음	짧다는 이유로 무한 반복 허용하지 마. 반복 총 노출과 호스트 제어를 확인하고, 제어 불가하면 정적 이미지·사용자 시작 영상 선택	자동 시작·5초 초과·다른 내용과 병렬이라는 조건을 함께 판단 [G2]
음성 포함 영상	설명과 데이터 등장 시점 불일치	핵심어 발화에 강조를 맞추고 읽기 홀드를 발화 종료까지 연장. 음성 정보는 자막·전사문에도 제공	로컬 발화 큐·읽기 홀드 [L2]. 시간 연장은 [P]

접근성은 매체 단계에서 정해

항목	적용 규칙	기준과 수준
멈춤·재생	자동 시작하고 5초를 초과하며 다른 콘텐츠와 병렬인 움직임에는 정지·일시정지·숨김 수단 제공. 자동 갱신 정보는 별도 조건이므로 5초 예외에 기대지 마	WCAG 2.2 SC 2.2.2, A [G2]
모션 축소	웹은 `prefers-reduced-motion`에서 큰 이동·줌을 제거하고 완성 상태·단계 선택을 유지. 영상·GIF는 CSS로 내부 모션이 바뀌지 않으므로 정적 대안을 별도로 노출	상호작용 모션의 비필수 애니메이션 해제는 SC 2.3.3, AAA. C39는 구현 기법이며 필수 기술은 아냐 [G3]
색·대비	색 외에 라벨·기호·선 종류 병용. 일반 텍스트 4.5:1, 큰 텍스트 3:1. 큰 텍스트는 통상 18pt 이상 또는 굵은 14pt 이상. 이해에 필요한 그래픽은 인접 색과 3:1, 예외 조건은 원문 확인	SC 1.4.1 A, 1.4.3 AA, 1.4.11 AA [G7]
텍스트 대안	짧은 설명에는 차트 목적·핵심 결론, 상세 설명·표에는 값·기간·단위·관계 제공. 모든 원자료를 짧은 alt 한 줄에 몰아넣지 마	WAI Complex Images [G4]
섬광	이 루트는 깜빡임을 사용하지 않는 쪽으로 설계. 공식 기준은 임의의 1초 동안 3회를 초과하지 않거나 일반·적색 섬광 임계값 이하라는 조건이야	SC 2.3.1, A [G8]. 제작 금지는 [P]

2. 설계 로직

판단 순서

한 문장 주장 작성: “어떤 기간·집단에서 무엇이 얼마나 달라졌나”로 써. 탐색용이면 주장 대신 독자의 질문을 써. 데이터 출처·관측일·단위·분모·결측·불확실성부터 확인해.
최종 정지 화면 설계: 제목 → 차트 → 직접 라벨 → 핵심 주석 → 출처·조건 순으로 위계를 잡아. 마지막 상태 하나로 핵심 질문에 답하지 못하면 모션을 붙이기 전에 수정해.
매체·제어 분기: 정지 파일이면 공간적 순서로 끝내. 웹·노션이면 임베드 가능 여부와 정지·단계 제어부터 확인해. 제어 불가 자동 반복이면 정적으로 되돌려.
과제 분기: 정확값 조회·다항목 비교는 정적 병렬 우선. 동일 항목의 변화 추적이면 객체 유지 전환. 집계 원리면 단계 리빌. 관심 유도만 필요하면 고정 차트에 국소 강조 하나.
변화 계약 고정: 전후 id·단위·축 범위·분모를 기록해. 같은 항목이 아니면 모프 금지. 필터·정렬·축 변경이 겹치면 의미 변화별로 분리하고 변경 사실을 표시해 [R1].
효과 조합 선택: 한 비트에 주요 변화 하나, 보조 강조 하나부터 시작해 [P·L2]. 차트 이동 중에 새 문장을 읽히지 말고 도착 → 주석 → 홀드로 나눠.
시간·대안 배치: 등장 시간보다 읽기 시간을 먼저 확보해. 독자가 값·단위·결론을 읽지 못하면 홀드 연장·문장 축약·장면 분리. 웹은 기다림 대신 다음·이전 단계로 해결해.
완성 판정: 정지·모션 축소·모바일·역방향 탐색에서 같은 결론과 정확값이 남는지 확인해. 해결 못 하면 해당 효과를 제거해.

흐름: 질문·데이터 → 최종 정지 화면 → 매체·제어 → 조회 / 비교 / 추적 / 과정 분기 → 불변 요소 확정 → 주요 효과＋보조 효과 → 홀드·정적 대안 → 검수.

상황별 결정표

상황	쓸 효과·조합	언제 배치하나	이유·제한
보고서용 핵심 지표 한 개	정확값 고정＋하이라이트 스윕 또는 밑줄	설명할 값에 도달한 순간 1회	움직임은 시선을 끌므로 국소화 [R1]. 정지판은 강조된 상태만 남김
카테고리 크기 비교	축·라벨 고정 → 막대 동시 성장 → 정확값 → 홀드	최초 1회, 이후 조회는 완성 상태	0 기준선 유지 [G9]. 항목별 지연이 사실상 읽기 우선순위를 만들 수 있어 동시 시작 우선 [P]
“여기가 중요함” 주석	고정 차트 → 앵커 강조 → 연결선 → 주석 페이드	데이터가 정지한 뒤	데이터·설명 경쟁을 줄이는 단계화 [R1·L2]. 주석이 값을 덮으면 외곽으로 이동
두 시점의 정확한 차이	전후 병렬 차트＋차이 라벨＋한 쌍 강조	처음부터 전후 모두 보임	이전 프레임 기억에 기대지 않음. 정적 대안의 장점은 과제별로 다름 [R2]
동일 대상의 좌표 변화	이전 상태 홀드 → id 유지 점 이동 → 새 상태 홀드＋전후 요약	추적할 대상을 먼저 지목한 뒤	객체 대응 보존 [R1]. 중간 좌표는 관측값이 아니라 전환 상태
순위 변화	막대·라벨 묶음 이동 → 순위·수치 확정 → 홀드	사용자가 시점 선택 후	id 고정, 동점 정책 표시. 순위와 길이 변화가 복잡하면 길이 갱신 후 정렬로 분리 [P·L2]
사진·동일 구도의 전후	병렬 이미지 또는 고정 이미지 위 비교 와이프＋전후 라벨	구도·크기 정렬 후	와이프는 경계만 이동 [L1]. 정확한 수치 비교에는 차트 병렬이 우선
시간 추세 읽기	전체 선 고정＋특정 구간 강조, 필요하면 x축 방향 리빌	시간 순서를 설명하는 동안	경로 길이 기준 draw는 x축 시간과 일치하지 않을 수 있음 [L2]. 전체 선을 마지막에 유지
분모·비율 설명	고정 단위 격자 → 그룹 채움 → 분자/분모 라벨	한 칸의 단위를 설명한 뒤	같은 칸 크기·같은 분모 유지. 반올림은 표기 [P·L2]
원자료에서 평균·합계 도출	필터 리빌 → 그룹 이동 → 집계 대응선 → 결과	단계 버튼 또는 설명 비트별	Datamations 방식에서 데이터 변환의 의미를 차용 [R3]. 개별 점 이동 경로를 실제 사건으로 설명하지 마
작은 차이 확대	원본 유지＋선택 테두리 → 별도 확대 인셋＋축 범위	전체 관계를 읽은 뒤	전체 맥락 유지 [P·L2]. 크기 비교 막대를 잘라 차이를 과장하지 말고 점 차트도 검토 [G9]
서로 다른 지표·집단으로 변경	컷 또는 짧은 페이드＋새 제목·축·단위	이전 요약을 끝낸 뒤	같은 대상으로 오인시키는 모프 방지 [R1]. 서로 다른 차트를 겹쳐 읽히지 마
임베드가 잘리거나 제어 실패	완성 포스터＋상세 표＋원본 링크	실패 시 즉시 대체	고정 iframe의 크기 제약 [G5], 노션 임베드 제한 [G6]

잘된 사례에서 가져올 설계 원리

확인한 사례·자료	확인한 구조	이 루트에 가져올 것	해석 경계
DynaVis 연구 [R1]	공유 데이터 차트 사이의 변환·전환 설계와 두 통제 실험	대응 객체 유지, 복합 변화 단계화, 도착 후 읽기	특정 실험 결과가 모든 인포그래픽·타이밍의 우수성을 보장하지 않음
Datamations 공식 프로젝트 [R3]	데이터를 선택·정리·변환해 최종 시각화에 이르는 과정 설명	“숫자가 어떻게 만들어졌나” 템플릿	공식 프로젝트 설명 확인 범위. 라이브러리 실행·효과 크기 재현은 하지 않았어
모바일 추세 비교 연구 Figure 1·3 [R2]	애니메이션 산점도와 항목별 정적 궤적 비교, 96명·9개 과제	정확한 비교를 요구하면 정적 궤적·병렬 비교도 제시	애니메이션은 비상호작용이며 최소 한 루프 관람을 요구했어. 제어 가능한 차트와 동일 조건이 아냐

3. 구조 템플릿 4개

모든 타이밍은 [P]. 영상은 무음에서도 이해하게 설계하고, 문장·내레이션이 길면 홀드를 늘려. 웹은 아래 초를 대기 의무로 쓰지 말고 사용자 단계 선택 시의 전환 시간으로 적용해.

A. 정지형 데이터 강조 카드

적합: 노션 본문·웹 카드·PDF, 핵심 수치 또는 두 상태 비교. 총 재생시간 없음.

읽기 순서	배치	표현·효과의 정적 대응
1	상단 주장＋기간·집단	짧은 제목, 핵심어 한 곳만 색·밑줄 강조
2	중앙 차트 또는 전후 병렬	동일 축·단위, 정확값 직접 표시
3	데이터 외곽의 주석 1~2개	연결선·테두리·완성된 하이라이트
4	하단 출처·분모·정의·예외	본문에서도 읽을 수 있는 설명·표 링크

정지판에 애니메이션의 중간값·미완성 막대·사라진 이전 상태를 남기지 마. 주석 없이 읽으면 다른 결론이 나오는지 먼저 확인해.

B. 주석으로 핵심 찾기, 12초

적합: 완성 차트에서 한 구간의 의미를 설명. 차트 본체는 계속 고정.

시간	비트	효과·조합
0.0~2.0초	훅·읽을 질문	완성 차트·제목·축·단위 모두 보임. 질문 문장 고정
2.0~2.3초	대상 지목	목표 점·구간에 테두리 또는 밑줄 300ms
2.3~2.6초	관계 연결	연결선 draw 300ms
2.6~2.8초	주석 등장	주석 fade 200ms, 최대 두 줄부터 검토
2.8~7.0초	해석 읽기	모든 요소 정지. 정확값과 조건 함께 확인
7.0~7.4초	결론 강조	제목의 핵심어 한 곳 스윕 400ms
7.4~12.0초	정리	차트·주석·결론·출처를 고정한 채 끝냄

웹 적용: 초기에는 완성 차트와 설명을 읽게 해. 별도 “강조 보기” 동작이 있을 때만 강조 순서 재생. 자동 재생을 택하면 [G2] 조건을 확인해. 모션 축소는 최종 주석을 즉시 제공.

C. 전후 변화 비교, 16초

적합: 동일 집단·동일 단위의 두 시점. 정확값 비교는 마지막 병렬 화면에서 수행.

시간	비트	효과·조합
0.0~2.0초	훅·비교 약속	질문＋전·후 기간 라벨＋공통 축
2.0~4.0초	이전 상태 읽기	이전 값 고정, 비교 대상 한 쌍 표시
4.0~4.8초	변화 추적	같은 id의 점·막대 보간 800ms, 축·카메라 고정
4.8~7.0초	이후 상태 읽기	새 정확값 고정. 중간 상태가 실측이 아님을 구분
7.0~7.2초	비교 화면 전환	컷 또는 짧은 fade로 준비된 전후 병렬 요약을 공개
7.2~7.7초	차이 설명	차이 라벨·주석 500ms 이내, 대상과 연결
7.7~16.0초	정리·검증	전·후 정확값＋절대 차이·상대 변화＋단위·출처 고정

비율 지표는 %와 %p를 구분해. 예: 30% → 45%는 ＋15%p, 상대 변화 ＋50%. 기준값 0이면 상대 변화율을 임의로 만들지 마. 모션 축소는 처음부터 전후 병렬과 차이 라벨 제공.

D. 집계 과정 설명, 24초 또는 수동 4단계

적합: 필터·그룹·평균·합계가 최종 차트로 이어지는 설명. 데이터 변환에 의미가 있을 때만 선택 [R3].

시간	비트	효과·조합
0.0~3.0초	질문·분석 약속	원자료·단위·집계할 질문 고정
3.0~3.6초	1단계 필터	선택 테두리 200ms → 제외 요소 fade 400ms. 제외 조건·남은 n 표시
3.6~7.0초	1단계 홀드	선택된 원자료를 읽음. 제외는 값 0과 구분
7.0~7.8초	2단계 묶기	id 유지 그룹 이동 800ms, 그룹명 고정
7.8~11.0초	2단계 홀드	묶음 기준·그룹별 n 표시
11.0~11.8초	3단계 집계	대응선·집계 결과 등장 800ms. 수식·분모·결측 처리 표시
11.8~16.0초	3단계 홀드	합계·평균·비율 중 무엇인지 확인
16.0~16.6초	4단계 최종 차트	계산된 결과에 대응하는 막대·점 공개 600ms
16.6~24.0초	정리	질문의 답＋완성 차트＋집계 규칙＋출처 고정

웹은 “원자료 / 필터 / 묶기 / 집계·결과” 단계 버튼과 이전·다음 제공. 단계 전환은 600~800ms부터 검토하되 읽기는 무제한. 정적 대안은 네 단계 도해와 결과표. 표본 가중치·결측 처리 등 실제 집계 규칙을 모션 편의 때문에 바꾸지 마.

4. 권장 효과·파라미터·피할 것

공통 파라미터 계약

단위: 시간은 ms, 위치·선 두께는 실제 표시 화면의 CSS px 기준 [P]. 1920px 원본을 320px로 줄일 때 원본 px를 그대로 가독성 기준으로 쓰지 마.
읽기 홀드: 단순 제목 1.0~1.6초, 단순 차트·주석 1.8~3.0초부터 시작 [L2·P]. 표를 읽거나 비교 계산을 요구하면 더 길게 잡거나 사용자 제어로 전환해.
이징: Carbon productive의 진입 E=cubic-bezier(0,0,0.38,0.9), 상태 변화 S=cubic-bezier(0.2,0,0.38,0.9) 사용 가능 [G1]. L=linear는 시간 진행·스크럽에 사용. 로컬 사전의 키와 곡선이 다를 수 있으니 코드에 실제 곡선을 명시해.
데이터 값은 공통 진행률 하나로 점·막대·라벨을 맞춰. 물리량의 시간 변화율을 읽어야 하면 시각 속도를 임의의 ease로 바꾸지 말고 실제 시간축·L을 사용 [P].
모션 축소: 이동 0px·scale 1, 최종 상태 즉시 노출을 기본으로 해 [P·G3]. 옵션으로 짧은 fade를 사용해도 정보가 지연·누락되지 않는지 확인해.

효과별 권장 범위

효과	권장 시작 범위 [P, 일부 L2 기반]	조합·배치	제한·근거
국소 fade	150~250ms, opacity 0→1	고정 차트 위 라벨·주석	읽기 대상이 도착한 뒤. Carbon 시간 토큰을 그대로 통계 최적값으로 해석하지 마 [G1]
하이라이트 스윕·밑줄	300~550ms, 한 비트에 한 곳	정확값 고정＋배경판 scaleX 또는 선 draw	글자·차트 길이 자체는 늘리지 마. 대비 유지 [G7·L2]
주석 등장	선 250~350ms → 100~150ms 간격 → 글 180~250ms, 홀드 1.8초 이상	앵커 테두리＋연결선＋텍스트	화면당 1~3개부터 검토. 추측을 인과 사실로 쓰지 마 [L2·R1]
막대 성장	500~800ms, 동시 시작 기본. 순서 설명만 시차 50~90ms, 총 시차 400ms 이내	축·단위 고정 → 성장 → 정확값	origin은 0선. 음수는 반대 방향. 보간값을 실측값처럼 노출하지 마 [G9·L2]
카운트업	500~800ms, 최종값 홀드 2초 이상	지표 카드 한 개에 선택 적용	조회·비교에는 정확값 고정 우선. 소수점·자리 폭 고정. “표시 전환”으로 취급 [L2·P]
시간 선 리빌	700~1200ms, L, 선 2~4px부터 검토	x축 clip → 관심 구간 주석	SVG 경로 길이 공개를 실제 시간 경과로 오인시키지 마 [L2]
점 이동·값 보간	600~1000ms, 전후 홀드 1.2~2.5초	id·색·라벨 유지, S 또는 L	중간값은 연출 보간. 무관한 객체 연결·과도한 교차를 피함 [R1·L2]
순위 재배치	500~800ms, 시차 0~40ms, 도착 후 1.6초 이상	막대·라벨 한 묶음, 동점 규칙 고정	독자가 읽는 동안 지속 정렬하지 마 [L2]
단위 격자 채움	전체 700~1200ms, 칸 시차 10~20ms, 칸 변화 80~120ms	분모 고정＋그룹 채움＋정확 비율	큰 격자는 그룹 공개. 반올림·한 칸의 단위 명시 [L2]
확대 인셋	450~650ms, 1.8~3배, 홀드 1.6~2.4초	원본 유지＋위치 테두리＋인셋	재구성한 확대 축 범위 명시. 기준선 절단으로 막대 차이를 과장하지 마 [G9·L2]
비교 와이프	연출 600~1000ms 또는 사용자 드래그, 초기 경계 50%	정렬된 이미지＋전후 라벨	드래그만 제공하지 말고 버튼·키보드·병렬 대안도 제공 [L1·P]
컷·페이드	컷 0ms, fade 150~250ms	다른 지표로 넘어갈 때 제목·단위 함께 변경	겹친 값은 읽기 대상이 아냐. 도착 후 홀드 확보 [L1·P]
수동 단계 리빌	클릭 후 200~800ms, 읽기 대기 무제한	이전·다음＋단계명＋정적 전체 보기	스크롤 거리와 재생 초를 동일시하지 마 [L2]

피할 조합과 대체

피할 것	문제	대체·근거
막대·숫자 overshoot, squash/stretch	실제값보다 커지는 순간이 잘못된 크기를 전달	정확한 길이에 단조롭게 도착. 강조는 별도 테두리·밑줄 [R1·G1]
바운스·스프링＋카운터＋카메라 줌 동시 사용	읽을 대상이 여러 속도로 변함	주요 변화 하나＋보조 강조 하나 [P·L2]. Carbon은 장식적인 bounce·stretch를 피하라 안내 [G1]
모든 차트의 첫 등장마다 0부터 성장	독자가 반복해서 값 공개를 기다림	최초 설명 때만 선택 사용, 이후 완성값 즉시 표시 [P]
축 범위 자동 변경＋항목 정렬＋값 변경	무엇이 변했는지 분리하기 어려움	비교 축 고정, 불가피하면 의미 변화별 단계·축 변경 표시 [R1]
전후 교대만 하고 이전 상태 삭제	정확한 비교가 기억에 의존	최종 병렬·차이 라벨, 사용자 되돌리기 [R2·P]
무관한 차트끼리 모프·매치	동일 데이터·인과 관계를 잘못 암시	컷＋새 제목·단위 [R1]
차트 전체 회전·3D 원근·휩팬·패럴랙스	크기·위치 판독과 화면 안정성 저하	고정 2D 차트, 필요 시 인셋. 3D 막대의 판독 문제는 공식 가이드 확인 [G9], 나머지 제외는 [P]
깜빡이는 강조·무한 펄스	산만함·섬광·제어 문제	1회 밑줄·고정 테두리 [G2·G8]
타자기·글자 스크램블로 단위·조건 공개	읽는 도중 뜻이 미완성	문장 단위 fade 또는 처음부터 고정 [P·L2]
모션을 껐더니 opacity 0·카운터 0 유지	대안에서 정보가 사라짐	모션 축소·스크립트 실패에도 완성값·설명 표시 [G3·L2]

5. 에이전트 프롬프트 예시 3개

예시 1. 노션용 정지 데이터 강조 카드

이 인포그래픽 루트의 템플릿 A로 노션 본문용 정지 카드를 만들어. 제공한 원자료와 출처만 사용해. 목표는 가장 큰 차이를 찾고 정확값·기간·단위를 읽는 거야. 주장 한 문장을 먼저 정하고, 같은 축의 비교 차트와 직접 라벨을 배치해. 핵심 한 쌍만 밑줄·테두리로 강조하고 주석은 두 개 이내로 써. 320px 표시 폭에서도 읽히게 구성해. 색 외 구분을 넣고 일반 글자 대비 4.5:1을 확인해. 완성 이미지와 함께 짧은 대체 설명, 상세 데이터표, 출처·확인일을 제공해. 제공 데이터에 없는 인과 설명이나 수치를 만들지 마. 마지막에 완성 체크리스트 결과를 알려줘.

예시 2. 무음 전후 비교 영상

이 루트의 템플릿 C로 16초 무음 전후 비교 인포그래픽을 만들어. 데이터는 동일 집단의 도입 전 30%, 도입 후 45%라는 가상 예시야. 화면에도 가상 예시라고 표시해. 축은 0~100%로 고정하고 id·색·단위를 유지해. 2초 이전 상태 홀드 후 800ms 보간하고, 마지막에는 전후 병렬·＋15%p·상대 변화 ＋50%를 정확히 표시해. 막대 길이와 숫자를 같은 진행률로 맞추고 보간을 실측 시계열로 표현하지 마. 카메라는 고정하고 주요 변화 하나와 보조 주석만 사용해. 0초·중간·끝 화면을 검수하고 최종 포스터와 설명문도 만들어. 시간값은 출발점이므로 실제 모바일 표시에서 읽기 부족하면 홀드를 늘려.

예시 3. 노션·웹 삽입용 집계 설명

제공한 CSV와 집계 규칙으로 이 루트의 템플릿 D에 해당하는 인포그래픽을 만들어. 원자료 → 필터 → 그룹 → 집계·결과의 네 상태를 사용자 버튼으로 탐색하게 해. 각 단계에 남은 n, 단위, 분모, 결측 처리 규칙을 표시해. 이동은 동일 id를 유지하고 의미가 다른 변화는 나눠. 자동 재생을 기본으로 켜지 마. 재생 기능을 넣으면 멈춤·이전·다음·전체 보기와 키보드 조작을 제공해. prefers-reduced-motion에서는 큰 이동 없이 동일한 값·주석을 읽게 해. 노션에는 실행 가능한 HTML 업로드를 가정하지 말고 호스팅한 HTTPS 임베드 URL 방식으로 준비해. 외부 로그인 없이 접근하는 상황과 320px·실제 임베드 폭에서 잘림·조작을 확인해. 임베드 불가 시 정지 포스터·결과표·원본 링크를 제공하고 확인하지 못한 환경은 검수 결과에 구분해.

6. 체크리스트: 완성 판정

모든 필수 항목이 통과해야 완성. 미확인 항목을 통과로 표시하지 마. 이 문서는 조사·설계 문서이며 실제 영상 렌더·노션 삽입 실험은 수행하지 않았어.

필수 확인	통과 조건	확인 방법
질문·결론	독자가 무엇을 비교·해석해야 하는지 한 문장으로 설명 가능	최종 화면만 보고 질문에 답하기
데이터 정확성	원자료·최종값 일치, 단위·기간·집단·분모·결측·반올림 명시	입력과 결과표 대조, 예시값 표기 확인
증감 표현	차이·변화율·%p 구분, 기준값 0 예외 처리	전후 값을 직접 재계산
비교 정직성	크기 비교 막대 0 기준선, 전후 축 동일, 축 변경은 명시	시작·끝·병렬 화면 대조
변화의 의미	동일 id만 연결, 추가·삭제·필터는 구분, 중간값은 연출 보간	중간 프레임과 상태 정의 대조
강조·주석	강조가 결론과 일치, 축·값을 가리지 않음, 인과 주장에 근거 있음	주석 없는 화면과 의미 비교
읽기	실제 표시 크기에서 값·단위·조건을 읽을 수 있음	모바일·임베드 크기에서 무음 재생, 부족하면 홀드 연장
정지 대안	재생 없이 핵심 결론·전후·집계 규칙 확인	포스터·단계 도해·설명·표 검수
색·대비	색 외 구분과 적용 대상별 대비 충족	대비 계산, 흑백에서도 라벨·기호 확인
제어	필요한 정지·재생·단계 제어 제공, 키보드·터치로 동일 정보 접근	Tab·Enter·방향키·터치, 재생 정지 후 본문 조작
모션 축소	이동·줌 제거 후에도 정확값·주석·제어 유지	OS 설정과 미디어 쿼리 상태, GIF·영상의 별도 대안 확인
시간 탐색	시작·중간·끝·역방향에서 값·선택·라벨 일치	같은 시점으로 반복 이동, 누적 이벤트 오류 확인
임베드	실제 서비스에서 높이·줄바꿈·컨트롤 정상, 로그인·차단 실패 대안 있음	노션 웹·데스크톱·모바일 중 대상 환경에서 직접 확인
출처·기록	데이터 출처·관측일·조사 근거·확인일 표시	링크 열기, 갱신 데이터와 저장본 날짜 구분

출처 목록

웹 자료는 모두 2026.09.30에 확인했어. 게시·갱신일을 확인하지 못한 문서는 “미표기”로 기록했어. 검색 결과의 크롤링일·업로드 경로를 발행일로 대체하지 않았어. 블로그 일반론은 근거로 사용하지 않았어.

ID	출처·URL	발행·갱신 날짜	사용한 근거·열람 범위
R1	Heer·Robertson, Animated Transitions in Statistical Data Graphics, 논문 PDF	2007.11, InfoVis 2007	공식 서지·원문 확인. 공유 데이터 전환, 객체 대응, 주의 유도·허위 관계 위험, 타이밍·복잡도 고려
R2	Brehmer 외, A Comparative Evaluation of Animation and Small Multiples for Trend Visualization on Mobile Phones	2019, InfoVis 2019 자료. 열람 PDF는 출판 날짜 필드가 미완성	초록·도입·실험 설계와 Figure 1·3 확인. 정적·동적 추세 비교의 과제 의존성과 제어 없는 실험 조건
R3	Microsoft Research, Datamations	미표기	공식 프로젝트 설명 확인. 데이터 선택·정리·변환 과정을 설명하는 사례
G1	IBM Carbon, Motion overview	미표기	정보 위계·여정 우선 설계, productive easing 곡선·duration 토큰·장식적 bounce 회피
G2	W3C WAI, Understanding SC 2.2.2: Pause, Stop, Hide	해당 페이지 갱신일 미표기	자동 시작·5초 초과·병렬 표시 조건, 자동 갱신 별도 조건
G3	W3C WAI, Understanding SC 2.3.3, Technique C39	해당 페이지 갱신일 미표기	비필수 상호작용 모션 해제, prefers-reduced-motion 사용과 기법의 지위
G4	W3C WAI, Complex Images	해당 페이지 갱신일 미표기	차트의 짧은 대안 설명·상세 설명·데이터 정보 제공
G5	Datawrapper Academy, How to share and embed visualizations	갱신 2025.12.08	공식 제품 가이드. script·responsive iframe·고정 iframe 차이와 크기·잘림 제약
G6	Notion Help, Embeds, bookmarks & link mentions	미표기	URL 임베드·크기 조정, 외부 임베드 차단 가능성과 로그인 임베드 앱 제한
G7	W3C WAI, SC 1.4.1 Use of Color, SC 1.4.3 Contrast, SC 1.4.11 Non-text Contrast	해당 페이지 갱신일 미표기	색 단독 전달 금지, 텍스트·필수 그래픽 대비 기준과 예외
G8	W3C WAI, SC 2.3.1 Three Flashes or Below Threshold	해당 페이지 갱신일 미표기	임의 1초의 섬광 횟수 또는 일반·적색 섬광 임계값 조건
G9	UK Government Analysis Function, Module 5: Bar charts	미표기	공식 통계 교육. 막대 0 기준선, 3D 막대 판독 문제, 축 절단 대신 점 차트 검토
L1	로컬: 2 전환·컷·카메라.md	파일 날짜 2026.09.30, 열람 2026.09.30	와이프·컷·페이드·홀드·연속성 정의와 과용 주의
L2	로컬: 3 타이포와 데이터 애니메이션.md	파일 날짜 2026.09.30, 열람 2026.09.30	데이터 효과 11~20, 개념 35~39, 읽기 홀드·모션 축소·정직성·제작 시작값
L3	로컬: 00 한눈에.md	파일 날짜 2026.09.30, 열람 2026.09.30	사전 범위 확인. 링크된 1 애니메이션 원칙과 모션 기본기·4 설명 영상 연출과 학습 원리는 조사 당시 실제 파일이 없어 참고하지 못했어