# task-1389.1 완료 보고서 — Phase 3 배너 디자인 제작 (1차 3셀)

**작성자**: 헤르메스 (dev1-team 팀장)
**작성일**: 2026-04-04
**검증 레벨**: critical

---

## SCQA

**S**: 카피 v3.2가 확정되어 9셀 3×3 매트릭스의 모든 카피가 준비 완료. 15선 디자인 컨셉 카탈로그가 concept-catalog에 구축되어 있음.

**C**: Phase 3 진입 — 카피는 있으나 실제 광고 배너가 없어 캠페인 운용 불가. 우선 "정당한 보상" 메시지 3개 브랜드 변형(셀 ①④⑦) 먼저 제작 필요.

**Q**: v3.2 카피와 15선 컨셉을 결합하여 채널별 광고 배너를 제작할 수 있는가?

**A**: 3개 셀 × 2포맷 = 총 6종 배너 제작 완료 (Cycle 2). Playwright 렌더링 6/6 성공. 로키 DQ 평가 결과 최고 87점(셀7 1080x1080), 최저 70점(셀4 628). 93점 PASS 미달 — 1200x628 포맷의 여백 밸런스, 서브카피 줄바꿈이 주요 감점 요인. Cycle 2에서 우측 데이터 블록 추가(셀1), 서브카피 `&nbsp;` 수정(셀4), 텍스트 영역 확대(셀4/7)로 개선. Phase 3.5 DQ 반복 QC에서 93점 달성 필요.

---

## 작업 내용

### 디자인 컨셉 선택
- **셀 1 (인카×정당한보상)**: 38-cannes-grid-opportunity — CSS grid+gold 메탈릭 (97점 검증, CSS-only)
- **셀 4 (GA×정당한보상)**: 33-meritz-style — 다크 테크+레드 경고 (포토 배경)
- **셀 7 (서울대보험쌤×정당한보상)**: 35-hybrid-v4-refined-A — 포토+크림 패널 (96점 검증)

### 셀별 디자인 특성
- 셀 1: 분노+호기심 → 딥 네이비+골드 그리드, 우측 데이터 블록으로 시각적 밸런스
- 셀 4: 분노+두려움 → 다크+레드 글로우, 경고/긴급 톤
- 셀 7: 공감+두려움 → 따뜻한 브라운+크림 패널, 개인적 1인칭 톤

---

## 산출물

### HTML 템플릿 (6개)
- `/home/jay/workspace/output/banners/cell-1-incar-fair/meta-feed-1080x1080.html`
- `/home/jay/workspace/output/banners/cell-1-incar-fair/google-resp-1200x628.html`
- `/home/jay/workspace/output/banners/cell-4-ga-fair/meta-feed-1080x1080.html`
- `/home/jay/workspace/output/banners/cell-4-ga-fair/google-resp-1200x628.html`
- `/home/jay/workspace/output/banners/cell-7-snu-fair/meta-feed-1080x1080.html`
- `/home/jay/workspace/output/banners/cell-7-snu-fair/google-resp-1200x628.html`

### 렌더링 PNG (6개)
- `/home/jay/workspace/output/banners/cell-1-incar-fair/meta-feed-1080x1080.png`
- `/home/jay/workspace/output/banners/cell-1-incar-fair/google-resp-1200x628.png`
- `/home/jay/workspace/output/banners/cell-4-ga-fair/meta-feed-1080x1080.png`
- `/home/jay/workspace/output/banners/cell-4-ga-fair/google-resp-1200x628.png`
- `/home/jay/workspace/output/banners/cell-7-snu-fair/meta-feed-1080x1080.png`
- `/home/jay/workspace/output/banners/cell-7-snu-fair/google-resp-1200x628.png`

### DQ 평가 보고서
- `/home/jay/workspace/output/banners/dq-evaluation-phase3.md`

---

## 로키 DQ 평가 결과 (Cycle 1)

| 셀 | 포맷 | DQ-01 | DQ-02 | DQ-03 | DQ-04 | DQ-05 | DQ-06 | DQ-07 | DQ-08 | DQ-09 | DQ-10 | 합계 | 판정 |
|----|------|:-----:|:-----:|:-----:|:-----:|:-----:|:-----:|:-----:|:-----:|:-----:|:-----:|:----:|:----:|
| Cell-1 | 1080 | 9 | 9 | 8 | 8 | 9 | 7 | 9 | 8 | 9 | 8 | 84 | FAIL |
| Cell-1 | 628 | 9 | 8 | 7 | 7 | 8 | 6 | 9 | 8 | 8 | 8 | 78 | FAIL |
| Cell-4 | 1080 | 8 | 8 | 7 | 9 | 9 | 7 | 9 | 7 | 9 | 7 | 80 | FAIL |
| Cell-4 | 628 | 7 | 7 | 6 | 7 | 8 | 5 | 9 | 6 | 8 | 7 | 70 | FAIL |
| Cell-7 | 1080 | 9 | 9 | 8 | 8 | 10 | 8 | 9 | 9 | 8 | 9 | 87 | FAIL |
| Cell-7 | 628 | 8 | 8 | 7 | 8 | 9 | 7 | 9 | 7 | 8 | 9 | 80 | FAIL |

**평균: 79.8점 (PASS 기준 93점)**

### Cycle 2 개선 사항
1. 셀 1 (628): 우측에 데이터 블록("1,000만원 정착지원금", "50% 직전연봉 지원") 추가 → DQ-06 밸런스 개선
2. 셀 1 (1080): 서브카피 `|` 줄머리 노출 수정 → `|` 제거, `<br>` 의미 단위 줄바꿈
3. 셀 4 (양 포맷): "1200%&nbsp;룰" `&nbsp;`로 줄바꿈 방지 → DQ-03/DQ-08 개선
4. 셀 4 (1080): 서브카피 2줄로 의미 단위 분리 → 가독성 개선
5. 셀 7 (1080): 서브카피 "검증된 조직" 앞 `|` 제거, 단독 줄로 분리
6. 셀 7 (628): 텍스트 영역 720px→780px 확대 → 서브카피 1줄 수용 개선

### 핵심 진단 (로키)
- 1080x1080 vs 1200x628 품질 격차(평균 7-10점) — 가로형 전용 레이아웃 설계 부재
- Cell-7 감정 전달력(DQ-05: 10점) 최고, Cell-4 google-resp(70점) 최저
- 93점 달성을 위해서는 가로형 포맷별 독립 레이아웃 재설계 필요

---

## 발견 이슈 및 해결

### 자체 해결 (6건)
1. **셀 1 (1080) 서브카피 `|` 줄머리 노출** — `|` 구분자 제거, `<br>` 의미 단위 줄바꿈으로 교체
2. **셀 4 (양 포맷) "1200% 룰" orphan** — `&nbsp;`로 non-breaking space 적용
3. **셀 7 (1080/628) "| 검증된 조직" orphan** — `|` 제거, 별도 줄 처리
4. **셀 1 (628) 우측 공간 빈 여백** — 데이터 블록 2종 추가 (정착지원금/직전연봉)
5. **셀 4 (628) 텍스트 영역 협소** — 720px→760px 확대
6. **셀 7 (628) 텍스트 영역 협소** — 720px→780px 확대

### 범위 외 미해결 (1건)
1. **DQ 93점 PASS 미달** — Cycle 2 개선 수행했으나 가로형 포맷의 근본적 레이아웃 재설계가 필요. Phase 3.5 DQ 반복 QC에서 추가 수정 예정.

---

## 디자인 규칙 준수 체크리스트

- [x] Pretendard 폰트만 사용 (5 weight 로컬 파일 참조)
- [x] 모든 텍스트 40px 이상
- [x] font-weight 400 이상 (300 이하 없음)
- [x] 헤드라인 키워드 1개만 컬러 강조
- [x] 구분자 `|` 사용 (`·` 미사용)
- [x] CTA에 " →" 포함
- [x] CTA width: auto + padding + min-width: 220px
- [x] white-space: nowrap (뱃지/CTA)
- [x] word-break: keep-all (한국어)
- [x] 1080x1080 세로 중앙 배치
- [x] 헤드라인/서브카피 비율 1.3배 이상
- [x] 슬라이드 번호/내부 레이블 없음
- [x] 크로스 포맷 디자인 시스템 통일
- [x] 브랜드 격리 준수 (셀 4는 특정 회사 미언급)

---

## 렌더링 결과

- Playwright Chromium headless 렌더링
- Cycle 1: 6/6 성공, Cycle 2: 6/6 성공
- 파일 크기: 245KB ~ 773KB (채널별 용량 제한 내)

---

## 모델 사용 기록

- 팀원: 이리스(프론트엔드) / 작업 내용: 셀 1 HTML 템플릿 2종 제작 / 사용 모델: sonnet
- 팀원: 이리스(프론트엔드) / 작업 내용: 셀 4 HTML 템플릿 2종 제작 / 사용 모델: sonnet
- 팀원: 이리스(프론트엔드) / 작업 내용: 셀 7 HTML 템플릿 2종 제작 / 사용 모델: sonnet
- 횡단조직: 로키(QC) / 작업 내용: DQ 10항목 평가 6배너 / 사용 모델: opus (로키 단독 QC 규칙 준수)

---

## QC 자동 검증 결과

```json
{
  "task_id": "task-1389.1",
  "overall": "PASS",
  "summary": "5 PASS, 7 SKIP",
  "file_check": "PASS",
  "data_integrity": "PASS",
  "critical_gap": "PASS",
  "spec_compliance": "PASS",
  "duplicate_check": "PASS"
}
```

---

## 다음 단계

- Phase 3.5: DQ 반복 QC (93점 PASS까지 수정→평가 반복)
- 나머지 6셀 (②③⑤⑥⑧⑨) 배너 제작
- 채널 확장 (네이버 GFA 1250x560, 당근마켓 1080x1080 등)
