# 디자인 브리프 — Batch 3 v2 (컨셉 #07, #08, #09)

**작성일**: 2026-03-28
**작성자**: 페이토 (Peitho), CRO 카피라이터
**텍스트 소스**: 리쿠르팅 앵글 A 카피 v5 (정착지원금)
**광고 주체**: T.O.P 사업단 (인카금융서비스 코스닥 상장 GA)

---

## 공통 사양

- **사이즈**: 1080×1080px PNG
- **도구**: hybrid-image 또는 gemini-image (satori-cardnews 절대 금지)
- **저장 경로**: `/home/jay/workspace/output/meta-ads/concept-samples/`
- **공통 원칙**: 3개 컨셉이 한눈에 봐도 확실히 다른 비주얼 스타일

---

## 컨셉 #07 — 임팩트 넘버 (Impact Number)

> 숫자 하나가 화면의 절반을 먹는 극강의 시각 임팩트

- **파일명**: `concept-07-impact-number.png`

### 1. 메인 카피
```
1,000만원
```
*(숫자 자체가 메인 카피. 화면의 50~60% 차지. 설명 없이 숫자가 말한다.)*

### 2. 서브 카피
```
신입 정착지원금 최대
```
*(숫자 바로 위, 소형 레이블 역할. 숫자의 의미를 일도 설명하지 않고 정의만 한다.)*

```
2026년 7월, 게임이 바뀝니다
```
*(숫자 하단 두 번째 줄. 긴급성 주입.)*

### 3. CTA 문구
```
지금 상담 신청하기
```
*(최하단 버튼 스타일 텍스트. 배경과 반전 대비.)*

### 4. 비주얼 방향

**색상 팔레트**

| 역할 | HEX | 설명 |
|------|-----|------|
| 배경 | `#0D1B2A` | 딥 네이비. 숫자를 집중시키는 어두운 무대 |
| 메인 숫자 | `#FFD166` | 앰버 골드. 돈/가치의 심리적 연상 |
| 서브 레이블 | `#FFFFFF` | 순백. 숫자와 같은 계열이지만 크기로 종속 |
| 긴급성 텍스트 | `#FF6B6B` | 코럴 레드. 경각심·긴급성을 단 하나의 색으로 |
| CTA 텍스트 | `#FFD166` | 골드 재사용. 시선이 숫자에서 CTA로 자연스럽게 흐름 |
| CTA 하단 라인 | `#FFD166` 20% opacity | 구분선 역할 |

**폰트**

| 요소 | 폰트 | Weight | Size |
|------|------|--------|------|
| 메인 숫자 | Pretendard | 900 (Black) | 240~260px |
| 서브 레이블 (숫자 위) | Pretendard | 400 (Regular) | 28px |
| 긴급성 텍스트 | Pretendard | 600 (SemiBold) | 32px |
| CTA | Pretendard | 700 (Bold) | 24px |

**레이아웃 구조**

```
┌────────────────────────────────┐
│                                │  ← 상단 여백 180px
│  신입 정착지원금 최대           │  ← y: 260px, 중앙 정렬, 28px
│                                │  ← 간격 16px
│       1,000만원                │  ← y: 320px, 중앙 정렬, 250px BOLD
│                                │  ← 간격 40px
│  2026년 7월, 게임이 바뀝니다   │  ← y: 700px, 중앙 정렬, 32px
│                                │  ← 간격 32px
│        ─────────────           │  ← 구분선 (골드, 60px 너비)
│                                │  ← 간격 24px
│     지금 상담 신청하기          │  ← y: 850px, 중앙 정렬, 24px
│                                │
└────────────────────────────────┘
```

- 배경 전체: `#0D1B2A` 단색
- 좌우 패딩: 각 60px
- 숫자 텍스트 `letter-spacing: -4px` (숫자 밀착감)
- 숫자 `text-shadow: 0 0 80px rgba(255,209,102,0.3)` (미세 글로우)

### 5. 사용 도구
**hybrid-image** — CSS 타이포그래피만으로 완성. Gemini 배경 불필요.

### 6. Gemini 배경 프롬프트
해당 없음. 순수 CSS 배경(`#0D1B2A` 단색) 사용.

### 7. HTML 오버레이 가이드

```html
<!-- 컨테이너 -->
<div style="
  width: 1080px;
  height: 1080px;
  background: #0D1B2A;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Pretendard', sans-serif;
  padding: 0 60px;
  box-sizing: border-box;
">

  <!-- 서브 레이블 (숫자 위) -->
  <p style="
    color: #FFFFFF;
    font-size: 28px;
    font-weight: 400;
    margin: 0 0 16px 0;
    letter-spacing: 0.5px;
  ">신입 정착지원금 최대</p>

  <!-- 메인 숫자 -->
  <h1 style="
    color: #FFD166;
    font-size: 250px;
    font-weight: 900;
    margin: 0 0 40px 0;
    letter-spacing: -4px;
    line-height: 1;
    text-shadow: 0 0 80px rgba(255,209,102,0.3);
  ">1,000만원</h1>

  <!-- 긴급성 텍스트 -->
  <p style="
    color: #FF6B6B;
    font-size: 32px;
    font-weight: 600;
    margin: 0 0 32px 0;
    letter-spacing: 0.3px;
  ">2026년 7월, 게임이 바뀝니다</p>

  <!-- 구분선 -->
  <div style="
    width: 60px;
    height: 1px;
    background: rgba(255,209,102,0.5);
    margin-bottom: 24px;
  "></div>

  <!-- CTA -->
  <p style="
    color: #FFD166;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.5px;
  ">지금 상담 신청하기</p>

</div>
```

---

## 컨셉 #08 — 감성 내러티브 (Emotional Narrative)

> 따뜻한 실화 한 편이 보험의 필요성을 설득한다

- **파일명**: `concept-08-emotional-narrative.png`

### 1. 메인 카피
```
열심히는 하는데
소득은 제자리걸음인가요?
```
*(이미지 상단 1/3 영역. 두 줄 분리로 감정적 멈춤 유도. 질문 형태로 공감 유발.)*

### 2. 서브 카피
```
정착지원금이 문제를 풀어줍니다
신입 최대 1,000만원 · 경력직 직전연봉 50%
```
*(이미지 하단 오버레이. 해결책을 부드럽게 제시. 수치로 신뢰 강화.)*

### 3. CTA 문구
```
T.O.P 사업단 상담 신청하기
```
*(최하단 따뜻한 색 버튼 텍스트. 브랜드명 포함으로 귀속 명확화.)*

### 4. 비주얼 방향

**색상 팔레트**

| 역할 | HEX | 설명 |
|------|-----|------|
| 배경 사진 전체 톤 | 파스텔 크림, 따뜻한 앰버 | Gemini 생성 사진 기반 |
| 상단 텍스트 박스 배경 | `rgba(255,250,240,0.88)` | 크림 반투명. 가독성 + 따뜻함 유지 |
| 메인 카피 | `#2D2011` | 짙은 브라운. 사진 톤과 자연스럽게 어우러짐 |
| 하단 그라디언트 오버레이 | `rgba(30,20,10,0) → rgba(30,20,10,0.85)` | 하단으로 갈수록 어두워져 흰 텍스트 가독성 확보 |
| 서브 카피 | `#FFFFFF` | 순백. 하단 어두운 배경 위 |
| CTA 텍스트 | `#FFD580` | 연한 골드. 따뜻하고 행동 유발 |
| 수치 강조 색 | `#FF9A3C` | 앰버 오렌지. 1,000만원/50% 숫자에만 적용 |

**폰트**

| 요소 | 폰트 | Weight | Size |
|------|------|--------|------|
| 메인 카피 (질문) | Pretendard | 700 (Bold) | 52px |
| 서브 카피 (해결) | Pretendard | 400 (Regular) | 30px |
| 수치 강조 | Pretendard | 700 (Bold) | 30px |
| CTA | Pretendard | 600 (SemiBold) | 26px |

**레이아웃 구조**

```
┌────────────────────────────────┐
│ ┌──────────────────────────┐   │
│ │ 크림 반투명 박스 (상단)   │   │  ← y: 80px, 패딩 48px
│ │                          │   │
│ │ 열심히는 하는데           │   │  ← 52px Bold #2D2011
│ │ 소득은 제자리걸음인가요?  │   │  ← 52px Bold #2D2011
│ └──────────────────────────┘   │
│                                │
│   [파스텔 크림톤 배경 사진]     │  ← 중앙 배경 (Gemini 생성)
│   (따뜻한 오후햇살/창가/책상)  │
│                                │
│░░░░░░░░ 그라디언트 오버레이 ░░░│  ← 하단 40%부터 어두워짐
│                                │
│  정착지원금이 문제를 풀어줍니다 │  ← y: 820px, 30px Regular, #FFF
│  신입 최대 1,000만원·경력 50%  │  ← y: 862px, 30px Bold, 수치 #FF9A3C
│                                │
│    T.O.P 사업단 상담 신청하기  │  ← y: 940px, 26px SemiBold, #FFD580
└────────────────────────────────┘
```

- 상단 반투명 박스: `border-radius: 16px`, `backdrop-filter: blur(4px)`
- 메인 카피 행간: `line-height: 1.4`
- 사진 위 텍스트 전체 좌측 패딩: 60px

### 5. 사용 도구
**hybrid-image** — Gemini로 따뜻한 파스텔 배경 사진 생성 후 HTML 텍스트 오버레이.

### 6. Gemini 배경 프롬프트

```
Warm pastel lifestyle photo, soft afternoon sunlight streaming through a window,
a clean wooden desk with a cup of coffee and an open notebook,
cream and amber tones, shallow depth of field, calm and hopeful mood,
no people, no text, suitable for financial service advertisement background,
1080x1080px square format, photorealistic
```

*(한국어 요청이 더 잘 통할 경우 대안)*
```
따뜻한 파스텔 크림 톤의 라이프스타일 사진,
오후 햇살이 창문으로 들어오는 깔끔한 나무 책상,
커피 한 잔과 열린 노트북, 차분하고 희망적인 분위기,
인물 없음, 텍스트 없음, 금융 광고 배경용, 1080x1080px, 포토리얼
```

### 7. HTML 오버레이 가이드

```html
<!-- 컨테이너 -->
<div style="
  width: 1080px;
  height: 1080px;
  position: relative;
  font-family: 'Pretendard', sans-serif;
  overflow: hidden;
">

  <!-- Gemini 배경 사진 -->
  <img src="gemini-bg-08.jpg" style="
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0; left: 0;
  " />

  <!-- 하단 그라디언트 오버레이 -->
  <div style="
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(
      to bottom,
      rgba(30,20,10,0) 0%,
      rgba(30,20,10,0.85) 100%
    );
  "></div>

  <!-- 상단 메인 카피 박스 -->
  <div style="
    position: absolute;
    top: 80px;
    left: 60px;
    right: 60px;
    background: rgba(255,250,240,0.88);
    border-radius: 16px;
    padding: 48px;
    backdrop-filter: blur(4px);
  ">
    <h1 style="
      color: #2D2011;
      font-size: 52px;
      font-weight: 700;
      line-height: 1.4;
      margin: 0;
    ">
      열심히는 하는데<br>
      소득은 제자리걸음인가요?
    </h1>
  </div>

  <!-- 하단 서브 카피 영역 -->
  <div style="
    position: absolute;
    bottom: 100px;
    left: 60px;
    right: 60px;
  ">
    <p style="
      color: #FFFFFF;
      font-size: 30px;
      font-weight: 400;
      margin: 0 0 12px 0;
      line-height: 1.5;
    ">정착지원금이 문제를 풀어줍니다</p>

    <p style="
      color: #FFFFFF;
      font-size: 30px;
      font-weight: 700;
      margin: 0 0 40px 0;
    ">
      신입 최대
      <span style="color: #FF9A3C;">1,000만원</span>
      ·
      경력직 직전연봉
      <span style="color: #FF9A3C;">50%</span>
    </p>

    <p style="
      color: #FFD580;
      font-size: 26px;
      font-weight: 600;
      margin: 0;
      letter-spacing: 0.3px;
    ">T.O.P 사업단 상담 신청하기 →</p>
  </div>

</div>
```

---

## 컨셉 #09 — 미니멀 타이포 (Minimal Typography)

> 텍스트와 여백만으로 전달하는 가장 순수한 메시지

- **파일명**: `concept-09-minimal-typo.png`

### 1. 메인 카피
```
판이
바뀐다
```
*(두 글자 + 두 글자. 초대형. 화면의 좌측 상단을 장악. 여백이 나머지를 말한다.)*

### 2. 서브 카피
```
2026년 7월, 정착지원금 제도가 바뀝니다
준비된 사람만 선점할 수 있습니다
```
*(중앙보다 아래, 좌측 정렬. 소형 텍스트. 메인과의 크기 대비가 핵심.)*

```
T.O.P 사업단 — 인카금융서비스
```
*(최하단 브랜드 귀속 라인. 가장 작은 텍스트.)*

### 3. CTA 문구
```
지금 상담 신청하기
```
*(최하단 우측 정렬. 메인 카피와 대각선 긴장감 형성.)*

### 4. 비주얼 방향

**색상 팔레트**

| 역할 | HEX | 설명 |
|------|-----|------|
| 배경 | `#F0EDE8` | 웜 오프화이트. 순백보다 눈의 피로감 낮음 |
| 메인 카피 | `#111111` | 거의 블랙. 최대한 무게감 |
| 서브 카피 | `#555555` | 미디엄 그레이. 시각적 계층 분리 |
| 브랜드 라인 | `#999999` | 연그레이. 존재하되 방해하지 않음 |
| CTA 텍스트 | `#111111` | 메인과 동일 색. 시선 흐름 완성 |
| 구분선 | `#CCCCCC` | 옅은 그레이. 섹션 분리만 |

*(흑백 팔레트만 사용. 색 포인트 제로. 오직 크기와 무게로 계층 표현.)*

**폰트**

| 요소 | 폰트 | Weight | Size | 비고 |
|------|------|--------|------|------|
| 메인 카피 ("판이 / 바뀐다") | Pretendard | 900 (Black) | 280px | 행간 0.85 |
| 서브 카피 (두 줄) | Pretendard | 300 (Light) | 26px | 행간 1.8 |
| 브랜드 라인 | Pretendard | 300 (Light) | 18px | letter-spacing: 2px |
| CTA | Pretendard | 500 (Medium) | 22px | 밑줄 없음 |

**레이아웃 구조**

```
┌────────────────────────────────┐
│                                │  ← 상단 여백 100px
│  판이                          │  ← y: 100px, 좌측 60px, 280px Black
│  바뀐다                        │  ← y: 390px, 좌측 60px, 280px Black
│                                │
│                                │  ← 여백 (전체의 50% 이상을 여백으로)
│                                │
│  ────────────────────────      │  ← 구분선, y: 760px, 좌측 60px, 300px
│                                │  ← 간격 28px
│  2026년 7월, 정착지원금         │  ← y: 800px, 좌측 60px, 26px Light
│  제도가 바뀝니다                │
│  준비된 사람만 선점할 수 있습니다│  ← y: 862px, 좌측 60px, 26px Light
│                                │
│  T.O.P 사업단 — 인카금융서비스  │  ← y: 958px, 좌측 60px, 18px, 연그레이
│                지금 상담 신청하기│  ← y: 958px, 우측 60px, 22px Medium
└────────────────────────────────┘
```

- 배경: `#F0EDE8` 단색 (이미지 제로)
- 메인 카피 `line-height: 0.85` (글자끼리 자연스럽게 밀착)
- 메인 카피 `letter-spacing: -6px` (초대형 글자 밀도 조절)
- 구분선: `border-top: 1px solid #CCCCCC`
- 전체 여백 비율: 텍스트 30% / 여백 70%

### 5. 사용 도구
**hybrid-image** — 순수 CSS 타이포그래피만으로 완성. Gemini 배경 불필요.

### 6. Gemini 배경 프롬프트
해당 없음. 순수 CSS 배경(`#F0EDE8` 단색) 사용. 이미지 제로가 이 컨셉의 핵심.

### 7. HTML 오버레이 가이드

```html
<!-- 컨테이너 -->
<div style="
  width: 1080px;
  height: 1080px;
  background: #F0EDE8;
  position: relative;
  font-family: 'Pretendard', sans-serif;
  overflow: hidden;
">

  <!-- 메인 카피 (초대형 타이포) -->
  <h1 style="
    position: absolute;
    top: 100px;
    left: 60px;
    color: #111111;
    font-size: 280px;
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -6px;
    margin: 0;
  ">
    판이<br>바뀐다
  </h1>

  <!-- 구분선 -->
  <div style="
    position: absolute;
    top: 760px;
    left: 60px;
    width: 300px;
    height: 1px;
    background: #CCCCCC;
  "></div>

  <!-- 서브 카피 -->
  <div style="
    position: absolute;
    top: 800px;
    left: 60px;
  ">
    <p style="
      color: #555555;
      font-size: 26px;
      font-weight: 300;
      line-height: 1.8;
      margin: 0;
    ">
      2026년 7월, 정착지원금 제도가 바뀝니다<br>
      준비된 사람만 선점할 수 있습니다
    </p>
  </div>

  <!-- 브랜드 라인 (좌측 하단) -->
  <p style="
    position: absolute;
    bottom: 60px;
    left: 60px;
    color: #999999;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 2px;
    margin: 0;
  ">T.O.P 사업단 — 인카금융서비스</p>

  <!-- CTA (우측 하단) -->
  <p style="
    position: absolute;
    bottom: 60px;
    right: 60px;
    color: #111111;
    font-size: 22px;
    font-weight: 500;
    margin: 0;
  ">지금 상담 신청하기</p>

</div>
```

---

## 컨셉 간 비교 요약

| 항목 | #07 임팩트 넘버 | #08 감성 내러티브 | #09 미니멀 타이포 |
|------|-------------|----------------|---------------|
| 배경 | 딥 네이비 단색 | 파스텔 크림 사진 (Gemini) | 웜 오프화이트 단색 |
| 주요 색상 | 골드 + 코럴 | 크림 + 앰버 오렌지 | 흑백 계열만 |
| 감정 트리거 | 충격·욕망 (숫자의 힘) | 공감·희망 (이야기의 온기) | 권위·확신 (여백의 무게) |
| 메인 카피 | 1,000만원 (숫자 자체) | 열심히는 하는데... (질문) | 판이 바뀐다 (선언) |
| 이미지 사용 | 없음 | Gemini 배경 사진 | 없음 |
| 도구 | hybrid-image (CSS only) | hybrid-image (Gemini + CSS) | hybrid-image (CSS only) |
| 여백 비율 | 40% | 배경 사진 전체 | 70% 이상 |
| 타겟 반응 | "저거 얼마야?" 즉각 반응 | "나 얘기네..." 감정 공감 | "뭔가 다른 회사다" 신뢰 |