# 디자인 컨셉 카탈로그 예시 제작 브리프 — Batch 4 (컨셉 #10, #11, #12)

**작성일**: 2026-03-28
**작성자**: 아폴론 (콘텐츠 프로듀서) + 페이토 (CRO 카피라이터)
**대상**: 디자인팀 (비너스/나부)
**광고 앵글**: 앵글 A — 정착지원금
**광고 주체**: T.O.P 사업단 (인카금융서비스 다이렉트총괄부문)

---

## 공통 사양

- **사이즈**: 1080x1080px PNG
- **텍스트 소스**: 리쿠르팅 앵글 A 카피 (정착지원금)
  - 메인 훅: "열심히는 하는데, 월급은 제자리걸음?"
  - 서브라인: "2026년 7월, 게임이 바뀝니다"
  - 해결 메시지: "정착지원금이 문제를 풀어줍니다"
  - 증거/수치: 신입 정착지원금 최대 1,000만원 / 경력직 직전연봉 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 또는 gemini-image만 사용** (각 컨셉 아래 추천 도구 확인)
- 3개 컨셉이 **명확히 구별되는 비주얼 스타일**이어야 함:
  - #10: 그라디언트 + 네온 에너지 (감각적, MZ세대 정서)
  - #11: 클린 카드 UI + SaaS 모던 (신뢰, B2B 전문성)
  - #12: 4색 블록 인포그래픽 (정보 밀도, 직관적 비교)

---

## 컨셉별 제작 상세

---

### #10 — 활력 그라디언트 (Vitality Gradient)

- **파일명**: `concept-10-vitality-gradient.png`
- **저장 경로**: `/home/jay/workspace/output/meta-ads/concept-samples/concept-10-vitality-gradient.png`
- **추천 도구**: hybrid-image (CSS 그라디언트 배경 — Gemini 배경 불필요)

#### 비주얼 컨셉 상세

MZ세대가 소비하는 앱/서비스(신한라이프 리브랜딩, 카카오페이 보험 광고, Toss 카드)에서 공통으로 쓰이는 퍼플-핑크-네온 그라디언트 미학. 전통 금융 광고의 "딱딱함"을 완전히 탈피하고, "이 회사는 다르다"는 첫인상을 0.3초 안에 전달한다. 그라디언트가 배경이 아닌 **광고 그 자체**여야 한다.

배경 전체를 퍼플→핑크→네온 옐로우로 흐르는 대각선 그라디언트로 채운다. 글로우 효과(box-shadow, text-shadow)로 텍스트가 화면에서 떠오르는 느낌을 준다. 정착지원금 수치("최대 1,000만원")는 초대형 + 글로우로 시각적 폭발감을 극대화한다.

#### 색상 팔레트

| 용도 | 색상 | HEX |
|------|------|-----|
| 그라디언트 시작 | 딥 퍼플 | `#4C1D95` |
| 그라디언트 중간 | 비비드 핑크 | `#EC4899` |
| 그라디언트 끝 | 네온 옐로우 | `#FDE047` |
| 글로우 포인트 | 시안 네온 | `#22D3EE` |
| 메인 텍스트 | 화이트 | `#FFFFFF` |
| 보조 텍스트 | 반투명 화이트 | `rgba(255,255,255,0.85)` |
| CTA 버튼 배경 | 화이트 | `#FFFFFF` |
| CTA 버튼 텍스트 | 딥 퍼플 | `#4C1D95` |

CSS 구현:
```
background: linear-gradient(135deg, #4C1D95 0%, #EC4899 55%, #FDE047 100%);
```
글로우 레이어 추가:
```
radial-gradient(ellipse at 20% 80%, rgba(34,211,238,0.25) 0%, transparent 60%)
```

#### 폰트 지정

| 요소 | Family | Weight | Size |
|------|--------|--------|------|
| 메인 훅 ("열심히는 하는데…") | Pretendard | 800 | 52px |
| 핵심 수치 ("최대 1,000만원") | Pretendard | 900 | 72px |
| 서브라인 ("2026년 7월…") | Pretendard | 500 | 28px |
| 해결 메시지 | Pretendard | 600 | 32px |
| 브랜드 태그 | Pretendard | 400 | 18px |
| CTA 버튼 텍스트 | Pretendard | 700 | 22px |

자간(letter-spacing): 메인 훅 -0.5px / 수치 -1px / 기타 0px
행간(line-height): 메인 훅 1.2 / 수치 1.0 / 서브라인 1.4

#### 레이아웃 상세

```
[1080px × 1080px]
┌─────────────────────────────────┐
│  패딩: 상 64px / 좌우 56px / 하 64px │
│                                 │
│  [브랜드 태그 — 상단 좌측]         │
│  "T.O.P 사업단"                   │
│  (Pretendard 400, 18px, 반투명)   │
│                                 │
│  [메인 훅 — 상단 1/3]             │
│  "열심히는 하는데,               │
│   월급은 제자리걸음?"             │
│  (좌측 정렬, 최대 2줄)            │
│                                 │
│  [핵심 수치 — 중앙 강조 블록]      │
│  "최대 1,000만원"                │
│  글로우 효과 적용                │
│  (중앙 정렬 또는 좌측 정렬)       │
│                                 │
│  [서브라인 + 해결 메시지 — 중하단] │
│  "2026년 7월, 게임이 바뀝니다"    │
│  "정착지원금이 문제를 풀어줍니다" │
│                                 │
│  [CTA 버튼 — 하단]               │
│  ┌─────────────────────┐        │
│  │  지금 상담 신청하기   │        │
│  └─────────────────────┘        │
│  (화이트 배경, 퍼플 텍스트,       │
│   border-radius 50px,            │
│   padding 18px 40px)             │
└─────────────────────────────────┘
```

구조: Flexbox column, justify-content: space-between
수직 흐름: 브랜드 → 훅 → 수치(강조) → 서브 → CTA
좌측 정렬 원칙 (CTA만 중앙 또는 좌측 허용)

#### 카피 배치

| 위치 | 텍스트 | 시각적 처리 |
|------|--------|------------|
| 상단 좌측 (y: 64px) | "T.O.P 사업단" | 반투명 화이트 배지 |
| 상단 1/3 | "열심히는 하는데, 월급은 제자리걸음?" | 화이트, 대형, 글로우 없음 |
| 중앙 (강조 블록) | "최대 1,000만원" | 화이트, 초대형, text-shadow 글로우 |
| 중앙 바로 아래 | "신입 정착지원금 / 경력직 직전연봉 50%" | 반투명 화이트, 소형 보조 설명 |
| 중하단 | "2026년 7월, 게임이 바뀝니다" | 화이트, 중형 |
| 중하단 보조 | "정착지원금이 문제를 풀어줍니다" | 반투명 화이트, 소형 |
| 하단 버튼 | "지금 상담 신청하기" | 화이트 pill 버튼, 퍼플 텍스트 |

#### 구현 난이도

**쉬움** — 순수 CSS 그라디언트 + Flexbox. Gemini 배경 이미지 불필요. 글로우 효과는 CSS `text-shadow` / `box-shadow`로 처리.

---

### #11 — JSX 선언적 템플릿 (JSX Declarative Template)

- **파일명**: `concept-11-jsx-template.png`
- **저장 경로**: `/home/jay/workspace/output/meta-ads/concept-samples/concept-11-jsx-template.png`
- **추천 도구**: hybrid-image (Playwright HTML→PNG)

#### 비주얼 컨셉 상세

Vercel 대시보드, react-email 컴포넌트 레이아웃, Linear 앱 UI에서 영감을 받은 SaaS 모던 카드 그리드. "이 회사는 체계가 잡혀 있다"는 신뢰감을 디자인 언어로 전달한다. 각 정보 단위가 독립적인 카드 컴포넌트로 표현되어 있으며, 전체 레이아웃은 정교하게 그리드에 정렬된다.

배경은 연한 그레이(#F4F4F5), 각 카드는 화이트에 미세 그림자를 가진다. 블루 액센트 색상이 CTA 및 수치 강조에 사용된다. 코드 언어 느낌을 주는 JetBrains Mono는 수치 및 날짜 등 데이터성 텍스트에 소량 사용한다.

#### 색상 팔레트

| 용도 | 색상 | HEX |
|------|------|-----|
| 전체 배경 | 라이트 그레이 | `#F4F4F5` |
| 카드 배경 | 퓨어 화이트 | `#FFFFFF` |
| 카드 테두리 | 연그레이 | `#E4E4E7` |
| 블루 액센트 | 비비드 블루 | `#2563EB` |
| 블루 라이트 (배지/태그) | 연블루 | `#DBEAFE` |
| 메인 텍스트 | 다크 네이비 | `#18181B` |
| 서브 텍스트 | 미디엄 그레이 | `#71717A` |
| CTA 버튼 배경 | 비비드 블루 | `#2563EB` |
| CTA 버튼 텍스트 | 화이트 | `#FFFFFF` |

#### 폰트 지정

| 요소 | Family | Weight | Size |
|------|--------|--------|------|
| 상단 헤더 훅 | Pretendard | 700 | 36px |
| 카드 타이틀 | Pretendard | 600 | 22px |
| 카드 본문 | Pretendard | 400 | 16px |
| 핵심 수치 | JetBrains Mono | 700 | 28px |
| 날짜/태그 | JetBrains Mono | 400 | 14px |
| CTA 버튼 | Pretendard | 600 | 18px |
| 브랜드 태그 | Pretendard | 500 | 14px |

자간: 전체 기본(0px), 수치/날짜 0.5px (Mono 특성 활용)
행간: 카드 본문 1.6 / 헤더 훅 1.25

#### 레이아웃 상세

```
[1080px × 1080px]
┌────────────────────────────────────┐
│  배경: #F4F4F5 / 패딩: 48px 전체   │
│                                    │
│  [헤더 영역 — 상단 ~200px]          │
│  ┌──────────────────────────────┐  │
│  │  카드 (full width)            │  │
│  │  "열심히는 하는데,             │  │
│  │   월급은 제자리걸음?"          │  │
│  │  태그: [T.O.P 사업단]          │  │
│  └──────────────────────────────┘  │
│                                    │
│  [2열 카드 그리드 — 중단 ~480px]    │
│  ┌──────────┐  ┌──────────┐       │
│  │ 카드 A   │  │ 카드 B   │       │
│  │ [수치]   │  │ [날짜]   │       │
│  │최대      │  │2026년 7월│       │
│  │1,000만원 │  │게임이    │       │
│  │          │  │바뀝니다  │       │
│  └──────────┘  └──────────┘       │
│  ┌──────────┐  ┌──────────┐       │
│  │ 카드 C   │  │ 카드 D   │       │
│  │경력직    │  │정착지원금│       │
│  │직전연봉  │  │이 문제를 │       │
│  │50% 지원  │  │풀어줍니다│       │
│  └──────────┘  └──────────┘       │
│                                    │
│  [CTA 영역 — 하단 ~140px]          │
│  ┌──────────────────────────────┐  │
│  │  카드 (full width)            │  │
│  │  [지금 상담 신청하기] 버튼     │  │
│  └──────────────────────────────┘  │
└────────────────────────────────────┘
```

카드 스펙:
- border-radius: 12px
- box-shadow: `0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)`
- 카드 간 gap: 16px
- 카드 내부 padding: 28px
- 2열 그리드: 각 카드 폭 ~(984px ÷ 2) = 492px (gap 16px 제외)

헤더/CTA 카드 (full width): 폭 984px, 각각 padding 28px

#### 카피 배치

| 위치 | 텍스트 | 시각적 처리 |
|------|--------|------------|
| 헤더 카드 상단 | `[T.O.P 사업단]` | 블루 배지(#DBEAFE 배경, #2563EB 텍스트), border-radius 6px |
| 헤더 카드 | "열심히는 하는데, 월급은 제자리걸음?" | 다크 텍스트, Pretendard 700, 36px |
| 카드 A (좌상) | "최대 1,000만원" | JetBrains Mono 700, 28px, 블루 액센트 색상 |
| 카드 A 보조 | "신입 정착지원금" | Pretendard 400, 14px, 서브 그레이 |
| 카드 B (우상) | "2026년 7월" | JetBrains Mono 400, 14px 날짜 표기 |
| 카드 B 본문 | "게임이 바뀝니다" | Pretendard 600, 22px |
| 카드 C (좌하) | "직전연봉 50%" | JetBrains Mono 700, 28px, 블루 |
| 카드 C 보조 | "경력직 지원 기준" | Pretendard 400, 14px, 서브 그레이 |
| 카드 D (우하) | "정착지원금이 문제를 풀어줍니다" | Pretendard 600, 18px |
| CTA 카드 | "지금 상담 신청하기" | 블루 버튼, 화이트 텍스트, border-radius 8px |

#### 구현 난이도

**쉬움** — HTML CSS Grid + Flexbox. 카드 컴포넌트 구조가 명확하여 HTML 템플릿 작성이 직관적. JetBrains Mono는 Google Fonts에서 로드.

---

### #12 — 블록 기반 모듈러 레이아웃 (Block-Based Modular Layout)

- **파일명**: `concept-12-modular-block.png`
- **저장 경로**: `/home/jay/workspace/output/meta-ads/concept-samples/concept-12-modular-block.png`
- **추천 도구**: hybrid-image (Playwright HTML→PNG)

#### 비주얼 컨셉 상세

4개의 색 블록이 정확히 2x2 그리드를 채운다. 블록 간 경계가 명확하고, 각 블록이 하나의 독립적 정보 단위다. GrapesJS 블록 에디터나 Canva 인포그래픽 레이아웃에서 영감을 얻은 구조. 각 블록의 배경색이 달라 어떤 정보가 어디 있는지 시선이 즉각 분류된다.

정보 우선순위: 블록 1(네이비) = 훅/문제 제기 → 블록 2(화이트) = 수치/증거 → 블록 3(코럴) = 변화/서브라인 → 블록 4(민트) = CTA/행동 유도. 인포그래픽식 정보 흐름이 Z패턴(좌상→우상→좌하→우하)을 따른다.

#### 색상 팔레트

| 블록 | 배경 | HEX | 텍스트 색상 |
|------|------|-----|------------|
| 블록 1 (좌상) — 문제 제기 | 딥 네이비 | `#1E3A5F` | 화이트 `#FFFFFF` |
| 블록 2 (우상) — 수치/증거 | 퓨어 화이트 | `#FFFFFF` | 다크 네이비 `#1E3A5F` |
| 블록 3 (좌하) — 변화/서브 | 코럴 | `#FF6B6B` | 화이트 `#FFFFFF` |
| 블록 4 (우하) — CTA | 민트 | `#4ECDC4` | 다크 텍스트 `#1A3C3A` |
| 블록 구분선 (갭) | 배경 갭 | `#E5E7EB` | — |

블록 2 테두리: `border: 2px solid #E4E4E7` (화이트 블록 경계 구분용)

#### 폰트 지정

각 블록은 Weight 차이로 시각적 위계를 만든다.

| 요소 | Family | Weight | Size |
|------|--------|--------|------|
| 블록 1 메인 훅 | Pretendard Variable | 700 | 38px |
| 블록 1 브랜드 | Pretendard Variable | 300 | 16px |
| 블록 2 수치 (큰 것) | Pretendard Variable | 900 | 64px |
| 블록 2 수치 설명 | Pretendard Variable | 500 | 16px |
| 블록 3 서브라인 | Pretendard Variable | 700 | 30px |
| 블록 3 보조 텍스트 | Pretendard Variable | 300 | 16px |
| 블록 4 CTA 메인 | Pretendard Variable | 700 | 26px |
| 블록 4 CTA 버튼 | Pretendard Variable | 700 | 18px |

#### 레이아웃 상세

```
[1080px × 1080px]
┌─────────────────┬─────────────────┐
│                 │                 │
│   블록 1        │   블록 2        │
│   네이비        │   화이트        │
│   #1E3A5F       │   #FFFFFF       │
│                 │                 │
│   536px × 536px │   536px × 536px │
│                 │                 │
├─────────────────┼─────────────────┤   ← gap: 8px
│                 │                 │
│   블록 3        │   블록 4        │
│   코럴          │   민트          │
│   #FF6B6B       │   #4ECDC4       │
│                 │                 │
│   536px × 536px │   536px × 536px │
│                 │                 │
└─────────────────┴─────────────────┘
```

그리드 스펙:
- 전체 컨테이너: 1080px × 1080px, 패딩 없음 (블록이 엣지까지 채움)
- 2×2 CSS Grid
- column-gap: 8px / row-gap: 8px
- 각 블록: calc(50% - 4px) × calc(50% - 4px) → 실질 ~536px × 536px
- 블록 내부 패딩: 36px (균일)
- 블록 내 레이아웃: Flexbox column, justify-content: space-between

#### 카피 배치

**블록 1 — 딥 네이비 (좌상) : 문제 제기**

| 위치 | 텍스트 | 스타일 |
|------|--------|--------|
| 상단 | "T.O.P 사업단" | Pretendard 300, 16px, rgba(255,255,255,0.7) |
| 중앙 | "열심히는 하는데, 월급은 제자리걸음?" | Pretendard 700, 38px, #FFFFFF, 줄 간격 1.25 |

---

**블록 2 — 화이트 (우상) : 수치/증거**

| 위치 | 텍스트 | 스타일 |
|------|--------|--------|
| 상단 | "정착지원금" | Pretendard 500, 18px, #71717A |
| 중앙 큰 수치 | "1,000만원" | Pretendard 900, 64px, #1E3A5F |
| 수치 설명 | "신입 최대 지원" | Pretendard 500, 16px, #71717A |
| 하단 구분선 + 수치 | "경력직 직전연봉 50% 지원" | Pretendard 500, 18px, #1E3A5F |

---

**블록 3 — 코럴 (좌하) : 변화/서브라인**

| 위치 | 텍스트 | 스타일 |
|------|--------|--------|
| 상단 | "2026년 7월" | Pretendard 300, 16px, rgba(255,255,255,0.8) |
| 중앙 | "게임이 바뀝니다" | Pretendard 700, 38px, #FFFFFF |
| 하단 | "정착지원금이 문제를 풀어줍니다" | Pretendard 300, 18px, rgba(255,255,255,0.85) |

---

**블록 4 — 민트 (우하) : CTA**

| 위치 | 텍스트 | 스타일 |
|------|--------|--------|
| 상단 | "T.O.P 사업단의 파격적 지원" | Pretendard 500, 16px, #1A3C3A |
| 중앙 | "지금이 기회입니다" | Pretendard 700, 26px, #1A3C3A |
| 하단 버튼 | "지금 상담 신청하기 →" | Pretendard 700, 18px, 화이트 텍스트, 다크 배경(#1A3C3A), border-radius 8px, padding 14px 28px |

#### 구현 난이도

**쉬움** — CSS Grid 2×2가 핵심 구조. 각 블록은 독립적 Flexbox. 색상 대비가 강해 디버깅이 쉬움. Pretendard Variable 하나로 전체 weight 커버.

---

## 디자인팀 요청사항

1. 3개 컨셉 모두 제작 후 `/home/jay/workspace/output/meta-ads/concept-samples/` 에 저장
2. 각 컨셉이 **명확히 다른 비주얼 스타일**인지 나란히 놓고 최종 확인:
   - #10: 그라디언트 폭발 — 보는 즉시 에너지가 느껴져야 함
   - #11: 깔끔한 카드 UI — 전문적이고 신뢰감 있어야 함
   - #12: 블록 인포그래픽 — 정보가 구획별로 즉각 인식되어야 함
3. **앵글 A 카피 (정착지원금)** 를 정확히 사용할 것 — 수치 오기재 금지
4. **satori-cardnews 절대 사용 금지** — hybrid-image만 사용
5. 완성 후 제이회장님 검토를 위해 파일 전달 필요

---

## 참고 사례 링크

| 컨셉 | 참고 사례 |
|------|----------|
| #10 활력 그라디언트 | 신한라이이프 Hey Young 캠페인, 카카오페이 보험 광고, Toss 카드 UI |
| #11 JSX 선언 템플릿 | Vercel 대시보드 UI, react-email 데모, Linear 앱 인터페이스 |
| #12 블록 모듈러 | GrapesJS 블록 에디터, Canva 인포그래픽 템플릿 |