# Meta 캐러셀 광고 이미지 퀄리티 업그레이드

## 배경
task-849.1에서 PoC가 완성되었으나, 제이회장님 평가: **"카드뉴스로는 괜찮지만, 광고 이미지로는 너무 밋밋하다. 업계 최고 전문가 수준으로 높여야 함"**

## 목표
기존 carousel-gen의 HTML 템플릿 디자인을 **프로페셔널 광고 에이전시 수준**으로 업그레이드한다.

## 현재 상태
- 스크립트: `/home/jay/workspace/tools/carousel-gen/generate_carousel.py` (191줄, 동작 확인됨)
- 템플릿: `templates/infographic.html` (B안), `templates/emotional.html` (C안)
- 출력: `output/` 에 5장 생성됨 (1080x1080 PNG)
- 현재 디자인: 네이비 그라디언트 배경 + 화이트 텍스트 + 골드 포인트 — **기본적이고 밋밋함**

## 요구사항

### 1. 디자인 퀄리티 업그레이드 (핵심)
현재 템플릿(`infographic.html`, `emotional.html`)의 CSS/HTML을 **광고 에이전시 수준**으로 개선:

- **레이아웃**: 단조로운 중앙 정렬 → 비대칭 레이아웃, 시각적 계층 구조, 그리드 시스템
- **타이포그래피**: 단순 폰트 크기 차이 → 극적인 크기 대비(히어로 텍스트 72px+ vs 본문 24px), 레터 스페이싱, 라인 하이트 조절
- **색상**: 단순 2색 → 그라디언트 레이어링, 미묘한 색상 변화, 글래스모피즘/네오모피즘 효과
- **장식 요소**: 기하학적 도형, 라인 아트, 아이콘 (CSS 또는 SVG inline), 미묘한 패턴
- **카드/박스**: 글래스모피즘(backdrop-filter: blur), 미묘한 보더, 그림자 레이어링
- **데이터 강조**: 큰 숫자 히어로 스타일 (ex. "1,000만원" → 초대형 + 골드 그라디언트 텍스트)
- **CTA 버튼**: 그라디언트 + 호버 효과 느낌, 시각적 존재감

### 2. 슬라이드별 디자인 차별화
5장이 모두 같은 레이아웃이면 밋밋함. 슬라이드마다 다른 레이아웃:

| 슬라이드 | 현재 | 목표 |
|----------|------|------|
| 1. 고통 인식 (C안) | AI 배경 + 텍스트 | **시네마틱 느낌**, 대비 강한 히어로 텍스트, 배경 어둡게 + 텍스트 밝게 |
| 2. 문제 심화 (B안) | 불릿 리스트 | **카드형 레이아웃**, 각 문제점을 개별 카드로, 아이콘 포함 |
| 3. 신뢰 근거 (B안) | 숫자 나열 | **데이터 대시보드 스타일**, 큰 숫자 히어로 + 보조 설명, 프로그레스 바 |
| 4. 차별화 (B안) | 시스템 목록 | **아이콘 그리드**, 5가지 시스템을 아이콘+제목+설명 그리드로 |
| 5. CTA (C안) | AI 배경 + 텍스트 | **프리미엄 초대장 스타일**, 골드 보더, 조건 체크리스트, 강력한 CTA 버튼 |

### 3. 참고 디자인 벤치마크
아래 키워드로 Meta 캐러셀 광고 레퍼런스를 검색하여 최고 수준 디자인 트렌드를 파악:
- "premium Meta carousel ad design 2026"
- "recruitment carousel ad professional design"
- "insurance marketing carousel design"
- 글래스모피즘, 다크 UI, 프리미엄 금융 광고 스타일 참고

### 4. 기술 제약
- **HTML/CSS 온리** — 외부 이미지 파일 의존 최소화 (CSS로 해결 가능한 건 CSS로)
- **인라인 SVG** 활용 가능 — 아이콘, 로고, 장식 요소
- **CSS 애니메이션 불필요** — 정적 이미지 캡처이므로
- **웹폰트**: Noto Sans KR (현재 사용 중) + Pretendard 추가 가능
- **1080x1080px** 정확히 유지
- **기존 generate_carousel.py의 데이터 주입 방식 유지** — JSON → window.SLIDE_DATA → render()

### 5. 검증
- 수정 후 `python3 generate_carousel.py --set "상시A" --output ./output/` 실행하여 5장 재생성
- 생성된 5장 이미지를 `cokacdir --sendfile`로 제이회장님께 전달
- 수치 정확성 재확인 (정착지원금, 잔여수수료 등)

## 산출물
- 수정된 템플릿: `templates/infographic.html`, `templates/emotional.html`
- 재생성된 이미지: `output/` (5장)
- 제이회장님께 이미지 전송

## 주의사항
- ★ generate_carousel.py 로직은 건드리지 말 것 (템플릿만 수정)
- ★ 수치/카피 내용 변경 금지 — 디자인만 업그레이드
- ★ "잔존수당" → "잔여수수료" 확인
- ★ frontend-design 스킬 참고하여 최고 수준 디자인 적용