🚀 Remotion 완전 정복: Video as Code 바이블 (Ultimate A-Z Guide)

이 문서는 영상 편집의 패러다임을 '타임라인 편집(Manual)'에서 '코드 기반 생성(Generative)'으로 바꾸는 Remotion의 모든 지식을 집대성한 가이드입니다.

비개발자를 위한 AI 자동화(Remotion Skills)부터, 현업 개발자를 위한 커스텀 렌더링 파이프라인(Remotion Library) 구축까지, 요약 없이 아주 상세하게 다룹니다.

같이 보면 좋은 영상 내용 요약

1. Skills.sh 소개 [00:00]

• Vercel에서 만든 오픈 AI 에이전트 생태계인 skills.sh를 소개합니다.

• npx skills add 명령어 하나로 코딩 모범 사례(Best Practices), 디자인 가이드라인, 외부 툴 연동 등 다양한 '스킬'을 설치하여 Claude Code와 같은 AI 에이전트의 기능을 즉각적으로 업그레이드할 수 있습니다.

2. 웹 개발 시연 (React & Web Design) [01:08]

• 목표: 기존 웹사이트에 '다크 모드'와 '부드러운 애니메이션' 추가.

• 과정:

• 'Vercel React Best Practices'와 'Web Design Guidelines' 스킬을 설치.

• Claude Code에게 해당 스킬(가이드라인)을 참고하여 코드를 수정하도록 요청.

• 결과: 에이전트가 가이드라인에 맞춰 코드를 분석 및 수정하여, 다크 모드와 애니메이션이 적용된 웹페이지를 성공적으로 구현했습니다.

3. 비디오 편집 시연 (Remotion) [07:39]

• 목표: 코드로 영상을 편집하는 Remotion을 활용해 영상 클립 편집(자막, B-roll 삽입 등).

• 과정:

• Remotion 관련 스킬 설치 후, Claude Code에게 영상 편집 계획 수립 요청.

• FFmpeg로 오디오 추출 → Whisper 모델로 자막(SRT) 및 타임스탬프 생성 → 적절한 위치에 B-roll(삽입 영상) 및 자막 추가.

• 이후 "더 흥미롭게 만들어줘"라는 요청에 따라 효과음(SFX)까지 코드로 삽입하여 렌더링.

• 결과: 완벽하진 않지만, AI 에이전트가 코드를 통해 영상을 편집하고 자막과 효과음을 넣는 가능성을 확인했습니다.

🔰 Part 1. [초심자편] AI 비서와 함께 영상 만들기 (Remotion Skills)

이 섹션은 코딩 지식이 전혀 없는 기획자, 마케터, 크리에이터를 위해 설계되었습니다. "터미널이 뭔가요?"라고 묻는 분들도 따라 할 수 있도록 가장 기초적인 단계부터 설명합니다.

1.1 사전 요구사항 및 환경 검증 (Prerequisites)

작업을 시작하기 전, 아래 준비물이 갖춰져 있는지 하나씩 체크하세요.

1. PC/Mac 환경: 윈도우 10/11, macOS, 리눅스 모두 가능합니다. (램 8GB 이상 권장)

2. 안정적인 인터넷: AI가 웹에서 이미지와 데이터를 실시간으로 가져와야 합니다.

3. OpenAI API Key (선택 사항): 기본적으로 무료 에이전트(Anti-gravity)를 쓰면 필요 없지만, 더 똑똑한 AI를 쓰려면 필요할 수 있습니다.

1.2 필수 프로그램 설치 및 버전 확인 (Mandatory Installation)

Remotion은 클라우드 서비스가 아니라 내 컴퓨터의 자원을 쓰는 엔진입니다. 따라서 기초 프로그램 설치가 필수입니다.

1) Node.js (필수 런타임)

컴퓨터가 자바스크립트(Remotion의 언어)를 이해하게 해주는 번역기입니다.

• 다운로드: https://nodejs.org/

• 버전 선택: 반드시 LTS (Long Term Support) 버전을 받으세요. (Current 버전은 불안정할 수 있음)

• 최소 요구사항: Node.js 16 이상 필수 (권장: v18 또는 v20)

• 설치 확인법:

1.  설치 완료 후 `cmd`(명령 프롬프트) 또는 `Terminal`을 켭니다.

2.  `node -v` 라고 치고 엔터를 누릅니다.

3.  `v18.xx.x` 또는 `v20.xx.x` 처럼 숫자가 나오면 성공입니다. (오류 메시지가 뜨면 재부팅 후 다시 설치하세요.)

2) Visual Studio Code (추천 에디터)

가장 대중적인 무료 코드 편집기입니다. 메모장보다 훨씬 편리합니다.

• 다운로드: https://code.visualstudio.com/

3) FFmpeg (렌더링 엔진)

영상을 MP4 파일로 변환할 때 필요합니다. Remotion이 보통 알아서 설치하지만, 혹시 모르니 알아만 두세요.

1.3 Remotion Skills 설치 및 초기 세팅 (Setup)

이제 AI 도구를 내 컴퓨터에 깔아보겠습니다.

1. VS Code 실행: 프로그램을 켭니다.

2. 터미널 열기: 상단 메뉴 Terminal > New Terminal (단축키: Ctrl + ~ 혹은 Cmd + ~)

3. 설치 명령어 입력: 아래 명령어를 복사해 붙여넣고 엔터를 칩니다.

npx remotion-skills@latest

4. 초기 설정 마법사 (Wizard) 상세 가이드

터미널에 영어 질문이 나올 겁니다. 당황하지 말고 아래대로 하세요.

* `Ok to proceed? (y)`: y 입력 후 엔터. (설치 동의)

* `Select an agent`: 화살표 키로 Anti-gravity 선택 후 엔터.

    * *Anti-gravity*: 무료이며 범용적입니다. (입문자 추천)

    * *Claude Code*: 코딩 능력이 강력하지만 별도의 설정이 필요합니다.

* `Installation scope`: 화살표 키로 Global 선택.

    * *Global*: 컴퓨터 어느 폴더에서나 이 명령어를 쓸 수 있게 합니다.

1.4 실전 워크플로우: "실패 없는 프롬프트 공식"

AI에게 일을 시킬 때는 [역할] - [상황] - [지시] - [제약] 순서로 말해야 합니다.

[실전 예제: 다이어트 보조제 광고 영상]

아래 내용을 채팅창에 그대로 입력해 보세요.

[역할 부여]

너는 100만 팔로워를 보유한 인스타그램 릴스 전문 편집자야. 시청자의 시선을 3초 안에 사로잡는 것이 목표야.

[영상 개요]

• 주제: "굶지 않고 살 빼는 법" 다이어트 보조제 광고

• 길이: 15초

• 비율: 9:16 (세로형)

[상세 스크립트 및 연출]

1. 0~3초 (Intro):

• 텍스트: "아직도 굶으면서 빼요?" (화면 중앙, 빨간색, 아주 굵게)

• 배경: 배고파서 괴로워하는 사람의 사진 (웹 검색)

• 효과: 텍스트가 화면 밖으로 튀어 나오는 듯한 'Pop-up' 애니메이션.

2. 3~10초 (Main):

• 텍스트: "이제 먹으면서 빼세요!" (파란색)

• 배경: 맛있는 샐러드와 건강한 식사 사진

• 효과: 화면이 부드럽게 오른쪽으로 넘어가는 'Slide' 효과.

3. 10~15초 (Outro):

• 텍스트: "구매 링크는 프로필에!" (검정색)

• 배경: 심플한 흰색 배경에 구매 버튼 아이콘.

[디자인 제약 사항]

• 폰트는 가독성이 좋은 '고딕체'를 사용해 줘.

• 배경 음악은 경쾌하고 빠른 템포의 음악을 선정해 줘.

1.5 수정(Debugging) 및 렌더링

수정 꿀팁

AI가 만든 결과물이 이상할 때 이렇게 말하세요.

• 이미지가 이상할 때: "2번째 장면 배경 이미지가 주제랑 안 맞아. '신선한 샐러드' 키워드로 다시 검색해서 바꿔줘."

• 속도가 안 맞을 때: "첫 번째 자막이 너무 빨리 사라져. 3초 동안 보여주도록 수정해 줘."

최종 저장 (Rendering)

미리보기 화면이 만족스럽다면, 터미널에 다음 명령어를 입력합니다.

npm run build

• 컴퓨터 사양에 따라 1~5분 정도 소요되며, 완료 시 out 폴더에 video.mp4 파일이 생성됩니다.

1.6 초심자가 자주 하는 실수 및 해결법 (Troubleshooting)

에러 1: "Cannot find module 'remotion'"

증상: 명령어를 실행했는데 remotion을 찾을 수 없다고 나옵니다.

원인: 잘못된 폴더에서 터미널을 실행했습니다.

해결:

1. package.json 파일이 있는 폴더로 이동하세요.

2. VS Code에서 File > Open Folder로 프로젝트 폴더를 열었는지 확인하세요.

에러 2: 렌더링한 영상이 깨지거나 애니메이션이 안 움직여요

증상: MP4 파일을 재생하면 텍스트가 제자리에 멈춰있거나 이상하게 보입니다.

원인: CSS Animation(transition, @keyframes)을 사용했습니다.

해결: Remotion에서는 CSS 애니메이션이 작동하지 않습니다. 반드시 interpolate() 또는 spring() 함수를 사용해야 합니다.

// ❌ 작동하지 않음

<div style={{ animation: 'fadeIn 1s' }}>텍스트</div>

// ✅ 올바른 방법

const opacity = interpolate(frame, [0, 30], [0, 1]);

<div style={{ opacity }}>텍스트</div>

에러 3: 이미지나 폰트가 화면에 안 보여요

증상: 코드에서 이미지를 불러왔는데 검은 화면만 나옵니다.

원인: 상대경로가 잘못되었거나, 렌더링 시 파일을 찾지 못했습니다.

해결: staticFile() 함수를 사용하여 public 폴더의 파일을 안전하게 불러오세요.

// ❌ 작동하지 않을 수 있음

<img src="../assets/logo.png" />

// ✅ 올바른 방법

import { Img, staticFile } from 'remotion';

<Img src={staticFile('logo.png')} />

에러 4: "Timed out while rendering frame"

증상: 렌더링 중 특정 프레임에서 멈춥니다.

원인: 외부 API 호출이나 이미지 로딩이 너무 오래 걸립니다.

해결: delayRender()와 continueRender()를 사용하여 비동기 작업을 처리하세요. (Part 2.4 참고)

🛠️ Part 2. [개발자편] React로 비디오 아키텍처 구축 (Remotion Library)

이 섹션은 React, TypeScript에 익숙한 개발자를 위한 심화 가이드입니다. AI 툴의 한계를 넘어, 데이터 연동, 동적 렌더링, 복잡한 인터랙션을 구현하는 방법을 다룹니다.

2.1 Remotion 프로젝트의 해부학 (Project Anatomy)

npx create-video@latest로 생성된 프로젝트의 핵심 파일들을 분석합니다.

• package.json: Remotion 관련 의존성(@remotion/cli, @remotion/player 등)이 포함되어 있습니다.

• remotion.config.ts: Webpack 설정을 오버라이딩하거나, 렌더링 관련 전역 설정을 하는 곳입니다. (Alias 설정 시 이곳을 수정)

• src/index.ts: 엔트리 포인트입니다. registerRoot 함수를 통해 React 트리를 Remotion 엔진에 등록합니다.

• src/Root.tsx: 비디오의 '목차(Manifest)'입니다. 모든 Composition을 여기서 정의합니다.

2.2 핵심 컴포넌트 심층 분석 (Core Deep Dive)

1) <Composition>: 비디오의 규격 정의

비디오 렌더링의 단위입니다. 유튜브용, 인스타용, 틱톡용을 각각 다른 Composition으로 정의하여 하나의 코드베이스에서 관리할 수 있습니다.

<Composition

id="MyVideo-Vertical"

component={MyVideo}

durationInFrames={300} // 10초

fps={30}

width={1080}

height={1920}

// 스키마 유효성 검사 (Zod 사용 권장)

schema={z.object({

```javascript
title: z.string(),

bgColor: z.string()

})}

defaultProps={{

title: "기본 제목",

bgColor: "#fff"

}}

/>

### 2) `useCurrentFrame()`: 시간의 상태화

Remotion의 알파이자 오메가입니다. 이 Hook은 렌더링 중인 현재 프레임 번호를 반환합니다.

```tsx

const frame = useCurrentFrame(); // 0, 1, 2, 3 ...

3) useVideoConfig(): 환경 변수 접근

FPS, 너비, 높이, 전체 길이 등 Composition에서 설정한 값에 접근합니다.

const { fps, width, height } = useVideoConfig();

2.3 애니메이션의 수학적 원리 (Interpolation Logic)

CSS Animation을 쓰지 않는 이유는 렌더링의 결정론적(Deterministic) 특성 때문입니다. 언제 렌더링해도 똑같은 프레임이 나와야 하므로, 자바스크립트로 값을 계산합니다.

A. 선형 보간 (interpolate)

가장 기초적인 애니메이션 함수입니다.

const opacity = interpolate(

frame,

[0, 30], // Input: 0프레임 ~ 30프레임

[0, 1],  // Output: 값 0 ~ 1

{

```javascript
extrapolateRight: 'clamp', // 30프레임 이후에는 1로 고정 (안 하면 계속 증가함)

easing: Easing.bezier(0.25, 0.1, 0.25, 1) // 베지어 곡선 적용 가능

}

);

### B. 스프링 물리 엔진 (`spring`)

자연스러운 모션 그래픽을 위해 필수적입니다.

```tsx

const scale = spring({

frame,

fps,

from: 0,

to: 1,

config: {

```javascript
mass: 0.5,      // 무게 (가벼울수록 빠름)

stiffness: 120, // 탄성 (높을수록 팅팅거림)

damping: 15     // 마찰 (낮을수록 오래 흔들림)

}

});

## 2.4 데이터 바인딩과 외부 리소스 관리

### A. 로컬 이미지/비디오 사용 (`staticFile`)

`public` 폴더에 있는 파일을 안전하게 가져오는 헬퍼 함수입니다. `import` 방식보다 렌더링 속도 면에서 유리할 수 있습니다.

```tsx

import { staticFile, Img } from 'remotion';

<Img src={staticFile('logo.png')} />

B. 비동기 데이터 Fetching (delayRender)

가장 중요한 부분입니다. API 호출 시간 동안 렌더링을 멈추는(Blocking) 기술입니다.

import { delayRender, continueRender } from 'remotion';

import { useEffect, useState } from 'react';

export const StockChart = () => {

const [data, setData] = useState(null);

// [1] 핸들 생성: "렌더링 하지 말고 기다려!"

const [handle] = useState(() => delayRender());

useEffect(() => {

```javascript
fetchData().then(response => {

  setData(response);

  // [2] 핸들 해제: "이제 데이터 왔으니 그려도 돼!"

  continueRender(handle);

}).catch(err => {

  console.error(err);

  continueRender(handle); // 에러 나도 멈추지 않게 처리

});

}, [handle]);

if (!data) return null; // 데이터 오기 전엔 아무것도 안 그림

return <div>{data.price}</div>;

};

## 2.5 장면 전환 효과 (Transitions) - v4.0 신규 기능

### 개요

`<TransitionSeries>`는 장면과 장면 사이에 부드러운 전환 효과를 넣는 컴포넌트입니다. 기존에는 수동으로 opacity나 translateX를 계산해야 했지만, 이제는 30가지 이상의 내장 효과를 바로 사용할 수 있습니다.

### 기본 사용법

```tsx

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

import { fade, slide, wipe } from '@remotion/transitions/fade';

export const MyVideo = () => {

return (

```javascript
<TransitionSeries>

  {/* 첫 번째 장면 */}

  <TransitionSeries.Sequence durationInFrames={60}>

    <Scene1 />

  </TransitionSeries.Sequence>

  

  {/* 페이드 전환 효과 (30프레임) */}

  <TransitionSeries.Transition

    presentation={fade()}

    timing={linearTiming({ durationInFrames: 30 })}

  />

  

  {/* 두 번째 장면 */}

  <TransitionSeries.Sequence durationInFrames={60}>

    <Scene2 />

  </TransitionSeries.Sequence>

  

  {/* 슬라이드 전환 효과 */}

  <TransitionSeries.Transition

    presentation={slide({ direction: 'from-right' })}

    timing={springTiming({ config: { damping: 200 } })}

  />

  

  {/* 세 번째 장면 */}

  <TransitionSeries.Sequence durationInFrames={60}>

    <Scene3 />

  </TransitionSeries.Sequence>

</TransitionSeries>

);

};

### 주요 내장 효과

| 효과 이름 | 설명 | 옵션 |
|----------|------|------|
| `fade()` | 페이드 인/아웃 | - |
| `slide()` | 슬라이드 (좌/우/상/하) | `direction: 'from-left' | 'from-right' | 'from-top' | 'from-bottom'` |
| `wipe()` | 와이프 (닦아내기) | `direction` 동일 |
| `flip()` | 3D 회전 | `direction: 'horizontal' | 'vertical'` |
| `clockWipe()` | 시계 방향 와이프 | - |
| `none()` | 전환 없이 즉시 전환 | - |

### 커스텀 전환 효과 만들기

```tsx

import { TransitionPresentation } from '@remotion/transitions';

const customZoom: TransitionPresentation<{}> = ({ progress }) => {

return {

```javascript
enterStyle: {

  transform: `scale(${interpolate(progress, [0, 1], [0, 1])})`,

  opacity: progress

},

exitStyle: {

  transform: `scale(${interpolate(progress, [0, 1], [1, 1.2])})`,

  opacity: 1 - progress

}

};

};

## 2.6 자막 자동 생성 (Captions)

요즘 쇼츠, 릴스에서 필수인 자막을 자동으로 생성하는 방법입니다.

### 방법 1: Whisper.cpp (로컬, 무료)

컴퓨터에서 직접 음성 인식을 돌립니다. 인터넷 연결 없이도 작동하며 무료입니다.

```bash

# 1. Whisper 설치

npx @remotion/install-whisper-cpp

# 2. 자막 생성

npx remotion captions <비디오파일.mp4> --model=medium

방법 2: OpenAI Whisper API (클라우드, 유료)

더 정확하지만 API 비용이 발생합니다.

# 환경변수 설정

export OPENAI_API_KEY=sk-...

# 자막 생성

npx remotion captions <비디오파일.mp4> --service=openai

자막 렌더링하기

생성된 .json 파일을 React 컴포넌트에서 불러와 화면에 표시합니다.

import { loadSubtitles } from '@remotion/subtitles';

import { useCurrentFrame, useVideoConfig } from 'remotion';

export const CaptionedVideo = () => {

const frame = useCurrentFrame();

const { fps } = useVideoConfig();

const subtitles = loadSubtitles('/public/captions.json');

const currentMs = (frame / fps) * 1000;

const currentCaption = subtitles.find(

```javascript
s => currentMs >= s.startMs && currentMs <= s.endMs

);

return (

<div>

  <Video src={staticFile('video.mp4')} />

  {currentCaption && (

    <div style={{

      position: 'absolute',

      bottom: 100,

      fontSize: 40,

      fontWeight: 'bold',

      color: 'white',

      textShadow: '2px 2px 4px black'

    }}>

      {currentCaption.text}

    </div>

  )}

</div>

);

};

### TikTok 스타일 자막 (단어별 하이라이트)

`@remotion/captions` 패키지는 단어별로 타이밍을 제공합니다.

```tsx

import { createTikTokStyleCaptions } from '@remotion/captions';

const TikTokCaptions = createTikTokStyleCaptions({

subtitles,

currentFrame: frame,

fps

});

return <TikTokCaptions />;

2.7 Media Parser: 비디오 메타데이터 추출

업로드된 비디오의 길이, 해상도, FPS를 자동으로 읽어 Composition에 반영할 수 있습니다.

기본 사용법

import { parseMedia } from '@remotion/media-parser';

import { webFileReader } from '@remotion/media-parser/web-file';

const file = document.querySelector('input[type="file"]').files[0];

const metadata = await parseMedia({

src: file,

reader: webFileReader,

fields: {

```javascript
duration: true,

dimensions: true,

fps: true,

tracks: true

}

});

console.log(metadata);

// {

// durationInSeconds: 120.5,

// width: 1920,

// height: 1080,

// fps: 30,

// audioTracks: [...],

// videoTracks: [...]

// }

### 동적 Composition 생성 예시

사용자가 업로드한 영상에 맞춰 자동으로 Composition을 설정합니다.

```tsx

const UserUploadedVideo = ({ videoFile }) => {

const [metadata, setMetadata] = useState(null);

useEffect(() => {

```javascript
parseMedia({ src: videoFile, fields: { duration: true, fps: true } })

  .then(setMetadata);

}, [videoFile]);

if (!metadata) return <div>분석 중...</div>;

return (

<Composition

  id="UserVideo"

  component={MyComponent}

  durationInFrames={Math.round(metadata.durationInSeconds * metadata.fps)}

  fps={metadata.fps}

  width={1920}

  height={1080}

/>

);

};

### 썸네일 추출

```tsx

const thumbnail = await extractThumbnail({

src: videoFile,

time: 5.0, // 5초 지점

reader: webFileReader

});

// thumbnail는 Blob 객체

const url = URL.createObjectURL(thumbnail);

2.8 성능 최적화 (Performance Optimization)

A. <OffthreadVideo> 사용

일반 <Video> 태그는 메인 스레드에서 디코딩되어 렌더링이 느려질 수 있습니다. <OffthreadVideo>는 별도 스레드에서 디코딩하여 렌더링 속도를 2~3배 향상시킵니다.

import { OffthreadVideo } from 'remotion';

// ❌ 느림

<Video src={staticFile('clip.mp4')} />

// ✅ 빠름

<OffthreadVideo src={staticFile('clip.mp4')} />

주의사항:

• OffthreadVideo는 렌더링 시에만 최적화됩니다. Studio(미리보기)에서는 일반 Video와 동일합니다.

• onError, onLoad 같은 이벤트 핸들러는 지원하지 않습니다.

B. React.memo()로 불필요한 리렌더링 방지

프레임마다 모든 컴포넌트가 재렌더링되므로, 변하지 않는 부분은 메모이제이션해야 합니다.

const HeavyComponent = React.memo(({ data }) => {

// 복잡한 계산

return <div>{data}</div>;

});

C. useMemo()로 계산 결과 캐싱

같은 계산을 매 프레임마다 반복하지 않도록 합니다.

const expensiveValue = useMemo(() => {

return complexCalculation(props.data);

}, [props.data]);

D. Image Preloading

이미지를 미리 로드하여 렌더링 시 깜빡임을 방지합니다.

import { Img, prefetch } from 'remotion';

// 컴포넌트 외부에서 미리 로드

const imageSrc = staticFile('hero.jpg');

prefetch(imageSrc);

export const Scene = () => {

return <Img src={imageSrc} />;

};

E. concurrency 설정으로 렌더링 속도 조절

렌더링 시 동시에 처리할 프레임 개수를 조정할 수 있습니다. CPU 코어 수에 맞춰 설정하세요.

# 기본값 (CPU 코어 수의 절반)

npx remotion render src/index.ts MyVideo out.mp4

# 8개 프레임 동시 렌더링

npx remotion render src/index.ts MyVideo out.mp4 --concurrency=8

주의: 너무 높게 설정하면 메모리 부족으로 오히려 느려질 수 있습니다.

2.9 렌더링 전략 비교 (Rendering Strategies)

개발한 결과물을 어떻게 MP4로 뽑아낼 것인가에 대한 전략입니다.

비용 비교 (1분 영상 기준)

렌더링 시간 비교 (1080p 60초 영상)

GPU 렌더링 지원 여부

🎨 Part 3. GUI 기반 작업 도구 (Official Products)

코딩을 최소화하고 비주얼 에디터로 작업하고 싶은 분들을 위한 공식 제품들입니다.

3.1 Remotion Timeline (드래그 앤 드롭 타임라인)

개요

프리미어 프로처럼 타임라인에서 클립을 드래그하여 편집할 수 있는 React 컴포넌트입니다.

가격: $299 (1회 구매, 평생 사용)

라이선스: MIT (소스 코드 제공)

주요 기능

• 클립 추가/삭제/이동/길이 조절

• 레이어 관리 (비디오, 오디오, 텍스트 분리)

• 실시간 미리보기

• Undo/Redo

• 키프레임 편집

기본 사용법

import { Timeline } from '@remotion/timeline';

export const EditorApp = () => {

const [timeline, setTimeline] = useState([

```javascript
{ type: 'video', src: '/clip1.mp4', start: 0, duration: 150 },

{ type: 'text', content: 'Hello', start: 30, duration: 90 }

]);

return (

<Timeline

  tracks={timeline}

  onChange={setTimeline}

  fps={30}

  durationInFrames={300}

/>

);

};

### 누구에게 추천?

- 고객에게 웹 기반 영상 편집기를 제공하려는 스타트업

- 내부 팀에서 쓸 간단한 편집 도구가 필요한 기업

- 프리미어 프로 UI를 React로 구현하고 싶은 개발자

## 3.2 Remotion Recorder (웹캠 녹화 + 자동 편집)

### 개요

브라우저에서 웹캠/화면 녹화를 하고, 녹화 완료 즉시 Remotion으로 편집 가능한 형태로 변환합니다.

가격: 무료 (오픈소스)

### 사용 시나리오

1. 온라인 강의 플랫폼: 강사가 웹캠으로 강의 녹화 → 자동으로 인트로/아웃트로 추가 → 바로 업로드

2. 화상 면접: 지원자 답변 녹화 → AI로 자막 생성 → HR 팀에 전달

3. 제품 데모: 화면 녹화 + 설명 음성 → 자동으로 자막 + 로고 삽입

### 설치 및 실행

```bash

npx create-video@latest --template=recorder

cd my-recorder

npm run dev

커스터마이징 포인트

• src/Recording.tsx: 녹화 버튼 UI 수정

• src/Composition.tsx: 녹화된 영상을 어떻게 편집할지 정의 (인트로, 자막 등)

3.3 Editor Starter (SaaS형 영상 편집기 보일러플레이트)

개요

Canva, Veed.io 같은 웹 영상 편집 서비스를 만들기 위한 Next.js 기반 풀스택 템플릿입니다.

가격: $499 (1회 구매)

포함 내용:

• 사용자 인증 (NextAuth.js)

• 결제 연동 (Stripe)

• 클라우드 렌더링 (Lambda 통합)

• 템플릿 마켓플레이스

• 관리자 대시보드

기술 스택

• Frontend: Next.js 14 + Tailwind CSS

• Backend: Next.js API Routes

• Database: PostgreSQL (Prisma ORM)

• Storage: AWS S3

• Rendering: Remotion Lambda

시작하기

git clone https://github.com/remotion-dev/editor-starter

cd editor-starter

npm install

npm run dev

수정 포인트

• app/editor/page.tsx: 편집기 UI

• app/api/render/route.ts: 렌더링 API 로직

• prisma/schema.prisma: DB 스키마 (프로젝트, 사용자, 결제 등)

💡 Part 4. 비즈니스 활용 및 아이디어 (Business Use Cases)

단순한 취미를 넘어, Remotion으로 돈을 벌거나 업무를 자동화할 수 있는 구체적인 아이디어입니다.

4.1 E-Commerce 자동화: "상품 영상 1초 만에 만들기"

문제

쇼핑몰에 신상품이 100개 들어오면 상세페이지는 만들지만 영상은 못 만듦. 외주 맡기면 1개당 5만 원 × 100개 = 500만 원.

해결책

상품 DB(이미지, 가격, 이름)를 Remotion에 연동. 버튼 하나 누르면 상품 홍보 영상 100개가 자동 생성되어 인스타그램/유튜브 쇼츠로 업로드.

기술 스택

// 1. 상품 데이터 가져오기 (Shopify API 예시)

const products = await fetch('https://myshop.myshopify.com/products.json');

// 2. 각 상품마다 Composition 생성

products.forEach(product => {

renderMedia({

```javascript
composition: 'ProductAd',

inputProps: {

  productName: product.title,

  price: product.price,

  image: product.image.src

},

outputLocation: `out/${product.id}.mp4`

});

});

### ROI 계산

- 개발 비용: 200만 원 (초기 구축)

- 월간 상품 수: 50개

- 외주 대비 절감액: 50개 × 5만 원 = 250만 원/월

- 회수 기간: 1개월

## 4.2 Personalized CRM: "고객 맞춤형 연말 결산"

### 문제

스포티파이, 배달의민족처럼 "당신의 1년 기록"을 영상으로 보여주고 싶음. 하지만 고객 10만 명에게 개별 영상을 만들 수 없음.

### 해결책

고객 ID를 Props로 받아, 해당 고객의 데이터(총 구매액, 자주 간 곳)를 시각화하는 템플릿 제작. 서버에서 10만 명의 영상을 Lambda로 개별 렌더링하여 이메일/푸시로 발송.

### 구현 예시

```tsx

// Composition 정의

<Composition

id="YearInReview"

component={YearReview}

schema={z.object({

```javascript
userId: z.string(),

totalSpent: z.number(),

topCategory: z.string()

})}

/>

// Lambda 렌더링

const results = await Promise.all(

userIds.map(userId =>

renderMediaOnLambda({

  composition: 'YearInReview',

  inputProps: { userId, ...userData[userId] },

  region: 'us-east-1'

})

)

);

### 효과

- 오픈율: 일반 이메일 15% → 영상 포함 이메일 45%

- 재구매율: 23% → 38%

- 바이럴 효과: 60%의 고객이 SNS에 공유

## 4.3 Real-time News: "기자 없는 뉴스룸"

### 문제

속보가 떴을 때 영상을 만드는 데 시간이 너무 걸림. 경쟁사는 이미 10분 전에 영상을 올렸음.

### 해결책

기자가 기사(텍스트)만 입력하면, AI가 요약하고 Remotion이 뉴스 포맷(자막바, 자료화면)에 맞춰 영상을 즉시 생성.

### 워크플로우

1. 기자가 CMS에 기사 작성

2. Webhook 트리거 → Lambda 실행

3. GPT-4로 60초 요약 생성

4. Google Image Search로 관련 이미지 수집

5. Remotion으로 뉴스 영상 렌더링 (30초 소요)

6. 자동으로 YouTube/Twitter 업로드

### 예상 소요 시간

- 기존: 기사 작성(20분) + 영상 편집(40분) = 1시간

- 자동화 후: 기사 작성(20분) + 자동 렌더링(1분) = 21분

## 4.4 Dynamic Sports Highlight: "실시간 스코어보드"

### 문제

축구 경기 중 골이 터지면 팬들은 즉시 하이라이트를 원함. 하지만 편집자가 수동으로 만들면 5~10분 소요.

### 해결책

축구 경기 데이터를 실시간 API로 받아, 골이 터질 때마다 점수판 애니메이션이 적용된 하이라이트 클립을 자동 생성하여 트위터에 공유.

### 기술 스택

```tsx

// 1. 실시간 경기 데이터 수신 (WebSocket)

socket.on('goal', async (data) => {

// 2. 골 장면 전후 30초 클립 추출

const clip = await extractClip(data.timestamp - 15, data.timestamp + 15);

// 3. Remotion으로 스코어보드 오버레이

await renderMedia({

```javascript
composition: 'GoalHighlight',

inputProps: {

  homeScore: data.homeScore,

  awayScore: data.awayScore,

  scorer: data.player.name,

  videoClip: clip

}

});

// 4. Twitter API로 자동 업로드

await twitterClient.upload('goal_highlight.mp4');

});

### 효과

- 업로드 속도: 골 직후 30초 이내 공유 (기존 5분)

- 참여율: 리트윗 3배 증가

- 광고 수익: 조회수 10배 증가로 월 광고 수익 500만 원 → 5,000만 원

## 4.5 AI 아바타 강의 자동 생성

### 문제

강사가 매번 카메라 앞에 서서 강의를 녹화하는 것이 부담스러움. 특히 같은 내용을 여러 언어로 제공해야 할 때.

### 해결책

텍스트 스크립트만 입력하면 AI 아바타(D-ID, HeyGen 등)가 말하고, Remotion이 슬라이드와 자막을 자동으로 동기화.

### 워크플로우

```tsx

// 1. 스크립트를 음성으로 변환 (ElevenLabs)

const audioUrl = await generateVoice(script);

// 2. AI 아바타 영상 생성 (HeyGen API)

const avatarVideo = await heygen.generateAvatar({

script,

avatar: 'professional-male-1'

});

// 3. Remotion으로 슬라이드 + 아바타 합성

await renderMedia({

composition: 'Lecture',

inputProps: {

```javascript
slides: ['intro.png', 'concept.png', 'example.png'],

avatarVideo,

captions: generateCaptions(audioUrl)

}

});

### 다국어 확장

같은 스크립트를 번역 API로 변환 후 각 언어별 아바타 생성 → 5개 언어 강의를 30분 만에 제작 가능.

---

# 🛒 Part 5. 템플릿 마켓플레이스 및 커뮤니티 리소스

처음부터 코드를 짜기 부담스럽다면, 검증된 템플릿을 구매하거나 오픈소스를 활용하세요.

## 5.1 공식 스토어 (Remotion Pro Store)

### 유료 제품

| 제품명 | 가격 | 설명 | 링크 |
|--------|------|------|------|
| Timeline | $299 | 드래그 앤 드롭 타임라인 컴포넌트 | [구매하기](https://remotion.pro/store) |
| Editor Starter | $499 | SaaS형 편집기 풀스택 보일러플레이트 | 동일 |
| Lambda Starter Kit | $199 | Lambda 렌더링 설정 자동화 도구 | 동일 |

### 라이선스 정책

- 1회 구매 시 평생 사용 가능

- 소스 코드 제공 (MIT 라이선스)

- 무제한 프로젝트 적용 가능

- 업데이트 1년 무료 (이후 $99/년)

## 5.2 무료 오픈소스 템플릿

### A. GitHub Unwrapped (기여도 요약 영상)

깃허브 활동을 스포티파이 랩드 스타일로 시각화합니다.

데모: [https://github-unwrapped.com](https://github-unwrapped.com)

소스: [GitHub](https://github.com/remotion-dev/template-audiogram)

### C. TikTok Video Generator

틱톡 스타일 자막 + 배경 영상을 자동으로 조합합니다.

기능:

- AI 음성 생성 (TTS)

- 자막 자동 생성

- 바이럴 영상 배경 자동 선택

- 15초~60초 길이 최적화

소스: [GitHub](https://github.com/remotion-dev/template-tiktok)

## 5.3 커뮤니티 제작 템플릿

### RVE (React Video Editor) - 무료 이펙트 라이브러리

30가지 이상의 무료 전환 효과와 애니메이션을 제공합니다.

설치:

```bash

npm install react-video-effects

사용 예시:

import { GlitchEffect, ChromaKeyEffect } from 'react-video-effects';

<GlitchEffect intensity={0.5}>

<Video src={staticFile('clip.mp4')} />

</GlitchEffect>

제공 이펙트:

• Glitch (글리치)

• Chroma Key (크로마키)

• VHS (빈티지 효과)

• Film Burn (필름 타는 효과)

• RGB Split (RGB 분리)

Lottie-React-Remotion (로티 애니메이션 통합)

After Effects로 만든 로티 파일을 Remotion에서 사용할 수 있습니다.

npm install @remotion/lottie

import { Lottie } from '@remotion/lottie';

import animationData from './animation.json';

<Lottie animationData={animationData} />

🔧 Part 6. 고급 기술 및 트러블슈팅

6.1 커스텀 폰트 사용하기

방법 1: Google Fonts (간단)

import { loadFont } from '@remotion/google-fonts/NotoSansKR';

const { fontFamily } = loadFont();

<div style={{ fontFamily }}>안녕하세요</div>

방법 2: 로컬 폰트 파일

/* public/fonts.css */

@font-face {

font-family: 'MyCustomFont';

src: url('/fonts/MyFont.woff2') format('woff2');

}

// src/Root.tsx에서 import

import '../public/fonts.css';

<div style={{ fontFamily: 'MyCustomFont' }}>텍스트</div>

6.2 외부 API 속도 최적화

문제

100개 데이터를 렌더링할 때 API를 100번 호출하면 너무 느립니다.

해결: API 응답 캐싱

const cache = new Map();

export const getCachedData = async (id: string) => {

if (cache.has(id)) {

```javascript
return cache.get(id);

}

const data = await fetch(/api/data/${id}).then(r => r.json());

cache.set(id, data);

return data;

};

### 추가 팁: Pre-fetching

렌더링 시작 전에 모든 데이터를 한 번에 가져옵니다.

```tsx

// render.ts

const allData = await Promise.all(

ids.map(id => fetch(`/api/data/${id}`))

);

await renderMedia({

composition: 'MyVideo',

inputProps: { data: allData }

});

6.3 메모리 부족 에러 해결

증상

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory

원인

고해상도 이미지를 너무 많이 사용하거나, 동시 렌더링 프레임 수가 너무 많습니다.

해결 방법

1. Node.js 메모리 증가

NODE_OPTIONS="--max-old-space-size=8192" npm run build

2. Concurrency 줄이기

npx remotion render --concurrency=2

3. 이미지 최적화

• 4K 이미지 대신 FHD 이미지 사용

• WebP 포맷으로 변환

• 사용하지 않는 프레임에서 이미지 언로드

// 특정 구간에서만 이미지 로드

{frame >= 30 && frame <= 90 && (

<Img src={staticFile('heavy-image.jpg')} />

)}

6.4 Lambda 렌더링 최적화

Cold Start 줄이기

Lambda 함수가 첫 실행 시 느린 문제를 해결합니다.

// 함수 warming (주기적으로 호출하여 활성 상태 유지)

import { warmUpFunction } from '@remotion/lambda';

// 매 5분마다 실행

setInterval(() => {

warmUpFunction({ functionName: 'remotion-render-xxx' });

}, 5 * 60 * 1000);

렌더링 병렬화

const results = await Promise.all([

renderMediaOnLambda({ composition: 'Video1', ... }),

renderMediaOnLambda({ composition: 'Video2', ... }),

renderMediaOnLambda({ composition: 'Video3', ... })

]);

// 3개 영상을 동시에 렌더링 (3배 빠름)

6.5 SEO 최적화 (Player 임베딩 시)

Remotion Player를 웹사이트에 임베딩할 때 검색 엔진 최적화 방법입니다.

import { Player } from '@remotion/player';

import Head from 'next/head';

export default function VideoPage() {

return (

```javascript
<>

  <Head>

    <title>내 영상 제목</title>

    <meta property="og:title" content="내 영상 제목" />

    <meta property="og:description" content="영상 설명" />

    <meta property="og:image" content="/thumbnail.jpg" />

    <meta property="og:video" content="/video.mp4" />

    <meta property="og:type" content="video.other" />

    <script type="application/ld+json">

      {JSON.stringify({

        "@context": "https://schema.org",

        "@type": "VideoObject",

        "name": "내 영상 제목",

        "description": "영상 설명",

        "thumbnailUrl": "https://mysite.com/thumbnail.jpg",

        "uploadDate": "2026-01-20",

        "duration": "PT1M30S"

      })}

    </script>

  </Head>

  

  <Player

    component={MyVideo}

    durationInFrames={2700}

    fps={30}

    compositionWidth={1920}

    compositionHeight={1080}

  />

</>

);

}

## 6.6 보안 고려사항

### A. Props Injection 방지

사용자 입력을 Props로 받을 때 반드시 검증하세요.

```tsx

// ❌ 위험: 사용자가 악의적인 스크립트 삽입 가능

<div dangerouslySetInnerHTML={{ __html: userInput }} />

// ✅ 안전: React가 자동으로 이스케이프 처리

<div>{userInput}</div>

// ✅ 추가 검증

import { z } from 'zod';

const schema = z.object({

title: z.string().max(100),

color: z.string().regex(/^#[0-9A-F]{6}$/i) // 색상 코드만 허용

});

const validatedProps = schema.parse(userProps);

B. 민감 정보 노출 방지

렌더링된 영상 파일이 S3 같은 공개 저장소에 업로드될 경우를 대비합니다.

// ❌ API 키가 화면에 노출됨

<div>API Key: {process.env.SECRET_KEY}</div>

// ✅ 서버에서만 사용하고 Props로 결과만 전달

// server.ts

const data = await fetch('api.com/data', {

headers: { 'Authorization': process.env.SECRET_KEY }

});

await renderMedia({

inputProps: { data: data.result } // 결과만 전달

});

📚 Part 7. 학습 리소스 및 커뮤니티

7.1 공식 문서 및 튜토리얼

7.2 커뮤니티 채널

Discord (가장 활발)

• 링크: remotion.dev/discord

• 멤버: 5,000명 이상

• 응답 속도: 평균 30분 이내

• 채널 구성:

• #help: 기술 질문

• #showcase: 완성작 공유

• #jobs: 구인/구직

GitHub Discussions

• 링크: github.com/remotion-dev/remotion/discussions

• 용도: 버그 리포트, 기능 요청, 심화 토론

Reddit

• 링크: reddit.com/r/remotion

• 용도: 비즈니스 아이디어, 수익화 사례 공유

7.3 추천 학습 경로

입문자 (1주차)

1. Part 1 전체 읽기 + Remotion Skills로 첫 영상 만들기

2. 공식 문서 "The Fundamentals" 읽기

3. Hello World 템플릿으로 간단한 자막 영상 만들기

초급자 (2~4주차)

1. Part 2의 2.1~2.4 학습 (기본 컴포넌트, 애니메이션)

2. interpolate()와 spring() 마스터하기

3. 간단한 데이터 시각화 영상 만들기 (차트, 인포그래픽)

중급자 (1~3개월)

1. Part 2의 2.5~2.8 학습 (Transitions, Captions, 최적화)

2. API 연동하여 동적 영상 생성

3. SSR 또는 Lambda 렌더링 구축

고급자 (3개월 이상)

1. Part 3, 4 학습 (GUI 도구, 비즈니스 활용)

2. 실제 서비스 런칭 (SaaS 영상 편집기, 자동화 시스템 등)

3. 커뮤니티에 기여 (오픈소스 템플릿 공유, 튜토리얼 작성)

7.4 자주 묻는 질문 (FAQ)

Q1. Remotion은 무료인가요?

A: 개인 프로젝트와 회사 내부 사용은 무료입니다. 단, 고객에게 영상 생성 서비스를 "판매"하는 경우 라이선스 구매가 필요합니다. (라이선스 상세)

Q2. 한글 폰트가 깨져요

A: Google Fonts의 Noto Sans KR을 사용하거나, 한글을 지원하는 폰트 파일을 public 폴더에 넣고 @font-face로 불러오세요. (Part 6.1 참고)

Q3. 렌더링이 너무 느려요

A: 다음을 시도해 보세요.

• <OffthreadVideo> 사용

• --concurrency 값 조정

• Lambda 렌더링으로 전환

• 이미지 해상도 낮추기

Q4. 상업적으로 사용할 수 있나요?

A: 네, 가능합니다. 단, 고객에게 영상 생성 "서비스"를 제공하는 경우 Company 라이선스($299/월)가 필요합니다. 내부 마케팅 영상 제작은 무료입니다.

Q5. 프리미어 프로 대신 쓸 수 있나요?

A: 용도에 따라 다릅니다.

• ✅ 템플릿 기반 대량 생성: Remotion 우위

• ✅ 데이터 기반 영상: Remotion 우위

• ❌ 자유로운 수동 편집: 프리미어 프로 우위

• ❌ 복잡한 색보정: 프리미어 프로 우위

🎯 Part 8. 미래 로드맵 및 트렌드

8.1 Remotion v5.0 예상 기능 (2026년 예정)

공식 GitHub Issues와 Discord에서 논의되고 있는 기능들입니다.

A. WebGPU 렌더링 지원

현재는 CPU 렌더링만 지원하지만, WebGPU가 추가되면 렌더링 속도가 5~10배 빨라질 것으로 예상됩니다.

B. 실시간 협업 편집

여러 명이 동시에 하나의 Composition을 편집할 수 있는 기능. (Figma처럼)

C. AI 통합

• AI로 스크립트 생성 (OpenAI GPT 연동)

• AI로 배경 음악 자동 추천

• AI로 장면 전환 타이밍 최적화

🔗 마무리 및 참고 자료

Remotion은 개발자에게는 "비디오를 제어할 수 있는 신의 권능"을, 기획자에게는 "무한한 생산성"을 선물합니다. 지금 바로 시작해 보세요.

[공식 리소스]

• 공식 문서: https://www.remotion.dev/docs/ (가장 정확한 정보)

• GitHub: https://github.com/remotion-dev/remotion (소스 코드 및 이슈 확인)

• Discord: https://remotion.dev/discord (질문 답변이 매우 활발함)

• YouTube: https://youtube.com/@remotion_dev (공식 튜토리얼)

• Twitter: @remotion (최신 소식)