# ThreadAuto 영상 엔진 통합 + 시각 표현 강화

## 목표
현재 파편화된 영상 엔진(evan_dynamic.py/shortform_renderer.py/remotion/)을 **Remotion 단일 엔진으로 통합**하고, 아이콘/이미지 연계 + 다양한 시각 표현으로 **"콘텐츠가 살아 움직이는 숏폼 영상"** 수준까지 끌어올린다.

## 프로젝트 경로
- ThreadAuto: `/home/jay/projects/ThreadAuto/`
- 에이전트 미팅 기록: `/home/jay/workspace/memory/meetings/2026-03-17-video-engine-integration-design.md`
- 에반 6원칙 스펙: `/home/jay/workspace/memory/specs/threadauto-video-rules.md`
- 에반 스타일 지시서: `/home/jay/workspace/memory/tasks/dispatch-threads-video-evan-style.md`

## 현황 진단

### 현재 3개 엔진 파편화 상태
1. **`video/evan_dynamic.py`** (688줄) — MoviePy 기반, 에반 6원칙 구현 완료, **BUT 콘텐츠 하드코딩**
2. **`renderer/shortform_renderer.py`** — FFmpeg + Edge TTS, 카드뉴스 이미지 슬라이드쇼 수준 (불합격)
3. **`remotion/`** — React 기반, 5개 Scene/4개 차트/3개 애니메이션 구현, **BUT 파이프라인 미연결 + 시각 표현 빈약**

### Remotion 시각 표현 현황 (6.5/10)
- 아이콘: Unicode 문자(✓, ▲)만 사용. SVG 아이콘 라이브러리 미설치
- 애니메이션: fade-in, slide, spring 바운스 정도. 3D/파티클/모핑 없음
- 레이아웃: Scene 타입당 1가지 고정. 변형 없음
- 차트: BarChart/DonutChart/CountUp/Sparkle — 기본 수준

## 에반 6원칙 (필수 준수)
1. **검정 배경** — bg_color: #0C0C12 (순수 블랙 X, 약간의 깊이감)
2. **테마 색상** — 주제별 accent 1~2색으로 포인트
3. **레이아웃 변주** — 장면마다 다른 구성 (좌정렬/중앙/카드/분할 등)
4. **타이핑 효과** — 글자가 하나씩 나타남 (전 장면 적용 필수)
5. **시간차 등장** — 요소들이 순서대로 나타남 (stagger)
6. **다이나믹** — 정적 화면 금지, 항상 무언가 움직여야 함

## 구현 사항

### A. 파이프라인 통합 (Python 측)

#### 1. `pipeline_orchestrator.py` 신규 작성 (통합 진입점)
```
데이터 플로우 (7단계):
파이프라인 slides JSON
  → extract_narration_texts() — 장면별 TTS 텍스트 추출
  → edge_tts 생성 — WAV/MP3 파일들
  → measure_durations() — 장면별 오디오 길이 측정
  → compose_scenes_with_durations() — Remotion scenes JSON (TTS 길이 반영)
  → render_bridge.render_video() — 무음 MP4 (Remotion 렌더링)
  → mux_audio_video() — FFmpeg로 오디오 합치기 → 최종 MP4
```

#### 2. scene_composer.py 단일화
- `video/scene_composer.py`의 `compose_scenes()`를 정규 변환 함수로 사용
- `remotion/render_bridge.py` 내부의 `slides_to_scenes()`는 deprecated → compose_scenes으로 통합
- 매핑: cover→hook, card_list→checklist, detail→data, body→info, cta→cta

#### 3. TTS 연동
- Edge TTS로 장면별 나레이션 생성
- 각 장면 오디오 길이를 측정하여 Remotion scene duration에 반영
- TTS 텍스트는 slides JSON의 narration/description 필드에서 추출

#### 4. FFmpeg mux
- Remotion `<Audio>` 컴포넌트 미사용 (Python FFmpeg mux가 더 안정적)
- 무음 MP4 + 장면별 오디오 → 최종 MP4 합성

### B. Remotion TypeScript 수정

#### 1. Root.tsx — calculateMetadata 추가
- 현재 고정 duration → TTS 기반 동적 duration
- inputProps에서 scenes 배열의 duration 합산하여 총 길이 결정

#### 2. 전 장면 타이핑 효과 적용
- 현재 HookScene에만 타이핑 적용 → **모든 Scene의 텍스트에 타이핑 효과 적용**
- `animations/typing.ts` 활용

#### 3. SCENE_GAP ↔ transitionDuration 통일
- 현재 불일치 → 0.5초(15프레임)로 통일
- TransitionSeries의 transitionDuration과 evanTiming의 SCENE_GAP 동기화

#### 4. `<Audio>` 컴포넌트 제거
- ShortForm/index.tsx에서 audioSrc prop 및 관련 코드 제거
- 오디오는 Python FFmpeg에서 mux

### C. 시각 표현 강화 ★핵심★

#### 1. 아이콘 라이브러리 통합
- `lucide-react` 설치 (1,500+ SVG 아이콘)
- 보험/금융 관련 주요 아이콘: Shield, DollarSign, TrendingUp, PieChart, Users, FileText, Heart, AlertTriangle, CheckCircle, ArrowRight 등
- 아이콘에도 spring/fade/rotate 애니메이션 적용 → "살아 움직이는 아이콘"
- 사용 위치:
  - ChecklistScene: 체크마크 → CheckCircle 아이콘 (draw-on 애니메이션)
  - DataScene: 데이터 카테고리별 맥락 아이콘 (Shield=보험, DollarSign=금액 등)
  - InfoScene: 정보 유형별 아이콘 (Info, AlertTriangle, Lightbulb 등)
  - CtaScene: 행동 유도 아이콘 (ArrowRight, ExternalLink, Phone 등)

#### 2. 레이아웃 다양화 (Scene 변형)
- 각 Scene 타입에 **최소 2~3가지 레이아웃 변형** 구현
- HookScene: (A) 중앙 풀스크린 (B) 좌측 텍스트 + 우측 아이콘 (C) 상단 숫자 + 하단 텍스트
- ChecklistScene: (A) 세로 리스트 (B) 2열 그리드 (C) 카드 스택
- DataScene: (A) 큰 숫자 중앙 (B) 차트 + 설명 분할 (C) 비교 레이아웃 (Before/After)
- InfoScene: (A) 카드 나열 (B) 타임라인 (C) 좌우 분할 (아이콘+텍스트)
- CtaScene: (A) 중앙 집중 (B) 하단 배너형 (C) 카드+버튼형
- compose_scenes에서 랜덤 또는 순환으로 variant 지정

#### 3. 고급 애니메이션 추가
- **SVG Path Draw-on**: 아이콘 선이 그려지는 효과 (strokeDashoffset 애니메이션)
- **숫자 슬롯머신**: CountUp을 넘어 숫자가 슬롯처럼 회전하며 정착
- **텍스트 글로우**: 핵심 키워드에 accent 색상 glow 효과 (text-shadow 펄스)
- **배경 파티클**: 미세한 점/선이 느리게 떠다니는 ambient 효과
- **아이콘 바운스**: spring() 물리 기반 탄성 등장
- **프로그레스 바**: easeOutExpo 이징 (현재 linear → 개선)
- **카드 틸트**: 카드가 약간 기울어지며 등장 (rotateZ 3~5도 → 0도)

#### 4. 배경 효과
- 미세한 그라데이션 시프트 (배경색이 아주 천천히 변화)
- 노이즈 텍스처 오버레이 (CSS grain 효과, 영상미 향상)
- Spotlight/Vignette (중앙 밝고 가장자리 어두운 효과)

### D. 인프라 조치

#### 1. Swap 확보
```bash
sudo fallocate -l 4G /swapfile_remotion
sudo chmod 600 /swapfile_remotion
sudo mkswap /swapfile_remotion
sudo swapon /swapfile_remotion
```
- 영구 마운트: `/etc/fstab`에 추가

#### 2. Remotion 렌더링 최적화
- `--gl=swangle` (소프트웨어 GL)
- `--concurrency=1` (메모리 절약)
- 렌더링 전 메모리 3GB 여유 체크

#### 3. 기존 엔진 deprecated 처리
- `renderer/shortform_renderer.py` → 파일 상단에 DEPRECATED 주석 + import warning
- `video/evan_dynamic.py` → 참고용 유지 (구현 레퍼런스), DEPRECATED 주석

## Phase 가이드 (팀장 자율 판단)
추천 Phase 분리 (팀장이 판단하여 조정 가능):
- **Phase 1**: Python 파이프라인 (`pipeline_orchestrator.py` + TTS + scene_composer 단일화 + FFmpeg mux)
- **Phase 2**: Remotion TS 수정 (calculateMetadata + 전장면 타이핑 + SCENE_GAP 통일 + Audio 제거) + 아이콘 라이브러리(`lucide-react`) + 레이아웃 다양화 + 고급 애니메이션
- **Phase 3**: 통합 테스트 + 인프라 조치(swap/swangle) + 실제 렌더링 검증

## 검증 기준
1. **파이프라인 E2E**: `run_cardnews_pipeline.py` 출력 slides → 영상 MP4 자동 생성
2. **TTS-영상 싱크**: 나레이션과 텍스트 타이핑이 동기화
3. **에반 6원칙 체크**: 검정배경 ✓ 테마색상 ✓ 레이아웃변주 ✓ 타이핑 ✓ 시간차등장 ✓ 다이나믹 ✓
4. **아이콘 연계**: 최소 3개 Scene에서 lucide 아이콘 활용 확인
5. **레이아웃 변형**: 동일 Scene 타입이 2회 이상 나올 때 다른 레이아웃 적용
6. **OOM 없이 렌더링 완료**: 서버(7.7GB RAM + 4GB Swap)에서 안정 렌더링
7. **최종 MP4**: 1080x1920 (9:16), 30fps, 30~90초 범위

## 참고 파일 (반드시 읽을 것)
- 에이전트 미팅 기록: `/home/jay/workspace/memory/meetings/2026-03-17-video-engine-integration-design.md`
- 에반 6원칙 스펙: `/home/jay/workspace/memory/specs/threadauto-video-rules.md`
- evan_dynamic.py (구현 레퍼런스): `/home/jay/projects/ThreadAuto/video/evan_dynamic.py`
- scene_composer.py: `/home/jay/projects/ThreadAuto/video/scene_composer.py`
- styles.py (EVAN_STYLE 프리셋): `/home/jay/projects/ThreadAuto/video/styles.py`
- render_bridge.py: `/home/jay/projects/ThreadAuto/remotion/render_bridge.py`
- ShortForm/index.tsx: `/home/jay/projects/ThreadAuto/remotion/src/compositions/ShortForm/index.tsx`
- 현재 scenes: `/home/jay/projects/ThreadAuto/remotion/src/scenes/`
- 현재 components: `/home/jay/projects/ThreadAuto/remotion/src/components/`
- 현재 animations: `/home/jay/projects/ThreadAuto/remotion/src/animations/`