---
name: hybrid-image
description: "Gemini AI 배경 + HTML 텍스트 오버레이 하이브리드 이미지 생성. 한글 텍스트가 많은 포토리얼 광고에 최적. Use when: '한글 텍스트 + 사진 배경', '보험 광고 이미지', '텍스트 정확한 포토 이미지'."
---

# 하이브리드 이미지 생성 스킬 (Gemini배경 + HTML오버레이)

Gemini API로 포토리얼 배경을 생성하고, HTML/CSS로 한글 텍스트를 정확하게 오버레이합니다.

## 스펙
- **배경**: Gemini Pro Image API
- **텍스트**: HTML/CSS + Playwright 캡처
- **속도**: ~25초/장
- **비용**: $0
- **한글**: 100% 정확 (HTML 렌더링이므로 오타 불가)
- **품질**: 높음 (AI 이미지 퀄리티 + 완벽한 텍스트)

## 언제 사용하나?
- 한글 텍스트가 **3줄 이상** 포함된 포토리얼 이미지
- 보험상품 홍보 이미지 (상품명, 특약, 혜택 텍스트 다수)
- 수치/데이터가 정확해야 하는 광고 (금소법 준수)
- Gemini Pro 단독으로 한글이 깨지는 경우

## 한글이 적으면?
→ gemini-image 스킬 사용 (프롬프트에 한글 텍스트 직접 포함, 더 간단)

## 파이프라인
```
1. Gemini Pro API → 배경 이미지 생성 (JPEG)
2. HTML 템플릿에 배경 이미지 + 텍스트 배치
3. Playwright 헤드리스 브라우저로 스크린샷 (PNG)
4. 최종 합성 이미지 출력
```

## ⛔ PNG 렌더링 필수 (반드시 실행)
HTML 생성 후 **반드시** Playwright로 PNG 렌더링을 실행하세요. HTML만 만들고 끝내면 미완료 처리됩니다.

```python
# render_banners.py 생성 시 반드시 실행!
python3 render_banners.py
```

- .html 파일만 있고 .png가 없으면 QC FAIL
- Phase 완료 조건: .png 파일이 출력 디렉토리에 존재해야 함

## 코드 위치
`/home/jay/workspace/tools/ai-image-gen/`

## HTML 오버레이 구조
```html
<div style="
  width: 1080px; height: 1350px;
  background-image: url('gemini_bg.jpg');
  background-size: cover;
">
  <div style="
    position: absolute; bottom: 60px;
    background: rgba(0,0,0,0.6);
    padding: 40px; border-radius: 16px;
  ">
    <h1 style="font-family: 'Pretendard', 'Noto Sans KR', sans-serif; color: #d4a853; font-size: 64px;">헤드라인</h1>
    <p style="font-family: 'Pretendard', 'Noto Sans KR', sans-serif; color: #ffffff; font-size: 36px;">본문 텍스트</p>
  </div>
</div>
```

## 의존성
- Gemini Pro API (gcloud 토큰)
- Playwright (헤드리스 브라우저)
- 한글 폰트 (Pretendard 우선, Noto Sans KR fallback)

## 한국어 타이포그래피 규칙 (Supanova)
- **폰트 우선순위**: Pretendard 필수. Noto Sans KR은 fallback으로만 사용
- **`word-break: keep-all`** — 한국어 음절 중간 줄바꿈 방지 (CSS에서 반드시 적용)
- **`leading-snug` (line-height: 1.375)** — 한글은 라틴보다 수직 공간 더 필요
- **`font-variant-numeric: tabular-nums`** — 가격/수치 정렬에 적용
- **AI 클리셰 한국어 금지**: "혁신적인", "원활한", "차세대", "최적화된" 사용 금지
- **AI 더미 이름 금지**: 김철수/이영희 대신 → 하윤서, 박도현, 이서진, 김하늘, 정민준 사용
- **유기적 숫자**: 50,000+ 대신 47,200+, 4.87/5.0, 2.3초, 98.7% 등 사실적 수치 사용
- **존댓말 일관성**: 합니다/하세요 통일 (한 텍스트 내 혼용 금지)

## 색상 규칙 (Supanova)
- **악센트 최대 1개** per 이미지, 채도 80% 미만
- **AI 퍼플 금지**: 보라/파랑 "AI" 그라디언트, 네온 글로우 절대 금지
- **순수 검정(#000000) 금지**: 다크 배경은 `#0a0a0a`, Zinc-950, Slate-950 사용
- **그림자**: 배경 색조에 맞춘 틴티드 섀도우 사용. `rgba(0,0,0,0.3)` 금지
- **금지 폰트**: Inter, Noto Sans KR(메인), Roboto, Arial, Open Sans, Helvetica, Malgun Gothic

## 품질 체크리스트
- [ ] 배경 이미지 정상 생성
- [ ] 텍스트 오버레이 가독성 확인
- [ ] 한글 텍스트 100% 정확
- [ ] 해상도 >= 1080x1080
- [ ] 브랜드 컬러 준수
- [ ] ⛔ **PNG 렌더링 완료**: HTML 생성 후 반드시 Playwright로 PNG 렌더링 실행 확인

## 캐러셀/스토리텔링 비주얼 일관성 규칙
- 슬라이드/캐러셀형 콘텐츠 제작 시, 전체 슬라이드에서 **동일한 비주얼 컨셉**을 유지할 것
  - 1번 슬라이드가 실사형이면 전체 실사형, 일러스트면 전체 일러스트
  - 스타일 혼재 절대 금지 (실사+만화+아이콘 섞기 X)
- **통일된 컬러 팔레트** 사용
  - 슬라이드 1에서 정한 주요 색상(Primary/Secondary/Accent)을 전체에 일관 적용
  - 감정 변화(어두운→밝은)는 같은 색상 계열 내 명도/채도로 표현
- 폰트 스타일도 통일 (같은 서체, 같은 가중치 규칙)

## 모바일 퍼스트 타이포그래피 규칙
- **타겟 디바이스: 모바일 (사용자 80%가 모바일)**
- 광고/카드뉴스의 텍스트는 모바일 화면에서 **즉시 읽을 수 있는 크기**여야 함
- 최소 폰트 크기 가이드 (1080px 기준):
  - 헤드라인: 60px 이상
  - 서브카피/본문: 36px 이상
  - 부가 정보(출처 등): 24px 이상
- 한글은 영문보다 복잡한 자형이므로 **영문 기준보다 10~20% 더 크게**
- 광고 카피가 작아서 안 읽히면 광고 효과 0 — **가독성이 디자인보다 우선**
- Gemini 이미지 생성 시 프롬프트에 "large bold Korean text, easily readable on mobile" 포함
- 폰트 우선순위: Pretendard → Noto Sans KR → system sans-serif
- Pretendard 설치 경로: ~/.local/share/fonts/Pretendard/
- 가용 웨이트: Thin(100) ~ Black(900) + Variable

## 적합한 용도
- CTA 포함 광고 (가격, 기한, 할인율, 행동 유도 버튼)
- 포토리얼 배경 + 한글 텍스트 조합
- 캐러셀 광고 (Hook/본문/CTA 슬라이드 모두 대응)
- 캐러셀 CTA 슬라이드 (정확도 필수 — 강제 라우팅)
- 브랜드 캠페인 이미지
- 가격/수치 정확 금융 광고 (금소법 준수)
- A/B 테스트 텍스트 배리에이션 (배경 고정, 텍스트만 교체)
- 브랜드 컬러 HEX 값 정확 재현 필요 시
- 로고/CI SVG/PNG 레이어 삽입 필요 시

## 부적합한 용도
- 없음 (범용 스킬). 단, satori-cardnews 대비 83배 느림 (25초 vs 0.3초) — 속도 민감 시 satori 우선 검토

## 참고
- 테스트 보고서: `/home/jay/workspace/memory/reports/task-859.1.md`
- 산출물: `/home/jay/workspace/tools/ai-image-gen/output/v4-hybrid/`