모션영상 레퍼런스 보드 Remotion데이터 모션그래픽학습 자료

# 1) 공식 템플릿으로 새 프로젝트 (대화형)
npx create-video@latest

# 2) 또는 우리 스타터 폴더에서 바로
cd motion_video_team/starter
npm install

# 3) 스튜디오(미리보기) — 타임라인을 눈으로 보며 수정
npm run studio        # = remotion studio

# 4) mp4 렌더 (out/starter.mp4 생성, 첫 실행 시 Headless Chrome 1회 다운로드)
npm run render        # = remotion render BarRace out/starter.mp4

# 5) 확장 라이브러리(차트/픽토/폰트)
npm i @visx/scale @visx/shape lucide-react @remotion/google-fonts

{
  "name": "motion-starter",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "studio": "remotion studio",
    "render": "remotion render BarRace out/starter.mp4"
  },
  "dependencies": {
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "remotion": "^4.0.0"
  },
  "devDependencies": {
    "@remotion/cli": "^4.0.0",
    "@types/react": "^18.3.0",
    "@types/react-dom": "^18.3.0",
    "typescript": "^5.4.0"
  }
}

// Remotion 진입점: 루트 컴포넌트를 등록한다. (렌더러/스튜디오가 여기서 시작)
import { registerRoot } from "remotion";
import { RemotionRoot } from "./Root";

registerRoot(RemotionRoot);

import { Composition } from "remotion";
import { BarRace } from "./BarRace";

// [개념4 · 데이터매핑] defaultProps의 data 배열만 바꾸면 영상이 바뀐다.
// 여기가 "숫자만 바꿔서 영상 양산"의 진입점.
export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="BarRace"
      component={BarRace}
      durationInFrames={120} // [개념1] 30fps × 4초 = 120프레임
      fps={30}
      width={1280}
      height={720}
      defaultProps={{
        title: "분기 성장 지표",
        data: [
          { label: "1월", value: 42 },
          { label: "2월", value: 68 },
          { label: "3월", value: 91 },
        ],
      }}
    />
  );
};

import { AbsoluteFill, interpolate, Easing, useCurrentFrame } from "remotion";

/**
 * 모션영상팀 스타터 예제 — 교재용.
 * 발표자료형 데이터 모션그래픽의 5개 핵심 개념을 한 화면에서 보여준다.
 * 각 개념이 코드 어디에 있는지 [개념N] 주석으로 표시했다.
 */

// [개념4 · 데이터매핑] 화면에 그려질 데이터. 이 배열만 바꾸면 영상이 바뀐다.
type Datum = { label: string; value: number };
type Props = { title: string; data: Datum[] };

// ── 디자인 토큰 (배열 기본기) ─────────────────────────────
// [색 60-30-10] 배경=BG(60), 축/보조=SUB(30), 강조=ACCENT(10, 딱 하나)
const BG = "#0f172a";
const SUB = "#334155";
const TEXT = "#e2e8f0";
const ACCENT = "#38bdf8";

// [안전영역] 화면 가장자리에서 8~10% 안쪽에만 요소를 둔다.
const W = 1280;
const H = 720;
const MARGIN_X = 160; // 12.5%
const BASELINE_Y = 600; // 바가 서는 바닥선
const MAX_BAR_H = 380; // value=100일 때 최대 높이
const MAX_VALUE = 100;

export const BarRace: React.FC<Props> = ({ title, data }) => {
  // [개념1 · 타임라인] 지금 몇 번째 프레임인지. 모든 애니의 시간 기준.
  const frame = useCurrentFrame();

  const slotW = (W - MARGIN_X * 2) / data.length; // 바 하나가 차지하는 가로 폭
  const barW = 120;

  // [개념3 · SVG stroke 애니] 제목 옆 "상승 화살표"가 그려지듯 등장.
  // pathLength=100으로 경로 길이를 100으로 정규화 → dashoffset 100→0 이면 "그려짐".
  const drawProgress = interpolate(frame, [10, 40], [100, 0], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
    easing: Easing.out(Easing.cubic), // [개념2 · 이징]
  });

  return (
    <AbsoluteFill style={{ backgroundColor: BG, fontFamily: "sans-serif" }}>
      {/* 제목 — [시각적 위계] 가장 큰 텍스트 = 주인공 */}
      <div
        style={{
          position: "absolute", top: 70, left: MARGIN_X,
          color: TEXT, fontSize: 56, fontWeight: 700,
          display: "flex", alignItems: "center", gap: 20,
        }}
      >
        {title}
        {/* 자기 자신을 그리는 상승 화살표 */}
        <svg width={90} height={70} viewBox="0 0 90 70">
          <polyline
            points="10,55 35,35 55,45 80,15"
            fill="none" stroke={ACCENT} strokeWidth={6}
            strokeLinecap="round" strokeLinejoin="round"
            pathLength={100} strokeDasharray={100} strokeDashoffset={drawProgress}
          />
          <polyline
            points="80,15 80,32 63,15 80,15"
            fill={ACCENT} stroke={ACCENT} strokeWidth={2}
            opacity={interpolate(frame, [38, 46], [0, 1], {
              extrapolateLeft: "clamp", extrapolateRight: "clamp",
            })}
          />
        </svg>
      </div>

      <svg width={W} height={H} style={{ position: "absolute", inset: 0 }}>
        {/* 바닥 축선 — [보조색 30] */}
        <line x1={MARGIN_X - 20} y1={BASELINE_Y} x2={W - MARGIN_X + 20} y2={BASELINE_Y}
          stroke={SUB} strokeWidth={2} />

        {data.map((d, i) => {
          const cx = MARGIN_X + slotW * i + slotW / 2; // 슬롯 중앙 정렬

          // [스태거] 바마다 등장을 3프레임(0.1초)씩 뒤로 민다 → 순차 등장.
          const delay = 20 + i * 3;

          // [개념1+2] 0→1 성장 진행도에 이징 적용 (등속 금지).
          const grow = interpolate(frame, [delay, delay + 22], [0, 1], {
            extrapolateLeft: "clamp", extrapolateRight: "clamp",
            easing: Easing.out(Easing.cubic),
          });

          const fullH = (d.value / MAX_VALUE) * MAX_BAR_H;
          const barH = fullH * grow; // 실제 그려질 높이
          const y = BASELINE_Y - barH;

          return (
            <g key={d.label}>
              <rect x={cx - barW / 2} y={y} width={barW} height={barH} rx={10} fill={ACCENT} />
              {/* 수치 — [게슈탈트 근접] 바 바로 위에 붙여 한 덩어리로 */}
              <text x={cx} y={y - 16} fill={TEXT} fontSize={34} fontWeight={700}
                textAnchor="middle" opacity={grow}>
                {Math.round(d.value * grow)}
              </text>
              {/* 라벨 — 바 아래, 축과 근접 */}
              <text x={cx} y={BASELINE_Y + 44} fill={TEXT} fontSize={30} textAnchor="middle">
                {d.label}
              </text>
            </g>
          );
        })}
      </svg>
    </AbsoluteFill>
  );
};

import { scaleLinear, scaleBand } from "@visx/scale";

const x = scaleBand({ domain: data.map(d => d.label), range: [MARGIN_X, W - MARGIN_X], padding: 0.4 });
const y = scaleLinear({ domain: [0, MAX_VALUE], range: [BASELINE_Y, 100] });

// 모양은 visx 스케일로, 성장(0→1)은 Remotion interpolate로 곱한다
const grow = interpolate(frame, [delay, delay + 22], [0, 1], { easing: Easing.out(Easing.cubic), extrapolateRight: "clamp" });
const barH = (BASELINE_Y - y(d.value)) * grow;