# 벤치마킹 결과 → 광고 배너 제작 통합 로드맵

> **작성일**: 2026-03-28
> **작성**: dev5-team (엔키 / 백엔드 개발자)
> **목적**: 4개 트랙 벤치마킹에서 도출된 20개 디자인 컨셉을 실제 광고 배너 제작에 접목하기 위한 실행 가이드
> **⚠️ 주의**: 카드뉴스 전용 도구는 광고 배너에 사용 금지

---

## 목차

1. [제작 프로세스 6단계 워크플로우](#1-제작-프로세스-6단계-워크플로우)
2. [20개 컨셉-도구 매칭 테이블](#2-20개-컨셉-도구-매칭-테이블)
3. [팀 역할 분담](#3-팀-역할-분담)
4. [디자인 브리프 템플릿](#4-디자인-브리프-템플릿)
5. [Quick Win 3가지 실행 계획](#5-quick-win-3가지-실행-계획)
6. [중장기 인프라 로드맵 Phase 1~3](#6-중장기-인프라-로드맵-phase-13)

---

## 1. 제작 프로세스 6단계 워크플로우

제이회장님이 컨셉을 선택한 이후 실제 배너가 출력되기까지의 표준 워크플로우.

---

### Step 1 — 컨셉 선택 (제이회장님)

- 20개 컨셉 중 캠페인 목적에 맞는 컨셉 1~3개 선택
- 선택 기준: 타겟 페르소나, 플랫폼(Meta/Instagram/LinkedIn), 메시지 유형(모집/교육/전환)
- 출력: 선택된 컨셉 번호 + 간략한 의도 메모

---

### Step 2 — 디자인 브리프 작성 (마케팅팀)

- 4절 디자인 브리프 템플릿(섹션 4 참조)에 따라 작성
- 필수 항목: 타겟 페르소나, 핵심 메시지 1줄, 수치/증거 자료, CTA 문구
- 소요 시간: 30분 이내
- 출력: 완성된 브리프 JSON 또는 문서

---

### Step 3 — 도구 선정 및 시안 개발 (개발팀 + 디자인팀)

- 컨셉-도구 매칭 테이블(섹션 2) 기준으로 최적 도구 확정
- 개발팀: 도구별 템플릿 코드 작성 또는 기존 템플릿 파라미터 수정
- 디자인팀: 색상/폰트/레이아웃 세부 값 결정
- 소요 시간: 1~2시간 (신규 템플릿), 15분 이내 (기존 템플릿 재사용)

---

### Step 4 — A/B 변형 생성 (개발팀)

- JSON 파라미터 블록 기반으로 최소 2개 변형(A/B) 자동 생성
- 변형 요소: 헤드라인 문구, 배경색, CTA 버튼 색상, 수치 강조 방식
- 각 변형을 PNG로 일괄 렌더링
- 소요 시간: 30분 이내 (자동화 완료 후)

---

### Step 5 — 검수 및 피드백 (제이회장님 + 마케팅팀)

- 생성된 PNG 시안을 Telegram 채널에 공유
- 피드백 기준: 메시지 명확성, 브랜드 일관성, CTA 가시성
- 수정 사이클: 최대 2회 (3회 이상 시 브리프 재작성 권고)
- 최종 승인 후 다음 단계 진행

---

### Step 6 — 배포 및 성과 추적 (마케팅팀)

- 승인된 PNG를 Meta Ads Manager / Instagram에 업로드
- UTM 파라미터 설정으로 컨셉별 CTR/전환율 추적
- 2주 후 성과 데이터를 브리프 템플릿 히스토리에 기록
- 성과 좋은 컨셉은 템플릿 라이브러리에 "검증됨" 표시

---

## 2. 20개 컨셉-도구 매칭 테이블

> **사용 가능 도구**: `hybrid-image` | `gemini-image` | `Playwright HTML→PNG`

**도구 설명**:

- **Playwright HTML→PNG**: HTML/CSS 코드를 Chromium 브라우저에서 렌더링하여 PNG로 캡처. CSS Flexbox, linear-gradient, border-radius, font-face 모두 지원. 한글 웹폰트(Pretendard, Noto Sans KR) @font-face로 완벽 렌더링. 가장 예측 가능하고 정확한 배너 생성 도구.
- **hybrid-image**: Gemini AI로 배경 이미지(인물, 장면) 생성 후 HTML 텍스트를 오버레이. 실사 사진이 필요한 배너에 최적.
- **gemini-image**: Gemini Pro 기반 포토리얼 이미지 직접 생성. 텍스트 정확도 낮아 텍스트 적은 시각 중심 광고에 적합.

---

### Track 1 — 글로벌 어워드 컨셉 (#1~#5)

**#1 Constraint-as-Canvas (제약을 캔버스로)**

- 최적 도구: `Playwright HTML→PNG`
- 대안 도구: `hybrid-image`
- 이유: 텍스트와 단순 기하형태만으로 구성. Playwright의 Chromium 렌더링으로 CSS Flexbox 레이아웃의 정밀한 여백/비율 제어. @font-face로 한글 100% 정확. 이미지 없는 구조라 HTML→PNG 파이프라인 최적.

**#2 Expressive Typography System (표현적 타이포그래피)**

- 최적 도구: `Playwright HTML→PNG`
- 대안 도구: `hybrid-image`
- 이유: 타이포그래피가 핵심 비주얼인 컨셉. 대형 글자 크기 대비, font-weight 조합이 필요. Playwright의 Chromium 렌더링으로 Pretendard/Noto Sans KR 웹폰트 @font-face 완벽 지원. CSS `font-size`, `font-weight`, `letter-spacing` 완전 제어 가능.

**#3 Anti-Polish Authenticity (날것의 진정성)**

- 최적 도구: 실제 사진 촬영 + `hybrid-image` 텍스트 오버레이
- 대안 도구: `Playwright HTML→PNG` (사진 직접 삽입 시)
- 이유: 핵심은 "가공되지 않은 진짜 사진"이므로 AI 생성 이미지로는 의도가 훼손됨. 실제 FA/고객 사진 촬영 후 `hybrid-image`로 최소한의 텍스트 오버레이 추가. 현재 도구로 부분적 구현만 가능.

**#4 Reality-Fantasy Dissolution (현실-환상 경계 해소)**

- 최적 도구: `gemini-image` (+ 외부 합성 도구 필요)
- 대안 도구: 현재 도구 스택으로 완전 구현 어려움
- 이유: VFX 수준의 현실+환상 합성이 필요한 컨셉. `gemini-image`로 기본 이미지 생성 가능하나, 포토리얼리스틱 합성 품질은 불확실. 중장기 Phase 2~3에서 전문 도구 도입 후 구현 권장.

**#5 Symbol-as-Campaign (심볼이 캠페인)**

- 최적 도구: `Playwright HTML→PNG`
- 대안 도구: `hybrid-image`
- 이유: SVG 심볼/아이콘 + 텍스트 조합. Playwright의 Chromium 렌더링으로 인라인 SVG 아이콘을 HTML에 직접 삽입 가능. 일관된 심볼 시스템을 HTML/CSS 템플릿으로 관리하기에도 적합.

---

### Track 2 — 금융/보험/리쿠르팅 업계 컨셉 (#6~#10)

**#6 Dark Premium (다크 프리미엄)**

- 최적 도구: `Playwright HTML→PNG`
- 대안 도구: `hybrid-image`
- 이유: 어두운 배경(`#0D0D0D`~`#1A1A1A`) + 골드 텍스트(`#C9A84C`) + 대형 수치/헤드라인 구조. 텍스트 중심이므로 Playwright HTML/CSS 템플릿으로 완전 구현 가능. `background-color`, `color`, `font-weight: 900` 조합이면 충분. Goldman Sachs, 삼성화재 스타일 직접 복제 가능.

**#7 Impact Number (임팩트 숫자)**

- 최적 도구: `Playwright HTML→PNG`
- 대안 도구: `hybrid-image`
- 이유: 핵심 수치를 초대형(80~120px)으로 배치하는 텍스트 중심 컨셉. Playwright HTML/CSS의 `font-size`, `font-weight`, `color` 속성으로 수치 강조 완전 제어. "1,200%" "상위 3%" 같은 보험/리쿠르팅 수치에 즉시 적용 가능.

**#8 Emotional Narrative (감성 내러티브)**

- 최적 도구: `hybrid-image`
- 대안 도구: `gemini-image` + `Playwright HTML→PNG` 오버레이
- 이유: 실제 사람의 감성적 표정/상황 사진이 핵심. `hybrid-image`로 Gemini 배경(감성적 장면) 생성 후 HTML 텍스트 오버레이 추가. 또는 실제 인물 사진 + `hybrid-image` 텍스트 레이어. AXA, 신한라이프 스타일 응용.

**#9 Minimal Typography (미니멀 타이포그래피)**

- 최적 도구: `Playwright HTML→PNG`
- 대안 도구: `hybrid-image`
- 이유: 흰 배경 + 검정 텍스트만으로 구성하는 극도의 미니멀 스타일. Playwright HTML/CSS 템플릿으로 빠르게 구현 가능. 텍스트 3개 이하, 색상 2개 이하 제약이 오히려 간결한 HTML 구조에 최적.

**#10 Vitality Gradient (활력 그래디언트)**

- 최적 도구: `Playwright HTML→PNG`
- 대안 도구: `hybrid-image`
- 이유: CSS `background: linear-gradient(135deg, #FF6B35, #F7C948)` 형태로 Playwright의 Chromium 렌더링으로 직접 구현. CSS Flexbox와 그래디언트 100% 지원. 신한라이프 오렌지 그래디언트 직접 응용.

---

### Track 3 — GitHub 오픈소스 기술 컨셉 (#11~#15)

> **참고**: #11~#14는 "도구 선택" 영역이 아니라 "시스템 구축" 영역. 배너를 만드는 컨셉이 아니라 배너 제작 인프라를 어떻게 구성할지에 대한 컨셉.

**#11 HTML/CSS Template System**

- 구축 방법: `Playwright HTML→PNG` 기반
- 적용 단계: Phase 1 (Quick Win 직후)
- 이유: HTML/CSS 템플릿 형태로 배너 템플릿을 작성하면 파라미터 교체만으로 대량 변형 생성 가능. Playwright + Chromium이 핵심 스택. CSS Flexbox, 그래디언트, 한글 웹폰트 완전 지원.

**#12 Block-based Modular Layout**

- 구축 방법: JSON 파라미터 블록 스키마 정의
- 적용 단계: Phase 1 (템플릿 라이브러리화 시)
- 이유: 배너를 Header/Visual/Body/CTA 블록으로 분리해 독립적으로 교체 가능. A/B 테스트 자동화의 핵심 구조. `Playwright HTML→PNG`와 `hybrid-image` 모두 적용 가능.

**#13 CSS Flexbox+Gradient**

- 구축 방법: `Playwright HTML→PNG`
- 적용 단계: 즉시 (현재 도구로 지원)
- 이유: Playwright의 Chromium 렌더링으로 CSS `display: flex`, `justify-content`, `align-items`가 완전 지원. `linear-gradient`도 지원. 모든 레이아웃 컨셉의 기반 기술.

**#14 HTML→PNG Pipeline**

- 구축 방법: `Playwright HTML→PNG`
- 적용 단계: Phase 1
- 이유: Playwright가 HTML/CSS를 Chromium으로 렌더링하여 PNG 직접 캡처. 별도 래스터라이즈 단계 불필요. 모든 해상도에서 정확한 렌더링. CSS 렌더링 기반이므로 웹 표준 완전 호환.

**#15 CJK Typography Minimal**

- 최적 도구: `Playwright HTML→PNG`
- 대안 도구: `hybrid-image`
- 이유: 한글(CJK) 폰트 처리가 핵심. Playwright의 Chromium 렌더링으로 @font-face를 통해 Pretendard, Noto Sans KR 웹폰트 완벽 렌더링. `gemini-image`는 한글 텍스트 정확도 낮으므로 제외.

---

### Track 4 — 레퍼런스 PDF 컨셉 (#16~#20)

**#16 Navy Typography Impact (네이비 타이포그래피 임팩트)**

- 최적 도구: `Playwright HTML→PNG`
- 대안 도구: `hybrid-image`
- 복제 가능성: 상
- 이유: 네이비 배경(`#1A2B5E`) + 흰색 헤드라인 + 소형 빨강 액센트. 텍스트만으로 구성된 구조로 Playwright HTML/CSS 템플릿에 최적. "서울대 경영전략컨설팅 출신" 같은 권위/신뢰 메시지 배너에 즉시 적용.

**#17 Number Impact News Flash (숫자 임팩트 뉴스플래시)**

- 최적 도구: `Playwright HTML→PNG`
- 대안 도구: `hybrid-image`
- 복제 가능성: 상
- 이유: "1,200%룰" "2배 소득" 같은 핵심 수치를 초대형으로 배치. 텍스트/숫자 중심. 빨강 액센트(`#E52121`)로 긴급성 표현. Playwright HTML/CSS에서 `font-size: 96px`, `font-weight: 900` 조합으로 즉시 구현 가능.

**#18 Person Photo+Text Hybrid (인물사진+텍스트 하이브리드)**

- 최적 도구: `hybrid-image`
- 대안 도구: `Playwright HTML→PNG` (인물 사진 직접 삽입 시)
- 복제 가능성: 중상
- 이유: 실제 FA 인물 사진(반신상) + 우측에 텍스트 블록 배치. `hybrid-image`로 Gemini 배경 생성 후 HTML 텍스트 오버레이. 또는 실제 사진을 `img` 태그로 직접 삽입 후 `Playwright`로 렌더링. 인물 사진 확보가 선행 조건.

**#19 Target Persona Card (타겟 페르소나 카드)**

- 최적 도구: `Playwright HTML→PNG`
- 대안 도구: `hybrid-image`
- 복제 가능성: 상
- 이유: 밝은 배경 + 원형 프로필 이미지(border-radius: 50%) + 페르소나 텍스트 블록. Playwright의 Chromium 렌더링으로 CSS `border-radius`, `object-fit: cover` 완전 지원. "온라인 전업 FA" "월 500만원+" 같은 목표 페르소나 배너에 최적.

**#20 Left-Right Split Solution (좌우 분할 솔루션)**

- 최적 도구: `hybrid-image` 또는 `Playwright HTML→PNG` + 실제 사진
- 대안 도구: `gemini-image`
- 복제 가능성: 상
- 이유: 좌측 50% 비주얼(인물/아이콘/배경) + 우측 50% 텍스트 블록. Playwright HTML/CSS의 `display: flex`, `width: 50%` 로 분할 구조 즉시 구현. 좌측 비주얼에 실제 사진 사용 시 `hybrid-image` 더 적합.

---

## 3. 팀 역할 분담

---

### 개발팀 (엔키 등)

**책임 영역**: 도구 구동, 템플릿 코드 작성, 자동화 파이프라인

- `Playwright HTML→PNG`, `hybrid-image`, `gemini-image` 도구 운영 및 유지보수
- HTML/CSS 기반 배너 템플릿 작성 (`banner-layout.html`, `hero-text`, `cta-button` 등)
- JSON 파라미터 스키마 정의 및 A/B 변형 자동 생성 스크립트 개발
- 한글 폰트(Pretendard, Noto Sans KR) @font-face 웹폰트 설정
- PNG 출력 품질 검수 (해상도 960×540 or 1080×1080, 72dpi)
- 신규 컨셉 템플릿 개발 시 디자인팀 피드백 반영

**핵심 산출물**:

- 템플릿 컴포넌트 라이브러리 (GitHub 관리)
- `render-banner.ts` 자동화 스크립트
- 파라미터 스키마 문서 (`banner-schema.json`)

---

### 디자인팀

**책임 영역**: 시각 언어 정의, 파라미터 값 결정, 품질 검수

- 컨셉별 색상 팔레트 확정 (HEX 값, 최대 3색)
- 폰트 크기/weight 계층 결정 (헤드라인/서브/CTA 각각)
- 8pt 그리드 시스템 기반 레이아웃 여백 값 지정
- 컨셉 번호별 "디자인 토큰" 문서 작성 (개발팀이 코드에 직접 사용)
- 1차 시안 검수 후 수정 요청 (최대 2회)
- 승인된 시안을 "검증된 템플릿"으로 라이브러리에 등록

**핵심 산출물**:

- 컨셉별 디자인 토큰 시트 (`design-tokens-concept-{n}.json`)
- 승인된 시안 PNG 아카이브
- 브랜드 가이드라인 (색상/폰트/여백 원칙)

---

### 마케팅팀

**책임 영역**: 브리프 작성, 컨셉 선택 지원, 성과 추적

- 캠페인별 디자인 브리프 작성 (섹션 4 템플릿 사용)
- 제이회장님의 컨셉 선택을 위한 후보 컨셉 2~3개 사전 추천
- 최종 승인된 배너를 플랫폼(Meta/Instagram/LinkedIn)에 업로드
- UTM 파라미터 설정으로 컨셉별 성과 데이터 수집
- 2주 단위 성과 리포트 작성 (CTR, 전환율, CPM)
- 성과 데이터 기반으로 다음 캠페인 컨셉 추천

**핵심 산출물**:

- 캠페인 디자인 브리프 (`brief-{YYYYMMDD}-{campaign}.md`)
- 월간 배너 성과 리포트
- 검증된 컨셉 우선순위 목록

---

### 제이회장님

**책임 영역**: 방향 결정, 최종 승인

- 마케팅팀이 추천한 컨셉 후보 중 최종 선택 (Step 1)
- 시안 검수 후 최종 승인 (Step 5)
- 성과 데이터 기반으로 다음 사이클 방향 결정

---

## 4. 디자인 브리프 템플릿

> 마케팅팀이 제작 요청 시 이 10개 항목을 작성. 미완성 브리프는 제작 착수 금지.

---

```
==== 광고 배너 디자인 브리프 ====

[1] 캠페인명
예: "1200%룰 이전 이직 유도 캠페인 2차"

[2] 선택 컨셉 번호
예: #17 Number Impact News Flash
(20개 컨셉 중 1~2개 선택. 확신 없을 시 마케팅팀 추천 요청)

[3] 타겟 페르소나
예: 35~45세 남성 / 현직 보험설계사 5년 이상 / 수입 정체 불만 / FA 이직 고민 중
(연령/성별/직업/현재 상황/심리 상태를 1~3줄로)

[4] 핵심 메시지 (1줄)
예: "1200%룰 시행 전, 지금 FA로 이직하면 소득 2배"
(광고 헤드라인이 될 1개 문장. 수치/구체성 필수)

[5] 서브 메시지 (선택)
예: "2025년 9월 규제 시행 예정 / 이 문을 닫기 전에"
(헤드라인을 보완하는 1~2줄. 긴급성/근거 제시)

[6] 수치 / 증거 자료
예: 소득 2배 근거: 월 300만원 → 600만원+ FA 사례 3건
(숫자가 있으면 반드시 포함. 없으면 사유 명시)

[7] CTA (Call-to-Action)
예: "지금 무료 상담 신청" / 랜딩 페이지: https://...
(버튼 문구 + 연결 URL. A/B용으로 2개 작성 권장)

[8] 배너 규격
- 플랫폼: Meta 피드 / Instagram 스토리 / LinkedIn
- 사이즈: 1080×1080 (정방형) / 960×540 (가로형) / 1080×1920 (세로형)
- 다중 사이즈 필요 시 모두 명시

[9] 필수 포함 요소
예: 회사 로고 (우상단) / 전화번호 / "금융소비자보호법 준수" 문구
(법적/브랜드 필수 요소 목록)

[10] 참고 시안 / 금지 사항
- 참고: 브리프 첨부 이미지 또는 URL
- 금지: 특정 색상, 경쟁사 유사 디자인, 과장 표현 등
================================
```

---

## 5. Quick Win 3가지 실행 계획

> 1~2주 내 실제 배너를 출력할 수 있는 즉시 실행 가능 과제.

---

### Quick Win #1 — Playwright HTML→PNG로 #17 "숫자 임팩트" 배너 1개 완성

**목표**: "1200%룰" 캠페인용 배너 1개를 Playwright HTML→PNG로 제작해 파이프라인 검증

**실행 계획**:

1. **Day 1** (개발팀): Playwright + Chromium 의존성 설치 확인. Pretendard 웹폰트 @font-face 로드 코드 작성.
2. **Day 1** (마케팅팀): #17 컨셉 브리프 작성. 핵심 수치("1200%룰", "소득 2배"), 서브 메시지, CTA 확정.
3. **Day 2** (개발팀): HTML/CSS 템플릿 작성. 구조:
   - 배경: `#0D0D0D` (진한 네이비/블랙)
   - 중앙: "1,200%" — `font-size: 96px`, `font-weight: 900`, `color: #E52121`
   - 하단: 서브 메시지 — `font-size: 24px`, `color: #FFFFFF`
   - 좌하단: CTA — `background: #E52121`, `padding: 12px 24px`
4. **Day 2** (개발팀): Playwright로 Chromium 렌더링 후 PNG 출력. 960×540px 확인.
5. **Day 3** (디자인팀 + 제이회장님): Telegram 공유 후 피드백. 최대 1회 수정.
6. **Day 3** 완료 기준: PNG 1개 Telegram 승인 완료.

**성공 기준**: 첫 Playwright 배너 PNG 생성 완료 + 한글 깨짐 없음 + 제이회장님 승인

---

### Quick Win #2 — Playwright로 #16 "네이비 타이포그래피" A/B 2종 자동 생성

**목표**: JSON 파라미터 교체로 A/B 2종을 자동 생성하는 Playwright 워크플로우 검증

**실행 계획**:

1. **Day 1** (개발팀): Playwright HTML 템플릿 작성. 구조:
   - 배경: 네이비 그래디언트 (`linear-gradient(135deg, #1A2B5E, #0D1A3A)`)
   - 헤드라인: Pretendard ExtraBold, 흰색, 좌측 정렬
   - 액센트 바: 하단 4px, `#C9A84C` (골드)
2. **Day 1** (마케팅팀): A안/B안 헤드라인 2개 작성.
   - A안: "서울대 출신 전략가의 방식으로 영업하세요"
   - B안: "지인영업 NO. 온라인 전략으로 월 500만원+"
3. **Day 2** (개발팀): `banner-params.json` 스키마 정의. `headline`, `subline`, `cta`, `accentColor` 4개 파라미터.
4. **Day 2** (개발팀): `render-banner.ts` 스크립트로 JSON 배열 순회 → PNG 2개 일괄 출력.
5. **Day 3** (마케팅팀): 두 PNG를 Meta Ads A/B 테스트에 동시 업로드.
6. **2주 후**: CTR 비교 데이터 수집. 결과를 브리프 히스토리에 기록.

**성공 기준**: JSON 파라미터 1개 수정으로 변형 PNG 자동 생성 확인. A/B CTR 비교 데이터 확보.

---

### Quick Win #3 — hybrid-image로 #18/#20 인물 배너 1개 제작

**목표**: 인물 사진이 포함된 배너 `hybrid-image` 워크플로우 확립

**실행 계획**:

1. **Day 1** (마케팅팀): 실제 FA 인물 사진 1장 확보 (프로필 사진 또는 전신샷). 초상권 동의 확인.
2. **Day 1** (마케팅팀): #20 "좌우 분할" 컨셉 브리프 작성. 좌측: 인물사진, 우측: "지인영업 없이 온라인으로 월 600만원 달성" + CTA.
3. **Day 2** (개발팀): `hybrid-image` 도구 호출. Gemini 배경 프롬프트: "clean white background with subtle light blue gradient, professional finance advisor setting".
4. **Day 2** (개발팀): HTML 오버레이 작성. 좌측 50%에 인물 사진, 우측 50%에 텍스트 블록.
5. **Day 3** (디자인팀): 색상 조화 검수. 인물 사진 색조와 텍스트 배경색 매칭 확인.
6. **Day 3** (제이회장님): Telegram 승인.

**성공 기준**: 인물 사진 + AI 배경 + 텍스트 오버레이가 자연스럽게 합성된 PNG 1개 승인.

---

## 6. 중장기 인프라 로드맵 Phase 1~3

---

### Phase 1 — 템플릿 라이브러리 구축 (Month 1~2)

**목표**: 검증된 컨셉 기반 재사용 가능한 배너 템플릿 10개 구축

**주요 과제**:

- Playwright HTML/CSS 템플릿 5개 작성 (#1, #6, #7, #16, #17 우선)
- Playwright HTML 템플릿 3개 추가 작성 (#2, #9, #15 우선)
- JSON 파라미터 스키마 표준화 (`headline`, `subline`, `cta`, `primaryColor`, `bgColor`, `fontWeight`)
- Pretendard + Noto Sans KR 폰트 번들 설정 완료
- 8pt 그리드 시스템 기반 여백 토큰 정의 (8 / 16 / 24 / 32 / 48 / 64px)
- GitHub 레포지토리에 템플릿 라이브러리 구조 확립

**완료 기준**:

- 10개 템플릿 각각 PNG 출력 테스트 통과
- 마케팅팀이 JSON 수정만으로 변형 생성 가능
- Quick Win 3가지 모두 완료

---

### Phase 2 — A/B 테스트 자동화 + 성과 연동 (Month 3~4)

**목표**: 배너 생성-배포-성과측정의 반자동화 파이프라인 구축

**주요 과제**:

- `render-banner-batch.ts`: JSON 배열 입력 → PNG 복수 출력 자동화
- Meta Marketing API 연동: 생성된 PNG를 API로 직접 업로드
- UTM 파라미터 자동 생성 로직 (컨셉 번호 + 변형 ID 기반)
- Google Sheets 또는 Notion DB에 성과 데이터 자동 기록
- 컨셉별 CTR/전환율 누적 대시보드 (최소 Notion 테이블)
- 성과 하위 20% 컨셉 자동 플래그 시스템

**완료 기준**:

- 브리프 JSON 입력 → 2개 이상 PNG 자동 생성 → 플랫폼 업로드까지 30분 이내
- 2주 성과 데이터 기반 컨셉별 CTR 순위 자동 생성

---

### Phase 3 — AI 개인화 + 동적 배너 (Month 5~6)

**목표**: 타겟 세그먼트별 자동 개인화 배너 생성 시스템

**주요 과제**:

- 페르소나 프로필 → 맞춤 컨셉 자동 추천 로직 (타겟 연령/직군/고민별)
- 수치 데이터 API 연동 (최신 보험 통계, FA 소득 데이터 자동 업데이트)
- `gemini-image` 기반 배경 이미지 자동 생성 (텍스트 오버레이 분리 방식)
- 시즌/이벤트 기반 자동 변형 생성 (연말정산 시즌, 설/추석 특수 등)
- #4 Reality-Fantasy Dissolution 컨셉용 외부 이미지 합성 도구 도입 검토
- 성과 데이터 기반 자동 최적화 (CTR 상위 컨셉 비중 자동 증가)

**완료 기준**:

- 주간 배너 제작 공수 현재 대비 50% 이상 절감
- 타겟 세그먼트별 CTR이 단일 컨셉 대비 20% 이상 향상

---

## 부록 — 컨셉별 빠른 참조 카드

> 제이회장님이 캠페인 목적에 맞게 컨셉을 고를 때 참고하는 1페이지 요약.

---

**모집 목적 광고** (FA 이직 유도)

- 1순위: #17 Number Impact News Flash (수치로 즉각 충격)
- 2순위: #16 Navy Typography Impact (권위/신뢰)
- 3순위: #19 Target Persona Card (타겟이 자신을 발견)

**신뢰/브랜딩 광고** (회사 이미지 구축)

- 1순위: #6 Dark Premium (프리미엄 포지셔닝)
- 2순위: #9 Minimal Typography (절제된 고급감)
- 3순위: #2 Expressive Typography (개성 있는 브랜드 목소리)

**감성/스토리 광고** (공감/사례 기반)

- 1순위: #8 Emotional Narrative (실제 사람의 이야기)
- 2순위: #18 Person Photo+Text Hybrid (인물+메시지)
- 3순위: #3 Anti-Polish Authenticity (진짜처럼 느껴지는 날것)

**데이터/설득 광고** (숫자/증거 기반)

- 1순위: #7 Impact Number (핵심 수치 하나에 집중)
- 2순위: #20 Left-Right Split Solution (문제-해결 구조)
- 3순위: #1 Constraint-as-Canvas (단순 구조로 메시지 집중)

---

> **문서 버전**: v1.0 | 다음 업데이트: Quick Win 완료 후 Phase 1 결과 반영