# 크리에이티브 디렉션 가이드라인 — 광고 배너 vs 콘텐츠 이미지

> GitHub 3개 레포 심층 분석 기반 (creative-director-skill, brand-design-skill, banana-claude)

## 광고 배너 vs 콘텐츠 이미지 핵심 차이

| 차원 | 광고 배너 | 콘텐츠/블로그 이미지 |
|------|----------|-------------------|
| 아이디어 레벨 | Execution Idea — 한 문장 설명 | Campaign/Big Idea — 내러티브 깊이 |
| 단순성 | CRITICAL — 3초 안에 읽혀야 함 | 주의를 보상하는 방식 가능 |
| 배경 처리 | Punch — 다크, 대담, 하나의 아이디어 | Breathe — 밝은, 카드 다수, 데이터 |
| 타이포 스케일 | Display XL 64px, 지원 텍스트 1줄 max | H1 36-40px, 본문 18-20px, 카드 |
| 이미지 모드 | Product/UI 모드 | Editorial/Cinema/Landscape 모드 |
| 프롬프트 구성 | "advertising campaign용 상업 사진" | 장면 묘사 + 매거진 레퍼런스 |
| 종횡비 | 1:1(소셜), 4:1/8:1(웹배너), 16:9(디스플레이) | 16:9(블로그헤더), 3:4(기사), 2:3(핀터) |
| 시각 요소 | 액센트 바, 통계 바, 할로우 키워드 | 글래스 패널, 레이어 스택, 데이터 카드 |
| 방법론 선택 | SIT + Random Entry (간결/바이럴) | Morphological + Synectics (깊이/서사) |
| 평가 우선순위 | 단순성 + 독창성 최우선 | 감정 반응 + 확장성 최우선 |
| 핵심 금지 | "다크테마 광고" 컨셉 설명 금지 — 실제 장면 묘사 | 맥락적 설명 허용 |

## 광고 배너 크리에이티브 디렉션 필수 항목

### 1. 배경 컨셉
- Punch 스타일: 다크 배경, 풀블리드
- 액센트 바: 좌상단 4px, 폭 ~30%
- 장면 묘사로 지시 ("고급 사무실의 계약서류" O, "신뢰감 있는 이미지" X)

### 2. 비주얼 톤
- 브랜드별 컬러 시스템 차별화
- 프리셋 기반: luxury-brand(#1A1A1A+#C9A96E) vs tech-saas(#2563EB+#F8FAFC)
- 감정 조합과 연결 (분노→레드+블랙, 호기심→블루+골드)

### 3. 타이포그래피
- 헤드라인: Display XL (64px), 화이트, -2px 트래킹
- 모노 라벨: uppercase, 12px, letter-spacing 2px
- 지원 텍스트: 1줄 max, #d1d5db, 20px
- 하단 통계바: JetBrains Mono 숫자

### 4. 레이아웃
- "하나의 아이디어, 하나의 슬라이드"
- 최대 3개 존 (헤드라인, 히어로 비주얼, 푸터/통계)
- 데드 존 금지 (특히 울트라와이드 배너)

### 5. 사진 방향
- Product 모드: polished marble, brushed concrete, softbox diffused
- 프롬프트에서 "prominently displayed"로 가시성 확보
- "8K", "masterpiece", "ultra-realistic" 금지 — imageSize 파라미터 사용

## 콘텐츠/블로그 이미지 크리에이티브 디렉션 필수 항목

### 1. 배경 컨셉
- Breathe 스타일: 밝은 배경 (#f3f4f6)
- 화이트 카드: border-radius 12px, shadow-sm
- 액센트 컬러 좌측 보더 (4px, emerald/amber/blue)

### 2. 비주얼 톤
- Editorial 모드: 매거진 레퍼런스
- 내러티브 깊이 허용
- 데이터 시각화 포함 가능

### 3. 타이포그래피
- H1: #111827, 36-40px
- 본문: #64748b, 18-20px (18px 미만 금지)
- 데이터: JetBrains Mono

### 4. 레이아웃
- 글 흐름 보조 역할
- 정보 전달 목적 (차트, 다이어그램 활용)
- 여러 카드/섹션 허용

## 공통 규칙
- 모바일 압축 비율 고려 (1080px → ~350-400px, ~3배 압축)
- 12px 폰트 = 모바일에서 ~4px = 보이지 않음
- 특이성 테스트: 브랜드를 경쟁사로 바꿔도 되면 독창성 부족
- "Simple as Violence": 최고의 아이디어는 한 문장으로 설명 가능

## 출처
- creative-director-skill: https://github.com/smixs/creative-director-skill
- brand-design-skill: https://github.com/VicUgochukwu/brand-design-skill
- banana-claude: https://github.com/AgriciDaniel/banana-claude