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} // 60초, 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개의 장면으로 구성된 60초짜리 제품 소개 비디오를 만들어 주세요.
밝은 톤과 16:9 출력으로 해주세요. 끝에 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
- [ ] screenshots (3)
- [ ] bgm.mp3
- [ ] narration.mp3

### 렌더 체크리스트
- [ ] 미리보기 QA 통과
- [ ] 오디오 싱크 확인
- [ ] 안전 영역 확인
- [ ] 최종 렌더 완료

다중 에이전트 워크플로우

검증 및 회고

1차 (오케스트레이터): 사양 완전성, 장면 범위
2차 (분석가): 내러티브 일관성, 페이싱 검토
3차 (실행자): 렌더 준비 완료 체크리스트 검증

에이전트 역할

에이전트	역할
Claude	장면 계획, 대본 작성
Gemini	에셋 분석, 최적화 제안
Codex	Remotion 코드 생성, 렌더 실행

메타데이터

버전

현재 버전: 1.0.0
마지막 업데이트: 2026-01-21
호환 플랫폼: Claude, ChatGPT, Gemini, Codex

JEO-tech-ai/oh-my-unity3d

oh-my-unity3d란 무엇인가요?

즐겨 사용하는 AI에게 물어보기

문서