thatrebeccarae/claude-marketing

Remotion 비디오 제작

Remotion으로 프로그래매틱 비디오를 제작하기 위한 모범 사례 — 애니메이션, 전환, 차트 및 렌더링.

설치

git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/remotion-video ~/.claude/skills/

핵심 기능

• 스프링 애니메이션 프리셋 (바운시, 스무스, 크리스프, 스태거드)
• 보간 패턴 (카메라 줌, 패럴랙스, 스크롤 시뮬레이션)
• SVG 드로우-온 애니메이션 (경로 추적, 획 드러내기)
• TransitionSeries를 통한 장면 전환
• AbsoluteFill 레이어링을 통한 합성
• 차트 애니메이션 (막대 성장, 선 그리기, 파이 드러내기, 카운트업 숫자)
• 오디오 통합 및 동기화
• 렌더링 설정

스프링 프리셋

Remotion의 spring()을 사용한 물리 기반 애니메이션:

프리셋	설정	사용 사례
바운시	mass: 0.5, damping: 8, stiffness: 120	장난기 있는 드러내기, 로고 바운스
스무스	mass: 1, damping: 15, stiffness: 80	UI 전환, 슬라이드인
크리스프	mass: 0.8, damping: 20, stiffness: 200	스냅한 상호작용, 토글
스태거드	항목별 프레임 오프셋이 있는 모든 프리셋	목록 드러내기, 그리드 애니메이션

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

const frame = useCurrentFrame();
const { fps } = useVideoConfig();

const scale = spring({
  frame,
  fps,
  config: { mass: 0.5, damping: 8, stiffness: 120 },
});

보간 패턴

카메라 줌

import { interpolate } from "remotion";

const zoom = interpolate(frame, [0, 30], [1, 1.5], {
  extrapolateRight: "clamp",
});

패럴랙스 레이어

const bgX = interpolate(frame, [0, 100], [0, -50]);
const fgX = interpolate(frame, [0, 100], [0, -150]);

스크롤 시뮬레이션

const scrollY = interpolate(frame, [0, 90], [0, -800], {
  extrapolateRight: "clamp",
});

SVG 드로우-온

SVG 경로를 드러내기 위해 strokeDashoffset을 애니메이트:

const pathLength = 500;
const draw = interpolate(frame, [0, 60], [pathLength, 0], {
  extrapolateRight: "clamp",
});

<path
  d="..."
  strokeDasharray={pathLength}
  strokeDashoffset={draw}
/>

차트 애니메이션 패턴

패턴	기법
막대 성장	높이를 0에서 목표까지 애니메이트, 각 막대를 3-5프레임 지연
선 그리기	strokeDashoffset 애니메이션을 사용한 SVG 경로
파이/도넛 드러내기	conic-gradient 중단점 또는 SVG 호(arc) 경로 애니메이트
카운트업 숫자	0에서 목표까지 보간, 표시 시 Math.round() 사용

장면 전환

import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { fade } from "@remotion/transitions/fade";

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={90}>
    <SceneOne />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition
    timing={linearTiming({ durationInFrames: 15 })}
    presentation={fade()}
  />
  <TransitionSeries.Sequence durationInFrames={90}>
    <SceneTwo />
  </TransitionSeries.Sequence>
</TransitionSeries>

성능 규칙

1. 애니메이션에 useEffect 사용 금지. useCurrentFrame() + interpolate()를 사용하세요.
2. 정적 컴포넌트 메모이제이션. 프레임에 의존하지 않는 모든 것은 React.memo 사용.
3. 에셋 사전 로드. 로컬 파일은 staticFile(), 원격 URL은 prefetch() 사용.
4. 개발 중 빠른 렌더링 반복을 위해 컴포지션을 30초 미만으로 유지.
5. 최종 렌더링 전에 목표 해상도(1920x1080 또는 1080x1080)에서 테스트.

안티 패턴

• CSS transition 또는 animation 사용 금지 — Remotion interpolate()와 spring()을 사용하세요.
• setTimeout 또는 setInterval 사용 금지 — 프레임 기반 타이밍만 사용.
• 반응형 레이아웃에 절대 픽셀 위치 지정 금지 — AbsoluteFill + flex를 사용.
• 매 프레임마다 재생성되는 인라인 style 객체 금지 — 상수 또는 useMemo로 추출.
• 제어되지 않는 오디오 금지 — 항상 명시적인 volume과 startFrom을 설정.

전체 코드 예제 및 컴포지션 템플릿은 REFERENCE.md를 참조하세요.