# task-436.1 보고서: ThreadAuto Remotion Phase 0~1 구현

**팀**: dev1 (헤르메스 팀장, 이리스/불칸/아르고스)
**일시**: 2026-03-10
**레벨**: Lv.2

---

## 작업 내용

### Phase 0: 환경 셋업
- `/home/jay/projects/ThreadAuto/remotion/` 디렉토리 신규 생성 (worktree 경로: `.worktrees/task-436.1-dev1/remotion/`)
- Remotion 4.0.434 + @remotion/cli + @remotion/bundler + @remotion/renderer + @remotion/google-fonts 설치
- TypeScript 5.x + @types/react 설정
- Chrome Headless Shell (v144.0.7559.20, linux64) 다운로드 완료
- TestStill (1080x1350) 렌더링 테스트 → 성공 (output/test.png, 110KB)

### Phase 1: POC 카드뉴스 1종

**테마 시스템:**
- `src/themes/types.ts`: Theme 인터페이스 (Python Theme dataclass 1:1 이식)
- `src/themes/navy-gold.ts`: NavyGold 테마 상수

**공통 컴포넌트:**
- `src/components/BrandBar.tsx`: 상단 12px 브랜드 바
- `src/components/BrandFooter.tsx`: 하단 100px 푸터 (인카다이렉트 TOP사업단 | 서울대보험쌤)
- `src/components/GlassCard.tsx`: 글래스모피즘 카드 (반투명 배경, 테두리)
- `src/components/PillBadge.tsx`: 카테고리 필 뱃지

**슬라이드 컴포넌트:**
- `src/slides/CoverSlide.tsx`: 표지 (PillBadge + 제목 + 부제목 + 페이지 번호)
- `src/slides/CardListSlide.tsx`: 카드 리스트 (CHECK LIST 라벨 + 제목 + GlassCard 배열)

**컴포지션:**
- `src/compositions/CardNews/index.tsx`: SLIDE_MAP 패턴으로 slide.type → 컴포넌트 라우팅

**Python 브릿지:**
- `render_bridge.py`: RemotionBridge 클래스
  - `render_still()`: subprocess로 `npx remotion still` 호출
  - `render_card_news()`: 전체 슬라이드 순회 렌더링
  - timeout 60초, 에러 시 RuntimeError

---

## 생성/수정 파일 목록

### 신규 생성 (24개)
- `remotion/.gitignore`
- `remotion/package.json`, `remotion/package-lock.json`
- `remotion/tsconfig.json`
- `remotion/remotion.config.ts`
- `remotion/render_bridge.py`
- `remotion/src/index.ts`
- `remotion/src/Root.tsx`
- `remotion/src/themes/types.ts`, `remotion/src/themes/navy-gold.ts`
- `remotion/src/types/props.ts`
- `remotion/src/components/BrandBar.tsx`, `BrandFooter.tsx`, `GlassCard.tsx`, `PillBadge.tsx`
- `remotion/src/slides/CoverSlide.tsx`, `CardListSlide.tsx`
- `remotion/src/compositions/CardNews/index.tsx`
- `remotion/src/__tests__/CardNews.test.tsx`
- `remotion/tests/__init__.py`, `remotion/tests/test_render_bridge.py`
- `remotion/comparison/pillow_cover.png`, `remotion_cover.png`, `remotion_cardlist.png`

### 수정 파일: 없음 (기존 코드 변경 없음)

---

## 테스트 결과

- Python pytest: 6/6 PASSED (render_bridge 단위 테스트)
- TypeScript tsc --noEmit: 에러 0건
- Remotion 렌더링: cover_test.png (118KB), cardlist_test.png (127KB) 정상 생성

---

## 품질 비교: Pillow vs Remotion

같은 콘텐츠("보험료 절약하는 5가지 방법")로 비교:

- Pillow: comparison/pillow_cover.png — 좌표 하드코딩 레이아웃, 큰 텍스트, 장식 원형
- Remotion: comparison/remotion_cover.png — Flexbox 중앙 정렬, 서브픽셀 폰트, 브랜드 푸터 바
- Remotion: comparison/remotion_cardlist.png — 글래스모피즘 카드, accent 수직바, 깔끔한 여백

**소감**: Remotion이 CSS 기반 레이아웃 + 타이포그래피 품질에서 명확히 우위. 특히 Flexbox 정렬과 글래스모피즘 효과는 Pillow로 구현 불가한 영역.

---

## 머지 판단

- **머지 필요**: No (이미 자동 머지 완료)
- **브랜치**: task/task-436.1-dev1 (master에 머지됨, 커밋: 9be0d1c)
- **머지 의견**: remotion/ 디렉토리만 신규 추가, 기존 코드 수정 0건. 충돌 없이 머지 완료. pytest 6/6 통과, tsc 에러 0건.

## QC 검증 결과

5 PASS, 3 SKIP, 1 WARN (style_check — 포매팅 후 재커밋으로 해소)

---

## 후속 Phase 안내

- Phase 2: 카드뉴스 전체 전환 (5종 슬라이드 × 5종 테마)
- Phase 3: 영상 파이프라인 전환 (숏폼)
- Phase 4: 최적화 + 고급 효과

한시적 자율 체이닝 승인에 따라 Phase 2를 자동 진행할 예정.

---

## 버그/이슈

- 없음

## 비고

- Remotion 라이선스: 3인 이하 영리 조직 무료 (현재 조건 충족)
- Chrome Headless Shell 86.6MB 다운로드됨 (node_modules/.remotion/)
- CardNewsProps에 index signature `[key: string]: unknown` 추가하여 Remotion의 `Record<string, unknown>` 제약 충족