# task-675: 영상 레이아웃 재조정 + 스크립트-화면 문장별 Sync

## 작업 레벨: Lv.2 (기능 구현)
## 한정위임: 1팀이 끝까지 진행

---

## 배경

task-673.1에서 텍스트 font_size를 1.3배 키웠으나, y좌표/여백/간격을 조정하지 않아서 레이아웃이 깨졌다.
또한 나레이션과 화면 텍스트의 sync가 슬라이드 단위로만 되어 있어, 문장별 동기화가 필요하다.

---

## 문제 1: 레이아웃 깨짐 (4건의 캡처 증거)

### 1-A. Cover 장면 (font_size 122)
- "연금저축, 지금 안 하면..." — 화면 왼쪽 밖으로 잘림
- 원인: x="center" 계산은 맞으나, font_size 122에서 긴 한글 텍스트가 화면폭 1080px 초과
- **해결 방향**:
  - font_size를 화면폭 대비 동적 계산 (텍스트 길이에 따라 자동 축소)
  - 또는 긴 텍스트는 2줄로 wrap
  - 고정값 122 대신, max_width 기준 font_size 자동 산출

### 1-B. Card_list 장면 (font_size 64)
- 체크리스트 항목 "✓ — 연 최대 600만원까지 16.5% 세..." 오른쪽 잘림
- 원인: x=120 시작 + font_size 64 + 긴 텍스트 → 화면폭 1080px 초과
- 카드 width=920인데, 텍스트 영역 = 1080 - 120 = 960px. 하지만 font 64로는 부족
- **해결 방향**:
  - 텍스트 wrap 필요: 카드 내부 width(920-40*2=840px) 내로 자동 줄바꿈
  - 또는 font_size를 카드 width 기준 동적 축소
  - 카드 height도 텍스트 줄 수에 따라 동적 증가

### 1-C. Detail 장면 (label 55px + value 81px)
- "연 납입 400만원" 과 "최대 66만원 환급" 이 겹침
- 원인: 아이템 간격 120px, label y+0(55px) + value y+40(81px) → value 바닥이 ~y+121 → 다음 아이템 시작 y+120과 겹침
- **해결 방향**:
  - 아이템 간격을 font_size에 맞춰 동적 계산 (label_height + value_height + gap)
  - 최소 간격 = label_font_size + value_font_size + 30 (여유)

### 1-D. CTA 장면 (title 95px + cta 135px + badge + 안내)
- 비교적 양호하나 "무료로 점검받기" font_size 135가 과도
- **해결 방향**: CTA 텍스트도 화면폭 대비 동적 산출

### 핵심 원칙: **하드코딩 font_size 금지, 동적 레이아웃 시스템 도입**
- `_calc_font_size(text, max_width, desired_size)` 헬퍼: 텍스트가 max_width를 초과하면 자동 축소
- `_calc_y_spacing(elements)` 헬퍼: 요소들의 실제 높이를 계산하여 간격 동적 산출
- 텍스트 wrap: 긴 텍스트는 max_width 기준으로 자동 줄바꿈

---

## 문제 2: 스크립트-화면 문장별 Sync

### 현재 상태
- 슬라이드 1개 = 장면 1개 = TTS 1개
- 장면 내 텍스트는 고정 delay(0.0, 0.8, 2.0초 등)로 등장
- 나레이션은 슬라이드 전체 내용을 한 번에 읽음
- → 나레이션이 첫 문장 읽는 동안 이미 모든 텍스트가 화면에 있거나, 반대로 아직 안 나왔거나

### 개선 방향
- **문장별 타이밍 계산**: narration 텍스트를 문장 단위로 분리, 각 문장의 TTS 길이를 추정
- **element delay 동적 산출**: 각 화면 요소의 delay를 해당 나레이션 문장의 시작 시간과 동기화
- **구현 옵션** (팀장 판단에 맡김):

  **옵션 A: 문장별 TTS 길이 추정 방식**
  - 전체 narration TTS 길이를 알고 있으므로, 글자 수 비율로 각 문장 시작 시간 추정
  - `sentence_start_time = total_duration * (chars_before / total_chars)`
  - 장점: 추가 TTS 호출 불필요
  - 단점: 글자 수 ≠ 발화 시간 (숫자, 한자어 등)

  **옵션 B: 문장별 개별 TTS 생성 → 정확한 타이밍**
  - narration을 문장으로 분리 → 각 문장을 별도 TTS → 시간 측정
  - 장점: 정확한 동기화
  - 단점: TTS 호출 횟수 증가, 속도 저하

  **옵션 C: 워드 레벨 타임스탬프** (edge_tts WordBoundary 이벤트)
  - edge_tts의 WordBoundary 이벤트에서 단어별 시작 시간을 추출
  - 문장의 첫 단어 시작 시간 = 해당 화면 요소의 delay
  - 장점: 가장 정확, 추가 TTS 호출 불필요
  - 단점: edge_tts WordBoundary 파싱 구현 필요

### 구현 범위
1. `generate_scenes_from_slides()` 함수에 narration timing 정보를 받아서 element delay를 동적 산출
2. `pipeline_orchestrator.py`에서 narration timing 정보를 추출하여 scene 생성 시 전달
3. 화면 요소가 나레이션 진행에 맞춰 순차 등장

---

## 수정 대상 파일

1. `/home/jay/projects/ThreadAuto/video/evan_dynamic.py`
   - `_calc_font_size()` 동적 폰트 크기 산출 헬퍼 추가
   - `_wrap_text()` 텍스트 줄바꿈 헬퍼 추가
   - `generate_scenes_from_slides()` — 동적 레이아웃 + narration timing 기반 delay
   - `generate_insurance_scenes()` — 동일 적용
   - `_render_text_element()` — 멀티라인 렌더링 지원

2. `/home/jay/projects/ThreadAuto/video/pipeline_orchestrator.py`
   - narration timing 정보를 추출하여 `generate_scenes_from_slides()`에 전달
   - edge_tts WordBoundary 또는 글자 수 비율 방식 구현

3. `/home/jay/projects/ThreadAuto/video/tts_sync.py`
   - (필요시) edge_tts WordBoundary 이벤트 파싱 추가

4. 테스트 파일
   - `_calc_font_size` 동적 산출 검증
   - 텍스트 wrap 검증
   - narration-screen sync delay 계산 검증

---

## 검증 기준 (QC 체크리스트)

1. **레이아웃 깨짐 0건**: 모든 텍스트가 화면 안에 표시 (x: 0~1080, y: 0~1920)
2. **텍스트 겹침 0건**: 인접 요소 간 최소 20px 간격 보장
3. **font_size 적정 범위**: 최소 36px ~ 최대 140px
4. **narration-screen sync**: 나레이션 진행에 따라 화면 요소가 순차 등장
5. **pytest 전체 통과**: 기존 테스트 회귀 0건 + 신규 테스트 추가
6. **pyright 에러 0건**
7. **Threads 업로드 1건**: 테스트 영상 생성 + 업로드 성공
8. **FFmpeg 파이프 유지**: `list(frames)` 사용 금지, generator + pipe 유지

---

## 캡처 이미지 참조

- `/home/jay/.cokacdir/workspace/autoset/photo_AQADJw9rG6LS0FV-.jpg` — Detail 겹침
- `/home/jay/.cokacdir/workspace/autoset/photo_AQADKA9rG6LS0FV-.jpg` — Card_list 오른쪽 잘림
- `/home/jay/.cokacdir/workspace/autoset/photo_AQADKQ9rG6LS0FV-.jpg` — Cover 왼쪽 잘림 + 잔류 "1"
- `/home/jay/.cokacdir/workspace/autoset/photo_AQADKg9rG6LS0FV-.jpg` — CTA 과대 폰트

---

## 참고 문서

- FFmpeg 파이프 규칙: `/home/jay/workspace/memory/specs/threadauto-video-rules.md`
- 에반 6원칙: 검정배경, 테마색상, 레이아웃변주, 타이핑효과, 시간차등장, 다이나믹
- 기존 보고서: `/home/jay/workspace/memory/reports/task-673.1.md`