# task-1616.1 완료 보고서: 네이버 블로그 이미지 생성 품질 근본 개선

## SCQA

**S**: 대시보드 네이버블로그 탭에서 `[이미지프롬프트: type|description]` 기반 이미지 생성 파이프라인이 운영 중이며, Gemini(`gemini-3-pro-image-preview`), Satori, Claude CLI HTML→PNG, GPT Image 4가지 경로가 `image_router.py`에 구현되어 있다.

**C**: 2가지 치명적 품질 문제 발생. (1) 영어 프롬프트 텍스트가 이미지 안에 그대로 렌더링됨 — Gemini preview 모델이 systemInstruction의 "NEVER render the description text" 지시를 무시함. (2) 이미지 품질 자체가 낮음 — 단순 도형, 글자 깨짐, 레이아웃 조잡. 근본 원인: AI가 생성한 블로그 콘텐츠에서 `[이미지프롬프트: ...]` 태그가 올바른 유형으로 구분되지 않아 대부분 `photo` → Gemini 경로로 빠짐. Gemini image-preview 모델의 구조적 한계로 텍스트-이미지 분리 불가.

**Q**: 유형별 라우팅을 재설계하고 모델을 교체하여, 프롬프트 텍스트 렌더링 문제를 원천 제거하고 이미지 품질을 네이버 블로그 상위 콘텐츠 수준으로 끌어올릴 수 있는가?

**A**: 3-Phase 개선 계획 수립. Phase 1(1~2일): 구조형 콘텐츠(comparison_table/checklist/infographic)를 이미 검증된 HTML→PNG 경로로 통일 + 디자인 프롬프트 강화. Phase 2(3~5일): photo 타입에 Imagen 3 vs GPT Image A/B 테스트 후 primary 모델 결정, Gemini preview 의존 탈피. Phase 3(1~2주, 선택): CSS 디자인 토큰 시스템 및 HTML 템플릿 라이브러리 구축.

---

## 1. 현재 파이프라인 상세 흐름도

```
[프론트엔드: NaverBlogView.js]
  ├─ parseImagePrompts(): [이미지프롬프트: type|description] 파싱
  ├─ parseImageDescriptions(): [이미지: description] 파싱 (type="photo" 기본값)
  └─ POST /api/naver-blog/generate-images {prompts: [{type, description}]}

[server.py: _generate_blog_images()]
  ├─ type=="photo" → Claude Haiku로 한→영 프롬프트 변환 → image_router(purpose="광고")
  └─ type!="photo" → image_router(purpose=type, prompt="[type] description")

[image_router.py: generate_image()]
  ├─ "광고"     → _generate_gemini() → fallback: _generate_gpt()
  ├─ "cardnews" → _generate_satori() → fallback: 없음
  ├─ "hybrid"   → _generate_hybrid() → fallback: _generate_gemini()
  └─ "infographic/comparison_table/checklist/process_flow/chart"
                → _generate_infographic() → fallback: _generate_satori()

[_generate_gemini() → gemini_pro_generate.py]
  모델: gemini-3-pro-image-preview (실패시 gemini-3.1-flash-image-preview)
  인증: SA Bearer 토큰 (generative-language scope)
  systemInstruction: "NEVER render the description text" (무시됨)

[_generate_infographic() → Claude CLI + Playwright]
  1. Claude CLI(haiku): 한국어 설명 → HTML 코드 생성 (_prompt_to_html)
  2. Playwright: HTML → PNG 렌더링 (_render_html_to_png)
  ★ 이 경로는 텍스트 렌더링 문제 없음, 한국어 폰트 완벽 지원
```

## 2. 문제 근본 원인 분석

### 원인 1: Gemini image-preview 모델의 구조적 한계
- `gemini-3-pro-image-preview`는 preview 단계 모델로, systemInstruction 준수율이 낮음
- "NEVER render the description text" 지시에도 불구하고 프롬프트의 서술적 텍스트를 이미지 내에 렌더링
- Claude Haiku가 생성한 영어 프롬프트가 너무 서술적이어서 Gemini가 이미지 내 텍스트로 해석하는 경향

### 원인 2: 유형 분류 누락으로 잘못된 경로 진입
- 블로그 AI가 `[이미지프롬프트: photo|비교표 설명]` 처럼 비교표/체크리스트도 photo로 유형 지정
- 또는 `[이미지프롬프트: ...]` 태그 자체를 생성하지 않아 `[이미지: ...]` → photo 기본값으로 fallback
- 결과: 전체 이미지의 대부분이 Gemini photo 경로로 진입 → 구조형 콘텐츠도 포토리얼리스틱으로 생성 시도

### 원인 3: 프롬프트 엔지니어링 부족
- 블로그 생성 프롬프트(server.py L365-371)에 이미지프롬프트 규칙이 명시되어 있으나, AI 모델이 유형 분류를 정확히 수행하지 않음
- 유형 선택 가이드라인이 부족하여 AI가 기본적으로 photo를 선호

## 3. Agent Meeting 결과

**참석자**: 이미지 엔지니어, 디자인 전문가, 레드팀 (3명)

### 전원 동의 사항
- **유형별 라우팅 재설계가 최우선 과제** — 모델 교체만으로는 불충분
- **구조형 콘텐츠(infographic/comparison_table/checklist)는 HTML→PNG 경로로 통일** — 이미 `_generate_infographic()`에 검증된 파이프라인 존재
- **Gemini image-preview 의존 탈피** — preview 모델은 생산 환경에 부적합

### 2명 이상 동의 사항
- Imagen 3(`imagegeneration@006`) 또는 GPT Image v2로 photo 모델 교체 (A/B 테스트 후 결정)
- HTML 생성 프롬프트에 네이버 블로그 디자인 명세 포함 (Noto Sans KR, 컬러 팔레트, 그리드 시스템)

### 레드팀 경고
- Imagen 3 도입 시 Vertex AI 별도 SA 권한 필요, 인증 구조 차이 확인 필요
- Playwright 장기 운영 시 메모리 누수/좀비 프로세스 리스크 모니터링 필요
- Claude CLI 토큰 비용 모니터링 체계 선행 구축 필요

## 4. 최적 방안 + 구현 계획

### Phase 1: 즉시 적용 가능한 개선 (1~2일)
1. **블로그 생성 프롬프트 강화** (server.py L365-371)
   - 유형 선택 가이드라인 구체화: "비교표가 있으면 반드시 comparison_table, 목록이면 checklist" 등
   - photo 유형 사용 최소화 지침 추가
2. **`_prompt_to_html()` 디자인 명세 추가** (image_router.py L330-363)
   - Noto Sans KR 폰트 CDN
   - 네이버 블로그 친화적 컬러 팔레트 (#03C75A 네이버 그린, #444 본문)
   - 740x500px 기준 레이아웃
3. **회귀 테스트**: 기존 infographic 경로 정상 작동 확인

### Phase 2: photo 모델 교체 (3~5일)
1. Imagen 3 (`imagegeneration@006`) Vertex AI 연동 추가
2. Claude Haiku 영어 프롬프트 → Imagen 3 최적화 프롬프트로 변환
3. GPT Image v2 vs Imagen 3 A/B 테스트 (동일 프롬프트 20건)
4. 테스트 기준: 텍스트 렌더링 여부(0건 목표), 해상도, 레이턴시(5초 이내), 비용
5. Gemini preview → fallback 3순위로 강등 또는 제거

### Phase 3: 디자인 시스템 강화 (1~2주, 선택적)
1. HTML→PNG 경로용 CSS 디자인 토큰 시스템 구축
2. 유형별 HTML 템플릿 라이브러리 5~7종
3. Playwright 안정성 개선 (프로세스 풀, 타임아웃)
4. 비용 모니터링 대시보드

### 리스크
- **프론트엔드 type 필드 확인 필수**: 현재 AI가 `[이미지프롬프트: ...]` 를 생성하지 않으면 모두 photo로 기본값 처리됨 → Phase 1의 프롬프트 강화가 전제 조건
- **Imagen 3 한국 리전 미지원 시**: GPT Image v2를 primary로 전환
- **Playwright 메모리 누수**: 프로세스 풀 크기 제한 + 헬스체크 추가

## 5. 참조 코드 경로

- `/home/jay/workspace/dashboard/server.py` — L941-1010: `_generate_blog_images()`, L320-399: 블로그 생성 프롬프트
- `/home/jay/workspace/tools/ai-image-gen/image_router.py` — 전체: 라우팅, 생성 함수, fallback 체인
- `/home/jay/workspace/tools/ai-image-gen/gemini_pro_generate.py` — 전체: Gemini API 호출
- `/home/jay/workspace/dashboard/components/NaverBlogView.js` — L516-537: parseImagePrompts/Descriptions

## 모델 사용 기록

- 팀장 마르둑(Opus): 파이프라인 분석, 근본 원인 진단, 보고서 작성
- Agent Meeting (Sonnet): 3명 페르소나 미팅 진행 — 이미지 엔지니어, 디자인 전문가, 레드팀