JW's AI_Stash

Remotion — React로 비디오 만들기

6 min read

Remotion — React로 비디오 만들기

React 컴포넌트로 프로그래밍 방식의 MP4 비디오를 생성하는 프레임워크. 업데이트: 2026-03-17

핵심 요약

구분내용
📖 정의React 컴포넌트를 사용해 실제 MP4/WebM 비디오를 코드로 생성하는 프레임워크
💡 핵심프레임 번호 기반 선언적 렌더링 → 헤드리스 Chrome 캡처 → FFmpeg 합성
🎯 대상React/TypeScript 개발자, 데이터 시각화, 소셜 미디어 자동화, SaaS 비디오 생성
⚠️ 주의4인 이상 영리 기업은 유료 Company License 필요 (월 $100~)

목차

  1. 개요
  2. 핵심 API
  3. Remotion Studio vs Player
  4. AI 기능 — Agent Skills
  5. 클라우드 렌더링
  6. 경쟁 도구 비교
  7. 라이선스

개요

항목내용
개발자Jonny Burger (remotion-dev)
공개2021년
최신 버전v4.0.436 (2026-03-16)
공식 사이트https://www.remotion.dev
GitHubhttps://github.com/remotion-dev/remotion
설치npx create-video@latest

작동 원리

flowchart LR
  A[React 컴포넌트] --> B[헤드리스 Chrome]
  B --> C[프레임별 캡처]
  C --> D[FFmpeg 6.0 합성]
  D --> E[MP4 / WebM / GIF]
  1. useCurrentFrame()으로 현재 프레임 번호를 받아 React가 각 프레임을 렌더링
  2. 헤드리스 Chrome이 각 프레임을 스크린샷으로 캡처
  3. 내장 FFmpeg 6.0이 프레임을 비디오 파일로 합성

핵심 API

API역할예시
useCurrentFrame()현재 프레임 번호 반환const frame = useCurrentFrame()
useVideoConfig()width, height, fps, durationInFrames 반환const { fps, width } = useVideoConfig()
interpolate()프레임 범위를 값 범위로 매핑interpolate(frame, [0, 30], [0, 1])
spring()물리 기반 스프링 애니메이션spring({ frame, fps, config: { damping: 10 } })
<Sequence>타임라인 특정 구간에 컴포넌트 배치<Sequence from={30} durationInFrames={60}>
<Composition>비디오 메타데이터 정의<Composition id="MyVideo" fps={30} ... />

기본 예제

import { useCurrentFrame, interpolate } from "remotion";
 
export const MyAnimation = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: "clamp",
  });
 
  return (
    <div style={{ opacity, backgroundColor: "white", flex: 1 }}>
      <h1>Hello Remotion!</h1>
    </div>
  );
};

Remotion Studio vs Player

구분Remotion StudioRemotion Player
역할개발 도구 (IDE 유사)배포 컴포넌트 (video 태그 유사)
실행npx remotion studioimport { Player } from "@remotion/player"
용도미리보기, 타임라인 편집, 렌더링 UI웹 앱에 비디오 임베딩, 런타임 재생
렌더링MP4 파일 생성 가능브라우저 재생만 (파일 생성 불가)
CLI 렌더링npx remotion render—

AI 기능 — Agent Skills

2026년 1월 출시된 주요 신기능. Claude Code와 통합하여 자연어 프롬프트만으로 비디오를 생성한다.

항목내용
결정론적 출력동일 프롬프트 → 동일 코드 → 동일 비디오 (Sora/Runway와의 차별점)
Skills 모듈화차트, 타이포그래피, 3D 등 특정 도메인 Skills를 선택적으로 LLM에 주입
LLM용 문서모든 문서 URL에 .md 추가 시 마크다운으로 접근 가능
구조화 출력Vercel AI SDK + Zod로 코드, 제목, 프레임 수, FPS 등 구조화 보장

클라우드 렌더링

플랫폼패키지특징
AWS Lambda@remotion/lambda병렬 분산 렌더링, 렌더링 시에만 비용 발생
Google Cloud Run@remotion/google-cloud-run컨테이너 기반 렌더링
GitHub Actionsnpx remotion renderCI/CD 파이프라인 통합, Matrix 전략으로 최대 6배 속도

경쟁 도구 비교

도구언어최적 용도라이선스AI 연동
RemotionTypeScript/React데이터 비디오, SaaS 자동화소스 공개 (기업 유료)Claude Code Skills (2026-01)
ManimPython수학/과학 교육 영상MIT없음
Motion CanvasTypeScript기술 설명 영상 (Canvas 기반)MIT없음
SlidevMarkdown/Vue개발자 발표 슬라이드MIT없음

Remotion vs Motion Canvas: Remotion은 전체 DOM(HTML/CSS/WebGL) 기반으로 범용적, Motion Canvas는 단일 Canvas 기반으로 벡터 정보 시각화에 특화.

라이선스

대상조건비용
개인, 비영리, 3인 이하 팀상업적 사용 포함 가능무료
4인 이상 영리 기업 (Creators)좌석제월 $100~
4인 이상 영리 기업 (Automators)렌더 수량제별도 산정

문서 탐색

이전다음
——

참고 자료

Graph View