# AI 배경 + HTML 오버레이 (C안) 본격 검증

## 배경
- issue-040 미테스트 항목 ② "AI 배경 + HTML 오버레이"
- task-849.1에서 emotional.html로 일부 테스트했으나, 당시는 PoC 수준
- 이후 task-852.1에서 HTML 퀄리티를 업그레이드했고, AI 이미지 생성 API도 확보됨
- 이제 **AI가 생성한 고퀄리티 배경 이미지 위에 HTML/CSS로 텍스트·레이아웃을 합성**하는 하이브리드 방식을 본격 검증

## 목표
**AI 이미지(배경) + HTML 텍스트 오버레이 = 광고 이미지** 파이프라인 구축 및 품질 검증.

핵심 아이디어:
- AI가 만든 이미지는 퀄리티 높지만 **한글 텍스트 렌더링이 불안정** (오타 위험)
- HTML/CSS 텍스트는 **100% 정확**하지만 배경이 밋밋함
- → AI 배경(텍스트 없이) + HTML 텍스트 오버레이 = **두 장점 결합**

## 구현 방법

### Step 1: AI 배경 이미지 생성 (텍스트 없이)
- 기존 스크립트 활용: `/home/jay/workspace/tools/ai-image-gen/gemini_nb2_generate.py`
- gcloud 인증 방식 (task-857.1에서 검증됨)
- **프롬프트에서 텍스트 관련 지시 제거** — 순수 배경/분위기 이미지만 생성
- 프롬프트 예시:
  ```
  시나리오 A 배경: "Premium corporate office environment.
  100th-floor Seoul panoramic view through floor-to-ceiling windows.
  Golden hour lighting, warm volumetric rays. Navy and gold color scheme.
  Blurred background suitable for text overlay. No text, no people, no watermark.
  1080x1080 square format."

  시나리오 B 배경: "Luxury private consultation room atmosphere.
  Dark walnut bookshelf, mahogany desk, brass lamp. Warm amber lighting.
  Shallow depth of field, dreamy bokeh. No text, no people. 1080x1080."

  시나리오 C 배경: "Cinematic corridor scene. Dark corporate hallway
  with golden light streaming through open door at the end.
  Volumetric god-rays, dust particles. Teal and orange color grade.
  No text, no people. 1080x1080."
  ```

### Step 2: HTML 텍스트 오버레이 템플릿
- 기존 참조: `/home/jay/workspace/tools/carousel-gen/templates/emotional.html`
- AI 배경 이미지를 CSS `background-image`로 로드
- 그 위에 텍스트, CTA, 로고 등을 HTML/CSS로 배치
- 글래스모피즘, 그라디언트 오버레이 등으로 텍스트 가독성 확보
- **Playwright**로 1080x1080 스크린샷 캡처 → 최종 광고 이미지

### Step 3: 통합 스크립트
- Python 스크립트: AI 배경 생성 → HTML 템플릿에 주입 → Playwright 스크린샷
- CLI: `--scenario A|B|C`
- 출력: 최종 합성 이미지

## 테스트 시나리오 (3가지)

### 시나리오 A: GA 리크루팅
- AI 배경: 서울 파노라마 오피스 (텍스트 없이)
- HTML 오버레이:
  - 헤드라인: "당신의 커리어, 새로운 시작"
  - 서브: "업계 최고 대우, 최고의 시스템"
  - CTA: "지금 상담받기"
  - 글래스모피즘 카드 위에 배치

### 시나리오 B: 전문성 브랜딩
- AI 배경: 고급 상담실 분위기 (텍스트 없이)
- HTML 오버레이:
  - 헤드라인: "보험의 모든 것"
  - 서브: "15년 경력 전문 컨설턴트"
  - 하단에 연락처/URL

### 시나리오 C: 전직 유도 감성
- AI 배경: 어둡→밝은 문 시네마틱 (텍스트 없이)
- HTML 오버레이:
  - 헤드라인: "지금이 기회입니다"
  - 서브: "더 나은 내일을 위한 선택"
  - 중앙 정렬, 영화 자막 스타일

## 산출물
- 경로: `/home/jay/workspace/tools/ai-image-gen/output/v4-hybrid/`
  - ★ 버전 폴더 분리 필수!
- AI 배경 이미지: `bg_A.png`, `bg_B.png`, `bg_C.png`
- HTML 템플릿: `overlay_template.html`
- 최종 합성 이미지: `hybrid_A.png`, `hybrid_B.png`, `hybrid_C.png`
- 통합 스크립트: `/home/jay/workspace/tools/ai-image-gen/generate_hybrid.py`
- 비교 리포트: 순수 AI vs 순수 HTML vs 하이브리드 비교

## 비교 기준
- 순수 AI (Gemini NB2): 이미지 퀄리티 높지만 한글 오타 위험
- 순수 HTML (carousel-gen): 텍스트 정확하지만 배경 밋밋
- 하이브리드: **이미지 퀄리티 + 텍스트 정확성** 동시 달성 가능한지

## 기술 참조
- Playwright: `pip install playwright && playwright install chromium` (이미 설치되어 있을 수 있음)
- 기존 carousel-gen 코드: `/home/jay/workspace/tools/carousel-gen/generate_carousel.py` 참조
- Gemini 인증: `gcloud auth print-access-token --scopes=https://www.googleapis.com/auth/generative-language`

## 주의사항
- 기존 output 폴더들 절대 건드리지 말 것
- API 키/토큰 하드코딩 금지
- 실패 로그 보존 필수
- 한글 텍스트는 HTML에서 렌더링하므로 **100% 정확해야 함** (AI한테 맡기지 않음)
- fact_db.md에 없는 수치 사용 금지