Skip to main content
Tilnote
Tilnote로 만들기
wislan
wislan
Views 57•

Remotion: React 기반 코드로 만드는 비디오 생성 프레임워크

Summary

개요

Remotion은 React 코드만으로 MP4, GIF 같은 실제 비디오를 생성할 수 있는 오픈 소스 프레임워크다.14
전통적인 타임라인 편집 대신, 컴포넌트·props·state 같은 익숙한 React 개념으로 장면을 구성하고, 이를 프레임 단위로 렌더링한 뒤 FFmpeg로 인코딩해 하나의 비디오 파일로 만들어 준다.24

이 방식의 가장 큰 장점은 "코드로 제어된(video as code)" 비디오 생성이다.
데이터에 따라 문구·색상·이미지·그래프를 바꾸거나, 수천 개의 개인화 마케팅 영상·데이터 리포트 영상을 자동 생성하는 등 기존 동영상 편집 툴로는 힘든 자동화/대량 생성 시나리오에 특히 적합하다.34

Remotion이란? (정의와 특징)

Remotion은 React 컴포넌트로 장면(씬)을 만들고, 이를 서버 사이드에서 프레임별로 렌더링해 동영상 파일을 만드는 라이브러리이자 도구 모음이다.134
웹 프론트 개발자가 이미 알고 있는 React + JSX를 그대로 사용하기 때문에, "웹 UI 대신 비디오 캔버스를 렌더링한다"고 이해하면 된다.4

핵심 특징은 다음과 같다.134

  • React 기반: 컴포넌트, props, state, hooks로 장면 구성

  • 코드로 제어되는 애니메이션: CSS 스타일, 수학 계산, 알고리즘으로 움직임/효과 생성

  • 다양한 포맷 지원: MP4, HEVC, WebM, GIF 등으로 인코딩 가능(내부적으로 FFmpeg 사용)24

  • 미디어 자산 통합: 이미지, 오디오, 기존 영상 클립을 모두 React 컴포넌트처럼 다룸34

  • 브라우저 프리뷰(Remotion Studio): 코드 수정 → 브라우저에서 실시간 미리 보기 및 렌더23

왜 코드 기반 비디오인가? (쓰임새)

코드 기반 비디오(Code-driven video)는 영상의 텍스트, 색상, 차트, 장면 구성 등을 모두 코드와 데이터로 제어하는 방식이다.3
한 번 템플릿을 만들어 두면, 입력 데이터만 바꿔서 무제한으로 다른 버전의 영상을 자동 생성할 수 있다.

대표적인 활용 사례는 다음과 같다.34

  • 개인화 마케팅 영상: 이름, 구매 이력, 관심사에 따라 문구와 이미지를 바꿔주는 광고 영상

  • 데이터 대시보드/리포트: 매일/매주 바뀌는 KPI, 통계 데이터를 그래프로 그리고, 이를 영상으로 자동 렌더링

  • 대규모 소셜 미디어 콘텐츠: 템플릿 하나로 다양한 언어·문구·이미지를 조합해 수백 개의 숏폼 영상을 생성

  • 브랜디드 내부 커뮤니케이션: 정해진 브랜딩 룰을 코드로 고정해, 누구나 같은 스타일의 공지/안내 영상을 자동 생성

  • e-learning 콘텐츠: 강의 자료나 스크립트가 업데이트될 때, 새로 편집하지 않고 코드로 다시 렌더링

즉, "반복적으로 비슷한 스타일의 영상을 많이 만들어야 할 때" Remotion이 특히 빛난다.3

기본 개념 정리

Composition: 하나의 비디오 정의

<Composition>은 "이 비디오가 어떤 장면을 어떤 크기·길이로 렌더링할지"를 정의하는 핵심 컴포넌트다.34
여기서 비디오 해상도, 프레임 수, FPS, 실제로 렌더링할 React 컴포넌트를 지정한다.

예를 들어:34

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

export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="MyComp"
      component={MyComposition}
      durationInFrames={60}
      fps={30}
      width={1280}
      height={720}
    />
  );
};

  • durationInFrames={60} + fps={30} → 길이 2초(60 / 30)

  • component={MyComposition} → 실제 장면을 그리는 React 컴포넌트

하나의 프로젝트 안에 여러 Composition을 등록해 서로 다른 버전(예: 다양한 해상도·언어)의 비디오를 동시에 관리할 수 있다.34

프레임과 FPS

Remotion은 "초(seconds)" 대신 "프레임(frames)"을 기본 단위로 쓴다.34

  • FPS(Frame Per Second)가 30일 때, 1초 = 30 프레임

  • 5초짜리 영상 → durationInFrames = 5 * 30 = 150

코드에서 현재 프레임은 useCurrentFrame() 훅으로 가져와 애니메이션에 활용한다.4
예를 들어, opacity = frame / 60처럼 현재 프레임에 따라 투명도를 계산하는 식이다.2

컴포넌트 기반 설계

Remotion에서 비디오의 각 요소(제목, 로고, 그래프, 배경 등)는 일반적인 React 컴포넌트다.34
이 말은 다음이 모두 가능하다는 뜻이다.

  • 컴포넌트를 잘게 쪼개 재사용

  • props로 텍스트/색상/이미지 URL을 입력받아 템플릿화

  • state와 hooks로 내부 상태/효과 제어

  • 외부 API 호출이나 파일 읽기를 통해 데이터 기반 장면 구성

결국 "웹 앱 대신 비디오 캔버스를 렌더링하는 React 앱"과 같다고 보면 이해가 쉽다.4

프로젝트 구조와 기본 사용 흐름

프로젝트 생성과 구조

새 Remotion 프로젝트 생성은 CLI 하나로 시작한다.234

npx create-video@latest
# 또는 일부 자료에서는
npm init video

템플릿(Blank, Hello World 등)을 고르면, 대략 다음과 비슷한 구조가 생성된다.23

my-video/
├── public/
├── src/
│   ├── Composition.tsx   # 실제 장면을 그리는 컴포넌트
│   ├── Root.tsx          # Composition들을 등록하는 곳
│   ├── index.tsx         # Remotion 루트 등록
├── package.json
└── ...

  • index.tsx: registerRoot(RemotionRoot)로 프로젝트의 루트 컴포넌트를 등록한다.3

  • Root.tsx: <Composition>들을 모아 정의하는 "비디오 레시피 모음집"이다.234

  • Composition.tsx (또는 HelloWorld.tsx 등): 실제 화면을 그리는 컴포넌트다.234

개발 서버와 Remotion Studio

의존성 설치 후:234

npm install
npm run dev   # 또는 npm start

브라우저에서 Remotion Studio가 열리며, 다음을 할 수 있다.234

  • 왼쪽: 프로젝트 안에 정의된 모든 Composition 목록

  • 중앙: 현재 선택한 Composition의 영상 프리뷰 (타임라인, 재생/일시정지)

  • 오른쪽: Composition에 연결된 props를 직접 수정하고, 변경 내용을 실시간으로 확인

코드를 수정하면 핫 리로드로 즉시 프리뷰가 갱신된다.24

비디오 렌더링

프리뷰로 확인 후 실제 비디오 파일이 필요할 때는 Studio의 Renders 탭이나 CLI로 렌더링을 실행한다.24
Remotion 4.0 이후에는 FFmpeg가 내장되어 있어, 별도 설치 없이 로컬에서 바로 MP4를 생성할 수 있다.2

렌더링 과정은 크게 두 단계다.4

  1. 각 프레임을 이미지로 렌더링

  2. FFmpeg로 이미지 + 오디오를 하나의 비디오 포맷으로 인코딩(MP4 등)

주요 컴포넌트와 개념 (조금만 알면 바로 쓰는 부분)

AbsoluteFill: 전체 화면 레이아웃

<AbsoluteFill>은 전체 비디오 캔버스를 가득 채우는 컨테이너로, "전체 화면 div"라고 생각하면 된다.24
배경색을 지정하거나, 전체 화면 이미지를 깔거나, 로고/텍스트를 중앙 정렬할 때 자주 사용한다.

예시:23

import { AbsoluteFill } from "remotion";

export const MyComposition = () => {
  return (
    <AbsoluteFill
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "white",
      }}
    >
      <h1>My first Remotion video!</h1>
    </AbsoluteFill>
  );
};

Sequence: 타임라인 상의 구간 제어

<Sequence>는 특정 시점부터 일정 프레임 동안만 자식 컴포넌트를 보여주는 타임라인 도구다.234

  • from: 시작 프레임

  • durationInFrames: 이 Sequence가 유지되는 프레임 수

예를 들어, 30fps에서:3

import { Sequence } from "remotion";

export const MyComposition = () => {
  return (
    <>
      {/* 0~29 프레임 (첫 1초) */}
      <Sequence from={0} durationInFrames={30}>
        <div style={{ backgroundColor: "white" }}>
          <h1>Intro</h1>
        </div>
      </Sequence>

      {/* 30~89 프레임 (그 다음 2초) */}
      <Sequence from={30} durationInFrames={60}>
        <div style={{ backgroundColor: "blue" }}>
          <h1 style={{ color: "white" }}>Blue-tiful Transition</h1>
        </div>
      </Sequence>
    </>
  );
};

이렇게 하면 첫 1초에는 흰 화면과 "Intro", 이후 2초 동안은 파란 화면과 "Blue-tiful Transition"이 나온다.3
복잡한 영상도 결국 여러 Sequence를 서로 다른 시점에 배치하는 식으로 오케스트레이션할 수 있다.24

Audio: 배경 음악 추가

<Audio> 컴포넌트는 배경 음악이나 효과음을 추가할 때 사용한다.3
보통 MP3 파일을 public/ 폴더에 넣고 import 해서 사용한다.

예시:3

import { Audio } from "remotion";
import backgroundMusic from "../public/music.mp3";

export const MyComposition = () => {
  return (
    <>
      <Audio src={backgroundMusic} />
      {/* 나머지 화면 구성 */}
    </>
  );
};

이렇게 하면 영상 전체에 걸쳐 음악이 재생되고, Sequence와 조합해 특정 구간에서만 재생되게 할 수도 있다.3

애니메이션: useCurrentFrame과 CSS

애니메이션의 기본은 "현재 프레임에 따라 CSS 스타일을 바꾸는 것"이다.4
useCurrentFrame()으로 현재 프레임을 가져와 transform, opacity, color 등 스타일을 계산한다.

간단한 페이드인 예시:2

import { AbsoluteFill, useCurrentFrame } from "remotion";

export const FadeInText: React.FC = () => {
  const frame = useCurrentFrame();
  const opacity = Math.min(1, frame / 60); // 60프레임 동안 0 → 1

  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
        display: "flex",
        opacity,
      }}
    >
      <div>Hello World!</div>
    </AbsoluteFill>
  );
};

  • 30fps 기준, 2초 동안 서서히 나타나는 텍스트
    이 기본 패턴만 이해해도, 회전, 이동, 확대/축소 등 다양한 애니메이션을 쉽게 만들 수 있다.4

Remotion Studio와 Zod 기반 Props

Remotion 4.0에서 도입된 Remotion Studio는 브라우저에서 영상 프리뷰를 보면서, Composition에 연결된 props를 실시간으로 조정할 수 있는 인터페이스를 제공한다.2
이때 props의 타입과 제약은 Zod 스키마로 정의할 수 있다.2

예시 스키마:2

export const staticValueSchema = z.object({
  fontColor: zColor(),
  numberValue: z.number(),
  arrayValue: z.array(z.string()),
  enumValue: z.enum(["1.jpg", "2.jpg", "3.jpg", "4.jpg"]),
  dateValue: z.date(),
});

Composition에서 이 스키마를 연결하면, Studio 오른쪽 패널에 자동으로 입력 UI가 생성되고, 숫자·색상·날짜·enum 선택 등을 변경하면서 결과를 바로 확인할 수 있다.2

<Composition
  id="StaticValues"
  component={StaticValues}
  durationInFrames={150}
  fps={30}
  width={1920}
  height={1080}
  schema={staticValueSchema}
  defaultProps={{
    fontColor: "#0c0d0d",
    numberValue: 4,
    arrayValue: ["one", "two", "three"],
    enumValue: "4.jpg" as const,
    dateValue: new Date("2023-09-15T18:09:01.793Z"),
  }}
/>

이 구조는 "디자이너나 마케터가 UI에서 값만 바꿔도, 개발자가 만든 템플릿으로 다른 버전의 영상을 찍어낼 수 있는" 워크플로우를 만드는 데 매우 유용하다.2

Remotion Player와 Lambda (간단 개념)

Remotion 본체 외에도 다음과 같은 서브 프로젝트가 있다.4

  • Remotion Player: 웹 페이지 안에 Remotion Composition을 "인터랙티브 비디오"로 임베드할 수 있는 플레이어.4
    외부 데이터나 유저 입력에 따라 영상 내용을 실시간 업데이트하는 데 활용할 수 있다.

  • Remotion Lambda: AWS Lambda 기반 클라우드 렌더링 솔루션으로, 수많은 영상을 병렬로 렌더링해 대량 생성에 적합하다.4

일반적으로는 로컬 렌더링으로 시작하고, 대량 생성/자동화 요구가 생길 때 Lambda 도입을 고려하면 된다.14

언제 Remotion을 쓰면 좋은가?

Remotion이 특히 잘 맞는 경우134

  • 이미 React에 익숙한 팀/개발자

  • 비슷한 형태의 영상(예: 데이터 리포트, 광고 템플릿)을 반복적으로 많이 만들어야 할 때

  • 외부 데이터(데이터베이스, API 등)에 따라 영상 내용을 바꾸고 싶을 때

  • 버전 관리(Git)와 코드 리뷰를 통해 영상 템플릿을 관리하고 싶을 때

  • SaaS 형태의 "영상 생성 서비스"를 만들고 싶은 경우

전통적인 편집 툴이 더 편한 경우

  • 한두 개의 크리에이티브한 영상을 수작업으로 정교하게 만드는 작업(영화, 뮤직비디오 등)

  • 개발 리소스가 전혀 없고, React 자체가 생소한 팀

요약하면, "개발자가 있고, 자동화·대량 생성·데이터 연동이 필요하다면 Remotion을 적극 고려할 만하다" 정도로 정리할 수 있다.13

시작을 위한 실전 체크리스트

실제로 써 보고 싶다면, 다음 순서를 따라가면 이해가 빠르다.

  1. 환경 준비

    • Node.js 16 이상 설치, Git 설치 여부 확인.3

  2. 프로젝트 생성

    • npx create-video@latest 실행 후 Blank 또는 Hello World 템플릿 선택.234

  3. 기본 Composition 이해

    • src/Root.tsx에서 <Composition>의 width, height, durationInFrames, fps, component 값을 바꿔 보며 길이와 해상도 감 익히기.234

  4. 간단한 장면 만들기

    • Composition.tsx 또는 HelloWorld.tsx를 수정해, AbsoluteFill + 텍스트로 자신의 첫 제목 화면을 만든다.234

  5. Sequence와 애니메이션 추가

    • Sequence 두 개를 만들어 앞/뒤 장면을 나누고, useCurrentFrame()으로 간단한 페이드인/이동 애니메이션을 시도.234

  6. 오디오 추가

    • public/music.mp3를 추가하고 <Audio src={...} />로 배경 음악을 넣어 본다.3

  7. Remotion Studio에서 조정·렌더

    • Studio에서 타임라인을 재생해 보고, props 값을 바꿔보며 영상이 어떻게 바뀌는지 확인 후 MP4로 렌더링한다.24

이 과정을 한 번만 따라가면 "웹 개발자가 비디오를 코드로 만든다"는 Remotion의 감각이 빠르게 익혀진다.

참고

1Remotion | Make videos programmatically

2A guide to Remotion Studio

3Dynamic video creation with React and Remotion

4Create Videos Programmatically Using React: A Beginner's Guide to Remotion

Remotion: React 기반 코드로 만드는 비디오 생성 프레임워크

이 노트는 요약·비평·학습 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.