Remotion 딥다이브
— React 코드로 영상을 '프로그래밍'하는 프레임워크

1프로젝트 한줄 요약

"영상을 마우스로 자르고 붙이는 대신, React 코드로 짜서 자동으로 뽑아내는 도구"입니다. 우리가 아는 영상 편집은 프리미어·다빈치리졸브처럼 타임라인에 클립을 올리고 손으로 다듬는 방식입니다. Remotion은 발상을 뒤집습니다. "이 영상의 0.5초 지점은 어떻게 생겼는가?"를 코드로 정의해 두면, Remotion이 1초당 30번(또는 60번) 그 코드를 호출해 프레임을 한 장씩 그리고, 그 그림들을 이어 붙여 진짜 동영상 파일을 만듭니다.

이름의 'Remotion'은 'Re(act) + motion(움직임)'의 합성으로 읽힙니다. 핵심은 React + 프레임 단위 결정론 + 자동 렌더링이라는 조합입니다. 덕분에 데이터가 바뀌면 영상도 자동으로 바뀝니다. 1만 명의 사용자에게 각자 이름이 박힌 연말정산 영상을 보내거나, 매출 데이터를 넣으면 매주 자동으로 갱신되는 리포트 영상을 만드는 식의 "대량 개인화·자동화 영상"이 Remotion이 가장 빛나는 영역입니다. GitHub의 "GitHub Unwrapped"(개인별 연간 리뷰 영상)가 대표적인 실사용 사례입니다.

2왜 주목받는가

2026년 들어 "AI로 영상을 자동 생성/편집"하는 흐름이 거세지면서, 코드로 영상을 다루는 Remotion이 AI 에이전트의 '영상 출력 엔진'으로 재조명받고 있습니다. LLM은 텍스트·코드를 잘 만들지만 영상을 직접 만들지는 못합니다. 그런데 Remotion이 있으면 "LLM이 React 코드를 짜고 → Remotion이 그 코드를 영상으로 렌더링"하는 파이프라인이 가능해집니다. 실제로 이 저장소 안에는 skills-evals처럼 AI 스킬 관련 디렉토리까지 생겼습니다.

일반 영상 도구와의 비교

핵심 차별점 셋

3기술 스택 전체 지도

Remotion은 단일 패키지가 아니라 수십 개의 npm 패키지가 한 저장소에 모인 모노레포(monorepo)입니다. package.json을 보면 bun(패키지 매니저)과 turbo(빌드 오케스트레이터)로 묶여 있고, React 19를 쓰며, AWS SDK·Three.js·WebCodecs 관련 라이브러리가 카탈로그로 버전 고정돼 있습니다. 즉 "영상 코어 + 편집기 + 플레이어 + 분산 렌더링 + 미디어 파서"가 한 묶음으로 개발됩니다.

코어 — remotion + React 19

도구 — CLI · Studio · Player

렌더링 · 미디어 — 서버부터 브라우저까지

4아키텍처 심화 분석

Remotion의 마법을 한 문장으로 줄이면 이렇습니다. "헤드리스 크롬으로 React 화면을 한 프레임씩 띄워 스크린샷을 찍고, 그 PNG들을 ffmpeg로 이어 붙여 동영상으로 인코딩한다." 즉 진짜 영상 코덱을 React가 다루는 게 아니라, "브라우저 화면 캡처 + 인코딩"을 자동화한 것입니다.

① 단일 머신 렌더링 흐름

여기서 가장 중요한 설계 원칙은 결정론(determinism)입니다. 같은 프레임 번호는 언제 그려도 똑같은 그림이어야 한다는 규칙입니다. Math.random()이나 현재 시각 같은 "매번 달라지는 값"을 화면에 직접 쓰면 안 되고, Remotion이 주는 random()(시드 고정)을 써야 합니다. 이 원칙 덕분에 프레임 0번과 89번을 서로 다른 컴퓨터가 동시에 그려도 결과가 일관됩니다 — 이것이 분산 렌더링의 전제입니다.

② Lambda 분산 렌더링 — 긴 영상을 몇 초 만에

10분짜리 4K 영상을 한 대로 렌더링하면 수십 분이 걸립니다. @remotion/lambda는 프레임 구간을 청크(chunk)로 쪼개, 수백 개의 Lambda 함수에 "너는 0~30프레임, 너는 31~60프레임" 식으로 나눠줍니다. 각자 부분 영상을 만들어 S3에 올리면, 마지막에 하나로 합칩니다(concat). 프레임이 서로 독립적(결정론)이기에 가능한 전략입니다.

③ 핵심 API가 화면을 그리는 방식

// 프레임 번호를 '값'으로 바꾸는 것이 Remotion의 전부
import {useCurrentFrame, interpolate, spring, useVideoConfig} from 'remotion';

const MyTitle = () => {
  const frame = useCurrentFrame();          // 지금 몇 번째 프레임?
  const {fps} = useVideoConfig();

  // frame 0→30 동안 투명도를 0→1로 (페이드 인)
  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: 'clamp',
  });

  // 통통 튀는 자연스러운 등장 (물리 기반 스프링)
  const scale = spring({frame, fps, config: {damping: 12}});

  return <div style={{opacity, transform: `scale(${scale})`}}>안녕!</div>;
};

핵심 패턴이 보입니다. useCurrentFrame()로 "지금"을 숫자로 받고, interpolate()로 그 숫자를 "투명도·위치·크기" 같은 화면 값으로 변환합니다. spring()은 물리 시뮬레이션으로 자연스러운 가속/감속을 줍니다. 시간을 if문이 아니라 함수로 다룬다는 점이 핵심입니다.

5디렉토리 구조 해부

저장소 루트의 package.json은 "workspaces": {"packages": ["packages/**"]}로 돼 있습니다. 즉 실질 코드는 거의 전부 packages/ 아래에 패키지별로 흩어져 있습니다. 빌드 스크립트 이름(makecore, makestudio, makeplayer, makeserverless…)에서 주요 패키지를 역으로 읽어낼 수 있습니다.

주목할 점은 template-tiktok·template-audiogram·template-recorder 같은 실전 템플릿과, 이들이 @remotion/install-whisper-cpp 패키지를 통해 whisper.cpp(C++ 음성인식)를 런타임에 다운로드하는 구조라는 사실입니다. 즉 "틱톡용 자막 영상"이나 "오디오 파형 시각화 영상" 같은 흔한 수요를 바로 시작할 수 있는 출발점이 들어 있습니다. skills-evals의 존재는 Remotion이 AI 영상 생성 쪽으로 영역을 넓히고 있다는 신호입니다.

6학습 포인트

① "시간을 함수로 다루기" — 애니메이션의 본질

Remotion을 배우면 애니메이션이 결국 "시간(t) → 화면 속성" 함수임을 체득합니다. interpolate·spring·Easing의 사용법은 CSS 애니메이션, 게임 루프, 데이터 시각화 트랜지션에 그대로 전이됩니다.

② React 컴포넌트 합성 — Sequence / Series

<Sequence from={30} durationInFrames={60}>로 "이 장면은 30프레임부터 60프레임 동안만 보인다"를 선언합니다. 여러 장면을 시간축 위에 배치·중첩하는 사고는 복잡한 UI 상태를 컴포넌트로 쪼개는 훈련과 똑같습니다.

③ 데이터 → 영상 (props + Zod)

Composition에 schema={zodSchema}를 주면 Studio가 자동으로 입력 폼을 그려줍니다. "입력값에 따라 결과가 달라지는 영상" 설계는 곧 함수형 사고이며, 대량 개인화 영상의 토대입니다.

④ 렌더링 인프라 — CLI·Lambda·CI

remotion render를 GitHub Actions에 넣으면 "데이터가 바뀌면 영상이 자동 갱신"되는 파이프라인이 됩니다. Lambda 편을 파면 서버리스·S3·병렬 처리·동시성 제한 같은 클라우드 개념을 영상이라는 구체적 맥락으로 익히게 됩니다.

7하드웨어 / 시스템 요구사항

8직접 해볼 수 있는 실습 과제

🟢 입문 Lv.1 · 30분

🟢 입문 Lv.2 · 1시간

🟡 중급 Lv.3 · 반나절

🟡 중급 Lv.4 · 하루

🔴 고급 Lv.5 · 주말 프로젝트

9관련 기술 심화 학습 로드맵

10핵심 키워드 사전

11참고 링크

공식 — 깃허브 remotion-dev/remotion · 문서 remotion.dev/docs · API remotion.dev/api · 쇼케이스 remotion.dev/showcase

시작하기 — 터미널에서 npx create-video@latest 한 줄. 라이선스는 저장소의 LICENSE.md(개인/소규모 무료, 일정 규모 이상 회사는 유료)를 반드시 확인.

실전 사례 — GitHub Unwrapped(개인별 연간 리뷰 영상) · Fireship의 "코드로 만든 영상" 등. 저장소 packages/template-*의 tiktok·audiogram·recorder 템플릿이 좋은 출발점.