# task-852.1 완료 보고서: Meta 캐러셀 광고 이미지 퀄리티 업그레이드

## SCQA

**S**: carousel-gen PoC(task-849.1)로 5장 캐러셀 이미지 생성이 가능하나, 네이비 그라디언트 + 화이트 텍스트의 단조로운 디자인으로 "카드뉴스 수준"에 머물러 있다.

**C**: 제이회장님 평가 "광고 이미지로는 너무 밋밋하다. 업계 최고 전문가 수준으로 높여야 함." 5장이 모두 동일 레이아웃이라 시각적 단조로움이 심하다.

**Q**: CSS/HTML 템플릿 수정만으로 광고 에이전시 수준의 프리미엄 디자인을 달성할 수 있는가?

**A**: infographic.html과 emotional.html 2개 템플릿을 완전 리디자인. 슬라이드별 고유 레이아웃(시네마틱 히어로, 글래스모피즘 카드, 데이터 대시보드, 아이콘 그리드, VIP 초대장) 적용. generate_carousel.py 실행으로 5장 정상 생성 확인(exit code 0). 수치 정확성 검증 완료(정착지원금 1,000만원, 잔여수수료, 해외여행 4회/년).

---

## 변경 사항

### 수정 파일
- `templates/infographic.html`: 407줄 → 957줄 (완전 리디자인)
- `templates/emotional.html`: 499줄 → 945줄 (완전 리디자인)

### generate_carousel.py
- 미변경 (191줄 유지) ✅

### 슬라이드별 디자인 변경 상세

**슬라이드 1 (C안 - emotional.html) - 시네마틱 히어로**
- 오버레이: rgba(26,54,93,0.65) → rgba(0,0,0,0.75~0.85) 시네마틱 블랙
- 헤드라인: 56px → 76px, text-shadow 2겹, 좌측 정렬
- "GA" 키워드: 단색 노랑 → 골드 그라디언트 텍스트 (background-clip: text)
- 신규: 좌측 수직 골드 accent bar, 4코너 L자형 골드 프레임, 미세 파티클 패턴
- CTA: 골드 글로우 효과 (text-shadow 3겹)

**슬라이드 2 (B안 - infographic.html) - 글래스모피즘 카드**
- 레이아웃: 불릿 리스트 → 독립 글래스모피즘 카드 (backdrop-filter: blur(12px))
- 카드: 좌측 4px 레드-오렌지 그라디언트 액센트 바
- 아이콘: 인라인 SVG 3종 (경고 삼각형, 달러 X, 혼자 달리기)
- 카드 엇갈림 배치: nth-child(2) margin-left: 40px

**슬라이드 3 (B안 - infographic.html) - 데이터 대시보드**
- 레이아웃: 불릿 리스트 → BIG NUMBER 히어로 카드
- 숫자: 72px + 골드 그라디언트 텍스트 (1,000 / 02 / 4)
- 카드: 인덱스 번호(01/02/03) + 큰 숫자 + 설명 + 프로그레스 바

**슬라이드 4 (B안 - infographic.html) - 아이콘 그리드**
- 레이아웃: 불릿 리스트 → 2+3 아이콘 그리드
- 5개 시스템: 인라인 SVG 아이콘 + 제목 (Consulting Logic, Naver Pipeline, AI Automation, Authority Brand, IT Work-Flow)
- 하단: bulletPoints 핵심 포인트 별도 표시
- 색상: 에메랄드 그린 계열 (#34d399)

**슬라이드 5 (C안 - emotional.html) - VIP 초대장**
- 프레임: 더블 골드 보더 (그라디언트, 8px 간격 이중 라인)
- 상단: "PRIVATE INVITATION" 레이블
- "경력 2년 이상": 골드 그라디언트 텍스트 강조
- 체크리스트: 그린 → 골드 SVG 체크마크, 항목 간 점선 구분
- CTA 버튼: 34px, 아우터 글로우 + 인너 하이라이트
- URL: 외부링크 SVG 아이콘 + 언더라인
- 하단: "LIMITED INVITATION ONLY" 배지

### 공통 디자인 시스템
- 배경: #0a1628 ~ #1a2744 다크 블루 + 60px 골드 메시 그리드 + 45도 대각선 패턴
- 장식: 4코너 L자형 골드 프레임, 원형 라디알 글로우
- 뱃지: 좌측 골드 수직 바 + 대문자 레이블
- 구분선: 그라디언트 라인 + 양 끝 다이아몬드 (::before/::after)
- 브랜드: ICA 로고타입 + 언더라인

---

## 검증 결과

### 이미지 생성 테스트
- 명령: `python3 generate_carousel.py --set "상시A" --output ./output/ --skip-ai`
- 결과: 5장 전체 정상 생성 (exit code 0)
- 파일 크기: slide_1 750KB, slide_2 517KB, slide_3 466KB, slide_4 556KB, slide_5 210KB
- 총 용량: 2,499KB (약 2.4MB)

### 수치 정확성 검증
- "정착지원금: 신입 최대 1,000만원 / 경력직 최대 직전연봉 50%" → 슬라이드 3 확인 ✅
- "잔여수수료 지급" → 슬라이드 3 확인 ("잔존수당" 아님) ✅
- "해외여행 4회/년 포함 30개 지원 패키지" → 슬라이드 3 확인 ✅
- CTA URL "incar-top.tistory.com" → 슬라이드 5 확인 ✅
- 필터 조건 3개 → 슬라이드 5 확인 ✅

### render() 인터페이스 호환성
- window.SLIDE_DATA → render() 주입 방식 유지 ✅
- infographic.html: render(data) → slideNumber별 renderProblem/renderProof/renderSystem 분기 ✅
- emotional.html: render(data) → renderSlide1/renderSlide5 분기, applyBackground() 유지 ✅

---

## 발견 이슈 및 해결

### 자체 해결 (3건)
1. **슬라이드 4 데이터 매핑 부정확** — bulletPoints 3개를 5개 시스템 그리드에 분배 시 콤마 분리만 처리하여 텍스트가 잘못 매핑됨 → 그리드는 아이콘+제목만 표시, bulletPoints는 하단 별도 영역으로 분리
   - 수정: infographic.html renderSystem() 함수 내 descriptions 매핑 로직 제거, 하단 핵심 포인트 영역 추가
2. **슬라이드 3 숫자 추출 정규식** — "1,000만원"에서 숫자 부분만 분리하여 BIG NUMBER로 표시 필요 → `match(/(\d[\d,]*(?:\.\d+)?(?:만원|억원|원|%|회|개|년|명)?)/)` 정규식으로 자동 추출
3. **슬라이드 5 outter/inner 프레임** — 골드 그라디언트 보더를 위해 `border-image`가 아닌 `background: linear-gradient` + `padding-box/border-box` 기법 사용 → 크로미움 렌더링에서 정확한 골드 보더 구현 확인

### 범위 외 미해결 (1건)
1. **AI 배경 이미지 갱신** — 현재 캐시된 AI 배경(bg_slide_1.png, bg_slide_5.png)은 이전 PoC에서 생성된 것. 새 디자인에 맞는 배경 재생성 시 더 좋은 결과 가능 → 범위 외 (AI 배경 생성은 OpenAI API 비용 발생, 현재 캐시 사용으로 충분)

---

## 산출물
- `/home/jay/workspace/tools/carousel-gen/templates/infographic.html` (수정)
- `/home/jay/workspace/tools/carousel-gen/templates/emotional.html` (수정)
- `/home/jay/workspace/tools/carousel-gen/output/slide_1_고통 인식.png` (재생성)
- `/home/jay/workspace/tools/carousel-gen/output/slide_2_문제 심화.png` (재생성)
- `/home/jay/workspace/tools/carousel-gen/output/slide_3_신뢰 근거.png` (재생성)
- `/home/jay/workspace/tools/carousel-gen/output/slide_4_차별화.png` (재생성)
- `/home/jay/workspace/tools/carousel-gen/output/slide_5_CTA.png` (재생성)
- 5장 이미지 제이회장님께 전송 완료