# 블로그 이미지에 광고 배너 QA 노하우 체계적 적용

## Lv.3 작업

## 배경
블로그 이미지 생성 품질이 광고 배너 대비 현저히 낮음. 광고 배너 작업에서 학습된 QC 게이트, 디자인 일관성, 한글 타이포 노하우가 블로그 이미지 파이프라인에 미반영.

## 기존 광고 배너 노하우 참조 (필수 읽기)
- 배너 스펙: `/home/jay/workspace/dashboard/data/ad-banner-specs.md`
- 배너 QC 관련 코드/스킬 검색: `grep -rn "banner.*qc\|image.*qc\|quality.*gate\|qc.*gate" /home/jay/workspace/`
- 배너 버전 관리: `/home/jay/workspace/dashboard/data/banner-versions.json`
- Satori 카드뉴스 스킬: `/home/jay/workspace/skills/satori-cardnews/SKILL.md`
- 하이브리드 이미지 스킬: `/home/jay/workspace/skills/hybrid-image/SKILL.md`

## 구현 내용

### 1. 블로그 이미지 디자인 가이드라인 정립
`/home/jay/workspace/tools/ai-image-gen/blog-image-guidelines.yaml` 생성:

```yaml
typography:
  title_min_size: 28px
  body_min_size: 16px
  word_break: keep-all  # 한글 조사 분리 방지
  emphasis: bold  # 강조 텍스트는 반드시 Bold
  subtitle_hierarchy: true  # 제목 > 서브제목 > 본문 크기 위계 필수
  line_height: 1.6  # 최소 행간
  
layout:
  text_area_ratio_max: 0.4  # 텍스트가 전체 면적의 40% 이하
  padding_min: 32px
  element_gap_min: 16px
  cta_position: bottom_right  # CTA 버튼 위치 고정
  
color:
  palette_consistency: true  # 동일 글 내 이미지 색상 통일
  contrast_min: 4.5  # WCAG AA
  background_options:
    - dark_bg_light_text  # 진한 배경 + 밝은 글자
    - light_bg_dark_text  # 밝은 배경 + 진한 글자
  mid_tone_prohibition: true  # 중간 톤 배경+글자 금지

quality:
  min_width: 800
  min_height: 400
  min_file_size_kb: 15
  blank_detection: true  # 빈 이미지 감지
```

### 2. Claude CLI 프롬프트에 가이드라인 주입
`_prompt_to_html()` 호출 시 시스템 프롬프트에 위 가이드라인을 포함:
- 제목/본문 폰트 크기 위계
- 텍스트 영역 40% 이하 제한
- word-break: keep-all 필수
- 색상 대비 WCAG AA 필수
- CTA 있으면 우하단 배치

### 3. 동일 글 내 디자인 일관성 보장
현재: 각 이미지가 독립적으로 생성 → 색상/스타일 제각각
개선:
- 첫 번째 이미지 생성 시 색상 팔레트 결정 (primary/secondary/accent)
- 이후 이미지에 동일 팔레트 전달
- `_generate_blog_images()` 함수에서 palette 변수를 공유

### 4. 블로그 이미지 QC 게이트 강화
`_validate_image_quality()` 함수 확장:
- 기존: 파일 크기, 해상도, 빈 이미지
- 추가:
  - 텍스트 영역 비율 추정 (밝은 픽셀 비율 기반 heuristic)
  - 색상 다양성 검사 (unique color count — 너무 단조로우면 경고)
  - 이미지 밝기 분포 (전체 너무 어둡거나 너무 밝으면 경고)
- QC 실패 시: satori fallback 트리거 또는 프롬프트 자동 단순화 후 재생성

### 5. Satori 인포그래픽 레이아웃 개선
satori_cli.js의 4종 레이아웃에 가이드라인 반영:
- 폰트 크기 위계 적용
- 패딩/간격 최소값 보장
- 색상 팔레트 파라미터 수용

## 참조 파일
- 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`
- server.py 이미지 생성: `/home/jay/workspace/dashboard/server.py` (line 971)
- ad-banner-specs.md: `/home/jay/workspace/dashboard/data/ad-banner-specs.md`

## 테스트
1. 블로그 글 작성 → 이미지 5개 생성 → 모두 성공 확인
2. 5개 이미지의 색상 팔레트 일관성 확인
3. 폰트 크기 위계 확인 (제목 > 서브 > 본문)
4. 텍스트 영역 비율 40% 이하 확인
5. QC 게이트 실패 → fallback 동작 확인

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