# Remotion 딥다이브 리서치 보고서
**작성일:** 2026-03-10
**작성팀:** dev1 (헤르메스 팀장, 불칸/이리스/아테나/아르고스)
**관련 태스크:** task-434.1
**선행 리서치:** task-342.1 (dev2팀 remotion-video-automation.md)
---
## 1. Remotion 핵심 개념 상세
### 1.1 프레임 기반 렌더링 원리
Remotion의 핵심 철학: **"A video is a function of images over time."**
```
React 컴포넌트 → Chromium 헤드리스 브라우저 → 프레임별 스크린샷 → FFmpeg 인코딩 → MP4
```
상세 흐름:
1. `@remotion/bundler`의 `bundle()`이 Webpack으로 React 프로젝트 번들링
2. Chromium에게 "현재 프레임은 N번"이라고 알림
3. React가 해당 프레임 상태로 렌더링 → PNG 스크린샷
4. 프레임은 독립적이므로 여러 브라우저 탭에서 병렬 렌더링 가능
5. FFmpeg가 이미지 시퀀스를 H.264 등으로 인코딩 + 오디오 합성
6. 최종 영상 파일 출력
**핵심 특성:** `useCurrentFrame()`은 순수 함수처럼 동작 → 같은 프레임 번호에는 항상 같은 결과. CSS transitions, setTimeout 등 비결정적 코드 사용 금지.
### 1.2 핵심 API
**Composition vs Still vs Sequence vs Series:**
```tsx
import { Composition, Still, Sequence, Series } from 'remotion';
// Composition: 동영상 등록 단위
// Still: 정지 이미지용 (fps, durationInFrames 불필요)
// Sequence: 절대 프레임 기반 타임시프트
{/* 0~2초 */}
{/* 3~5초 */}
// Series: 순차적 시퀀스 (from 자동 계산)
```
**핵심 훅:**
```tsx
import { useCurrentFrame, useVideoConfig, interpolate, spring } from 'remotion';
const MyComponent = () => {
const frame = useCurrentFrame(); // 현재 프레임 번호 (0-indexed)
const { fps, width, height } = useVideoConfig();
// 값 보간: 프레임 0~30에서 opacity 0→1
const opacity = interpolate(frame, [0, 30], [0, 1], {
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp',
});
// 물리 기반 spring 애니메이션
const scale = spring({ frame, fps, config: { damping: 80, stiffness: 200 } });
return
...
;
};
```
**@remotion/renderer 주요 함수:**
```typescript
import { bundle } from '@remotion/bundler';
import { renderMedia, renderStill, selectComposition, openBrowser } from '@remotion/renderer';
// bundle(entryPoint) — Webpack 번들링
// selectComposition(options) — Composition 선택
// renderMedia(options) — 영상 렌더링 (프레임 + FFmpeg 인코딩)
// renderStill(options) — 정지 이미지 렌더링
// renderFrames(options) — 개별 프레임만 PNG/JPEG로 렌더링
// openBrowser(type, options) — 브라우저 인스턴스 열기 (재사용 가능)
```
### 1.3 지원 포맷
**비디오 코덱 (5종):**
- **h264** (기본): MP4, CRF 1-51(기본18), 빠른 인코딩, 최고 호환성
- **h265 (HEVC)**: MP4, CRF 0-51(기본23), 작은 파일
- **vp8**: WebM, CRF 4-63
- **vp9**: WebM, CRF 0-63(기본28), 매우 작은 파일
- **prores**: MOV, 전문 편집용
**정지 이미지:** PNG, JPEG, WebP, PDF
**오디오:** MP3, WAV, AAC
---
## 2. ThreadAuto 적용 가능성
### 2.1 카드뉴스 (정적 이미지 1080x1350)
**Remotion으로 대체 시 장점:**
- CSS 그라데이션, box-shadow, backdrop-filter 등 고급 효과 1줄로 구현 (현재 Pillow 수십줄)
- Google Fonts + 시스템 폰트 자유 사용, 자간/행간/커닝 완벽 지원
- Flexbox/Grid 레이아웃 → 좌표 하드코딩 불필요
- @remotion/player로 실시간 프리뷰 → 디자인 수정 속도 10배 향상
- SVG 아이콘/차트를 벡터 그대로 사용 가능
- Tailwind CSS로 빠른 스타일링
**단점:**
- 렌더링 속도: Pillow 0.2~0.5초/장 → Remotion 2~10초/장 (Chromium 오버헤드)
- Chromium 프로세스 메모리 300~500MB 상주
- Node.js 의존성 추가 (Python 단일 스택 유지 불가)
- cardnews.py 82KB의 1:1 전환 작업량 상당 (20~25 개발일 추정)
**renderStill()로 카드뉴스 생성 코드 예제:**
```tsx
// src/compositions/CardNews.tsx
import { AbsoluteFill, Img, staticFile } from 'remotion';
interface CardNewsProps {
slides: Array<{
type: 'cover' | 'card_list' | 'detail' | 'cta' | 'body';
title: string;
items?: Array<{ title: string; description: string }>;
hook?: string;
}>;
theme: {
primary: string;
accent: string;
bg_gradient: [string, string];
text_primary: string;
card_bg: string;
};
slideIndex: number; // 몇 번째 슬라이드를 렌더링할지
}
export const CardNews: React.FC = ({ slides, theme, slideIndex }) => {
const slide = slides[slideIndex];
return (
{/* 상단 브랜드 바 */}
{/* 콘텐츠 영역 */}