Remotion 비디오 제작
Remotion을 사용한 프로그래머블 비디오 제작 스킬입니다. 텍스트 명령어로부터 자동화된 비디오를 생성하고, 일관된 브랜드 스타일의 비디오를 대규모로 제작할 수 있습니다.
이 스킬을 사용해야 하는 경우
- 자동화된 비디오 생성: 텍스트 명령어로 비디오 생성
- 브랜드 비디오 제작: 일관된 스타일의 대량 비디오 제작
- 프로그래머블 콘텐츠: 내레이션, 시각 자료, 애니메이션 결합
- 마케팅 콘텐츠: 제품 소개, 온보딩, 프로모션 비디오
지침
1단계: 비디오 사양 정의
video_spec:
audience: [대상 시청자]
goal: [비디오 목표]
duration: [총 길이 - 30s, 60s, 90s]
aspect_ratio: "16:9" | "1:1" | "9:16"
tone: "fast" | "calm" | "cinematic"
voice:
style: [내레이션 스타일]
language: [언어]
2단계: 장면 개요 작성
장면 구조 템플릿:
## 장면 계획
### 장면 1: 훅 (0:00 - 0:05)
- **시각**: 제품 로고 페이드인
- **오디오**: 경쾌한 인트로
- **텍스트": "워크플로우를 혁신하세요"
- **전환**: 페이드 → 장면 2
### 장면 2: 문제 (0:05 - 0:15)
- **시각**: 문제 상태 그림
- **오디오**: 내레이션 시작
- **텍스트**: 핵심 메시지 오버레이
- **전환**: 왼쪽으로 슬라이드
### 장면 3: 해결책 (0:15 - 0:30)
...
3단계: 에셋 준비
# 에셋 체크리스트
assets/
├── logos/
│ ├── logo-main.svg
│ └── logo-white.svg
├── screenshots/
│ ├── dashboard.png
│ └── feature-1.png
├── audio/
│ ├── bgm.mp3
│ └── narration.mp3
└── fonts/
└── brand-font.woff2
에셋 준비 규칙:
- 로고: SVG 또는 고해상도 PNG
- 스크린샷: 대상 화면 비율로 정규화
- 오디오: MP3 또는 WAV, 볼륨 정규화
- 폰트: 웹폰트 또는 로컬 폰트 파일
4단계: Remotion 컴포지션 구현
// src/Video.tsx
import { Composition } from 'remotion';
import { IntroScene } from './scenes/IntroScene';
import { ProblemScene } from './scenes/ProblemScene';
import { SolutionScene } from './scenes/SolutionScene';
import { CTAScene } from './scenes/CTAScene';
export const RemotionVideo: React.FC = () => {
return (
<>
<Composition
id="ProductIntro"
component={ProductIntro}
durationInFrames={1800} // 60s at 30fps
fps={30}
width={1920}
height={1080}
/>
</>
);
};
// 장면 컴포넌트 예시
const IntroScene: React.FC<{ frame: number }> = ({ frame }) => {
const opacity = interpolate(frame, [0, 30], [0, 1]);
return (
<AbsoluteFill style={{ opacity }}>
<Logo />
<Title>워크플로우를 혁신하세요</Title>
</AbsoluteFill>
);
};
5단계: 렌더링 및 QA
# 1. 미리보기 렌더링 (저화질)
npx remotion preview src/Video.tsx
# 2. QA 체크리스트
- [ ] 타이밍
- [ ] 오디오 싱크
- [ ] 텍스트 가독성
- [ ] 부드러운 전환
# 3. 최종 렌더링
npx remotion render src/Video.tsx ProductIntro out/video.mp4
예제
예제 1: 제품 소개 비디오
프롬프트:
6개 장면, 경쾌한 분위기, 16:9 출력으로 60초 제품 소개 비디오를 만들어 주세요.
마지막에 CTA를 포함해 주세요.
예상 출력:
## 장면 분해
1. 훅 (0:00-0:05): 로고 + 태그라인
2. 문제 (0:05-0:15): 페인 포인트 시각화
3. 해결책 (0:15-0:30): 제품 데모
4. 기능 (0:30-0:45): 주요 혜택 (3개 항목)
5. 사회적 증명 (0:45-0:55): 사용후기/통계
6. CTA (0:55-1:00): 행동 촉구 + 연락처
## Remotion 구조
- src/scenes/HookScene.tsx
- src/scenes/ProblemScene.tsx
- src/scenes/SolutionScene.tsx
- src/scenes/FeaturesScene.tsx
- src/scenes/SocialProofScene.tsx
- src/scenes/CTAScene.tsx
예제 2: 온보딩 워크스루
프롬프트:
스크린샷을 사용하여 45초 온보딩 워크스루를 생성하고, 모바일용 9:16 형식으로
콜아웃을 포함해 주세요.
예상 출력:
- 5단계 장면 계획
- 에셋 목록 (스크린샷, 콜아웃 화살표)
- 텍스트 오버레이 및 전환
- 모바일 안전 여백 적용
모범 사례
- 짧은 장면: 각 장면을 5-10초로 명확하게 유지
- 일관된 타이포그래피: 타이포그래피 스케일 정의
- 오디오 동기화: 내레이션 큐를 시각 자료와 정렬
- 템플릿 재사용: 재사용 가능한 컴포지션 저장
- 안전 영역: 모바일 화면 비율을 위한 여백 예약
일반적인 실수
- 텍스트 과다: 장면당 텍스트 양 제한
- 모바일 안전 영역 무시: 9:16 출력의 가장자리 확인
- QA 전 최종 렌더링: 먼저 미리보기에서 항상 확인
문제 해결
문제: 오디오와 시각 자료 싱크 불일치
원인: 프레임 타이밍 불일치 해결 방법: 프레임을 다시 계산하고 타임스탬프 정렬
문제: 렌더링이 느리거나 실패함
원인: 무거운 에셋 또는 효과 해결 방법: 에셋 압축 및 애니메이션 단순화
문제: 텍스트를 읽을 수 없음
원인: 글꼴 크기가 너무 작거나 대비 부족 해결 방법: 최소 24px 글꼴 및 고대비 색상 사용
출력 형식
## 비디오 제작 보고서
### 사양
- 길이: 60s
- 화면 비율: 16:9
- FPS: 30
### 장면 계획
| 장면 | 길이 | 시각 | 오디오 | 전환 |
|-------|----------|--------|-------|------------|
| 훅 | 0:00-0:05 | 로고 페이드 | BGM 시작 | 페이드 |
| ... | ... | ... | ... | ... |
### 에셋
- [ ] logo.svg
- [ ] 스크린샷 (3)
- [ ] bgm.mp3
- [ ] narration.mp3
### 렌더링 체크리스트
- [ ] 미리보기 QA 통과
- [ ] 오디오 싱크 확인
- [ ] 안전 영역 확인
- [ ] 최종 렌더링 완료
다중 에이전트 워크플로우
검증 및 회고
- 라운드 1 (오케스트레이터): 사양 완전성, 장면 범위 확인
- 라운드 2 (애널리스트): 내러티브 일관성, 페이싱 검토
- 라운드 3 (익스큐터): 렌더링 준비 체크리스트 검증
에이전트 역할
| 에이전트 | 역할 |
|---|---|
| Claude | 장면 계획, 대본 작성 |
| Gemini | 에셋 분석, 최적화 제안 |
| Codex | Remotion 코드 생성, 렌더링 실행 |
메타데이터
버전
- 현재 버전: 1.0.0
- 마지막 업데이트: 2026-01-21
- 호환 플랫폼: Claude, ChatGPT, Gemini, Codex
관련 스킬
태그
#video #remotion #animation #storytelling #automation #react