# task-1031.1 완료 보고서 — 광고 이미지 소재 V2 (hybrid-image 재제작)

## S - Situation
v1(satori) 방식으로 제작한 광고 이미지가 텍스트만 있는 밋밋한 디자인으로, 실제 Meta/Google 광고에 부적합하다는 피드백을 받았다.

## C - Complication
"전문가적이고 고퀄리티의 이미지 바탕에 한글 표현이 디자인적으로 멋있게 들어가야" 하며, 모바일 가독성도 확보해야 한다. hybrid-image 방식(Gemini AI 배경 + HTML 텍스트 오버레이)으로 전면 재제작이 필요했다.

## Q - Question
Gemini AI로 전문적 배경을 생성하고 HTML 오버레이로 한글 텍스트를 합성하여, Meta 캐러셀 A/B 각 5장 + 네이버 GFA 배너 A/B 각 1장을 고품질로 제작할 수 있는가?

## A - Answer
총 12장(캐러셀 10장 + GFA 2장) 모두 성공적으로 생성. 배경 10장을 Gemini 3.1 Flash Image로 생성 후 Playwright HTML 캡처로 텍스트 오버레이 합성. 에러 0건, 해상도 전수 검증 통과.

---

## 작업 내용

### 생성 파이프라인
1. **Gemini API** (`gemini-3.1-flash-image-preview`)로 배경 이미지 10장 생성
   - A그룹: 모던 오피스, 좁은 사무실, 밝은 오피스, 성장 차트, 밝은 복도
   - B그룹: 기업 본사, 빈 회의실, 대형 보드룸, 성장 시각화, 로비
2. **HTML/CSS 템플릿** — 5가지 슬라이드 타입별 레이아웃
   - hook: 글래스모피즘 하단 카드 (62px 헤드라인)
   - problem: 전체 어두운 오버레이 중앙 정렬 (72px)
   - solution: SOLUTION 레이블 + 중앙 헤드라인 (64px)
   - proof: 대형 숫자 헤드라인 (80px)
   - cta: CTA 골드 버튼 + 면책문구 (56px)
3. **Playwright** 캡처로 최종 합성

### 산출물 수량/해상도

- A그룹 캐러셀: 5장 (1080x1080) — `meta-carousel-a/slide_1~5.png`
- B그룹 캐러셀: 5장 (1080x1080) — `meta-carousel-b/slide_1~5.png`
- GFA 배너 A: 1장 (1200x628) — `naver-gfa/gfa_a.png`
- GFA 배너 B: 1장 (1200x628) — `naver-gfa/gfa_b.png`
- 배경 원본: 10장 — `backgrounds/bg_*.jpg`
- 합계: 12장 최종 + 10장 배경

### 파일 크기 범위
- 캐러셀: 978KB ~ 1,320KB (평균 ~1,100KB)
- GFA: 807KB ~ 940KB
- 배경: 702KB ~ 904KB

---

## 생성/수정 파일 목록

### 생성한 파일 (코드)
- `/home/jay/workspace/teams/dev1/v2_carousel_template.html` — 캐러셀 오버레이 HTML (27KB)
- `/home/jay/workspace/teams/dev1/v2_gfa_template.html` — GFA 배너 오버레이 HTML (15KB)
- `/home/jay/workspace/teams/dev1/v2_pipeline.py` — 파이프라인 스크립트 (23KB)

### 생성한 파일 (산출물)
- `/home/jay/workspace/output/campaign-top/v2-hybrid/meta-carousel-a/slide_{1-5}.png`
- `/home/jay/workspace/output/campaign-top/v2-hybrid/meta-carousel-b/slide_{1-5}.png`
- `/home/jay/workspace/output/campaign-top/v2-hybrid/naver-gfa/gfa_a.png`
- `/home/jay/workspace/output/campaign-top/v2-hybrid/naver-gfa/gfa_b.png`
- `/home/jay/workspace/output/campaign-top/v2-hybrid/backgrounds/bg_*.jpg` (10장)
- `/home/jay/workspace/output/campaign-top/v2-hybrid/results.json`

---

## 지정 폴더 저장 확인
- A그룹: `/home/jay/workspace/output/campaign-top/v2-hybrid/meta-carousel-a/` ✅
- B그룹: `/home/jay/workspace/output/campaign-top/v2-hybrid/meta-carousel-b/` ✅
- GFA: `/home/jay/workspace/output/campaign-top/v2-hybrid/naver-gfa/` ✅
- 작업 지시서의 출력 경로와 100% 일치

---

## 품질 검증 결과

### 해상도 검증 (12/12 통과)
- 캐러셀 10장: 모두 1080x1080 ✅
- GFA 2장: 모두 1200x628 ✅

### 모바일 가독성 (헤드라인 폰트 크기)
- hook: 62px ✅ (기준 48px+)
- problem: 72px ✅
- solution: 64px ✅
- proof: 80px ✅
- cta: 56px ✅
- GFA: 48px ✅

### 컴플라이언스 검증
- "잔존수당" 미사용 ✅
- 정착지원금 면책 문구("*조건 있음, 상담 시 확인") — CTA 슬라이드(a5, b5) 및 GFA 배너에 포함 ✅
- 허위·과장 표현 미사용 ✅

### 디자인 원칙 준수
- 텍스트 최소화 (핵심 1~2줄 + CTA) ✅
- 배경이 주인공 (전문적 포토리얼 AI 이미지) ✅
- 반투명 오버레이 기법 적용 ✅
- 한글 100% 정확 (HTML 렌더링) ✅

---

## 발견 이슈 및 해결

### 자체 해결 (3건)

1. **Problem 슬라이드 헤드라인 줄바꿈** — 카피에 `\n` 삽입하여 의도적 줄바꿈 제어
   - 수정: SLIDE_DATA의 headline 필드에 `\n` 포함, CSS `white-space: pre-line` 적용

2. **GFA 배너 배경 크롭 비율** — 1:1 배경을 1200x628로 사용 시 상하 잘림
   - 해결: `background-size: cover; background-position: center` 적용으로 자연스러운 크롭

3. **브랜드 B(인카금융) 컬러 토큰 부재** — design-tokens.json에 인카금융 전용 브랜드가 없음
   - 해결: 기업적 deep blue (#0A2463) + 라이트 블루 (#3E92CC) 컬러셋을 HTML 템플릿에 직접 정의

---

## 셀프 QC 체크리스트

- [x] 1. 다른 파일 영향: 없음. 독립된 이미지 생성 작업
- [x] 2. 엣지 케이스: Gemini API 실패 시 에러 핸들링 + skip 로직 구현
- [x] 3. 작업 지시 일치: A/B 각 5장 + GFA A/B 각 1장, hybrid 방식, 지정 폴더 = 모두 충족
- [x] 4. 에러/보안: API 토큰은 gcloud 런타임 획득 (하드코딩 없음)
- [x] 5. 테스트: 해상도 12/12 전수 통과, 시각적 확인 완료
- [x] 6. 발견 이슈 모두 해결 (3건 자체 해결)

---

## 비고
- 파이프라인 재실행: `python3 /home/jay/workspace/teams/dev1/v2_pipeline.py --skip-bg` (배경 유지, 텍스트만 재캡처)
- 특정 그룹만: `--group a` 또는 `--group b`
- v1 satori 결과물은 `/home/jay/workspace/output/campaign-top/v1-satori/`에 보존됨