애니메이션 인포그래픽은(는) 무엇을 하나요?

디자인된 인포그래픽을 만듭니다. 아이콘, 몇 가지 주요 숫자, 짧은 텍스트, 실제 시각적 계층이 있는 단순한 도형을 배열한 후 순차적으로 애니메이션하여 각 요소가 제 순간을 누리게 합니다. 핵심은 먼저 구도, 그다음 안무입니다. 즉, 정적 레이아웃이 그 자체로 읽히고, 계단식으로 등장하여 시선을 정확히 원하는 곳으로 안내합니다.

사용 시기

혼합 레이아웃 설명: "3단계로 보는 X", "작동 방식", "숫자로 보는", 통계 카드 그리드.
하나의 디자인된 장면에서 아이콘 + 통계 + 레이블 + 연결선의 순차적 공개.
픽토그램/아이콘 애니메이션, 카운트업 주요 숫자, 단계 간 흐름 연결선.

이 스킬은 구성된 인포그래픽을 담당합니다. 차트 자체가 콘텐츠인 경우(막대 차트 경주, 애니메이션 라인/영역, CSV 기반 그래프)는 chart-animation을 사용하고, 해당 차트를 여기서 다시 구축하지 않고 인포그래픽 내부의 한 블록으로 구성하세요.

유일한 규칙: 정적 프레임을 먼저 디자인하라

훌륭한 애니메이션 인포그래픽은 우연히 움직이는 훌륭한 정적 인포그래픽입니다. 단일 키프레임을 추가하기 전에 전체 구도(모든 아이콘, 숫자, 레이블을 최종 위치에)를 배치하고 균형을 맞추세요. 그러면 애니메이션은 이미 배치된 각 요소가 언제 나타날지만 제어하며, 레이아웃을 절대 결정하지 않습니다. 이는 가장 흔한 실패(요소가 원래 디자인되지 않은 위치로 날아가 최종 프레임이 우연처럼 보이는 현상)를 방지합니다.

범위를 엄격하게: 하나의 핵심 인사이트, 3~5개의 보조 데이터 포인트, 30~90초. 다섯 개 이상의 경쟁 요소가 있으면 계단식 공개가 혼란으로 읽힙니다.

시각적 계층 → 공개 순서

공개 순서가 계층입니다. 시선은 나타나는 순서를 따르므로 레이아웃 순서가 아닌 중요도 순서로 요소에 애니메이션을 적용하세요. 각 요소를 계층(tier)에 매핑한 다음 계층별로 공개합니다.

계층	요소	공개	모션
1	섹션 제목 / 핵심 인사이트	먼저, 단독으로	페이드 + 약간 상승
2	아이콘 (각 항목 고정)	항목별로, 그룹을 이끔	팝 / 스케일 오버슈트
3	주요 숫자 (카운터)	아이콘 직후	카운트업, ease-out
4	레이블 / 캡션	숫자 아래에 안착	페이드, 모션 드라마 없음
5	연결선 / 흐름선	항목이 완료될 때 연결	그리기 (경로 길이)

크기, 굵기, 색상은 정적 계층에 사용하고, 타이밍과 모션은 애니메이션 계층에 사용하세요. 한 번에 하나의 강조 요소만 — 두 개의 숫자를 동시에 세지 마세요.

스태거: 계단식 효과

형제 항목을 형제 간 고정 지연(스태거)으로 공개하여 그룹이 한 번에 번쩍이는 것이 아닌 순서 있는 시퀀스로 읽히게 합니다. 모든 요소를 현재 프레임의 순수 함수로 구동하세요(벽시계 시간이나 라이브러리 애니메이션 루프를 사용하지 마세요). 그러면 렌더링이 결정론적입니다.

import { useCurrentFrame, spring, useVideoConfig } from "remotion";

const STAGGER = 8; // 형제 간 프레임 (~30fps에서 ~0.27초)

function Item({ index, children }) {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const local = frame - index * STAGGER;            // 이 항목의 자체 시계
  const enter = spring({ frame: local, fps, config: { damping: 14, mass: 0.6 } });
  return (
    <div style={{ opacity: enter, transform: `translateY(${(1 - enter) * 24}px)` }}>
      {children}
    </div>
  );
}

6~10프레임의 스태거가 산뜻하게 느껴집니다. ~15 이상이면 지루합니다. 모든 형제에 하나의 진입 곡선을 유지하여 계단식이 잡음이 아닌 자신감으로 읽히게 하세요.

아이콘 애니메이션: 팝 효과

아이콘은 각 항목을 고정하므로 가장 강력한 등장(안착되는 스케일 오버슈트, "팝")을 제공하세요. 바운스를 위해 낮은 댐핑의 스프링을 사용하세요. 선형 스케일은 기계적으로 읽힙니다.

const pop = spring({ frame: local, fps, config: { damping: 10, stiffness: 180, mass: 0.5 } });
// pop이 1을 넘어 오버슈트한 후 안착 → 생동감 있음
<g transform={`scale(${pop})`} style={{ transformOrigin: "center" }}>{icon}</g>

픽토그램 채우기의 경우(예: "10명 중 7명"), 동일한 스태거로 단위를 공개하고 마스크를 사용하여 부분 단위를 클리핑하고 스케일링하지 마세요.

주요 숫자: 안착하는 카운터

기본 숫자를 보간(interpolate)하고, 이징(easing)한 다음 렌더링 시 포맷하세요. 두 가지 필수 사항: 포맷 전에 반올림하고, 숫자가 변경될 때 레이아웃이 흔들리지 않도록 tabular-nums를 사용하세요. (chart-animation과 공유하는 기술 — 통화/백분율 변형은 해당 스킬의 카운터 섹션을 참조하세요.)

import { interpolate, Easing } from "remotion";

const raw = interpolate(frame - delay, [0, 30], [0, 1287], {
  extrapolateLeft: "clamp", extrapolateRight: "clamp",
  easing: Easing.out(Easing.cubic),   // "숫자에 안착"
});
const label = new Intl.NumberFormat("en-US").format(Math.round(raw)); // "1,287"
// CSS: font-variant-numeric: tabular-nums; line-height: 1;

헤드라인 숫자에서 ease-out은 도착으로 읽히고, 선형은 로봇 주행계로 읽힙니다. 다음 항목이 시작되기 전에 각 숫자를 약 0.5초 동안 유지하세요.

연결선과 흐름

연결선은 카드 그리드를 프로세스로 만듭니다. 경로를 따라 선/화살표를 애니메이션하여, 가리키는 항목이 완료될 때 도착하도록 동기화하세요. "이제 여길 봐"라고 말하는 모션입니다.

const pathRef = useRef();
const len = pathRef.current?.getTotalLength?.() ?? 0;
const draw = interpolate(frame - delay, [0, 18], [0, 1], { extrapolateRight: "clamp" });
<path ref={pathRef} d="M40,0 C40,30 40,30 40,60" fill="none" stroke="#444" strokeWidth={3}
  strokeDasharray={len} strokeDashoffset={len * (1 - draw)} />

연결선을 연결하는 두 항목 사이에, 소스가 나타난 후 타겟이 나타나기 전의 간격에 그리세요. 선이 시선을 다음 공개로 이끕니다.

섹션 시간 배분

초당 폴리싱 시간이 아닌 요소당 시간을 예산하세요. 시청자는 한 번에 하나의 움직이는 대상만 추적할 수 있습니다.

비트	예산
제목 유지 (안착될 때까지)	0.8~1.2초
항목당 (아이콘 팝 → 카운터 → 레이블)	1.2~2.0초
연결선 그리기	0.4~0.6초, 다음 항목과 겹침
최종 구성 유지 (스크린샷 가능)	2~3초

완전한 정적 인포그래픽을 2~3초 동안 멈춰서 끝냅니다. 핵심은 조립된 프레임이므로 경쟁 모션 없이 안착시키세요.

출력 체크리스트

키프레임 전에 정적 레이아웃을 디자인하고 균형을 맞춤; 유지된 최종 프레임이 의도적으로 보임.
하나의 핵심 인사이트, 3~~5개 데이터 포인트, 30~~90초.
공개 순서가 레이아웃 순서가 아닌 계층을 따름(제목 → 아이콘 → 숫자 → 레이블 → 연결선).
형제 요소가 일관된 6~10프레임 스태거와 하나의 진입 곡선으로 계단식 공개됨.
아이콘은 스프링 오버슈트로 팝; 숫자는 ease-out + tabular-nums로 카운트업; 한 번에 하나의 숫자만 애니메이션.
연결선은 시선을 다음 공개로 이끌기 위해 그려짐.
모든 값은 useCurrentFrame()의 순수 함수; 라이브러리 타이머 없음.
최종 구성 프레임이 ≥2초 동안 유지됨.

전달 및 검증 (렌더링된 스틸 → MP4)

패키지된 도우미 (scripts/): scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png로 스틸을 타일링한 다음, scripts/probe-mp4.sh out.mp4 [WxH] [fps]로 인코딩을 확인하세요. scripts/README.md를 참조하세요.

Remotion은 프레임 결정론적입니다. 모든 아이콘 팝, 카운터 값, 연결선 그리기는 useCurrentFrame()의 순수 함수이므로 시크 도구 없이 모든 정확한 프레임을 헤드리스로 렌더링할 수 있습니다. 인포그래픽은 주요 숫자를 전달하므로 스틸 검사를 통해 잘못된 통계나 오프캔버스에 있는 스태거를 인코딩 낭비 전에 잡아낼 수 있습니다.

출력 계약:

장면이 등록된 Remotion 프로젝트(<Composition> + zod schema + defaultProps), 모든 모션은 프레임 기반(타이머 / Date.now() / Math.random() 없음).
전달물 = 렌더링된 out/*.mp4 (프로젝트도 포함하므로 사용자가 새 통계/아이콘으로 다시 렌더링 가능).
지속 시간이 데이터에 의존적(N개 항목 × 항목당 예산)? calculateMetadata에서 계산하고 수동으로 하지 마세요.

검증 루프 — 스틸 렌더링 → 검사 → 인코딩. 먼저 단일 프레임을 렌더링(저렴함, 비디오 인코딩 없음)한 다음 레이아웃과 숫자가 올바를 때만 인코딩하세요.

# 1. 프레임 정확한 스틸 — SHIPPED props 사용. 각 계층을 잡는 프레임 선택:
npx remotion still Infographic out/f-title.png --frame=20  --props='{"items":[...]}'  # 제목 + 첫 번째 팝
npx remotion still Infographic out/f-mid.png   --frame=90  --props='{"items":[...]}'  # 중간 계단식
npx remotion still Infographic out/f-end.png   --frame=149 --props='{"items":[...]}'  # 최종 구성 유지 (= durationInFrames - 1)

# 2. 각 PNG 검사 — 충실도(모든 주요 숫자 정확, 레이블/캡션 올바름, 아이콘이 올바른 글리프)
#    및 아티팩트(텍스트 넘침, 아이콘 오프캔버스, 안전 영역 클리핑, 누락된 글꼴, 연결선이 잘못된 항목을 가리킴,
#    계층이 안착되어야 할 때 반쯤 공개된 요소).

# 3. 스틸 검사가 통과된 후에만 인코딩:
npx remotion render Infographic out/infographic.mp4 --props='{"items":[...]}'

npx remotion compositions를 사용하여 durationInFrames/fps를 읽으세요. 최종 구성 유지가 가장 중요한 프레임입니다. 의도적으로 보이는지, 중간 계단식이 아닌지 확인하세요.
데이터 기반 / 배치: 모든 변형을 배치 렌더링하기 전에 하나의 대표 props 세트(통계 + 레이블)를 스틸로 검증하세요. 카운터나 레이아웃 버그를 한 번 잡으면 N번 잡지 않아도 됩니다.
README 데모 GIF 무료: npx remotion render Infographic out/demo.gif --codec=gif.

마치기 전에:

npx remotion still이 제목, 중간 계단식, 최종 유지에서 깔끔하게 렌더링됨 — 오류, 누락된 글꼴/아이콘 없음.
모든 주요 숫자가 정확(반올림, tabular-nums)하고 각 프레임에서 모든 요소가 안전 영역 내부에 있음.
프레임 기반만 사용 — Date.now() / Math.random() / 라이브러리 타이머 없음(CI에서 결정론 유지).
배송된 props가 올바르게 렌더링됨(defaultProps뿐만 아니라) — 올바른 통계, 올바른 아이콘, 올바른 레이블.
전체 MP4 인코딩되어 재생됨; (선택 사항) README용 GIF 렌더링.

참조 파일

references/sequenced-infographic.md — 완전히 실행 가능한 Remotion 장면: 지연된 아이콘 팝, 이징된 카운트업 통계, 그리기 연결선, 마스터 타이밍 맵, 데이터 기반으로 만들기(템플릿 × 데이터) props 패턴을 갖춘 3단계 "작동 방식" 인포그래픽. 비Remotion 사용을 위한 종속성 없는 인라인 SVG 변형 포함.

애니메이션 인포그래픽