# 디자인 브리프 — 컨셉 #37: BlackHanSans Bold Impact (hybrid-v5-refined)

> **작성일**: 2026-03-29
> **작성자**: 아폴론 (콘텐츠 프로듀서) + 페이토 (CRO 카피라이터)
> **앵글**: A — 정착지원금
> **광고 주체**: T.O.P 사업단 (인카금융서비스 코스닥 상장)
> **출력 파일**: `concept-37-hybrid-v5-refined.png`
> **저장 경로**: `/home/jay/workspace/output/meta-ads/concept-samples/`

---

## 1. 컨셉 개요

### 핵심 아이디어

v5 스타일 "BlackHanSans Bold Impact"를 정제한 버전이다. 어두운 포토 배경 위에 하단 다크 그라디언트를 깔고, 초대형 BlackHanSans 88px 헤드라인으로 시선을 폭발적으로 포착한다. 하단에는 Frosted Glass 서브 블록 하나만 배치하는 2-엘리먼트 미니멀 구조로, v4 스타일 대비 정보 과부하를 완전히 제거한다. **헤드라인과 서브블록, 두 요소만 존재한다** — 이것이 이 컨셉의 핵심 차별점이다.

### 광고 목표

- **주 타겟**: 소득 정체 중인 30~45세 직장인, 이직/커리어 전환 고민 중인 보험업계 경력자
- **감정 소구**: 공감(소득 제자리걸음) → 전략적 전환 가능성 암시 → 클릭 유도
- **전환 목표**: Meta 캐러셀 카드에서 스와이프 정지 및 CTA 클릭 (CTR 극대화)

### v5 → v5-refined 개선점

| 항목 | v5 원본 | v5-refined (이번 버전) |
|------|---------|----------------------|
| 헤드라인 폰트 크기 | 84px | **88px** (임팩트 강화) |
| Frosted Glass 블러 | blur(14px) | **blur(18px)** (더 깊은 유리 효과) |
| 서브블록 그림자 | 없음 | **outer glow 추가** (드라마틱 강조) |
| 헤드라인 효과 | 없음 | **text-shadow glow** (영화적 무드) |
| 액센트 컬러 | 슬라이드별 다양 | **#FF6B35 웜 오렌지 통일** |
| 레이아웃 요소 수 | 2~3 | **2 요소 고정** (헤드라인 + 서브블록) |

### 컨셉 포지셔닝

| 항목 | 내용 |
|------|------|
| 복제 가능성 | 낮음 (BlackHanSans 대형 임팩트는 차별화됨) |
| 구현 난이도 | 낮음 (2-요소 미니멀 구조) |
| 품질 기대치 | 최상 (배경 사진 퀄리티에 비례) |
| 적합 용도 | Meta 캐러셀 리쿠르팅 광고 — 슬라이드별 각기 다른 앵글 |
| 유사 컨셉 | #35 hybrid-v4-refined-A, #36 hybrid-v4-refined-B |

---

## 2. 비주얼 디렉션

### 레이아웃 구조

```
┌──────────────────────────────────────────────┐
│                                              │
│         [PHOTO BACKGROUND — bg.png]          │
│         dark moody home office / tech        │
│                                              │
│   ┌──────────────────────────────────────┐   │
│   │         HEADLINE ZONE                │   │
│   │   소득은                              │   │
│   │   제자리걸음?  ← #FF6B35 하이라이트  │   │
│   └──────────────────────────────────────┘   │
│                                              │
│  ┌────────────────────────────────────────┐  │
│  │  ▌ 전략을 바꾸면 달라집니다           │  │
│  │    [frosted glass sub-block]           │  │
│  └────────────────────────────────────────┘  │
│                                              │
│  ████ DARK GRADIENT (55% height) ████████   │
└──────────────────────────────────────────────┘
```

- 캔버스: **1080 x 1080px**
- 배경 이미지: `bg.png` (상대 경로)
- 하단 그라디언트: 캔버스 하단에서 55% 높이, `transparent → rgba(0,20,40,0.90)`
- 요소 수: **2개 고정** — 메인 헤드라인 + Frosted Glass 서브블록
- Meta 캐러셀 CTA 버튼은 카드 외부(Meta 플랫폼 UI)에서 처리 — 카드에 CTA 버튼 없음

### 헤드라인 존

- **위치**: 하단 그라디언트 영역 내, 서브블록 위
- **정렬**: 좌측 정렬 (left: 60px)
- **bottom 기준**: 서브블록 상단으로부터 위쪽 32px 거리 확보
- **줄 구성**:
  - Line 1: `소득은` — 순수 화이트 (#FFFFFF)
  - Line 2: `제자리걸음?` — `제자리걸음` 부분만 #FF6B35 웜 오렌지, `?` 는 화이트
- **text-shadow glow** 효과 (아래 CSS 섹션 참조)

### Frosted Glass 서브블록

- **위치**: 하단 고정, bottom: 72px
- **좌우 여백**: left 60px, right 60px (너비 960px)
- **배경**: `rgba(0, 25, 50, 0.50)` + `backdrop-filter: blur(18px)`
- **border-radius**: 16px
- **border-left**: 4px solid #FF6B35
- **outer glow/shadow**: `box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,107,53,0.15)`
- **내부 패딩**: 28px 36px

### 색상 팔레트

| 용도 | 색상명 | HEX | 사용 위치 |
|------|--------|-----|-----------|
| 액센트 (핵심) | 웜 오렌지 | `#FF6B35` | 키워드 하이라이트, 서브블록 보더, glow |
| 헤드라인 기본 | 순수 화이트 | `#FFFFFF` | 헤드라인 전체 (하이라이트 제외) |
| 서브블록 텍스트 | 화이트 | `#FFFFFF` | 서브카피 텍스트 |
| 배경 그라디언트 시작 | 투명 | `transparent` | 그라디언트 상단 |
| 배경 그라디언트 끝 | 딥 다크 네이비 | `rgba(0,20,40,0.90)` | 그라디언트 하단 |
| Frosted Glass 배경 | 딥 블루 반투명 | `rgba(0,25,50,0.50)` | 서브블록 배경 |

### 폰트

| 역할 | 폰트 | 웨이트 | 크기 | 경로 |
|------|------|--------|------|------|
| 메인 헤드라인 | BlackHanSans | Regular (자체 Bold) | **88px** | `file:///home/jay/.local/share/fonts/BlackHanSans-Regular.ttf` |
| 서브블록 카피 | Pretendard | 700 Bold | **64px** | `file:///home/jay/.local/share/fonts/Pretendard/Pretendard-Bold.otf` |

- 헤드라인 줄간격: `line-height: 1.05` (타이트하게 — 임팩트 강조)
- 헤드라인 자간: `letter-spacing: -2px`
- 서브카피 줄간격: `line-height: 1.3`
- 서브카피 자간: `letter-spacing: -1px`
- 최소 텍스트 크기: **64px** (모든 텍스트 40px+ 규칙 준수)

---

## 3. 카피

### 메인 헤드라인

```
소득은
제자리걸음?
```

- Line 1 `소득은`: BlackHanSans 88px, 색상 #FFFFFF (화이트)
- Line 2 `제자리걸음?`:
  - `제자리걸음` → BlackHanSans 88px, 색상 **#FF6B35** (웜 오렌지 하이라이트)
  - `?` → BlackHanSans 88px, 색상 #FFFFFF (화이트)
- text-shadow glow: `0 0 40px rgba(255,107,53,0.35), 0 2px 8px rgba(0,0,0,0.60)`

### 서브블록 카피

```
전략을 바꾸면 달라집니다
```

- Pretendard 700, 64px, #FFFFFF
- Frosted Glass 서브블록 내부에 배치
- 좌측 오렌지 보더(4px) 와 텍스트 사이 간격: padding-left 20px 확보

### 카피 전략 노트

`소득은 / 제자리걸음?` — 2행 구조는 스크롤 중 정지(stop-scroll)를 극대화하기 위한 설계다. "소득은"이 먼저 눈에 들어오며 공감을 낚고, 다음 행 오렌지 "제자리걸음?"이 감정 확인을 완성한다. 서브블록의 "전략을 바꾸면 달라집니다"는 전환 가능성을 암시하며 다음 슬라이드(또는 CTA) 클릭 욕구를 자극한다. 버튼 없이도 내러티브 구조 자체가 CTA 역할을 수행한다.

---

## 4. Gemini 이미지 생성 프롬프트 (영문)

```
Dark moody home office at night, laptop screen glowing with code on display, ambient blue-green monitor light reflecting on dark desk surface, minimalist setup, cityscape visible through window in far background, cinematic noir photography style with dramatic lighting, deep shadows and subtle highlights, photorealistic, no people, no text, no logos. 1080x1080 square format.
```

### 이미지 후처리 지침

1. Gemini 생성 이미지를 `bg.png` 파일명으로 저장 (HTML 템플릿과 동일 디렉토리)
2. 별도 CSS 필터 불필요 — 배경 그라디언트 오버레이가 충분한 다크 무드 연출
3. 이미지 밝기가 지나치게 낮을 경우 `filter: brightness(1.05)` 미세 조정 가능

---

## 5. HTML 템플릿

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    @font-face {
      font-family: 'BlackHanSans';
      src: url('file:///home/jay/.local/share/fonts/BlackHanSans-Regular.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }

    @font-face {
      font-family: 'Pretendard';
      src: url('file:///home/jay/.local/share/fonts/Pretendard/Pretendard-Bold.otf') format('opentype');
      font-weight: 700;
      font-style: normal;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      width: 1080px;
      height: 1080px;
      overflow: hidden;
      background: #000;
    }

    /* ── 루트 컨테이너 ── */
    .card {
      position: relative;
      width: 1080px;
      height: 1080px;
      overflow: hidden;
    }

    /* ── 배경 사진 ── */
    .bg-photo {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }

    /* ── 하단 다크 그라디언트 오버레이 (55% 높이) ── */
    .bottom-gradient {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 55%;
      background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 20, 40, 0.60) 35%,
        rgba(0, 20, 40, 0.90) 100%
      );
    }

    /* ── 메인 헤드라인 ── */
    .headline {
      position: absolute;
      left: 60px;
      /* 서브블록 위에서 위로 32px — 서브블록 bottom:72px + 높이 약 136px = 208px */
      bottom: 240px;
      font-family: 'BlackHanSans', sans-serif;
      font-size: 88px;
      line-height: 1.05;
      letter-spacing: -2px;
      text-shadow:
        0 0 40px rgba(255, 107, 53, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.60);
    }

    .headline .line-white {
      display: block;
      color: #FFFFFF;
    }

    .headline .line-mixed {
      display: block;
    }

    .headline .keyword-orange {
      color: #FF6B35;
    }

    .headline .keyword-white {
      color: #FFFFFF;
    }

    /* ── Frosted Glass 서브블록 ── */
    .sub-block {
      position: absolute;
      bottom: 72px;
      left: 60px;
      right: 60px;
      background: rgba(0, 25, 50, 0.50);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-radius: 16px;
      border-left: 4px solid #FF6B35;
      box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 107, 53, 0.15);
      padding: 28px 36px;
    }

    .sub-copy {
      font-family: 'Pretendard', sans-serif;
      font-weight: 700;
      font-size: 64px;
      line-height: 1.3;
      letter-spacing: -1px;
      color: #FFFFFF;
    }
  </style>
</head>
<body>
  <div class="card">

    <!-- 배경 사진 -->
    <img class="bg-photo" src="bg.png" alt="background">

    <!-- 하단 다크 그라디언트 -->
    <div class="bottom-gradient"></div>

    <!-- 메인 헤드라인 -->
    <div class="headline">
      <span class="line-white">소득은</span>
      <span class="line-mixed">
        <span class="keyword-orange">제자리걸음</span><span class="keyword-white">?</span>
      </span>
    </div>

    <!-- Frosted Glass 서브블록 -->
    <div class="sub-block">
      <div class="sub-copy">전략을 바꾸면 달라집니다</div>
    </div>

  </div>
</body>
</html>
```

---

## 6. 기술 사양

### 출력 사양

| 항목 | 값 |
|------|-----|
| 파일 포맷 | PNG |
| 캔버스 크기 | 1080 x 1080px |
| 해상도 | 72 DPI (소셜 표준) |
| 색상 모드 | RGB |
| 출력 파일명 | `concept-37-hybrid-v5-refined.png` |
| 저장 경로 | `/home/jay/workspace/output/meta-ads/concept-samples/` |

### 레이아웃 좌표 맵

| 요소 | 위치 | 크기 |
|------|------|------|
| 배경 이미지 | 0, 0 (전체 커버) | 1080 x 1080px |
| 하단 그라디언트 | bottom: 0 | 너비 100%, 높이 55% (594px) |
| 헤드라인 | left: 60px, bottom: ~240px | 자동 (텍스트 기반) |
| Frosted Glass 서브블록 | left: 60px, bottom: 72px, right: 60px | 너비 960px, 높이 자동 |

### 폰트 파일 경로

| 폰트 | 파일 경로 |
|------|----------|
| BlackHanSans | `file:///home/jay/.local/share/fonts/BlackHanSans-Regular.ttf` |
| Pretendard 700 | `file:///home/jay/.local/share/fonts/Pretendard/Pretendard-Bold.otf` |

### 색상 코드 전체 목록

| 용도 | HEX | RGBA |
|------|-----|------|
| 액센트 오렌지 | `#FF6B35` | rgba(255, 107, 53, 1) |
| 헤드라인 화이트 | `#FFFFFF` | rgba(255, 255, 255, 1) |
| 서브카피 화이트 | `#FFFFFF` | rgba(255, 255, 255, 1) |
| 그라디언트 끝 | — | rgba(0, 20, 40, 0.90) |
| Frosted Glass 배경 | — | rgba(0, 25, 50, 0.50) |
| Frosted Glass glow | — | rgba(255, 107, 53, 0.15) |
| 박스 그림자 | — | rgba(0, 0, 0, 0.45) |
| 헤드라인 glow | — | rgba(255, 107, 53, 0.35) |
| 헤드라인 그림자 | — | rgba(0, 0, 0, 0.60) |

### 배경 이미지 소스

| 항목 | 값 |
|------|-----|
| HTML 내 참조 경로 | `bg.png` (상대 경로) |
| 생성 도구 | Gemini AI (섹션 4 프롬프트 사용) |
| 권장 크기 | 1080 x 1080px |
| 포맷 | PNG 또는 JPG |

---

## 7. 품질 체크리스트

### 비주얼 체크

- [ ] 배경 사진이 다크 무디 분위기를 충분히 연출하는가 (사무실/테크 야경)
- [ ] 하단 55% 그라디언트가 자연스럽게 페이드되어 텍스트 가독성을 확보하는가
- [ ] 헤드라인 88px BlackHanSans가 화면을 압도하는 임팩트를 주는가
- [ ] `제자리걸음` 오렌지 하이라이트가 화이트 텍스트와 명확히 구분되는가
- [ ] 헤드라인 text-shadow glow 효과가 과하지 않고 시네마틱하게 적용되었는가
- [ ] Frosted Glass 서브블록의 blur(18px) 유리 효과가 배경 이미지 위에서 제대로 렌더링되는가
- [ ] 서브블록 outer glow (box-shadow)가 블록을 배경에서 부유하는 느낌으로 강조하는가
- [ ] 서브블록 좌측 오렌지 보더(4px)가 선명하게 보이는가
- [ ] 서브카피 64px Pretendard 700이 서브블록 내에서 깔끔하게 정렬되는가
- [ ] 전체 레이아웃이 2-요소 구조(헤드라인 + 서브블록)로 유지되는가 — CTA 버튼 없음 확인

### 폰트 규칙 체크

- [ ] 헤드라인: **88px** (84px+ 규칙 충족)
- [ ] 서브카피: **64px** (64px+ 규칙 충족)
- [ ] 카드 내 모든 텍스트 최소 40px+ (이 컨셉은 64px가 최소 — 규칙 초과 충족)

### 금지 표현 체크

| 금지 표현 | 사용 여부 |
|----------|----------|
| "방송DB" | 미사용 |
| "챗GPT" | 미사용 |
| "30종" | 미사용 |
| satori-cardnews 도구 | 미사용 (hybrid-image 사용) |

### 법적 준수 체크

| 체크 항목 | 상태 | 비고 |
|----------|------|------|
| 확정 수익 표현 금지 | 준수 | 수치 언급 없음, 암시적 가능성 표현 |
| 공포 마케팅 금지 | 준수 | 공감형 Hook — 공격적 감정 없음 |
| 허위·과장 광고 금지 | 준수 | "달라집니다" — 조건부 암시 표현 |
| 금융상품 오인 소지 | 없음 | 리쿠르팅 광고 맥락 (캐러셀 전체 구조에서 명확) |

### 기술 체크

- [ ] `bg.png` 파일이 HTML 템플릿과 동일 디렉토리에 존재하는가
- [ ] BlackHanSans 폰트 로컬 경로가 올바르게 로드되는가
- [ ] Pretendard Bold 폰트 로컬 경로가 올바르게 로드되는가
- [ ] `backdrop-filter: blur(18px)` 이 Playwright Chromium 에서 정상 렌더링되는가
- [ ] 캔버스 크기가 정확히 1080 x 1080px 로 출력되는가
- [ ] PNG 출력 파일명 `concept-37-hybrid-v5-refined.png` 로 저장되었는가

---

*작성: 아폴론 (콘텐츠 프로듀서) + 페이토 (CRO 카피라이터) | 2026-03-29*