# 디자인 브리프 v2 — #02 감정 타이포 시스템 (Expressive Typography System)

> **v2 변경 이유**: 폰트 규칙 위반 수정 — 핵심 메시지 84px+, 보조 메시지 64px+, 최소 폰트 40px 절대 준수

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

## 사이즈
- 1080x1080px PNG

## 비주얼 컨셉
Variable Font의 weight 값(100~900)을 감정의 강도와 1:1 대응시키는 타이포그래피 시스템. "제자리걸음"은 극도로 얇은 weight(100~200)으로 시각적 무력함·지침을 표현하고, "성장하세요"는 극도로 굵은 weight(800~900)으로 강렬한 확신과 에너지를 표현. 이미지 없이 글자 두께만으로 감정의 전환을 완성하는 구성.

참고 사례: Academy "Caption with Intention" (Cannes Lions 2025)

## 카피 (v2 수정)
- 상단 (약함): "제자리걸음"
- 중단 (연결): "T.O.P 사업단과 함께"
- 하단 (강함): "성장하세요"
- CTA: "지금 상담 신청"

> **삭제된 항목**: "신입 정착지원금 최대 1,000만원 | 경력직 직전연봉 50%까지 지원" — 40px 미만 없이 1080px 안에 배치 불가하여 삭제.
> **변경된 항목**: "성장을 시작하세요" → "성장하세요" (5글자 → 4글자, 84px에서 1줄 확보).

## 색상 팔레트
- 배경: 딥 네이비 `#0A1628`
- 기본 텍스트: 화이트 `#FFFFFF`
- 포인트 컬러: 민트 `#4ECDC4` — "성장하세요" 및 CTA에 적용
- CTA 버튼: 민트 `#4ECDC4` 배경 + 딥 네이비 `#0A1628` 텍스트
- 구분선: 민트 `#4ECDC4` (1px 수평선)

```
색상 스와치:
  ■ #0A1628  딥 네이비 (배경)
  ■ #FFFFFF  화이트 (기본 텍스트)
  ■ #4ECDC4  민트 (포인트)
```

## 폰트 (v2 — 40px 미만 전면 제거)

| 요소 | font-variation-settings | font-size | color | opacity |
|------|------------------------|-----------|-------|---------|
| "제자리걸음" | `'wght' 100` | **96px** | #FFFFFF | 0.55 |
| "T.O.P 사업단과 함께" | `'wght' 400` | **48px** | #FFFFFF | 0.85 |
| "성장하세요" | `'wght' 900` | **96px** | #4ECDC4 | 1.0 |
| CTA 버튼 텍스트 | `'wght' 700` | **44px** | #0A1628 | 1.0 |

- 전체 패밀리: **Pretendard Variable**
- 최소 폰트 크기: **44px** (규칙 최솟값 40px 준수, 여유 4px 확보)
- ⚠️ 40px 미만 폰트 사용 절대 금지

## 레이아웃

```
┌─────────────────────────────────────────┐
│            1080 × 1080 px               │
│         배경: #0A1628 단색              │
│                                         │
│  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ (상단 패딩 80px) │
│                                         │
│  ┌─────────────────────────────────┐   │
│  │         제자리걸음              │   │  상단 약 28%
│  │  weight:100, 96px, opacity 0.55 │   │  (≈300px 영역)
│  └─────────────────────────────────┘   │
│                                         │
│  ─────── ─ ─ ─ ─ ─ ─ ─ (여백 40px)    │
│                                         │
│  ┌─────────────────────────────────┐   │
│  │     T.O.P 사업단과 함께         │   │  중단 약 14%
│  │  weight:400, 48px, #FFFFFF      │   │  (≈150px 영역)
│  └─────────────────────────────────┘   │
│                                         │
│  ─ ─ [민트 수평 구분선 1px #4ECDC4] ─ ─│  구분선 (선택)
│                                         │
│  ─────── ─ ─ ─ ─ ─ ─ ─ (여백 40px)    │
│                                         │
│  ┌─────────────────────────────────┐   │
│  │          성장하세요             │   │  중하단 약 28%
│  │  weight:900, 96px, #4ECDC4      │   │  (≈300px 영역)
│  └─────────────────────────────────┘   │
│                                         │
│  ─────── ─ ─ ─ ─ ─ ─ ─ (여백 60px)    │
│                                         │
│  ┌─────────────────────────────────┐   │
│  │  [ 지금 상담 신청 ]             │   │  하단 약 12%
│  │  weight:700, 44px, #0A1628      │   │  (≈130px 영역)
│  │  버튼 배경: #4ECDC4             │   │
│  └─────────────────────────────────┘   │
│                                         │
│  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ (하단 패딩 80px)│
└─────────────────────────────────────────┘

전체 높이 배분:
  상단 패딩:       80px
  제자리걸음:     300px  (96px 텍스트 + 상하 여백)
  간격:            40px
  T.O.P 사업단:  150px  (48px 텍스트 + 상하 여백)
  구분선 영역:    30px
  간격:            40px
  성장하세요:     300px  (96px 텍스트 + 상하 여백)
  간격:            60px
  CTA 버튼:       130px  (44px 텍스트 + 패딩)
  하단 패딩:      -30px  (조정)
  합계:          1080px ✓
```

- 전체 중앙 정렬 (`text-align: center`, `align-items: center`)
- "제자리걸음"과 "성장하세요" 사이에 민트 수평 구분선 1px (`#4ECDC4`) 선택적 추가
- CTA 버튼: 좌우 패딩 48px, 상하 패딩 20px, border-radius 8px

## 감정 대비 연출 포인트
- **"제자리걸음"**: weight 100 + opacity 0.55 → 딥 네이비 배경에서 희미하게 녹아드는 느낌, 무력감
- **"T.O.P 사업단과 함께"**: weight 400 + 48px → 전환의 매개체, 조용하지만 명확하게
- **"성장하세요"**: weight 900 + #4ECDC4 → 배경을 뚫고 나오는 강렬한 에너지, 민트 컬러로 시선 집중

## HTML/CSS 구현 가이드

```css
/* 폰트 로드 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');

body {
  font-family: 'Pretendard Variable', sans-serif;
  background-color: #0A1628;
  width: 1080px;
  height: 1080px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.text-weak {
  font-variation-settings: 'wght' 100;
  font-size: 96px;
  color: #FFFFFF;
  opacity: 0.55;
  line-height: 1.1;
}

.text-bridge {
  font-variation-settings: 'wght' 400;
  font-size: 48px;
  color: #FFFFFF;
  opacity: 0.85;
  line-height: 1.2;
}

.text-strong {
  font-variation-settings: 'wght' 900;
  font-size: 96px;
  color: #4ECDC4;
  opacity: 1.0;
  line-height: 1.1;
}

.cta-button {
  font-variation-settings: 'wght' 700;
  font-size: 44px;          /* ← 최솟값 44px, 규칙 40px+ 준수 */
  color: #0A1628;
  background-color: #4ECDC4;
  padding: 20px 48px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  line-height: 1.0;
}
```

## 폰트 규칙 준수 체크리스트

| 항목 | v1 (위반) | v2 (수정) | 규칙 충족 |
|------|-----------|-----------|-----------|
| "제자리걸음" | 72~80px ❌ | **96px** ✅ | 84px+ 핵심메시지 |
| "T.O.P 사업단과 함께" | 24px ❌ | **48px** ✅ | 40px+ 최솟값 |
| "성장하세요" | 72~80px ❌ | **96px** ✅ | 84px+ 핵심메시지 |
| 보조 정보 | 16~18px ❌ | **삭제** ✅ | (삭제로 위반 제거) |
| CTA 텍스트 | 20px ❌ | **44px** ✅ | 40px+ 최솟값 |
| **최솟값** | 16px ❌ | **44px** ✅ | 40px 이하 없음 |

## 배경 이미지 생성 프롬프트 (필요 시)
해당 없음 — 단색 배경, Gemini 이미지 생성 불필요

## 주의사항
- 이미지·아이콘·일러스트 사용 절대 금지 — 타이포그래피만으로 승부
- Pretendard Variable CDN 또는 로컬 폰트 파일에서 wght 100~900 전 범위 지원 확인 필요
- CSS: `font-variation-settings: 'wght' [값]` 사용 (font-weight 단독 사용 시 Variable 효과 미반영 가능)
- "제자리걸음"의 얇은 weight가 딥 네이비 배경에서 잘 보이도록 opacity 조정 (0.5~0.6 권장)
- satori-cardnews 사용 금지 — **hybrid-image만 사용**
- **40px 미만 폰트 절대 금지** — 모든 텍스트 요소 최솟값 44px 이상 유지