# 디자인 브리프 v2 — #01 제약을 캔버스로 (Constraint-as-Canvas)

> **v2 변경 사항**: 폰트 최소 40px 규칙 전면 준수. 배경 약관 텍스트를 12-14px 밀집 배치에서 "약관 조항 단편" 방식으로 변경.

## 도구
- hybrid-image (Playwright HTML→PNG)
- satori-cardnews **절대 금지**

## 사이즈
- 1080x1080px PNG

---

## 비주얼 컨셉
보험 약관 핵심 조항 한두 줄이 배경 전면에 크게 자리잡고, 그 위에 광고 메시지가 오렌지로 폭발하는 구성. 기존의 "약관 텍스트 빽빽하게 깔기" 대신 **"약관 조항 단편(Fragment)"** 방식 채택 — 조항 번호와 핵심 문구 1~2줄만 배경에 배치하여 계약서 느낌을 유지하면서 40px 최소 폰트 규칙 준수.

이미지·아이콘 일절 사용 금지 — 텍스트만으로 완성하는 극도의 절제 미학.

참고 사례: AXA "Three Words" (Cannes Lions 2025 Grand Prix)

---

## 카피

### 메인 (84px+)
```
월급 제자리?
```
- 1080px 너비 기준 84px Bold → 약 10자 이내 권장

### 서브 (64px+)
```
정착지원금 최대 1,000만원
```
- 두 줄 분리 허용: "정착지원금 최대" / "1,000만원"

### CTA (40px+)
```
T.O.P 사업단 | 지금 상담 신청
```

### 배경 약관 조항 단편 (40px, 회색)
```
제4조 (지원금 지급)
정착지원금은 입사 후 3개월 이내 지급한다.
```
- 2줄 고정, 조항 번호 포함
- 폰트: 나눔명조 또는 본명조, **정확히 40px**, font-weight 400
- 컬러: #CCCCCC (배경에 묻혀 보이되 읽히는 수준)
- 위치: 상단 영역 또는 하단 영역 한 블록으로만 배치

---

## 색상 팔레트

| 역할 | 색상 | HEX |
|------|------|-----|
| 배경 | 크림 | #FFF8F0 |
| 약관 조항 텍스트 | 연회색 | #CCCCCC |
| 메인 메시지 | 오렌지 | #FF6B35 |
| 서브 메시지 | 오렌지 | #FF6B35 |
| CTA 텍스트 | 진회색 | #333333 |
| CTA 바 배경 | 오렌지 | #FF6B35 |
| 구분선 | 오렌지 | #FF6B35 |

---

## 폰트 규칙 (절대 준수)

| 요소 | 폰트 | 크기 | 굵기 |
|------|------|------|------|
| 메인 "월급 제자리?" | Pretendard | **84px** | Bold (700) |
| 서브 "정착지원금 최대 1,000만원" | Pretendard | **64px** | Bold (700) |
| CTA "T.O.P 사업단 \| 지금 상담 신청" | Pretendard | **40px** | SemiBold (600) |
| 배경 약관 조항 단편 | 나눔명조 | **40px** | Regular (400) |

> **최소 폰트: 40px — 이하 절대 금지**

---

## 레이아웃 ASCII 다이어그램

```
┌──────────────────────────────────────────┐  ← 1080px
│                                          │
│  ┌──────────────────────────────────┐    │  ↑
│  │  제4조 (지원금 지급)              │    │  │ 상단 25%
│  │  정착지원금은 입사 후 3개월       │    │  │ (약관 조항 단편)
│  │  이내 지급한다.                  │    │  ↓
│  └──────────────────────────────────┘    │
│  ──────────────────────────────────────  │  ← 오렌지 구분선 (2px)
│                                          │
│                                          │  ↑
│      월급 제자리?                         │  │ 중앙 50%
│      (84px, 오렌지, Bold)                │  │ (핵심 메시지 영역)
│                                          │  │
│      정착지원금 최대                      │  │
│      1,000만원                           │  │
│      (64px, 오렌지, Bold)                │  ↓
│                                          │
│  ──────────────────────────────────────  │  ← 오렌지 구분선 (2px)
│                                          │  ↑
│  ████████████████████████████████████   │  │ 하단 바 25%
│    T.O.P 사업단 | 지금 상담 신청          │  │ (CTA, 오렌지 바)
│    (40px, 흰색, SemiBold)               │  ↓
└──────────────────────────────────────────┘
```

- 메인 메시지 영역: 좌측 정렬 또는 중앙 정렬 선택 가능
- 약관 조항 단편: 상단 영역에 한 블록으로만 배치 (반복 없음)
- CTA 바: 오렌지(#FF6B35) 전체 너비 바, 흰색 텍스트

---

## HTML 구현 가이드 (hybrid-image용)

```html
<!-- 배경: 크림 #FFF8F0 -->
<!-- 전체 크기: 1080x1080px -->

<!-- 상단 약관 조항 단편 블록 (padding: 60px 60px 40px) -->
<div class="clause-block">
  <p style="font-family: '나눔명조'; font-size: 40px; color: #CCCCCC; line-height: 1.5;">
    제4조 (지원금 지급)<br>
    정착지원금은 입사 후 3개월 이내 지급한다.
  </p>
</div>

<!-- 오렌지 구분선 -->
<hr style="border: 2px solid #FF6B35; margin: 0 60px;" />

<!-- 메인 메시지 영역 (padding: 60px) -->
<div class="main-message">
  <h1 style="font-family: 'Pretendard'; font-size: 84px; font-weight: 700; color: #FF6B35;">
    월급 제자리?
  </h1>
  <h2 style="font-family: 'Pretendard'; font-size: 64px; font-weight: 700; color: #FF6B35; margin-top: 24px;">
    정착지원금 최대<br>1,000만원
  </h2>
</div>

<!-- 오렌지 구분선 -->
<hr style="border: 2px solid #FF6B35; margin: 0;" />

<!-- CTA 바 -->
<div class="cta-bar" style="background: #FF6B35; padding: 40px 60px;">
  <p style="font-family: 'Pretendard'; font-size: 40px; font-weight: 600; color: #FFFFFF;">
    T.O.P 사업단 | 지금 상담 신청
  </p>
</div>
```

---

## 컨셉 변경 이유 (v1 → v2)

| 항목 | v1 (원본) | v2 (수정) |
|------|-----------|-----------|
| 배경 약관 텍스트 | 12-14px 밀집 다단 배치 | 40px 조항 단편 1블록 |
| 메인 카피 | "월급은 제자리걸음?" (52-60px) | "월급 제자리?" (84px) |
| 서브 카피 | "정착지원금 최대 1,000만원" (32-36px) | 동일, 64px로 확대 |
| CTA | 18-20px | 40px |
| 계약서 느낌 유지 | 텍스트 밀도로 표현 | 조항 번호+문체로 표현 |

---

## 배경 이미지 생성 프롬프트 (필요 시)
해당 없음 — 텍스트 전용 구성, Gemini 이미지 생성 불필요

---

## 주의사항
- 이미지·아이콘·일러스트 사용 절대 금지
- **모든 텍스트 40px 미만 절대 금지**
- 약관 조항 단편은 실제 계약 문체로 작성 (조항 번호 포함)
- 배경 약관 텍스트가 너무 선명하면 메인 메시지 묻힘 → #CCCCCC 이하 명도 유지
- satori-cardnews 사용 금지 — hybrid-image만 사용