[TIP]Remotion 완벽 가이드 - React로 비디오 만들기

Remotion은 React 컴포넌트로 MP4 비디오를 프로그래밍 방식으로 생성하는 프레임워크입니다. 코드로 애니메이션을 만들고, Claude Code와 연동하면 AI가 영상 제작을 자동화해줍니다.

"Make videos programmatically"

React의 선언적 문법으로 타임라인 기반 애니메이션을 코드로 작성합니다.

📋 개요

Remotion은 개발자를 위한 비디오 제작 도구입니다:

✅ React 컴포넌트로 비디오 생성
✅ TypeScript 완벽 지원
✅ 프로그래밍 방식 애니메이션
✅ Claude Code와 AI 연동
✅ MP4, WebM 등 다양한 포맷 export

🚀 설치 방법

1단계: 프로젝트 생성

# 프로젝트 폴더 생성
mkdir remotion-projects
cd remotion-projects

# Remotion 프로젝트 초기화
npx create-video@latest

2단계: 템플릿 선택

설치 중 다음 옵션을 선택합니다:

옵션	선택	설명
Template	Blank	빈 캔버스로 시작
TailwindCSS	Yes	스타일링을 위한 Tailwind 추가
Agent Skills	Yes	Remotion best practices 스킬 설치

설치 완료 화면 예시

███████╗██╗ ██╗██╗██╗ ██╗ ███████╗
██╔════╝██║ ██╔╝██║██║ ██║ ██╔════╝
███████╗█████╔╝ ██║██║ ██║ ███████╗
╚════██║██╔═██╗ ██║██║ ██║ ╚════██║
███████║██║ ██╗██║███████╗███████╗███████║
╚══════╝╚═╝ ╚═╝╚═╝╚══════╝╚══════╝╚══════╝

┌ skills
│
◇ Source: https://github.com/remotion-dev/skills.git
│
◇ Repository cloned
│
◇ Found 1 skill
│
● Skill: remotion-best-practices
│
│ Best practices for Remotion - Video creation in React
│
◇ Detected 5 agents

🛠️ 프로젝트 구조

설치가 완료되면 다음과 같은 구조가 생성됩니다:

remotion-projects/
├── src/
│   ├── Root.tsx          # 루트 컴포넌트
│   ├── compositions/     # 비디오 컴포지션
│   └── styles/           # 스타일 파일
├── public/               # 정적 에셋
├── remotion.config.ts    # Remotion 설정
├── package.json
└── .agents/              # Agent skills (선택 시)
    └── skills/
        └── remotion-best-practices/

⚙️ Claude Code와 연동

1단계: Claude Code 실행

claude

2단계: 초기 프롬프트 (인지 단계)

다음 프롬프트를 순서대로 실행합니다:

Animations are created by simply prompts, so make sure to use a very 
detailed prompt and ask Claude to use the Remotion skill. do not do 
anything yet, just acknowledge this.

Ask Claude to create a separate subdirectory for each animation to keep 
things clean. So you will have one root folder that shouldn't have any 
animations and several sub-folders for each animation. That way, you 
keep having the context necessary for Claude not to repeat the same 
mistakes when making another animation. (again, do not do anything yet, 
just acknowledge this)

first off, go through this entire directory and organize it a bit more

3단계: 영상 생성 프롬프트 작성

prompts/ 폴더에 영상 설명을 Markdown 파일로 작성:

# prompts/product-intro.md

## 영상 개요
- 길이: 30초
- 해상도: 1920x1080 (Full HD)
- FPS: 30

## 장면 구성

### 장면 1: 인트로 (0-5초)
- 제품 로고 페이드 인
- 배경: 그라데이션 애니메이션
- 음악: 경쾌한 업비트

### 장면 2: 기능 소개 (5-20초)
- 3가지 핵심 기능을 텍스트 + 아이콘으로 표시
- 각 기능마다 5초씩 할당
- 전환 효과: 슬라이드

### 장면 3: CTA (20-30초)
- "지금 시작하기" 버튼 애니메이션
- 웹사이트 URL 표시
- 페이드 아웃

## 스타일 가이드
- 폰트: Inter, bold
- 주 색상: #3B82F6 (파랑)
- 보조 색상: #10B981 (초록)

4단계: 영상 빌드 실행

read @prompts/product-intro.md and actually build it using 
the Remotion skills you have

🎨 주요 API

useCurrentFrame

현재 프레임 번호를 가져와 애니메이션을 제어합니다:

import { useCurrentFrame } from 'remotion';

export const MyVideo = () => {
  const frame = useCurrentFrame(); // 현재 프레임 (0, 1, 2, ...)
  
  return (
    <div style={{
      transform: `translateX(${frame * 2}px)` // 매 프레임마다 2px 이동
    }}>
      Moving Text
    </div>
  );
};

interpolate

값의 범위를 매핑하여 부드러운 애니메이션을 만듭니다:

import { useCurrentFrame, interpolate } from 'remotion';

export const FadeIn = () => {
  const frame = useCurrentFrame();
  
  // 0-30프레임 동안 투명도 0에서 1로 변경
  const opacity = interpolate(frame, [0, 30], [0, 1]);
  
  return (
    <div style={{ opacity }}>
      Fade In Text
    </div>
  );
};

spring

물리 기반 스프링 애니메이션을 만듭니다:

import { useCurrentFrame, spring } from 'remotion';

export const Bounce = () => {
  const frame = useCurrentFrame();
  
  const scale = spring({
    frame,
    fps: 30,
    config: {
      stiffness: 100,
      damping: 10,
      mass: 1
    }
  });
  
  return (
    <div style={{ transform: `scale(${scale})` }}>
      Bouncing Text
    </div>
  );
};

useVideoConfig

비디오 설정(해상도, FPS, 길이)을 가져옵니다:

import { useVideoConfig } from 'remotion';

export const VideoInfo = () => {
  const { fps, durationInFrames, width, height } = useVideoConfig();
  
  return (
    <div>
      {width}x{height}px @ {fps}fps
      <br />
      Duration: {durationInFrames / fps} seconds
    </div>
  );
};

🎬 개발 서버 실행

개발 모드

npm run dev

브라우저에서 http://localhost:3000로 접속하면 미리보기 가능합니다.

Player 컴포넌트

개발 중인 비디오를 실시간으로 확인:

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

export const App = () => {
  return (
    <Player
      component={MyVideo}
      durationInFrames={300}
      fps={30}
      compositionWidth={1920}
      compositionHeight={1080}
      style={{ width: '100%' }}
      controls
      loop
    />
  );
};

📤 비디오 렌더링

MP4로보내기

# 기본 렌더링
npx remotion render src/index.tsx MyVideo

# 출력 파일 지정
npx remotion render src/index.tsx MyVideo output/video.mp4

# 특정 프레임만 렌더링
npx remotion render src/index.tsx MyVideo --frames=0-100

렌더링 옵션

옵션	설명	예시
`--codec`	비디오 코덱	`h264`, `h265`, `vp8`, `vp9`
`--crf`	품질 (낮을수록 고품질)	`1` ~ `51`
`--frames`	특정 프레임만	`0-100`, `50`
`--concurrency`	병렬 처리 수	`2`, `4`, `8`
`--image-format`	프레임 포맷	`jpeg`, `png`

💡 고급 활용법

TTS (Text-to-Speech) 추가

Remotion은 TTS 기능도 지원합니다. 직접 프롬프트를 사용하여 테스트하며 실력을 늘려보세요:

import { useAudioData, Audio } from 'remotion';

export const VideoWithVoice = () => {
  // TTS 오디오 데이터 로드
  const audioData = useAudioData('https://api.example.com/tts?text=hello');
  
  return (
    <div>
      <Audio src={audioData} />
      <div>Subtitle text here</div>
    </div>
  );
};

여러 애니메이션 관리

각 애니메이션을 별도 서브디렉토리로 분리:

animations/
├── product-intro/
│   ├── index.tsx
│   ├── scenes/
│   └── assets/
├── feature-demo/
│   ├── index.tsx
│   ├── scenes/
│   └── assets/
└── tutorial/
    ├── index.tsx
    ├── scenes/
    └── assets/

★ 인사이트: Remotion의 강점

코드로 비디오를 만드는 이유

버전 관리: Git으로 영상 히스토리 관리
재사용성: 컴포넌트로 템플릿화
자동화: 데이터 연동으로 대량 생성
협업: 개발자와 디자이너가 같은 도구 사용
AI 연동: Claude Code가 코드를 생성

실제 활용 사례

📺 제품 소개 영상 자동 생성
📊 데이터 시각화 영상
🎓 온라인 강의 콘텐츠
📱 앱 스토어 프리뷰 영상
🎯 마케팅 A/B 테스트용 여러 버전

📚 추가 리소스

리소스	링크	설명
공식 문서	https://www.remotion.dev/docs	API 레퍼런스
스킬 저장소	https://skills.sh/remotion-dev	Agent skills
GitHub	https://github.com/remotion-dev/remotion	소스 코드
Player API	https://www.remotion.dev/docs/player	Player 컴포넌트
Community	https://discord.gg/remotion	Discord 커뮤니티

❓ 자주 묻는 질문

Q: 영상 제작 경험이 없어도 사용할 수 있나요?

A: React 기본 지식만 있으면 됩니다. Claude Code가 복잡한 애니메이션 코드를 생성해줍니다.

Q: 상업적 용도로 사용 가능한가요?

A: 예, Remotion은 MIT 라이선스로 상업적 사용이 가능합니다. 단 기업용 라이선스도 별도로 제공됩니다.

Q: 4K/8K 영상도 만들 수 있나요?

A: 예, 원하는 해상도로 설정 가능합니다. 다만 렌더링 시간은 해상도에 비례하여 증가합니다.

Q: 실시간 스트리밍에 사용할 수 있나요?

A: @remotion/lambda를 사용해 AWS Lambda에서 서버리스 렌더링이 가능합니다.

Q: 기존 영상을 편집할 수 있나요?

A: @remotion/media-parser로 기존 영상을 불러와 합성하거나 편집할 수 있습니다.

⚠️ 면책 조항

본 가이드를 따르면서 발생하는 모든 결과에 대한 책임은 전적으로 사용자 본인에게 있습니다. 이 문서는 참고용으로 제공되며, 작성자는 어떠한 손해나 문제에 대해 책임지지 않습니다.

금지 사항:

본 내용을 악의적인 목적으로 사용하는 것을 엄격히 금지합니다.
타인의 권리를 침해하거나 불법적인 활동에 사용하는 것을 금지합니다.
상업적 목적의 무단 복제나 재배포를 금지합니다.

본 가이드의 내용은 학습 및 교육 목적으로만 사용해야 합니다.

"Make videos programmatically"

React의 선언적 문법으로 타임라인 기반 애니메이션을 코드로 작성합니다.

📋 개요

Remotion은 개발자를 위한 비디오 제작 도구입니다:

✅ React 컴포넌트로 비디오 생성
✅ TypeScript 완벽 지원
✅ 프로그래밍 방식 애니메이션
✅ Claude Code와 AI 연동
✅ MP4, WebM 등 다양한 포맷 export

🚀 설치 방법

1단계: 프로젝트 생성

# 프로젝트 폴더 생성
mkdir remotion-projects
cd remotion-projects

# Remotion 프로젝트 초기화
npx create-video@latest

2단계: 템플릿 선택

설치 중 다음 옵션을 선택합니다:

옵션	선택	설명
Template	Blank	빈 캔버스로 시작
TailwindCSS	Yes	스타일링을 위한 Tailwind 추가
Agent Skills	Yes	Remotion best practices 스킬 설치

설치 완료 화면 예시

███████╗██╗ ██╗██╗██╗ ██╗ ███████╗
██╔════╝██║ ██╔╝██║██║ ██║ ██╔════╝
███████╗█████╔╝ ██║██║ ██║ ███████╗
╚════██║██╔═██╗ ██║██║ ██║ ╚════██║
███████║██║ ██╗██║███████╗███████╗███████║
╚══════╝╚═╝ ╚═╝╚═╝╚══════╝╚══════╝╚══════╝

┌ skills
│
◇ Source: https://github.com/remotion-dev/skills.git
│
◇ Repository cloned
│
◇ Found 1 skill
│
● Skill: remotion-best-practices
│
│ Best practices for Remotion - Video creation in React
│
◇ Detected 5 agents

🛠️ 프로젝트 구조

설치가 완료되면 다음과 같은 구조가 생성됩니다:

remotion-projects/
├── src/
│   ├── Root.tsx          # 루트 컴포넌트
│   ├── compositions/     # 비디오 컴포지션
│   └── styles/           # 스타일 파일
├── public/               # 정적 에셋
├── remotion.config.ts    # Remotion 설정
├── package.json
└── .agents/              # Agent skills (선택 시)
    └── skills/
        └── remotion-best-practices/

⚙️ Claude Code와 연동

1단계: Claude Code 실행

claude

2단계: 초기 프롬프트 (인지 단계)

다음 프롬프트를 순서대로 실행합니다:

Animations are created by simply prompts, so make sure to use a very 
detailed prompt and ask Claude to use the Remotion skill. do not do 
anything yet, just acknowledge this.

Ask Claude to create a separate subdirectory for each animation to keep 
things clean. So you will have one root folder that shouldn't have any 
animations and several sub-folders for each animation. That way, you 
keep having the context necessary for Claude not to repeat the same 
mistakes when making another animation. (again, do not do anything yet, 
just acknowledge this)

first off, go through this entire directory and organize it a bit more

3단계: 영상 생성 프롬프트 작성

prompts/ 폴더에 영상 설명을 Markdown 파일로 작성:

# prompts/product-intro.md

## 영상 개요
- 길이: 30초
- 해상도: 1920x1080 (Full HD)
- FPS: 30

## 장면 구성

### 장면 1: 인트로 (0-5초)
- 제품 로고 페이드 인
- 배경: 그라데이션 애니메이션
- 음악: 경쾌한 업비트

### 장면 2: 기능 소개 (5-20초)
- 3가지 핵심 기능을 텍스트 + 아이콘으로 표시
- 각 기능마다 5초씩 할당
- 전환 효과: 슬라이드

### 장면 3: CTA (20-30초)
- "지금 시작하기" 버튼 애니메이션
- 웹사이트 URL 표시
- 페이드 아웃

## 스타일 가이드
- 폰트: Inter, bold
- 주 색상: #3B82F6 (파랑)
- 보조 색상: #10B981 (초록)

4단계: 영상 빌드 실행

read @prompts/product-intro.md and actually build it using 
the Remotion skills you have

🎨 주요 API

useCurrentFrame

현재 프레임 번호를 가져와 애니메이션을 제어합니다:

import { useCurrentFrame } from 'remotion';

export const MyVideo = () => {
  const frame = useCurrentFrame(); // 현재 프레임 (0, 1, 2, ...)
  
  return (
    <div style={{
      transform: `translateX(${frame * 2}px)` // 매 프레임마다 2px 이동
    }}>
      Moving Text
    </div>
  );
};

interpolate

값의 범위를 매핑하여 부드러운 애니메이션을 만듭니다:

import { useCurrentFrame, interpolate } from 'remotion';

export const FadeIn = () => {
  const frame = useCurrentFrame();
  
  // 0-30프레임 동안 투명도 0에서 1로 변경
  const opacity = interpolate(frame, [0, 30], [0, 1]);
  
  return (
    <div style={{ opacity }}>
      Fade In Text
    </div>
  );
};

spring

물리 기반 스프링 애니메이션을 만듭니다:

import { useCurrentFrame, spring } from 'remotion';

export const Bounce = () => {
  const frame = useCurrentFrame();
  
  const scale = spring({
    frame,
    fps: 30,
    config: {
      stiffness: 100,
      damping: 10,
      mass: 1
    }
  });
  
  return (
    <div style={{ transform: `scale(${scale})` }}>
      Bouncing Text
    </div>
  );
};

useVideoConfig

비디오 설정(해상도, FPS, 길이)을 가져옵니다:

import { useVideoConfig } from 'remotion';

export const VideoInfo = () => {
  const { fps, durationInFrames, width, height } = useVideoConfig();
  
  return (
    <div>
      {width}x{height}px @ {fps}fps
      <br />
      Duration: {durationInFrames / fps} seconds
    </div>
  );
};

🎬 개발 서버 실행

개발 모드

npm run dev

브라우저에서 http://localhost:3000로 접속하면 미리보기 가능합니다.

Player 컴포넌트

개발 중인 비디오를 실시간으로 확인:

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

export const App = () => {
  return (
    <Player
      component={MyVideo}
      durationInFrames={300}
      fps={30}
      compositionWidth={1920}
      compositionHeight={1080}
      style={{ width: '100%' }}
      controls
      loop
    />
  );
};

📤 비디오 렌더링

MP4로보내기

# 기본 렌더링
npx remotion render src/index.tsx MyVideo

# 출력 파일 지정
npx remotion render src/index.tsx MyVideo output/video.mp4

# 특정 프레임만 렌더링
npx remotion render src/index.tsx MyVideo --frames=0-100

렌더링 옵션

옵션	설명	예시
`--codec`	비디오 코덱	`h264`, `h265`, `vp8`, `vp9`
`--crf`	품질 (낮을수록 고품질)	`1` ~ `51`
`--frames`	특정 프레임만	`0-100`, `50`
`--concurrency`	병렬 처리 수	`2`, `4`, `8`
`--image-format`	프레임 포맷	`jpeg`, `png`

💡 고급 활용법

TTS (Text-to-Speech) 추가

Remotion은 TTS 기능도 지원합니다. 직접 프롬프트를 사용하여 테스트하며 실력을 늘려보세요:

import { useAudioData, Audio } from 'remotion';

export const VideoWithVoice = () => {
  // TTS 오디오 데이터 로드
  const audioData = useAudioData('https://api.example.com/tts?text=hello');
  
  return (
    <div>
      <Audio src={audioData} />
      <div>Subtitle text here</div>
    </div>
  );
};

여러 애니메이션 관리

각 애니메이션을 별도 서브디렉토리로 분리:

animations/
├── product-intro/
│   ├── index.tsx
│   ├── scenes/
│   └── assets/
├── feature-demo/
│   ├── index.tsx
│   ├── scenes/
│   └── assets/
└── tutorial/
    ├── index.tsx
    ├── scenes/
    └── assets/

★ 인사이트: Remotion의 강점

코드로 비디오를 만드는 이유

버전 관리: Git으로 영상 히스토리 관리
재사용성: 컴포넌트로 템플릿화
자동화: 데이터 연동으로 대량 생성
협업: 개발자와 디자이너가 같은 도구 사용
AI 연동: Claude Code가 코드를 생성

실제 활용 사례

📺 제품 소개 영상 자동 생성
📊 데이터 시각화 영상
🎓 온라인 강의 콘텐츠
📱 앱 스토어 프리뷰 영상
🎯 마케팅 A/B 테스트용 여러 버전

📚 추가 리소스

리소스	링크	설명
공식 문서	https://www.remotion.dev/docs	API 레퍼런스
스킬 저장소	https://skills.sh/remotion-dev	Agent skills
GitHub	https://github.com/remotion-dev/remotion	소스 코드
Player API	https://www.remotion.dev/docs/player	Player 컴포넌트
Community	https://discord.gg/remotion	Discord 커뮤니티

❓ 자주 묻는 질문

Q: 영상 제작 경험이 없어도 사용할 수 있나요?

A: React 기본 지식만 있으면 됩니다. Claude Code가 복잡한 애니메이션 코드를 생성해줍니다.

Q: 상업적 용도로 사용 가능한가요?

A: 예, Remotion은 MIT 라이선스로 상업적 사용이 가능합니다. 단 기업용 라이선스도 별도로 제공됩니다.

Q: 4K/8K 영상도 만들 수 있나요?

A: 예, 원하는 해상도로 설정 가능합니다. 다만 렌더링 시간은 해상도에 비례하여 증가합니다.

Q: 실시간 스트리밍에 사용할 수 있나요?

A: @remotion/lambda를 사용해 AWS Lambda에서 서버리스 렌더링이 가능합니다.

Q: 기존 영상을 편집할 수 있나요?

A: @remotion/media-parser로 기존 영상을 불러와 합성하거나 편집할 수 있습니다.

⚠️ 면책 조항

금지 사항:

본 내용을 악의적인 목적으로 사용하는 것을 엄격히 금지합니다.
타인의 권리를 침해하거나 불법적인 활동에 사용하는 것을 금지합니다.
상업적 목적의 무단 복제나 재배포를 금지합니다.

본 가이드의 내용은 학습 및 교육 목적으로만 사용해야 합니다.

📋 개요

🚀 설치 방법

1단계: 프로젝트 생성

2단계: 템플릿 선택

설치 완료 화면 예시

🛠️ 프로젝트 구조

⚙️ Claude Code와 연동

1단계: Claude Code 실행

2단계: 초기 프롬프트 (인지 단계)

3단계: 영상 생성 프롬프트 작성

4단계: 영상 빌드 실행

🎨 주요 API

useCurrentFrame

interpolate

spring

useVideoConfig

🎬 개발 서버 실행

개발 모드

Player 컴포넌트

📤 비디오 렌더링

MP4로보내기

렌더링 옵션

💡 고급 활용법

TTS (Text-to-Speech) 추가

여러 애니메이션 관리

★ 인사이트: Remotion의 강점

코드로 비디오를 만드는 이유

실제 활용 사례

📚 추가 리소스

❓ 자주 묻는 질문

Q: 영상 제작 경험이 없어도 사용할 수 있나요?

Q: 상업적 용도로 사용 가능한가요?

Q: 4K/8K 영상도 만들 수 있나요?

Q: 실시간 스트리밍에 사용할 수 있나요?

Q: 기존 영상을 편집할 수 있나요?

⚠️ 면책 조항

태그

📋 개요

🚀 설치 방법

1단계: 프로젝트 생성

2단계: 템플릿 선택

설치 완료 화면 예시

🛠️ 프로젝트 구조

⚙️ Claude Code와 연동

1단계: Claude Code 실행

2단계: 초기 프롬프트 (인지 단계)

3단계: 영상 생성 프롬프트 작성

4단계: 영상 빌드 실행

🎨 주요 API

useCurrentFrame

interpolate

spring

useVideoConfig

🎬 개발 서버 실행

개발 모드

Player 컴포넌트

📤 비디오 렌더링

MP4로보내기

렌더링 옵션

💡 고급 활용법

TTS (Text-to-Speech) 추가

여러 애니메이션 관리

★ 인사이트: Remotion의 강점

코드로 비디오를 만드는 이유

실제 활용 사례

📚 추가 리소스

❓ 자주 묻는 질문

Q: 영상 제작 경험이 없어도 사용할 수 있나요?

Q: 상업적 용도로 사용 가능한가요?

Q: 4K/8K 영상도 만들 수 있나요?

Q: 실시간 스트리밍에 사용할 수 있나요?

Q: 기존 영상을 편집할 수 있나요?

⚠️ 면책 조항

태그