Remotion 완전 가이드: React로 비디오를 만드는 모든 것

"코드로 비디오를 만든다"는 것이 가능하다는 것을 알고 계셨나요? Remotion은 React 개발자들에게 비디오 제작의 새로운 차원을 열어줍니다.

이 문서는 Remotion 공식 문서를 기반으로 Remotion으로 무엇을 할 수 있는지, 그리고 어떻게 시작할 수 있는지에 대한 종합 가이드입니다. 초보자부터 고급 사용자까지, Remotion의 모든 가능성을 탐험해보세요.

---

📹 Remotion이란 무엇인가?

Remotion은 React로 비디오를 프로그래밍 방식으로 생성할 수 있는 혁신적인 프레임워크입니다. 전통적인 비디오 편집 소프트웨어와 달리, Remotion은 코드를 통해 동적이고 데이터 기반의 비디오를 만들 수 있게 해줍니다.

왜 Remotion을 사용해야 할까요?

전통적인 비디오 편집의 한계:

• 수동 작업이 많고 반복적
• 대량의 비디오 생성이 어려움
• 데이터 기반 개인화가 복잡함
• 버전 관리가 불가능

Remotion의 장점:

• ✅ 코드로 비디오 생성 → 버전 관리 가능
• ✅ 데이터 기반 자동화 → 수천 개의 비디오도 가능
• ✅ React 생태계 활용 → 익숙한 도구 사용
• ✅ 프로그래밍 방식 → 무한한 확장성

실제 성공 사례

Remotion을 사용한 실제 비즈니스 성공 사례들이 있습니다:

• Submagic: 3개월 만에 연간 100만 달러 수익 달성
• Icon.me: 30일 만에 연간 500만 달러 수익 달성
• Crayo.ai: 월 50만 달러 이상 수익

이들은 모두 Remotion을 기반으로 비디오 생성 플랫폼을 구축했습니다.

---

🎬 렌더링 가능한 미디어 타입

Remotion은 다양한 미디어 형식을 지원합니다. 각 형식의 특징과 사용 사례를 알아보겠습니다.

1. 비디오 (Video) 🎥

지원 포맷:

• MP4: 가장 널리 사용되는 형식, 웹 호환성 우수
• WebM: 웹 최적화, 투명도 지원
• MKV: 고품질, 무손실 오디오 지원

코덱 옵션:

• H.264: 표준 코덱, 호환성 최고
• H.265: 더 나은 압축률, 파일 크기 감소
• VP8/VP9: 오픈소스 코덱, WebM과 함께 사용
• ProRes: 전문 편집용, 무손실 품질

특수 기능:

투명 비디오 (Alpha Channel)

await renderMedia({
  composition,
  serveUrl: bundleLocation,
  codec: 'vp8', // 또는 'vp9'
  outputLocation: 'out/transparent.webm',
  // 투명 배경이 있는 비디오 생성
});

오버레이 비디오

• 기존 비디오 위에 애니메이션 레이어 추가
• 자막, 로고, 그래픽 오버레이 자동 생성

다양한 해상도 및 프레임레이트

• 4K, Full HD, 소셜 미디어 최적화 해상도
• 24fps (영화), 30fps (TV), 60fps (게임) 등

2. 오디오 (Audio) 🎵

비디오 없이 오디오만 추출할 수 있습니다. 팟캐스트, 음악, 내레이션 등에 활용됩니다.

지원 포맷:

• MP3: 가장 널리 사용, 작은 파일 크기
• AAC: 고품질, Apple 기기 최적화
• WAV: 무손실, 전문 오디오 작업용

사용 예시:

# 오디오만 렌더링
npx remotion render HelloWorld out/audio.mp3 --codec=mp3

3. 스틸 이미지 (Still Images) 📸

단일 프레임을 이미지로 렌더링합니다. 썸네일, 소셜 미디어 미리보기, 포스터 등에 활용됩니다.

지원 포맷:

• PNG: 투명도 지원, 고품질
• JPEG: 작은 파일 크기, 웹 최적화
• WebP: 최신 형식, 우수한 압축률
• PDF: 문서 형식, 인쇄용

실제 사용 사례:

• YouTube 썸네일 자동 생성
• 소셜 미디어 공유 이미지
• 이메일 캠페인용 이미지
• 프레젠테이션 슬라이드

// 스틸 이미지 렌더링
await renderStill({
  composition,
  serveUrl: bundleLocation,
  output: 'out/thumbnail.png',
  inputProps: { title: 'My Video' },
});

4. 이미지 시퀀스 (Image Sequence) 🖼️

연속된 프레임들을 개별 이미지 파일로 렌더링합니다. 후처리나 특수 효과 작업에 활용됩니다.

사용 사례:

• After Effects 등에서 후처리
• 프레임별 수동 편집
• 특수 효과 추가
• 품질 검증

# 이미지 시퀀스 렌더링
npx remotion render HelloWorld --sequence

5. GIF 🎞️

애니메이션 GIF를 생성할 수 있습니다. 소셜 미디어, 문서, 프레젠테이션에 활용됩니다.

특징:

• 프레임레이트 조절 가능 (일반적으로 낮은 프레임레이트 사용)
• 루프 횟수 설정 가능 (무한 루프 또는 특정 횟수)
• 투명 GIF 지원

# GIF 렌더링
npx remotion render HelloWorld out/animation.gif --codec=gif

---

🚀 렌더링 방법: 개발부터 프로덕션까지

Remotion은 다양한 렌더링 방법을 제공합니다. 각 방법의 특징과 적합한 사용 사례를 알아보겠습니다.

1. Remotion Studio (로컬 개발) 🎨

가장 빠른 시작 방법

Remotion Studio는 브라우저 기반의 개발 환경입니다. 비디오 편집 소프트웨어처럼 보이지만, 실제로는 코드를 편집하는 개발 도구입니다.

시작하기:

# 프로젝트 생성
npx create-video@latest

# 개발 서버 실행
pnpm run dev

주요 기능:

실시간 미리보기

• 코드 변경 시 즉시 반영
• Hot reload 지원
• 프레임별 탐색 가능

Props GUI 편집

• Zod 스키마로 정의된 Props를 GUI로 편집
• 코드 없이 비디오 내용 변경
• 변경사항을 코드로 저장 가능

Render 버튼

• GUI에서 직접 렌더링 설정
• 모든 렌더링 옵션 접근 가능
• 진행 상황 실시간 확인

타임라인 편집

• 프레임별 탐색
• 재생 속도 조절
• 특정 프레임으로 점프

실제 사용 예시:

// Root.tsx에서 Zod 스키마 정의
import { z } from 'zod';
import { zColor } from '@remotion/zod-types';

export const myCompSchema = z.object({
  titleText: z.string(),
  titleColor: zColor(),
  logoColor1: zColor(),
});

// Remotion Studio에서 이 Props들을 GUI로 편집 가능!

2. CLI (Command Line) 💻

자동화와 스크립팅에 최적화

CLI는 스크립트 작성, CI/CD 파이프라인, 자동화에 가장 적합합니다.

기본 사용법:

# 비디오 렌더링
npx remotion render HelloWorld out/video.mp4

# 출력 경로 지정
npx remotion render HelloWorld out/my-video.mp4

# 컴포지션 선택 (대화형)
npx remotion render

Props 전달:

# JSON 문자열로 전달
npx remotion render HelloWorld out/video.mp4 \
  --props='{"titleText":"Hello","titleColor":"#ff0000"}'

# JSON 파일로 전달 (Windows에서 권장)
npx remotion render HelloWorld out/video.mp4 \
  --props=./props.json

고급 옵션:

# 코덱 변경
npx remotion render HelloWorld out/video.mp4 --codec=h265

# 품질 설정
npx remotion render HelloWorld out/video.mp4 --jpeg-quality=90

# 동시성 설정 (렌더링 속도 향상)
npx remotion render HelloWorld out/video.mp4 --concurrency=4

# 특정 프레임 범위만 렌더링
npx remotion render HelloWorld out/video.mp4 --frame-range=0-60

# 해상도 오버라이드
npx remotion render HelloWorld out/video.mp4 \
  --width=1920 --height=1080

CI/CD 통합 예시:

# GitHub Actions 예시
- name: Render video
  run: |
    npm install
    npx remotion render MyComp out/video.mp4 \
      --props="${{ toJson(github.event.inputs) }}"
- uses: actions/upload-artifact@v4
  with:
    name: video
    path: out/video.mp4

3. Server-Side Rendering (SSR) 🖥️

프로그래밍 방식의 완전한 제어

SSR API를 사용하면 Node.js나 Bun 환경에서 완전히 프로그래밍 방식으로 비디오를 생성할 수 있습니다.

완전한 예시:

import { bundle } from '@remotion/bundler';
import { renderMedia, selectComposition } from '@remotion/renderer';
import path from 'path';

async function renderVideo() {
  console.log('📦 번들 생성 중...');
  
  // 1. 번들 생성 (한 번만 생성하고 재사용 가능)
  const bundleLocation = await bundle({
    entryPoint: path.resolve('./src/index.ts'),
    // webpack 설정 오버라이드 가능
    webpackOverride: (config) => config,
  });

  console.log('✅ 번들 생성 완료');
  console.log('🎬 컴포지션 선택 중...');

  // 2. 렌더링할 컴포지션 선택
  const composition = await selectComposition({
    serveUrl: bundleLocation,
    id: 'HelloWorld',
    inputProps: {
      titleText: 'Welcome to Remotion',
      titleColor: '#000000',
    },
  });

  console.log(`📹 컴포지션: ${composition.id}`);
  console.log(`⏱️  길이: ${composition.durationInFrames} 프레임`);
  console.log('🎥 렌더링 시작...');

  // 3. 비디오 렌더링
  await renderMedia({
    composition,
    serveUrl: bundleLocation,
    codec: 'h264',
    outputLocation: `out/${composition.id}.mp4`,
    inputProps: {
      titleText: 'Welcome to Remotion',
      titleColor: '#000000',
    },
    // 성능 최적화 옵션
    chromiumOptions: {
      enableMultiProcessOnLinux: true,
    },
    // 진행 상황 콜백
    onProgress: ({ renderedFrames, encodedFrames }) => {
      console.log(`진행: ${renderedFrames}/${composition.durationInFrames}`);
    },
  });

  console.log(`✅ 렌더링 완료!`);
}

renderVideo().catch(console.error);

고급 기능:

브라우저 재사용 (성능 향상):

import { openBrowser } from '@remotion/renderer';

const browser = await openBrowser('chrome');

// 여러 비디오 렌더링 시 브라우저 재사용
for (const video of videos) {
  await renderMedia({
    // ... 다른 옵션들
    puppeteerInstance: browser,
  });
}

await browser.close();

렌더링 취소:

import { makeCancelSignal } from '@remotion/renderer';

const cancelSignal = makeCancelSignal();

// 나중에 취소 가능
setTimeout(() => {
  cancelSignal.cancel();
}, 5000);

await renderMedia({
  // ... 다른 옵션들
  cancelSignal,
});

4. AWS Lambda (클라우드 렌더링) ☁️

가장 확장 가능한 방법

AWS Lambda는 Remotion의 가장 강력한 클라우드 렌더링 솔루션입니다. 수천 개의 비디오를 동시에 렌더링할 수 있습니다.

작동 원리:

1. Lambda 함수와 S3 버킷 생성
2. Remotion 프로젝트를 S3에 웹사이트로 배포
3. Lambda 함수가 호출되면 Remotion 프로젝트 열기
4. 여러 Lambda 함수가 병렬로 비디오의 작은 부분 렌더링
5. 초기 Lambda 함수가 비디오들을 다운로드하고 합치기
6. 최종 비디오를 S3에 업로드

설정 단계:

1단계: AWS 계정 설정

# AWS CLI 설치 및 설정
aws configure

# 필요한 권한:
# - Lambda 함수 생성/수정
# - S3 버킷 생성/접근
# - IAM 역할 생성

2단계: Lambda 함수 배포

# Lambda 함수 배포
npx remotion lambda functions deploy \
  --region=ap-northeast-2 \
  --memory=3008 \
  --timeout=900

3단계: 사이트 배포

# Remotion 프로젝트를 S3에 배포
npx remotion lambda sites create \
  --site-name=my-remotion-site \
  --region=ap-northeast-2

4단계: 비디오 렌더링

# Lambda에서 비디오 렌더링
npx remotion lambda render \
  my-remotion-site \
  HelloWorld \
  --region=ap-northeast-2

Node.js API 사용:

import { renderMediaOnLambda } from '@remotion/lambda/client';

const { bucketName, renderId } = await renderMediaOnLambda({
  region: 'ap-northeast-2',
  functionName: 'remotion-render-xxxxx',
  composition: 'HelloWorld',
  serveUrl: 'https://my-site.s3.amazonaws.com/',
  codec: 'h264',
  inputProps: {
    titleText: 'Hello World',
  },
});

// 진행 상황 확인
const progress = await getRenderProgress({
  functionName: 'remotion-render-xxxxx',
  bucketName,
  renderId,
  region: 'ap-northeast-2',
});

비용 최적화 팁:

• 메모리 설정 최적화 (필요한 만큼만)
• 동시성 조절 (너무 높으면 비용 증가)
• 더 저렴한 리전 사용
• 데이터 사전 계산 (Lambda 내부 계산 최소화)

제한사항:

• 최대 실행 시간: 15분 (AWS Lambda 제한)
• 최대 동시 실행: 기본 1000개 (증가 요청 가능)
• 최대 출력 파일 크기: 약 5GB

5. Docker 🐳

컨테이너화된 렌더링 환경

Docker를 사용하면 일관된 환경에서 렌더링할 수 있으며, AWS ECS, Azure Container Apps 등 다양한 플랫폼에 배포할 수 있습니다.

Dockerfile 예시:

FROM node:22-bookworm-slim

# Chrome 의존성 설치
RUN apt-get update
RUN apt install -y \
    libnss3 \
    libdbus-1-3 \
    libatk1.0-0 \
    libgbm-dev \
    libasound2 \
    libxrandr2 \
    libxkbcommon-dev \
    libxfixes3 \
    libxcomposite1 \
    libxdamage1 \
    libatk-bridge2.0-0 \
    libpango-1.0-0 \
    libcairo2 \
    libcups2

# 프로젝트 파일 복사
COPY package.json package*.json ./
COPY src ./src
COPY public ./public

# 의존성 설치
RUN npm i

# Chrome 설치
RUN npx remotion browser ensure

# 렌더링 스크립트
COPY render.mjs render.mjs

CMD ["node", "render.mjs"]

사용 예시:

# 이미지 빌드
docker build -t remotion-app .

# 로컬에서 실행
docker run remotion-app

# AWS ECR에 푸시
aws ecr get-login-password --region ap-northeast-2 | \
  docker login --username AWS --password-stdin \
  <account-id>.dkr.ecr.ap-northeast-2.amazonaws.com

docker tag remotion-app:latest \
  <account-id>.dkr.ecr.ap-northeast-2.amazonaws.com/remotion-app:latest

docker push <account-id>.dkr.ecr.ap-northeast-2.amazonaws.com/remotion-app:latest

GPU 지원 (EC2):

• NVIDIA GPU를 사용한 가속 렌더링
• 3D 그래픽스 및 복잡한 애니메이션에 유용
• EC2 GPU 인스턴스 필요

6. GitHub Actions 🤖

CI/CD 파이프라인 통합

GitHub Actions를 사용하면 코드 푸시 시 자동으로 비디오를 렌더링할 수 있습니다.

완전한 워크플로우 예시:

name: Render Video

on:
  workflow_dispatch:
    inputs:
      titleText:
        description: '비디오 제목'
        required: true
        default: 'Welcome to Remotion'
      titleColor:
        description: '제목 색상'
        required: true
        default: 'black'

jobs:
  render:
    name: 비디오 렌더링
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@main
      
      - uses: actions/setup-node@main
        with:
          node-version: '20'
      
      - name: 의존성 설치
        run: npm install
      
      - name: Props 파일 생성
        run: |
          echo '${{ toJson(github.event.inputs) }}' > input-props.json
      
      - name: 비디오 렌더링
        run: |
          npx remotion render MyComp out/video.mp4 \
            --props=./input-props.json
      
      - name: 아티팩트 업로드
        uses: actions/upload-artifact@v4
        with:
          name: video
          path: out/video.mp4

자동화 시나리오:

• 코드 변경 시 자동 렌더링
• 릴리즈 노트 비디오 자동 생성
• PR 미리보기 비디오 생성
• 정기적인 리포트 비디오 생성

7. Google Cloud Run (Alpha) 🌐

GCP 환경에서 렌더링할 수 있는 실험적 기능입니다. 현재는 Lambda 런타임을 Cloud Run으로 포팅하는 작업이 진행 중입니다.

---

🎨 주요 기능: Remotion의 핵심 기능들

1. 데이터 기반 비디오 (Data-Driven Videos) 📊

동적 콘텐츠 생성의 핵심

Remotion의 가장 강력한 기능 중 하나는 데이터를 기반으로 비디오를 생성하는 것입니다.

기본 예시:

// API에서 데이터 가져오기
const products = await fetch('https://api.example.com/products')
  .then(res => res.json());

// 각 제품에 대한 비디오 생성
for (const product of products) {
  await renderMedia({
    composition,
    serveUrl: bundleLocation,
    outputLocation: `out/products/${product.id}.mp4`,
    inputProps: {
      productName: product.name,
      productPrice: product.price,
      productImage: product.imageUrl,
    },
  });
}

템플릿 기반 대량 생성:

// 수천 개의 개인화된 비디오 생성
const users = await getUsers();

await Promise.all(
  users.map(user =>
    renderMedia({
      composition,
      serveUrl: bundleLocation,
      outputLocation: `out/users/${user.id}.mp4`,
      inputProps: {
        userName: user.name,
        userStats: user.stats,
        personalizedMessage: generateMessage(user),
      },
    })
  )
);

calculateMetadata 활용:

export const MyComp: React.FC<Props> = ({ items }) => {
  // ...
};

MyComp.calculateMetadata = ({ props }) => {
  // Props에 따라 동적으로 duration 계산
  const duration = props.items.length * 2; // 각 아이템당 2초
  
  return {
    durationInFrames: duration * 30, // 30fps 기준
    width: 1920,
    height: 1080,
  };
};

2. 애니메이션 🎭

자연스러운 애니메이션 만들기

Remotion은 물리 기반 애니메이션과 부드러운 전환을 제공합니다.

Spring 애니메이션:

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

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

  // 자연스러운 스프링 애니메이션
  const progress = spring({
    frame: frame - 10, // 10프레임 후 시작
    fps,
    config: {
      damping: 100,    // 감쇠 (높을수록 빠르게 멈춤)
      stiffness: 200,  // 강성 (높을수록 빠르게 움직임)
      mass: 1,        // 질량 (높을수록 느리게 움직임)
    },
  });

  const translateY = progress * 100; // 0에서 100px로 이동

  return (
    <div style={{ transform: `translateY(${translateY}px)` }}>
      Hello World
    </div>
  );
};

Interpolation (보간):

import { interpolate, useCurrentFrame } from 'remotion';

const MyComponent = () => {
  const frame = useCurrentFrame();

  // 선형 보간
  const opacity = interpolate(
    frame,
    [0, 30, 60],      // 입력 프레임
    [0, 1, 0],        // 출력 값
    {
      extrapolateLeft: 'clamp',   // 왼쪽 범위 밖은 고정
      extrapolateRight: 'clamp',  // 오른쪽 범위 밖은 고정
    }
  );

  // Easing 함수 사용
  const scale = interpolate(
    frame,
    [0, 30],
    [0, 1],
    {
      easing: Easing.out(Easing.cubic), // 이징 커브 적용
    }
  );

  return (
    <div style={{ opacity, transform: `scale(${scale})` }}>
      Fade in and scale
    </div>
  );
};

Sequence 활용:

import { Sequence } from 'remotion';

const MyVideo = () => {
  return (
    <>
      {/* 첫 번째 시퀀스: 0-30프레임 */}
      <Sequence from={0} durationInFrames={30}>
        <Intro />
      </Sequence>
      
      {/* 두 번째 시퀀스: 30-90프레임 */}
      <Sequence from={30} durationInFrames={60}>
        <MainContent />
      </Sequence>
      
      {/* 세 번째 시퀀스: 90-120프레임 */}
      <Sequence from={90} durationInFrames={30}>
        <Outro />
      </Sequence>
    </>
  );
};

Series로 순차 배치:

import { Series } from 'remotion';

const MyVideo = () => {
  return (
    <Series>
      <Series.Sequence durationInFrames={60}>
        <Scene1 />
      </Series.Sequence>
      <Series.Sequence durationInFrames={60}>
        <Scene2 />
      </Series.Sequence>
      <Series.Sequence durationInFrames={60}>
        <Scene3 />
      </Series.Sequence>
    </Series>
  );
};

3. 비디오 편집 기능 🎬

기존 비디오 활용하기

Remotion은 기존 비디오를 임베드하고 편집할 수 있는 강력한 기능을 제공합니다.

OffthreadVideo 사용:

import { OffthreadVideo } from 'remotion';
import video from './assets/video.mp4';

const MyComp = () => {
  return (
    <OffthreadVideo
      src={video}
      startFrom={30}      // 30프레임부터 시작
      endAt={90}          // 90프레임에서 끝
      playbackRate={0.5}  // 절반 속도 재생
      volume={0.8}        // 볼륨 80%
    />
  );
};

Audio 트랙 추가:

import { Audio } from 'remotion';
import audio from './assets/music.mp3';

const MyComp = () => {
  return (
    <>
      <Audio
        src={audio}
        startFrom={10}     // 10프레임부터 시작
        endAt={100}        // 100프레임에서 끝
        volume={0.5}       // 볼륨 50%
        playbackRate={1.2} // 1.2배 속도
      />
      {/* 비디오 콘텐츠 */}
    </>
  );
};

Freeze로 프레임 고정:

import { Freeze, OffthreadVideo } from 'remotion';

const MyComp = () => {
  return (
    <Freeze frame={60}> {/* 60프레임에서 고정 */}
      <OffthreadVideo src={video} />
    </Freeze>
  );
};

4. 3D 그래픽스 🎮

React Three Fiber 통합

@remotion/three 패키지를 사용하면 3D 모델과 애니메이션을 비디오에 추가할 수 있습니다.

기본 사용법:

import { ThreeCanvas } from '@remotion/three';
import { useCurrentFrame } from 'remotion';

const My3DComp = () => {
  const frame = useCurrentFrame();

  return (
    <ThreeCanvas>
      <mesh rotation={[frame * 0.1, frame * 0.1, 0]}>
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="orange" />
      </mesh>
      <ambientLight intensity={0.5} />
      <directionalLight position={[10, 10, 5]} />
    </ThreeCanvas>
  );
};

5. 시각적 편집 🎨

코드 없이 비디오 편집

Remotion Studio에서 Zod 스키마로 정의된 Props를 GUI로 편집할 수 있습니다.

Zod 스키마 정의:

import { z } from 'zod';
import { zColor } from '@remotion/zod-types';

export const myCompSchema = z.object({
  titleText: z.string().describe('비디오 제목'),
  titleColor: zColor().describe('제목 색상'),
  logoColor1: zColor().describe('로고 색상 1'),
  logoColor2: zColor().describe('로고 색상 2'),
  items: z.array(z.object({
    text: z.string(),
    value: z.number(),
  })).describe('아이템 목록'),
});

export type MyCompProps = z.infer<typeof myCompSchema>;

Remotion Studio에서:

• 각 필드를 GUI로 편집
• 변경사항을 실시간으로 미리보기
• 편집한 Props를 코드로 저장 가능

6. 템플릿 시스템 📋

빠른 시작을 위한 템플릿들

Remotion은 다양한 시작 템플릿을 제공합니다.

사용 가능한 템플릿:

• 기본 템플릿: Hello World 예제
• Text-to-Speech: Azure/Google TTS 통합
• Three.js: 3D 그래픽스 템플릿
• Stills: 정적 이미지 생성 템플릿
• Render Server: Express.js 서버 템플릿

템플릿 사용:

npx create-video@latest --template=tts
npx create-video@latest --template=three
npx create-video@latest --template=still
npx create-video@latest --render-server

---

📦 주요 패키지: Remotion 생태계

Core 패키지

remotion

• 핵심 라이브러리
• 모든 기본 컴포넌트와 훅 제공
• 필수 패키지

@remotion/cli

• CLI 도구
• 렌더링, 번들링, 스튜디오 실행
• 개발 도구

@remotion/renderer

• SSR API
• 프로그래밍 방식 렌더링
• 서버 사이드 렌더링

@remotion/player

• 웹 플레이어 컴포넌트
• 브라우저에서 Remotion 비디오 재생
• 인터랙티브 미리보기

확장 패키지

@remotion/lambda

• AWS Lambda 통합
• 클라우드 렌더링
• 분산 렌더링

@remotion/three

• 3D 그래픽스
• React Three Fiber 통합
• 3D 모델 및 애니메이션

@remotion/shapes

• 기하학적 도형
• Triangle, Star, Pie 등
• SVG 기반

@remotion/paths

• SVG 경로 애니메이션
• 복잡한 경로 생성 및 애니메이션

@remotion/rive

• Rive 애니메이션 통합
• Lottie 대안
• 더 작고 빠름

@remotion/tailwind

• Tailwind CSS 통합
• 쉽게 스타일링
• 유틸리티 클래스 사용

@remotion/media-utils

• 미디어 유틸리티
• 오디오 시각화
• 비디오 메타데이터

@remotion/layout-utils

• 레이아웃 유틸리티
• 텍스트 측정
• 동적 레이아웃

---

🎯 실제 사용 사례: Remotion으로 무엇을 만들 수 있을까?

1. 소셜 미디어 콘텐츠 📱

Instagram Stories 자동 생성

// 사용자별 개인화된 스토리 생성
const stories = await generateStories(users);

for (const story of stories) {
  await renderMedia({
    composition: 'InstagramStory',
    inputProps: {
      userName: story.user.name,
      userPhoto: story.user.photo,
      highlights: story.highlights,
    },
    outputLocation: `stories/${story.user.id}.mp4`,
  });
}

TikTok 비디오 템플릿

• 트렌딩 음악에 맞춘 비디오 자동 생성
• 텍스트 오버레이 자동 추가
• 해시태그 자동 생성

YouTube 썸네일 생성

• 자동 썸네일 생성
• A/B 테스트용 여러 버전 생성
• 브랜드 일관성 유지

2. 마케팅 자동화 📢

제품 소개 비디오 대량 생성

const products = await getProducts();

await Promise.all(
  products.map(product =>
    renderMedia({
      composition: 'ProductShowcase',
      inputProps: {
        productName: product.name,
        productImage: product.image,
        productPrice: product.price,
        productFeatures: product.features,
      },
      outputLocation: `products/${product.id}.mp4`,
    })
  )
);

개인화된 마케팅 비디오

• 고객별 맞춤 비디오
• 이름, 구매 이력 등 개인화
• 이메일 캠페인 통합

이벤트 홍보 비디오

• 날짜, 장소 자동 업데이트
• 참가자별 초대 비디오
• 실시간 통계 반영

3. 데이터 시각화 📊

대시보드 비디오 리포트

const reportData = await fetchDashboardData();

await renderMedia({
  composition: 'DashboardReport',
  inputProps: {
    metrics: reportData.metrics,
    charts: reportData.charts,
    dateRange: reportData.dateRange,
  },
  outputLocation: 'reports/weekly-report.mp4',
});

통계 및 차트 애니메이션

• 데이터 변화 시각화
• 애니메이션 차트
• 트렌드 분석 비디오

데이터 스토리텔링

• 복잡한 데이터를 이해하기 쉬운 비디오로
• 내레이션과 함께
• 인사이트 강조

4. 교육 콘텐츠 🎓

자동 생성 강의 비디오

• 슬라이드 기반 비디오
• 자동 타이밍
• 음성 합성 통합

인터랙티브 튜토리얼

• 단계별 가이드
• 코드 예시 하이라이트
• 화면 녹화 통합

설명 비디오

• 제품 사용법
• 프로세스 설명
• FAQ 비디오

5. 개발 도구 🛠️

코드 리뷰 비디오

• PR 변경사항 시각화
• 코드 하이라이트
• 자동 생성

데모 비디오 자동 생성

• 기능 데모
• 릴리즈 노트 비디오
• 변경사항 요약

문서화 비디오

• API 문서 비디오
• 튜토리얼 비디오
• 예시 시연

---

🔧 배포 옵션 비교: 어떤 방법을 선택해야 할까?

각 배포 방법의 장단점을 자세히 비교해보겠습니다.

방법장점단점적합한 경우예상 비용

로컬 렌더링	✅ 빠른 반복 ✅ 무료 ✅ 완전한 제어	❌ 리소스 제한 ❌ 확장성 없음	개발 및 테스트 소규모 프로젝트	무료
AWS Lambda	✅ 자동 스케일링 ✅ 비용 효율 ✅ 관리 불필요	❌ AWS 의존성 ❌ 15분 제한 ❌ 설정 복잡	프로덕션 대량 렌더링 자동화	$0.01-0.10/분
Docker	✅ 유연성 ✅ GPU 지원 ✅ 완전한 제어	❌ 인프라 관리 ❌ 설정 복잡 ❌ 비용 예측 어려움	커스텀 환경 GPU 필요 기존 인프라 활용	인프라 비용
SSR (Node.js)	✅ 완전한 제어 ✅ 커스터마이징 ✅ 브라우저 재사용	❌ 서버 관리 ❌ 확장성 구현 필요 ❌ 모니터링 필요	자체 인프라 보유 특수 요구사항	서버 비용

선택 가이드

소규모 프로젝트 (월 100개 미만) → 로컬 렌더링 또는 간단한 SSR

중규모 프로젝트 (월 100-1000개) → AWS Lambda (가장 추천)

대규모 프로젝트 (월 1000개 이상) → AWS Lambda 또는 Docker 클러스터

특수 요구사항 (GPU, 긴 렌더링 시간) → Docker + EC2 GPU 인스턴스

---

💡 시작하기: 단계별 가이드

1단계: 프로젝트 생성

# 최신 템플릿으로 프로젝트 생성
npx create-video@latest

# 특정 템플릿 선택
npx create-video@latest --template=tts

# 프로젝트 이름 지정
npx create-video@latest my-video-project

프로젝트 구조:

my-video-project/
├── src/
│   ├── Root.tsx          # 컴포지션 등록
│   ├── index.ts          # 엔트리 포인트
│   └── HelloWorld.tsx    # 예제 컴포넌트
├── public/               # 정적 파일
├── package.json
├── remotion.config.ts    # Remotion 설정
└── tsconfig.json

2단계: 개발 서버 실행

# 의존성 설치
pnpm install

# 개발 서버 실행
pnpm run dev

브라우저에서 http://localhost:3000으로 접속하면 Remotion Studio가 열립니다.

3단계: 첫 번째 비디오 만들기

기본 컴포지션 생성:

// src/Root.tsx
import { Composition } from 'remotion';
import { MyVideo } from './MyVideo';

export const RemotionRoot = () => {
  return (
    <Composition
      id="MyVideo"
      component={MyVideo}
      durationInFrames={150}
      fps={30}
      width={1920}
      height={1080}
    />
  );
};

비디오 컴포넌트 작성:

// src/MyVideo.tsx
import { AbsoluteFill, useCurrentFrame } from 'remotion';

export const MyVideo = () => {
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill style={{
      justifyContent: 'center',
      alignItems: 'center',
      fontSize: 100,
      backgroundColor: 'white',
    }}>
      프레임: {frame}
    </AbsoluteFill>
  );
};

4단계: 비디오 렌더링

# 기본 렌더링
pnpm run render MyVideo out/video.mp4

# 또는 직접 명령어
npx remotion render MyVideo out/video.mp4

5단계: 프로덕션 배포

AWS Lambda 배포:

# 1. Lambda 함수 배포
npx remotion lambda functions deploy --region=ap-northeast-2

# 2. 사이트 배포
npx remotion lambda sites create --site-name=my-site

# 3. 비디오 렌더링
npx remotion lambda render my-site MyVideo

Docker 배포:

# 1. Docker 이미지 빌드
docker build -t remotion-app .

# 2. ECR에 푸시 (AWS 예시)
docker push <account-id>.dkr.ecr.ap-northeast-2.amazonaws.com/remotion-app

# 3. ECS에서 실행

---

🎓 학습 경로: 초보자부터 전문가까지

초급: 기본 개념 이해

1. The Fundamentals 학습
   • 공식 문서의 Fundamentals 섹션
   • Composition, Sequence, Frame 개념 이해
   • 기본 애니메이션 만들기
2. 첫 번째 비디오 만들기
   • Hello World 예제 수정
   • 간단한 텍스트 애니메이션
   • 색상과 폰트 변경
3. Props 이해하기
   • Props 전달 방법
   • Zod 스키마 사용
   • 동적 콘텐츠 생성

중급: 고급 기능 활용

1. 애니메이션 마스터
   • Spring 애니메이션 심화
   • Interpolation과 Easing
   • 복잡한 시퀀스 구성
2. 데이터 통합
   • API 데이터를 비디오로 변환
   • 대량 비디오 생성
   • 템플릿 시스템 구축
3. 미디어 활용
   • 비디오 임베드
   • 오디오 트랙 추가
   • 이미지 시퀀스 처리

고급: 프로덕션 준비

1. 성능 최적화
   • 렌더링 속도 향상
   • 메모리 사용 최적화
   • 비용 최적화
2. 배포 전략
   • AWS Lambda 설정
   • Docker 컨테이너화
   • 모니터링 및 로깅
3. 확장성 구축
   • 대량 렌더링 시스템
   • 큐 시스템 통합
   • 에러 처리 및 재시도

---

🚀 성능 최적화 팁

렌더링 속도 향상

1. 동시성 조절

await renderMedia({
  // ... 다른 옵션들
  concurrency: 4, // CPU 코어 수에 맞게 조절
});

2. 브라우저 재사용

const browser = await openBrowser('chrome');

// 여러 렌더링 시 브라우저 재사용
for (const video of videos) {
  await renderMedia({
    puppeteerInstance: browser,
    // ... 다른 옵션들
  });
}

await browser.close();

3. 프레임 범위 지정

// 필요한 부분만 렌더링
await renderMedia({
  frameRange: [0, 60], // 처음 60프레임만
  // ... 다른 옵션들
});

메모리 최적화

1. 이미지 최적화

• WebP 형식 사용
• 적절한 해상도 선택
• 이미지 압축

2. 컴포넌트 최적화

• 불필요한 리렌더링 방지
• useMemo, useCallback 활용
• 큰 데이터 구조 피하기

비용 최적화 (Lambda)

1. 메모리 설정 최적화

# 최소한의 메모리로 시작하고 점진적으로 증가
npx remotion lambda functions deploy --memory=1024

2. 동시성 조절

• 너무 높은 동시성은 비용 증가
• 적절한 균형 찾기

3. 데이터 사전 계산

• Lambda 내부 계산 최소화
• Props로 미리 계산된 데이터 전달

---

🐛 문제 해결 가이드

일반적인 문제들

1. 렌더링이 너무 느림

• 동시성 증가
• 브라우저 재사용
• 불필요한 프레임 제거

2. 메모리 부족 오류

• 이미지 크기 줄이기
• 해상도 낮추기
• 컴포넌트 최적화

3. Lambda 타임아웃

• 비디오 길이 줄이기
• 프레임 범위 분할
• 더 많은 Lambda 함수 사용

4. 텍스트 렌더링 문제

• 폰트 로딩 확인
• 서브픽셀 렌더링 설정
• transform 사용

---

📚 추가 학습 리소스

공식 문서

• Remotion 공식 문서
• API 레퍼런스
• 템플릿 모음

커뮤니티

• Discord 커뮤니티 - 실시간 도움
• GitHub 저장소 - 이슈 및 기여
• Showcase - 영감을 얻을 수 있는 작품들

튜토리얼 비디오

• Spotify Wrapped 튜토리얼
• Programmatic Stories
• Fireship Remotion 튜토리얼

예제 프로젝트

• 12+ Remotion Examples
• Light-leak Transition
• Pool game with Matter.js

---

🤖 AI 어시스턴트와 함께하는 Remotion 개발

Remotion MCP (Model Context Protocol) 소개

AI가 Remotion 문서를 이해하도록 만들기

Remotion의 Model Context Protocol (MCP)은 Cursor나 VS Code의 AI 채팅이 Remotion 문서를 더 잘 이해할 수 있도록 도와주는 강력한 도구입니다. CrawlChat의 기술을 사용하여 Remotion 문서를 벡터 데이터베이스로 인덱싱합니다.

MCP의 장점:

• ✅ AI가 Remotion API를 정확하게 이해
• ✅ 최신 문서 정보 자동 반영
• ✅ 코드 제안의 정확도 향상
• ✅ 문서 검색이 더 빠르고 정확

:::warning 테스트 단계: 현재 이 도구는 인증 없이 공개되어 있습니다. 사용량이 많아지면 제한될 수 있습니다. :::

Cursor에서 MCP 설정하기

원클릭 설치 (가장 쉬운 방법)

위 버튼을 클릭하면 자동으로 설정됩니다!

수동 설치 방법

1 Cursor 설정 열기

• 단축키: Cmd+Ctrl + P (macOS) 또는 Ctrl+Alt + P (Windows/Linux)
• > Cursor Settings 입력 후 Enter

2 MCP 서버 추가

설정 파일에 다음 JSON을 추가합니다:

{
  "mcpServers": {
    "remotion-documentation": {
      "command": "npx",
      "args": ["@remotion/mcp@latest"]
    }
  }
}

3 확인

설정이 성공하면:

• ✅ 녹색 점이 표시됨
• ✅ remotion-documentation 도구가 목록에 나타남

사용 방법:

이제 Cursor의 Composer에서 Remotion 관련 질문을 하면 MCP가 자동으로 호출되어 최신 Remotion 문서를 참조합니다!

예시 질문:

• "Remotion에서 Spring 애니메이션을 만드는 방법 알려줘"
• "AWS Lambda에 Remotion을 배포하는 방법은?"
• "타입라이터 효과를 구현하는 코드 작성해줘"

VS Code에서 MCP 설정하기

원클릭 설치

Install MCP Server →

수동 설치 방법

1 명령 팔레트 열기

• 단축키: Cmd+Shift+P (macOS) 또는 Ctrl+Shift+P (Windows/Linux)

2 MCP 서버 추가

• > MCP: Add Server 입력 후 Enter

3 JSON 설정 추가

• Add from JSON 선택
• 다음 설정 붙여넣기:

{
  "name": "remotion-documentation",
  "command": "npx",
  "args": ["@remotion/mcp@latest"]
}

4 확인

• Extensions 뷰 열기 (Cmd+Shift+X / Ctrl+Shift+X)
• MCP Servers 섹션에서 remotion-documentation 확인

사용 방법:

GitHub Copilot Chat에서 Remotion 관련 질문을 하면 MCP가 자동으로 Remotion 문서를 참조합니다!

MCP 활용 팁

1. 구체적인 질문하기

❌ "Remotion 사용법 알려줘"
✅ "Remotion에서 데이터 기반으로 100개의 개인화된 비디오를 생성하는 방법은?"

2. API 관련 질문

✅ "renderMedia 함수의 모든 옵션을 설명해줘"
✅ "Spring 애니메이션의 damping과 stiffness 파라미터 차이는?"

3. 코드 리뷰 요청

✅ "이 Remotion 컴포넌트를 최적화해줘"
✅ "이 코드에 베스트 프랙티스를 적용해줘"

4. 문제 해결

✅ "Lambda 렌더링이 타임아웃되는데 해결 방법은?"
✅ "텍스트가 흐릿하게 렌더링되는 문제를 해결해줘"

실제 활용 예시

시나리오 1: 새로운 기능 학습

사용자: "Remotion에서 오디오 시각화를 만드는 방법 알려줘"

AI (MCP 사용): 
"Remotion에서 오디오 시각화를 만들려면 @remotion/media-utils 패키지의 
visualizeAudio() 함수를 사용할 수 있습니다. useAudioData() 훅으로 
오디오 데이터를 가져온 후, visualizeAudio()로 시각화 데이터를 생성합니다..."

시나리오 2: 코드 생성

사용자: "타입라이터 효과가 있는 터미널 컴포넌트 만들어줘"

AI (MCP 사용):
"useCurrentFrame()과 interpolate()를 사용하여 타입라이터 효과를 
구현할 수 있습니다. 다음과 같은 코드를 작성할 수 있습니다:

import { useCurrentFrame, useVideoConfig, interpolate } from 'remotion';

export const TypewriterTerminal = ({ text }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  
  const charsPerSecond = 10;
  const visibleChars = Math.floor(
    interpolate(frame, [0, text.length * (fps / charsPerSecond)], 
    [0, text.length], { extrapolateRight: 'clamp' })
  );
  
  return <div>{text.slice(0, visibleChars)}</div>;
};"

시나리오 3: 배포 가이드

사용자: "AWS Lambda에 Remotion을 배포하는 전체 과정을 단계별로 알려줘"

AI (MCP 사용):
"AWS Lambda에 Remotion을 배포하는 과정은 다음과 같습니다:

1. AWS 계정 설정 및 권한 구성
2. Lambda 함수 배포: npx remotion lambda functions deploy
3. 사이트 배포: npx remotion lambda sites create
4. 비디오 렌더링: npx remotion lambda render

각 단계의 상세한 설정 옵션은..."

MCP의 기술적 배경

벡터 데이터베이스 기반 검색

• Remotion 문서가 벡터로 변환되어 저장됨
• 의미 기반 검색으로 더 정확한 결과 제공
• 최신 문서 정보 자동 업데이트

CrawlChat 기술 활용

• CrawlChat의 고급 인덱싱 기술 사용
• 문서의 구조와 의미를 이해
• 컨텍스트 기반 답변 생성

주의사항

현재 상태

• ⚠️ 테스트 단계로 인증 없이 공개됨
• 사용량이 많아지면 제한될 수 있음
• 무료 사용 가능 (현재)

권장 사항

• 공식 문서도 함께 참고하기
• 복잡한 문제는 Discord 커뮤니티 활용
• MCP는 보조 도구로 활용

MCP 없이도 가능한 것들

MCP는 편의 도구일 뿐, 없어도 Remotion 개발은 가능합니다:

• ✅ 공식 문서 직접 참조
• ✅ Discord 커뮤니티 질문
• ✅ GitHub Issues 검색
• ✅ 예제 프로젝트 학습

하지만 MCP가 있으면 더 빠르고 정확한 개발이 가능합니다! 🚀

---

📝 중요한 참고사항

라이선스

개인/비영리 사용

• ✅ 완전 무료
• ✅ 오픈소스 프로젝트
• ✅ 학습 및 포트폴리오

회사 사용

• ⚠️ 라이선스 필요
• 💰 라이선스 구매
• 📧 문의: hi@remotion.dev

제한사항

AWS Lambda

• 최대 실행 시간: 15분
• 최대 동시 실행: 기본 1000개 (증가 요청 가능)
• 최대 출력 파일: 약 5GB

로컬 렌더링

• 시스템 리소스에 의존
• 긴 비디오는 시간 소요
• GPU 가속 제한적

기술 요구사항

필수

• Node.js 18 이상
• Chrome 또는 Chromium (자동 다운로드)
• FFmpeg (Remotion에 내장)

권장

• 최소 8GB RAM
• SSD 저장공간
• 멀티코어 CPU

---

🎉 결론

Remotion은 React 개발자들에게 비디오 제작의 새로운 가능성을 열어줍니다. 코드로 비디오를 만든다는 것은 단순히 편집 도구를 대체하는 것이 아니라, 완전히 새로운 방식의 콘텐츠 생성 패러다임입니다.

주요 장점 요약:

• 🚀 빠른 개발 및 반복
• 📊 데이터 기반 자동화
• 🔧 완전한 프로그래밍 제어
• ☁️ 확장 가능한 클라우드 렌더링
• 💰 비용 효율적인 솔루션

시작하기:

npx create-video@latest

지금 바로 시작해서 Remotion의 강력함을 경험해보세요! 🎬

---

마지막 업데이트: 2026년 1월
Remotion 버전: 4.0.407
작성자: Remotion 문서 기반 종합 가이드

---

🙏 도움이 필요하신가요?

• 📖 공식 문서에서 더 자세한 정보 확인
• 💬 Discord 커뮤니티에서 질문하기
• 🐛 GitHub Issues에 버그 리포트
• 📧 이메일: hi@remotion.dev

행운을 빕니다! 🍀