# Satori HTML→SVG→PNG 이미지 생성 테스트 (issue-040 항목 ⑤)

## 배경
- MktingAuto todo의 issue-040: 광고 이미지 생성 방법 6가지 중 ⑤번 미테스트 항목
- Satori: Vercel 공식 오픈소스 (GitHub ★13,200+), HTML/CSS → SVG 변환 라이브러리
- GitHub: https://github.com/vercel/satori
- 특징: JSX 문법, Flexbox 레이아웃 엔진 (React Native 동일), TTF/OTF/WOFF 폰트 지원
- PNG 변환: Satori(HTML→SVG) + resvg-js(SVG→PNG) 조합

## 목표
Satori + resvg-js 파이프라인으로 광고 이미지를 생성하고, 기존 방법들과 비교 평가한다.

## 작업 내용

### Phase 1: Satori 설치 및 환경 구성

1. **프로젝트 셋업**:
   ```bash
   mkdir -p /home/jay/workspace/tools/ai-image-gen/satori-test
   cd /home/jay/workspace/tools/ai-image-gen/satori-test
   npm init -y
   npm install satori @resvg/resvg-js sharp
   ```

2. **한글 폰트 준비**:
   - 시스템에 설치된 한글 폰트 확인 (`fc-list :lang=ko`)
   - Noto Sans KR 또는 Pretendard 등 사용
   - 폰트 파일을 로컬에 다운로드하여 Satori에 전달

3. **기본 동작 검증**:
   - 간단한 HTML → SVG → PNG 파이프라인 테스트
   - 한글 텍스트 렌더링 확인

### Phase 2: 광고 이미지 생성 테스트

기존 테스트와 동일한 3가지 시나리오:

**시나리오 A - 리크루팅 광고**
- 키워드: 보험대리점, 전직, 새로운 시작, 전문직
- 톤: 전문적, 신뢰감, 따뜻한 조명
- 디자인: 그래디언트 배경 + 큰 헤드라인 + 서브텍스트 + CTA 버튼

**시나리오 B - 브랜딩 광고**
- 키워드: 보험컨설팅, 연금, VIP, 프리미엄
- 톤: 고급스러운, 세련된, 금빛/다크톤
- 디자인: 다크 배경 + 골드 악센트 + 럭셔리 타이포그래피

**시나리오 C - 전직 유도 광고**
- 키워드: GA이직, 지금이 기회, 변화, 도약
- 톤: 시네마틱, 드라마틱, 임팩트
- 디자인: 볼드 타이포그래피 + 강렬한 컬러 대비 + 모션감 있는 레이아웃

**구현 방식**:
- JSX로 광고 레이아웃 정의 (Satori의 React-like JSX 문법)
- CSS Flexbox로 레이아웃 구성
- 1080x1080 (Instagram 정방형) 사이즈
- 각 시나리오를 Node.js 스크립트로 생성

**스크립트 구조**:
```
satori-test/
├── generate.js          # 메인 생성 스크립트
├── scenarios/
│   ├── recruiting.js    # 시나리오 A 디자인
│   ├── branding.js      # 시나리오 B 디자인
│   └── career.js        # 시나리오 C 디자인
├── fonts/               # 한글 폰트
└── package.json
```

### Phase 3: 결과 비교 분석

기존 테스트 결과와 비교:
- **Gemini Pro Image** (현재 최고): 25.4초, 621KB, 프롬프트 준수도 최상 (AI 생성)
- **하이브리드** (AI배경+HTML): 텍스트 100% 정확, ~25초
- **HTML 캐러셀**: 카드뉴스 수준, 텍스트 100% 정확, ~2초

비교 항목:
- 생성 시간 (Satori는 로컬 변환이라 매우 빠를 것으로 예상)
- 이미지 품질 (그래픽 디자인 수준)
- 한글 텍스트 정확도 (100% 예상 — HTML 기반이므로)
- 자동화 용이성 (코드 기반이므로 높을 것)
- AI 생성 이미지 대비 디자인 한계 (포토리얼리스틱 불가)
- 비용 (무료, 로컬 실행)

**Satori의 예상 강점**:
- 텍스트 100% 정확 (HTML 렌더링)
- 극도로 빠른 속도 (로컬, AI API 호출 없음)
- 완전 무료
- 재현성 100%
- 코드 기반으로 템플릿화 용이

**Satori의 예상 약점**:
- 포토리얼리스틱 이미지 불가 (CSS 그래디언트/도형만 가능)
- AI 이미지 대비 시각적 임팩트 제한

## 산출물

### 필수
1. 생성된 이미지: `/home/jay/workspace/tools/ai-image-gen/output/v7-satori/` (버전 폴더 필수!)
2. 생성 스크립트: `/home/jay/workspace/tools/ai-image-gen/satori-test/`
3. 보고서: `/home/jay/workspace/memory/reports/task-{task_id}.md`

### 보고서 포함 사항
- 설치/설정 과정 기록
- 한글 폰트 렌더링 결과
- 각 시나리오 생성 결과 (시간, 크기, 품질)
- 기존 방법과의 비교표 (특히 속도와 디자인 품질)
- MktingAuto 파이프라인 통합 적합성 판단
- Satori를 카드뉴스/배너 템플릿 엔진으로 활용할 가치가 있는지

## 주의사항
- ⚠️ 기존 출력 폴더(v1~v6) 절대 건드리지 말 것
- 새 이미지는 반드시 `output/v7-satori/`에만 저장
- Node.js 프로젝트는 `tools/ai-image-gen/satori-test/`에 생성