# 디자인 컨셉 카탈로그 예시 제작 브리프 — Batch 5 (컨셉 #13, #14, #15)

**작성일**: 2026-03-28
**작성자**: 아폴론 (콘텐츠 프로듀서)
**대상**: 디자인팀 (비너스/나부)
**원본 태스크**: task-1212.1 (Batch 3 보완)
**참조 브리프**: `design-brief-batch3.md` (#13, #14, #15 항목)

---

## 공통 사양

- **사이즈**: 1080x1080px PNG
- **텍스트 소스**: 리쿠르팅 앵글 A 카피 (v5) — 정착지원금
  - 메인 훅: "열심히는 하는데, 월급은 제자리걸음?"
  - 서브: "2026년 7월, 게임이 바뀝니다"
  - 해결책: "정착지원금이 문제를 풀어줍니다"
  - 보조 카피 A: "신입 정착지원금 최대 1,000만원"
  - 보조 카피 B: "경력직 직전연봉 50%까지 지원"
  - 조직명: "T.O.P 사업단"
  - CTA: "지금 상담 신청하기"
- **저장 경로**: `/home/jay/workspace/output/meta-ads/concept-samples/`
- **참고 카탈로그**: `/home/jay/workspace/memory/specs/design-concept-catalog-20.md`
- **참고 카피**: `/home/jay/workspace/memory/tasks/ad-creative-recruiting-v5.md`

---

## 절대 규칙

- **satori-cardnews 사용 절대 금지** — 카드뉴스 전용. 광고 배너에 쓰면 작업 전체 폐기.
- **hybrid-image만 사용** (3개 컨셉 모두 hybrid-image)
- **Gemini 배경 이미지 사용 금지** — #13, #14, #15 모두 이미지 없음. CSS/SVG/폰트만으로 완결.
- 3개 컨셉이 **명확히 구별되는 비주얼 스타일**이어야 함 (심사위원이 나란히 놓고 봤을 때 다른 카테고리로 분류 가능한 수준)

---

## 컨셉별 제작 상세

---

### #13 — CSS Flexbox + 그라디언트 배너 (CSS Gradient Premium)

- **파일명**: `concept-13-css-gradient.png`
- **추천 도구**: hybrid-image (Playwright HTML→PNG)
- **Gemini 배경 여부**: 없음 — 순수 CSS만

#### 비주얼 컨셉

기술 인프라(다층 CSS 레이어링)를 광고 언어로 번역한 컨셉. "이미지 없이 이 정도 퀄리티가 가능하다"는 것 자체가 브랜드 메시지. 딥 네이비 → 딥 그린의 미세 색조 변화 위에 민트 글로우가 떠오르는 구조 — 마치 새벽 바다 위 빛이 번지는 느낌. 텍스트 계층이 정교하게 쌓이면서 프리미엄 감각을 만든다.

#### 카피 배치

| 위치 | 텍스트 | 역할 |
|------|--------|------|
| 상단 10% — 좌측 정렬 | `T.O.P 사업단` | 브랜드 로케이터 (작은 크기, 신뢰감) |
| 중앙 35~55% — 중앙 정렬 | `열심히는 하는데,` (줄바꿈) `월급은 제자리걸음?` | 메인 훅 (최대 크기, 2줄) |
| 중앙 60~68% — 중앙 정렬 | `2026년 7월, 게임이 바뀝니다` | 서브 카피 (중형) |
| 중앙 72~78% — 중앙 정렬 | `신입 최대 1,000만원 · 경력직 직전연봉 50%` | 혜택 요약 (소형, 민트 글로우 텍스트) |
| 하단 88~95% — 중앙 정렬 | `지금 상담 신청하기 →` | CTA 버튼형 텍스트 (배경 박스 포함) |

#### 색상 팔레트

| 역할 | Hex | 용도 |
|------|-----|------|
| 배경 레이어 1 (베이스) | `#0B1D3A` | 딥 네이비 (좌상단) |
| 배경 레이어 1 (중간) | `#132B4F` | 미드 네이비 (50% 지점) |
| 배경 레이어 1 (우하단) | `#0A3D2A` | 딥 그린 |
| 배경 레이어 2 (글로우) | `rgba(78,205,196,0.15)` | 민트 방사형 광원 (우상단 30% 지점) |
| 메인 훅 텍스트 | `#FFFFFF` | 순백 |
| 서브 카피 텍스트 | `rgba(255,255,255,0.82)` | 살짝 투명 화이트 |
| 혜택 텍스트 | `#4ECDC4` | 민트 (포인트) |
| CTA 박스 배경 | `rgba(78,205,196,0.18)` | 반투명 민트 |
| CTA 박스 테두리 | `rgba(78,205,196,0.45)` | 민트 아웃라인 |
| CTA 텍스트 | `#FFFFFF` | 순백 |
| 브랜드명 텍스트 | `rgba(255,255,255,0.55)` | 희미한 화이트 |

#### 폰트 사양

| 요소 | Pretendard weight | size | letter-spacing | line-height |
|------|-------------------|------|----------------|-------------|
| 브랜드명 (T.O.P 사업단) | 300 (Light) | 18px | 0.12em | — |
| 메인 훅 1행 ("열심히는 하는데,") | 600 (SemiBold) | 52px | -0.01em | 1.25 |
| 메인 훅 2행 ("월급은 제자리걸음?") | 800 (ExtraBold) | 56px | -0.02em | 1.25 |
| 서브 카피 | 400 (Regular) | 26px | 0.03em | 1.4 |
| 혜택 텍스트 | 500 (Medium) | 20px | 0.01em | — |
| CTA 텍스트 | 600 (SemiBold) | 22px | 0.06em | — |

> 메인 훅 2행이 1행보다 4px 크고 weight도 무겁다 — "제자리걸음"이라는 단어에 시각적 강조점이 실린다.

#### 레이아웃 구조

```
[1080 x 1080px]
┌─────────────────────────────────────┐
│  T.O.P 사업단          (상단 좌, 18px) │  ← 10%
│                                     │
│                                     │
│      열심히는 하는데,                  │  ← 35%
│      월급은 제자리걸음?                │  ← 45%
│                                     │
│    2026년 7월, 게임이 바뀝니다         │  ← 62%
│                                     │
│  신입 최대 1,000만원 · 경력직 50%      │  ← 74%
│                                     │
│  ┌─────────────────────────────┐     │
│  │   지금 상담 신청하기 →        │     │  ← 90%
│  └─────────────────────────────┘     │
└─────────────────────────────────────┘
```

#### CSS 배경 코드 (정확한 구현 명세)

```css
background:
  radial-gradient(ellipse at 70% 30%, rgba(78,205,196,0.15) 0%, transparent 70%),
  linear-gradient(135deg, #0B1D3A 0%, #132B4F 50%, #0A3D2A 100%);
```

#### hybrid-image 구현 시 주의사항

1. **폰트 로딩 확인**: Playwright 실행 전 Pretendard Variable 웹폰트가 완전히 로드되었는지 `document.fonts.ready` 대기 필수. 폰트 로드 실패 시 굵기 차이(600 vs 800)가 사라져 디자인 의도 훼손.
2. **배경 레이어 순서**: CSS `background` 속성에서 `radial-gradient`를 먼저(위에) 선언해야 민트 글로우가 선형 그라디언트 위에 올라온다. 순서 바꾸면 글로우 안 보임.
3. **CTA 박스**: `border-radius: 6px`, `border: 1px solid rgba(78,205,196,0.45)`, `padding: 14px 36px`으로 설정. `backdrop-filter: blur(4px)` 적용 시 글로우 효과와 상호작용해 고급스러움 증가.
4. **1080px 캔버스**: `width: 1080px`, `height: 1080px`, `overflow: hidden` 필수. Playwright 뷰포트도 1080x1080으로 일치시킬 것.
5. **pixel 단위 고정**: 반응형 `vw`/`vh` 단위 사용 금지. 모든 크기를 `px`로 고정해야 1080px 출력 시 의도한 비율 유지.

---

### #14 — SVG-first 렌더링 파이프라인 (SVG Infographic)

- **파일명**: `concept-14-svg-first.png`
- **추천 도구**: hybrid-image (Playwright HTML→PNG, SVG 인라인)
- **Gemini 배경 여부**: 없음 — HTML/CSS/SVG 인라인

#### 비주얼 컨셉

"파이프라인"이라는 기술 인프라 개념을 보험 FA의 커리어 여정으로 재해석. 3단계 수평 파이프라인 (현재 상황 → T.O.P 합류 → 성장 달성)이 SVG 벡터 아이콘과 화살표로 연결된다. 라이트 배경에 정밀한 라인아트 — 마치 전략 컨설팅 보고서의 인포그래픽처럼 보이지만, 메시지는 직접적인 광고. "왜 T.O.P인가"에 대한 논리적 설득 구조.

#### 카피 배치

| 위치 | 텍스트 | 역할 |
|------|--------|------|
| 상단 8~16% — 중앙 정렬 | `열심히는 하는데, 월급은 제자리걸음?` | 메인 훅 (대형) |
| 상단 20~26% — 중앙 정렬 | `2026년 7월, 게임이 바뀝니다` | 서브 (중형, 연그레이) |
| 파이프라인 스텝 1 아이콘 하단 | `지금 현재` (굵게) + `소득 정체` (얇게) | 스텝 라벨 |
| 파이프라인 스텝 2 아이콘 하단 | `T.O.P 합류` (굵게) + `정착지원금 지원` (얇게) | 스텝 라벨 |
| 파이프라인 스텝 3 아이콘 하단 | `성장 달성` (굵게) + `안정적 고소득` (얇게) | 스텝 라벨 |
| 파이프라인 하단 메모 줄 | `신입 최대 1,000만원 · 경력직 직전연봉 50%까지` | 혜택 주석 (소형, 블루) |
| 하단 12% — 중앙 정렬 | `지금 상담 신청하기` | CTA 버튼 |

#### 색상 팔레트

| 역할 | Hex | 용도 |
|------|-----|------|
| 배경 | `#FFFFFF` | 순백 |
| 메인 훅 텍스트 | `#111827` | 거의 블랙 |
| 서브 카피 텍스트 | `#6B7280` | 미디엄 그레이 |
| 파이프라인 라인 (stroke) | `#D1D5DB` | 연그레이 연결선 |
| 화살표 (stroke) | `#9CA3AF` | 그레이 화살표 |
| SVG 아이콘 테두리 | `#374151` | 다크 그레이 |
| SVG 아이콘 내부 포인트 | `#3B82F6` | 블루 포인트 (핵심 요소) |
| 스텝 원 배경 | `#F9FAFB` | 거의 흰 연그레이 |
| 스텝 원 테두리 | `#E5E7EB` | 연그레이 |
| 스텝 라벨 (굵은 텍스트) | `#111827` | 다크 |
| 스텝 라벨 (얇은 텍스트) | `#6B7280` | 그레이 |
| 혜택 주석 | `#3B82F6` | 블루 |
| CTA 버튼 배경 | `#3B82F6` | 블루 |
| CTA 버튼 텍스트 | `#FFFFFF` | 화이트 |

#### 폰트 사양

| 요소 | Pretendard weight | size | 비고 |
|------|-------------------|------|------|
| 메인 훅 | 700 (Bold) | 38px | letter-spacing: -0.01em |
| 서브 카피 | 400 (Regular) | 22px | letter-spacing: 0.01em |
| 스텝 라벨 (굵은) | 600 (SemiBold) | 16px | — |
| 스텝 라벨 (얇은) | 400 (Regular) | 13px | color: #6B7280 |
| 혜택 주석 | 500 (Medium) | 14px | color: #3B82F6 |
| CTA 텍스트 | 600 (SemiBold) | 20px | — |

#### SVG 아이콘 명세 (인라인 SVG, 각 60x60px 뷰포트)

**스텝 1 아이콘 — 하강 그래프 (소득 정체)**
```
viewBox="0 0 60 60"
- 배경 원: cx=30, cy=30, r=28, fill=#F9FAFB, stroke=#E5E7EB
- 선 그래프: M10 20 L25 28 L40 26 L50 38
  stroke=#374151, stroke-width=2, fill=none, stroke-linecap=round
- 하락 화살표 끝점: polygon (▼), fill=#EF4444 (레드 포인트)
```

**스텝 2 아이콘 — 건물/조직 (T.O.P 합류)**
```
viewBox="0 0 60 60"
- 배경 원: cx=30, cy=30, r=28, fill=#EFF6FF, stroke=#BFDBFE
- 건물 사각형: rect x=15 y=20 w=30 h=25, fill=none, stroke=#3B82F6, stroke-width=1.5
- 창문 격자: 3x2 작은 사각형, fill=#3B82F6 (불빛 느낌)
- 별/star 포인트: 상단 중앙 ☆, fill=#3B82F6
```

**스텝 3 아이콘 — 상승 화살표 (성장)**
```
viewBox="0 0 60 60"
- 배경 원: cx=30, cy=30, r=28, fill=#F0FDF4, stroke=#BBF7D0
- 상승 화살표: M15 45 L30 15 L45 45, stroke=#22C55E, stroke-width=2.5, fill=none
- 화살표 헤드: ▲, fill=#22C55E
```

**화살표 연결선 (스텝 간)**
```
viewBox="0 0 80 20" (두 스텝 사이 공간)
- 수평선: M5 10 L65 10, stroke=#D1D5DB, stroke-width=1.5, stroke-dasharray=4 3
- 화살촉: M60 6 L68 10 L60 14, stroke=#9CA3AF, fill=none
```

#### 레이아웃 구조

```
[1080 x 1080px]
┌──────────────────────────────────────────┐
│    열심히는 하는데, 월급은 제자리걸음?        │  ← 8~16%
│      2026년 7월, 게임이 바뀝니다            │  ← 20~26%
│                                          │
│   ┌────────┐  →→→  ┌────────┐  →→→  ┌────────┐  │
│   │ 아이콘1 │       │ 아이콘2 │       │ 아이콘3 │  │  ← 38~62%
│   └────────┘       └────────┘       └────────┘  │
│   지금 현재         T.O.P 합류        성장 달성    │  ← 66~76%
│   소득 정체         정착지원금         안정 고소득  │
│                                          │
│      신입 최대 1,000만원 · 경력직 50%까지   │  ← 82%
│                                          │
│        ┌──────────────────────┐           │
│        │  지금 상담 신청하기    │           │  ← 90~96%
│        └──────────────────────┘           │
└──────────────────────────────────────────┘
```

아이콘 3개는 수평 중앙 정렬, 각 아이콘 컨테이너 너비 220px, 간격(화살표 포함) 80px. 전체 파이프라인 블록 너비 = 220×3 + 80×2 = 820px, 좌우 여백 각 130px.

#### hybrid-image 구현 시 주의사항

1. **SVG 인라인 필수**: `<img src="icon.svg">` 사용 금지. 모든 SVG를 HTML 내 `<svg>` 태그로 직접 삽입해야 Playwright가 정확히 렌더링. 외부 파일 참조 시 CORS 또는 파일 경로 오류 발생.
2. **아이콘 크기 고정**: 각 SVG에 `width="60" height="60"` 속성 명시 + CSS에도 `width: 60px; height: 60px;` 이중 고정. Playwright 렌더링 시 SVG 크기가 부모 컨테이너에 의해 예상치 않게 늘어나는 경우 방지.
3. **화살표 렌더링**: `stroke-dasharray` 속성이 Playwright에서 정상 렌더링되는지 확인. 점선이 너무 작게 나올 경우 `stroke-width: 2`로 올리고 `stroke-dasharray: 6 4`로 조정.
4. **파이프라인 수평 정렬**: Flexbox `display: flex; align-items: center; justify-content: center;`로 3개 스텝 + 2개 화살표를 한 행에 배치. `flex-wrap: nowrap` 필수 — 줄바꿈 시 레이아웃 붕괴.
5. **CTA 버튼**: `border-radius: 8px`, `padding: 16px 48px`, `font-size: 20px`. 버튼 너비는 고정하지 말고 `min-width: 320px`으로 설정.
6. **폰트와 SVG 동시 렌더**: 폰트 로드 완료(`document.fonts.ready`) 후 SVG 렌더링도 완료된 다음 스크린샷 촬영. `requestAnimationFrame` 한 틱 대기 추가 권장.

---

### #15 — CJK 타이포그래피 미니멀 (CJK Typography Minimal)

- **파일명**: `concept-15-cjk-typo.png`
- **추천 도구**: hybrid-image (Playwright HTML→PNG)
- **Gemini 배경 여부**: 없음 — 단색 배경 + 폰트만

#### 비주얼 컨셉

한글이 갖는 시각적 아름다움 자체를 광고로 삼는다. "제자리걸음" 또는 "성장" — 단 한 단어가 초대형(120~160px) 으로 화면 중앙을 지배한다. 나머지 모든 카피는 극소형(16~20px). 이 극단적 크기 대비가 메시지를 만든다: 제자리걸음이라는 고통이 얼마나 크고 압도적인지, 그리고 그것을 벗어나는 한 단어(성장)가 얼마나 강렬한지.

Pretendard Variable의 weight 스펙트럼(900 vs 200)이 핵심 기술 요소. 한 폰트 내에서 weight만으로 시각적 대비를 극대화.

**버전 A (아이보리/낮)**: 따뜻하고 차분한 버전 — 고통의 크기를 조용히 드러낸다.
**버전 B (블랙/밤)**: 강렬하고 긴장감 있는 버전 — 변화의 결단을 촉구한다.

> 제작 시 버전 A 또는 B 중 하나 선택. 버전 B 추천 (Meta 피드에서 스크롤 정지 효과 강함).

#### 카피 배치 — 버전 B (블랙, 추천)

| 위치 | 텍스트 | 역할 |
|------|--------|------|
| 상단 8% — 우측 정렬 | `T.O.P 사업단` | 브랜드 마크 (극소, 우상단) |
| 중앙 30~65% — 중앙 정렬 | `제자리걸음` | 초대형 메인 워드 (단어 1개, weight 900) |
| 중앙 65~70% — 중앙 정렬 | `——` (긴 대시 구분선, 골드) | 시각적 구분 |
| 중앙 72~78% — 중앙 정렬 | `열심히는 하는데, 월급은 제자리걸음?` | 전체 훅 문장 (소형, weight 200) |
| 중앙 82~86% — 중앙 정렬 | `2026년 7월, 게임이 바뀝니다` | 서브 (소형, weight 300) |
| 하단 90~94% — 중앙 정렬 | `지금 상담 신청하기` | CTA (소형, 골드 컬러) |

> "제자리걸음" 한 단어를 버튼처럼 인식하게 만드는 구조. 스크롤을 멈추고 "이게 나잖아"라는 자기인식을 유도.

#### 카피 배치 — 버전 A (아이보리, 대안)

버전 B와 동일한 배치 구조, 단 메인 워드를 `성장`으로 교체 가능 (긍정적 메시지 원할 경우).

| 변경 지점 | 버전 A |
|-----------|--------|
| 메인 워드 | `성장` (weight 900, 140px) |
| 대시 색상 | `#C8A95A` (웜 골드) → 버전 A에서도 동일 |
| 서브 위치 | `정착지원금이 문제를 풀어줍니다` 추가 가능 |

#### 색상 팔레트 — 버전 B (블랙)

| 역할 | Hex | 용도 |
|------|-----|------|
| 배경 | `#0A0A0A` | 딥 블랙 |
| 메인 워드 텍스트 | `#F5F5F5` | 오프 화이트 (순백보다 따뜻함) |
| 구분 대시 | `#D4A855` | 골드 |
| 전체 훅 문장 | `rgba(245,245,245,0.60)` | 반투명 화이트 |
| 서브 카피 | `rgba(245,245,245,0.45)` | 더 희미한 화이트 |
| CTA 텍스트 | `#D4A855` | 골드 (유일한 강조 컬러) |
| 브랜드명 | `rgba(245,245,245,0.35)` | 거의 보이지 않는 화이트 |

#### 색상 팔레트 — 버전 A (아이보리)

| 역할 | Hex | 용도 |
|------|-----|------|
| 배경 | `#FFF8F0` | 따뜻한 아이보리 |
| 메인 워드 텍스트 | `#1A1A1A` | 거의 블랙 |
| 구분 대시 | `#C8A95A` | 웜 골드 |
| 전체 훅 문장 | `rgba(26,26,26,0.55)` | 반투명 다크 |
| 서브 카피 | `rgba(26,26,26,0.40)` | 더 희미한 다크 |
| CTA 텍스트 | `#C8A95A` | 웜 골드 |
| 브랜드명 | `rgba(26,26,26,0.30)` | 거의 보이지 않는 다크 |

#### 폰트 사양 (Pretendard Variable 필수)

| 요소 | weight | size | letter-spacing | 비고 |
|------|--------|------|----------------|------|
| 메인 워드 ("제자리걸음") | 900 (Black) | 140px | -0.03em | 커닝 타이트하게 |
| 구분 대시 | 300 | 28px | 0.15em | 골드 색상 |
| 전체 훅 문장 | 200 (ExtraLight) | 19px | 0.04em | weight 대비로 작게 보임 |
| 서브 카피 | 300 (Light) | 17px | 0.03em | — |
| CTA 텍스트 | 500 (Medium) | 18px | 0.08em | 골드, 언더라인 선택적 |
| 브랜드명 | 300 (Light) | 14px | 0.10em | 우상단, 거의 보이지 않게 |

> Pretendard Variable 사용 시 CSS: `font-variation-settings: 'wght' 900` (메인) / `'wght' 200` (서브). 일반 Pretendard 폰트 패밀리 사용 시 `font-weight: 900` / `font-weight: 200` 으로 대체.

#### 레이아웃 구조 — 버전 B

```
[1080 x 1080px]
┌──────────────────────────────────────────┐
│                        T.O.P 사업단  (우) │  ← 8%
│                                          │
│                                          │
│                                          │
│            제자리걸음                     │  ← 30~65%
│          (140px, w900, 중앙)              │
│                                          │
│             ─────────────                │  ← 67% (골드 대시)
│                                          │
│     열심히는 하는데, 월급은 제자리걸음?      │  ← 74%
│         2026년 7월, 게임이 바뀝니다        │  ← 79%
│                                          │
│           지금 상담 신청하기               │  ← 91%
│             (골드, 소형)                  │
└──────────────────────────────────────────┘
```

메인 워드의 수직 중심이 전체 캔버스의 45~48% 지점에 위치 (정중앙보다 살짝 위) — 황금비율에 가까운 배치.

#### hybrid-image 구현 시 주의사항

1. **Pretendard Variable weight 로딩**: `font-weight: 900` 및 `font-weight: 200`이 모두 포함된 Variable 폰트 파일을 로드해야 함. 서브셋이나 특정 weight만 포함된 폰트 파일 사용 시 900/200 차이가 브라우저 합성(font synthesis)으로 흉내만 낼 수 있어 의도한 극단적 대비가 안 나온다.
   - 확인 방법: DevTools에서 `document.fonts.check('900 140px Pretendard')` 및 `'200 19px Pretendard'` 둘 다 `true` 반환하는지 확인.
2. **메인 워드 kerning**: 140px에서 자간 `-0.03em` 적용 시 "자리"와 "걸"의 공간이 타이트해질 수 있다. 시각적으로 불자연스러우면 `-0.02em`으로 조정.
3. **세로 중심 배치**: 메인 워드를 `position: absolute`로 정확히 배치하거나, 전체를 Flexbox column으로 구성하되 메인 워드 컨테이너에 `flex: 0 0 auto; margin-bottom: auto;` 설정으로 황금비율 위치 조정.
4. **골드 대시 구현**: 단순 텍스트 `——` 보다 `border-bottom: 2px solid #D4A855; width: 180px;` 형태의 hr-line이 더 정교하게 제어 가능. 텍스트 대시는 폰트에 따라 길이가 달라짐.
5. **배경 색상 렌더링**: `#0A0A0A` 배경은 Playwright 기본값(흰색 배경)과 충돌 방지를 위해 `<body style="background:#0A0A0A; margin:0;">` 명시 필수. CSS 컨테이너에만 배경 지정하면 body 여백이 흰색으로 노출될 수 있음.
6. **CTA 언더라인 효과**: CTA 텍스트에 `border-bottom: 1px solid #D4A855; padding-bottom: 3px;` 적용하면 골드 언더라인이 추가되어 클릭 유도 감각을 높인다 (선택 사항, 심플함 선호 시 생략).

---

## 3개 컨셉 차별화 요약

| 구분 | #13 CSS Gradient | #14 SVG-first | #15 CJK Typography |
|------|-----------------|---------------|--------------------|
| **배경** | 다층 CSS 그라디언트 (딥 네이비→그린) | 순백 (#FFFFFF) | 딥 블랙 (#0A0A0A) |
| **핵심 요소** | 색상 + 텍스트 계층 | 인포그래픽 파이프라인 + 아이콘 | 초대형 한글 워드 1개 |
| **분위기** | 프리미엄 / 신뢰 / 심야 브랜드 | 논리적 / 설득 / 컨설팅 보고서 | 충격적 단순함 / 공감 자극 |
| **설득 방식** | 감성적 (비주얼 분위기로 끌어당김) | 이성적 (3단계 논리로 납득시킴) | 감성적 (자기인식으로 공감 유발) |
| **타겟 반응** | "왠지 믿음직스럽다" | "아, 그래서 T.O.P구나" | "이거 나잖아, 더 보고 싶다" |
| **복잡도** | 낮음 (CSS만) | 보통 (SVG 인라인) | 낮음 (텍스트만) |
| **주의사항** | CSS 레이어 순서 | SVG 인라인 필수 | Variable 폰트 로딩 |

---

## 디자인팀 요청사항

1. 3개 컨셉 제작 후 `/home/jay/workspace/output/meta-ads/concept-samples/` 에 저장
2. **Batch 3 브리프 기반 보완 작업**이므로 `design-brief-batch3.md` 의 #13~#15 원본 사양도 참조할 것
3. #13/#14/#15는 **기술 인프라 트랙을 디자인 관점에서 재해석**한 컨셉 — 기술적 요소를 시각화하되 광고로서의 메시지 전달력을 우선시
4. 각 컨셉이 나란히 놓였을 때 **완전히 다른 카테고리로 분류되는 수준의 비주얼 차별화** 유지
5. 완성 후 제이회장님 검토를 위해 파일 전달
6. **satori-cardnews 절대 사용 금지** — hybrid-image만 사용
7. Gemini 배경 이미지 생성 불필요 — 3개 컨셉 모두 CSS/SVG/폰트만으로 완결