# 디자인 브리프 — 컨셉 #35: Bottom-Anchored Content Stack (hybrid-v4-refined-A)

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

---

## 1. 컨셉 개요

### 핵심 아이디어

v4 슬라이드 1/2 스타일인 **"Bottom-Anchored Content Stack"**의 정제 버전. 전체 화면을 포토 배경으로 채우고, 하단에서 올라오는 네이비 그라디언트 위에 대형 헤드라인 + 프로스티드 글라스 서브카피 블록 + 필 CTA를 수직으로 쌓는 구조다. 배경 사진의 시각적 몰입감과 텍스트의 가독성을 동시에 확보하는 것이 목표다.

### 소스 스타일 (참조)

v4 슬라이드 1 스타일에서 직접 파생:
- 배경: 어두운 사무실 야경 사진
- 하단 그라디언트: 50% 높이, `transparent → rgba(0,30,60,0.88)`
- 메인 카피: Pretendard 900, 90px, 화이트, 하단 앵커
- 키워드 오렌지 하이라이트 (`#EA580C`)
- 서브카피 블록: 프로스티드 글라스 (`rgba(0,30,60,0.40)` + `blur(12px)`), border-radius 16px
- 서브카피 텍스트: Pretendard 700, 44px
- CTA 필: 오렌지 아웃라인, Pretendard 800, 40px, border-radius 50px

### 적용된 개선 사항 (v4 → refined-A)

| 항목 | v4 원본 | refined-A |
|------|---------|-----------|
| 서브카피 폰트 크기 | 44px | **64px** (1.45× 증가) |
| 서브카피 텍스트 길이 | 긴 문장 | **짧고 임팩트 있게 압축** |
| 프로스티드 글라스 효과 | blur(12px), 보더 없음 | **blur(20px)**, 서브틀한 보더 글로우 추가 |
| 텍스트 섀도 | 없음 또는 약함 | **헤드라인 drop-shadow 강화**, 서브카피 내 text-shadow 추가 |
| 헤드라인 크기 | 90px | 90px 유지 (84px+ 규칙 충족) |

---

## 2. 비주얼 디렉션

### 레이아웃 구조

```
┌──────────────────────────────────────────┐
│                                          │
│         [배경 포토 전체 화면]             │  ← 야경 사무실 (Gemini 생성)
│                                          │
│                                          │
│   ░░░░░░░░ 하단 그라디언트 (50%) ░░░░░░  │  ← transparent → rgba(0,30,60,0.88)
│                                          │
│   열심히는 하는데,                        │  ← 헤드라인 90px, 화이트
│   소득은 [제자리걸음?]                   │  ← "제자리걸음" 오렌지 #EA580C
│                                          │
│  ┌─────────────────────────────────────┐ │
│  │  정착지원금이 시작을 바꿉니다        │ │  ← 프로스티드 글라스 블록, 64px
│  └─────────────────────────────────────┘ │
│                                          │
│        [ 지금 조건 확인하기 ]            │  ← 필 CTA, 오렌지, 40px
└──────────────────────────────────────────┘
```

- 캔버스: **1080 x 1080px**
- 배경: 전체 커버 포토 (Gemini 생성 야경 사무실)
- 콘텐츠 스택: 하단 앵커. 하단 64px 패딩 위에서 쌓임 (CTA → 서브카피 → 헤드라인 순서로 상향)
- 좌우 패딩: 56px

### 레이어 순서 (bottom → top)

1. `<img>` — 배경 포토 (`bg.png`)
2. `div.gradient-overlay` — 하단 네이비 그라디언트
3. `div.headline` — 메인 헤드라인 (텍스트 섀도 포함)
4. `div.sub-copy-block` — 프로스티드 글라스 서브카피
5. `div.cta-pill` — 필 모양 CTA 버튼

### 색상 팔레트

| 용도 | 색상명 | HEX | 사용 위치 |
|------|--------|-----|-----------|
| 기본 강조색 | 액티브 오렌지 | `#EA580C` | 헤드라인 키워드, CTA 버튼 |
| 배경 오버레이 베이스 | 딥 네이비 | `#003B5C` | 그라디언트, 프로스티드 글라스 |
| 헤드라인 텍스트 | 순수 화이트 | `#FFFFFF` | 헤드라인 전체 |
| 서브카피 텍스트 | 화이트 (약간 투명) | `rgba(255,255,255,0.95)` | 프로스티드 블록 내 텍스트 |
| 프로스티드 글라스 배경 | 반투명 딥 네이비 | `rgba(0,30,60,0.45)` | 서브카피 블록 배경 |
| 프로스티드 글라스 보더 | 서브틀 글로우 | `rgba(255,255,255,0.18)` | 서브카피 블록 테두리 |
| CTA 버튼 (아웃라인 버전) | 오렌지 아웃라인 | `#EA580C` 보더 + 투명 배경 | CTA 필 버튼 |
| 하단 그라디언트 끝 | 불투명 네이비 | `rgba(0,30,60,0.88)` | 그라디언트 최하단 |

### 폰트

| 역할 | 폰트 | 웨이트 | 크기 (px) | 비고 |
|------|------|--------|-----------|------|
| 메인 헤드라인 | Pretendard | 900 Black | **90px** | 하단 앵커, 좌측 정렬 |
| 오렌지 키워드 하이라이트 | Pretendard | 900 Black | 90px | `color: #EA580C` |
| 서브카피 | Pretendard | 700 Bold | **64px** | 프로스티드 블록 내 |
| CTA 버튼 텍스트 | Pretendard | 800 ExtraBold | **40px** | 필 버튼 내 |

- **줄간격**: 헤드라인 1.15, 서브카피 1.3
- **자간**: 헤드라인 -1.5px, 서브카피 -0.5px, CTA -0.3px
- **폰트 소스**: 로컬 파일 — `file:///home/jay/.local/share/fonts/Pretendard/`

### 텍스트 섀도 스펙

```css
/* 헤드라인 */
text-shadow:
  0 2px 8px rgba(0, 0, 0, 0.70),
  0 4px 24px rgba(0, 30, 60, 0.60);

/* 서브카피 (프로스티드 블록 내) */
text-shadow:
  0 1px 6px rgba(0, 0, 0, 0.50);
```

### 프로스티드 글라스 효과 스펙

```css
/* 서브카피 블록 */
background: rgba(0, 30, 60, 0.45);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow:
  0 4px 32px rgba(0, 30, 60, 0.35),
  inset 0 1px 0 rgba(255, 255, 255, 0.12);
border-radius: 16px;
padding: 28px 36px;
```

---

## 3. 카피

### 헤드라인 (Headline)

```
열심히는 하는데,
소득은 제자리걸음?
```

- "제자리걸음" → `color: #EA580C` (오렌지 하이라이트)
- 폰트: Pretendard 900, 90px, 화이트
- 배치: 프로스티드 블록 바로 위, 좌측 정렬, 하단 앵커

### 서브카피 (Sub-copy)

```
정착지원금이 시작을 바꿉니다
```

- 폰트: Pretendard 700, 64px, `rgba(255,255,255,0.95)`
- 배치: 프로스티드 글라스 블록 내, 좌측 정렬
- 의도: 짧고 임팩트 있게. 긴 설명 없이 "정착지원금 = 전환점"이라는 메시지만 전달

### CTA 버튼

```
지금 조건 확인하기
```

- 폰트: Pretendard 800, 40px, `#EA580C`
- 스타일: 필 모양 (`border-radius: 50px`), 오렌지 아웃라인 (`border: 2.5px solid #EA580C`), 배경 투명
- 패딩: `18px 48px`
- 배치: 서브카피 블록 하단, 좌측 정렬 또는 블록 너비에 맞게 확장

### 카피 흐름 (시선 이동 순서)

```
[배경 야경 → 몰입감 유발]
         ↓
[헤드라인] "열심히는 하는데, 소득은 제자리걸음?"
         ↓  공감 + 문제 인식
[서브카피] "정착지원금이 시작을 바꿉니다"
         ↓  해결책 제시 (짧고 단호)
[CTA]    "지금 조건 확인하기"
         ↓  행동 유도
```

---

## 4. 배경 이미지 프롬프트 (Gemini용)

### 영문 프롬프트

```
Modern Korean office interior at night, dark and moody atmosphere, a desk with a laptop and a cup of coffee, large window showing city lights in the background, soft ambient lighting from monitors, cool blue-grey color grading, cinematic depth of field, photorealistic, no people, no text, no logos. 1080x1080 square format.
```

### 이미지 생성 지침

- 도구: `gemini-image` 스킬
- 출력 크기: 1080 x 1080px
- 파일명: `bg.png`
- 저장 경로: `/home/jay/workspace/output/meta-ads/concept-catalog/35-hybrid-v4-refined-A/`
- 색조: 쿨 블루-그레이 계열. 하단 1/2이 어두울수록 그라디언트 합성에 유리
- 주의: 사람 없음, 텍스트 없음, 로고 없음

---

## 5. HTML 템플릿

```html
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=1080">
  <style>
    @font-face {
      font-family: 'Pretendard';
      src: url('file:///home/jay/.local/share/fonts/Pretendard/Pretendard-Black.otf') format('opentype');
      font-weight: 900;
      font-style: normal;
    }
    @font-face {
      font-family: 'Pretendard';
      src: url('file:///home/jay/.local/share/fonts/Pretendard/Pretendard-ExtraBold.otf') format('opentype');
      font-weight: 800;
      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;
      font-family: 'Pretendard', sans-serif;
    }

    /* ── 루트 컨테이너 ── */
    .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;
    }

    /* ── 하단 그라디언트 오버레이 (50% 높이) ── */
    .gradient-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 540px; /* 1080px의 50% */
      background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 30, 60, 0.55) 40%,
        rgba(0, 30, 60, 0.88) 100%
      );
    }

    /* ── 콘텐츠 스택 (하단 앵커) ── */
    .content-stack {
      position: absolute;
      bottom: 64px;
      left: 56px;
      right: 56px;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    /* ── 메인 헤드라인 ── */
    .headline {
      font-size: 90px;
      font-weight: 900;
      color: #FFFFFF;
      line-height: 1.15;
      letter-spacing: -1.5px;
      text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.70),
        0 4px 24px rgba(0, 30, 60, 0.60);
    }

    .headline .highlight {
      color: #EA580C;
    }

    /* ── 프로스티드 글라스 서브카피 블록 ── */
    .sub-copy-block {
      background: rgba(0, 30, 60, 0.45);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.18);
      box-shadow:
        0 4px 32px rgba(0, 30, 60, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
      border-radius: 16px;
      padding: 28px 36px;
    }

    .sub-copy-text {
      font-size: 64px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.95);
      line-height: 1.3;
      letter-spacing: -0.5px;
      text-shadow: 0 1px 6px rgba(0, 0, 0, 0.50);
    }

    /* ── CTA 필 버튼 ── */
    .cta-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 18px 48px;
      border: 2.5px solid #EA580C;
      border-radius: 50px;
      background: transparent;
      font-size: 40px;
      font-weight: 800;
      color: #EA580C;
      letter-spacing: -0.3px;
      cursor: pointer;
      /* 버튼 너비를 콘텐츠에 맞게 자동 조정; 최소 너비 지정 */
      align-self: flex-start;
      min-width: 480px;
    }
  </style>
</head>
<body>
  <div class="card">

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

    <!-- 하단 그라디언트 오버레이 -->
    <div class="gradient-overlay"></div>

    <!-- 콘텐츠 스택 (하단 앵커) -->
    <div class="content-stack">

      <!-- 메인 헤드라인 -->
      <div class="headline">
        열심히는 하는데,<br>
        소득은 <span class="highlight">제자리걸음?</span>
      </div>

      <!-- 프로스티드 글라스 서브카피 블록 -->
      <div class="sub-copy-block">
        <div class="sub-copy-text">정착지원금이 시작을 바꿉니다</div>
      </div>

      <!-- CTA 필 버튼 -->
      <div class="cta-pill">지금 조건 확인하기</div>

    </div>

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

---

## 6. 기술 사양

### 출력 사양

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

### 구현 방식

- **도구**: `hybrid-image` 스킬
- **Step 1**: Gemini로 배경 이미지 생성 (`bg.png`)
- **Step 2**: HTML 템플릿을 `bg.png`와 같은 디렉토리에 배치
- **Step 3**: Playwright로 1080x1080 뷰포트에서 PNG 렌더링

### 색상 코드 전체 목록

| 용도 | HEX / rgba |
|------|-----------|
| 기본 강조 오렌지 | `#EA580C` |
| 딥 네이비 | `#003B5C` |
| 하단 그라디언트 끝 | `rgba(0, 30, 60, 0.88)` |
| 프로스티드 글라스 배경 | `rgba(0, 30, 60, 0.45)` |
| 프로스티드 글라스 보더 | `rgba(255, 255, 255, 0.18)` |
| 헤드라인 화이트 | `#FFFFFF` |
| 서브카피 화이트 | `rgba(255, 255, 255, 0.95)` |

### 폰트 스택

```css
font-family: 'Pretendard', sans-serif;
/* 로컬 경로: file:///home/jay/.local/share/fonts/Pretendard/ */
```

| 역할 | weight | size |
|------|--------|------|
| 헤드라인 | 900 | 90px |
| 서브카피 | 700 | 64px |
| CTA 버튼 | 800 | 40px |

---

## 7. 품질 체크리스트

### 비주얼 체크

- [ ] 배경 야경 사진이 어둡고 무드 있는 쿨 블루-그레이 톤인가
- [ ] 하단 그라디언트가 사진과 자연스럽게 합성되었는가 (하드 엣지 없음)
- [ ] 헤드라인 90px 텍스트가 배경 위에서 선명하게 읽히는가 (text-shadow 확인)
- [ ] "제자리걸음?" 키워드가 오렌지 (#EA580C)로 강조되었는가
- [ ] 프로스티드 글라스 블록이 backdrop-filter blur(20px)로 부드럽게 처리되었는가
- [ ] 프로스티드 블록 보더 글로우가 서브틀하게 적용되었는가 (너무 강하지 않게)
- [ ] 서브카피 64px 텍스트가 프로스티드 블록 내에서 충분한 여백과 함께 표시되는가
- [ ] CTA 필 버튼의 오렌지 아웃라인이 배경 대비 명확하게 보이는가
- [ ] 전체 콘텐츠 스택이 하단 64px 여백 위에 잘 앉혀있는가

### 폰트 규칙 체크

- [ ] 헤드라인: 90px (**84px+ 규칙 충족**)
- [ ] 서브카피: 64px (**64px+ 규칙 충족**)
- [ ] CTA: 40px (**40px 최솟값 충족**)

### 금지 표현 체크

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

### 법적 준수 체크

| 체크 항목 | 상태 | 비고 |
|----------|------|------|
| 확정 수익 표현 금지 | 준수 | 수익 확정 표현 없음 |
| 과장 광고 금지 | 준수 | 정착지원금 제도 사실 전달 |
| 금융상품 오인 소지 | 없음 | 리쿠르팅 광고로 식별 가능 |

---

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