# 블로그 이미지 템플릿 기반 아키텍처 전환 구현

## 한정승인

## PRD 참조 (필수 읽기)
- Agent Meeting 결과: `/home/jay/workspace/memory/meetings/2026-04-12-blog-image-strategy-redesign.md`
- task-1695.1 보고서: `/home/jay/workspace/memory/reports/task-1695.1.md`

## 배경
Agent Meeting 전원 합의: **사전 정의 Satori 템플릿 + LLM JSON 데이터 추출** 방식으로 아키텍처 전환.
- 기존: LLM이 매번 HTML 생성 (비결정적 → 7번 실패)
- 변경: LLM은 JSON 데이터 추출만 + 고정 템플릿으로 렌더링 (결정적 → 일관된 품질)

## 구현 내용

### 1. image_router.py 수정
- `_prompt_to_html()` → `_extract_structured_json()` 교체
- LLM(Claude CLI)은 프롬프트에서 **구조화된 JSON 데이터만 추출**:
  ```json
  {
    "type": "comparison_table",
    "title": "독립GA vs 계열GA 비교",
    "items": [
      {"label": "독립GA", "features": ["보험사 선택 자유", "높은 수수료"]},
      {"label": "계열GA", "features": ["본사 지원", "제한된 상품"]}
    ]
  }
  ```
- HTML 생성 자체를 하지 않음 → 프롬프트 텍스트가 이미지에 렌더링되는 문제 원천 차단

### 2. satori_cli.js 수정 — --json 모드 추가
- `--json` 플래그: JSON 데이터 입력 → 유형별 고정 레이아웃으로 렌더링
- 5유형별 레이아웃 셸:
  - **infographic**: 제목 + 3열 카드 + 하단 CTA
  - **comparison_table**: 2~3열 비교표 + 체크마크/X
  - **checklist**: 세로 리스트 + 체크박스 아이콘
  - **process_flow**: 3~5단계 수평 화살표 흐름도
  - **chart**: 바 차트 또는 통계 수치 카드

### 3. design-tokens.json 생성
- 색상 팔레트 (primary/secondary/accent)
- 폰트 크기 위계 (제목 28px / 서브 20px / 본문 14px)
- 여백/패딩 기준
- 광고 배너 ad-banner-specs.md의 검증된 디자인 기준 반영

### 4. Composition 패턴
- 레이아웃 셸 5개 + design-tokens.json 분리
- 새 유형 추가 시 셸만 추가 (기존 수정 없음)

### 5. 테스트
- 5유형 × 3프롬프트 = 15개 이미지 생성
- 모든 이미지에서:
  - 프롬프트 텍스트 렌더링 0건
  - 폰트 크기 기준 충족
  - 레이아웃 일관성 확인

## 참조 파일
- image_router.py: `/home/jay/workspace/tools/ai-image-gen/image_router.py`
- satori_cli.js: `/home/jay/workspace/tools/ai-image-gen/satori-test/satori_cli.js`
- ad-banner-specs.md: `/home/jay/workspace/dashboard/data/ad-banner-specs.md`
- 기존 테스트: `/home/jay/workspace/tools/ai-image-gen/test_image_router.py`

## 보고서
`/home/jay/workspace/memory/reports/task-{TASK_ID}.md`