# 디자인 브리프 v2 — #03 비완성의 진정성 (Anti-Polish Authenticity)
> **v2 변경 사유**: 폰트 규칙 준수 — 40px 미만 완전 제거, 모든 텍스트 40px 이상으로 재설계

## 도구
- hybrid-image (Gemini 배경 생성 + Playwright HTML 오버레이)
- satori-cardnews **절대 금지**

## 사이즈
- 1080x1080px PNG

---

## 비주얼 컨셉
광고처럼 보이면 실패하는 컨셉. 누군가 실제로 노트에 끄적인 메모처럼 보여야 한다. 구겨진 노트 위에 손글씨로 쓴 짧고 굵은 한 마디("제자리걸음?")와 형광펜 하이라이트, 포스트잇 CTA가 자연스럽게 배치된 UGC 감성 구성.

**v2 핵심 변경**: 텍스트 양을 대폭 축약해 폰트를 84px 이상으로 키워도 컨셉 유지. 굵은 손글씨 = 메모장에 답답한 마음을 꾹꾹 눌러쓴 한 마디.

참고 사례: Dove "Real Beauty" 셀카 스타일 광고

---

## 카피 (v2 축약)

| 역할 | 카피 | 폰트 규칙 |
|------|------|-----------|
| 메인 (손글씨 대형) | "제자리걸음?" | **84px 이상** |
| 보조 한 줄 | "열심히 하는데 월급만 안 오른다면" | **64px 이상** |
| 형광펜 하이라이트 | "정착지원금 1,000만원" | **64px 이상** |
| 포스트잇 CTA | "T.O.P 상담신청 →" | **40px 이상** |

> **삭제된 요소**: "경력직 직전연봉 50%까지 지원" (22px급 보조 메모) — 폰트 규칙 준수를 위해 완전 삭제

---

## 색상 팔레트

| 역할 | 색상코드 | 설명 |
|------|----------|------|
| 배경 (노트) | `#F5F0E1` | 크림/미색 — 구겨진 노트 질감 |
| 메인 텍스트 | `#2C2C2C` | 거의 검정, 손글씨 잉크 느낌 |
| 형광펜 레이어 | `rgba(255, 255, 0, 0.72)` | 노란 형광, 투명도 72% |
| 포스트잇 배경 | `#FFE066` | 노란 포스트잇 |
| 포스트잇 텍스트 | `#2C2C2C` | |
| 강조 화살표 | `#E74C3C` | 빨간 볼펜 느낌 |

---

## 폰트 규칙 (v2 — 전면 준수)

| 요소 | 폰트 패밀리 | 크기 | 비고 |
|------|------------|------|------|
| 메인 "제자리걸음?" | 나눔손글씨 펜 (Nanum Pen Script) | **88px** | 84px 이상 준수 |
| 보조 한 줄 | 나눔손글씨 펜 | **64px** | 64px 이상 준수 |
| 형광펜 "정착지원금 1,000만원" | 나눔손글씨 펜 | **68px** | 64px 이상 준수 |
| 포스트잇 "T.O.P 상담신청 →" | 나눔손글씨 펜 | **44px** | 40px 이상 준수 |

> **절대 금지**: 40px 미만 폰트는 이 브리프 어디에도 존재하지 않는다.

- CSS `transform: rotate()` — 각 텍스트 블록마다 **서로 다른** 각도 적용 (같은 각도 반복 금지)
  - 메인: `rotate(-3deg)`
  - 보조 한 줄: `rotate(-1deg)`
  - 형광펜 블록: `rotate(1deg)`
  - 포스트잇: `rotate(4deg)`

---

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

```
┌─────────────────────────────────────────────────┐
│  [배경: 구겨진 노트 질감 — Gemini 생성, #F5F0E1]  │
│                                                   │
│                                                   │
│  ┌ 상단 좌측 (rotate -3deg) ──────────────────┐  │
│  │                                             │  │
│  │   "제자리걸음?"                             │  │
│  │   (나눔손글씨 펜, 88px, #2C2C2C)           │  │
│  │                                             │  │
│  └─────────────────────────────────────────────┘  │
│                                                   │
│  ┌ 중앙 상단 (rotate -1deg) ──────────────────┐  │
│  │  "열심히 하는데 월급만 안 오른다면"          │  │
│  │  (나눔손글씨 펜, 64px, #2C2C2C)            │  │
│  └─────────────────────────────────────────────┘  │
│                                                   │
│  ┌ 중앙 (rotate +1deg) ───────────────────────┐  │
│  │  ███████████████████████████████████████   │  │
│  │  "정착지원금 1,000만원"                     │  │  ← 형광펜 rgba(255,255,0,0.72) 레이어
│  │  ███████████████████████████████████████   │  │
│  │  (나눔손글씨 펜, 68px, #2C2C2C)            │  │
│  └─────────────────────────────────────────────┘  │
│                                                   │
│                   ┌────────────────────────────┐  │
│                   │  T.O.P 상담신청 →          │  │  ← 포스트잇 #FFE066 (rotate +4deg)
│                   │  (44px, #2C2C2C)           │  │
│                   └────────────────────────────┘  │
│                                                   │
└─────────────────────────────────────────────────┘
```

### 레이아웃 주의사항
- **의도적 비정렬**: 각 요소가 조금씩 다른 각도, 다른 위치에 자유 배치
- 포스트잇: `box-shadow: 2px 3px 6px rgba(0,0,0,0.18)` — 미세한 입체감, 과하면 광고처럼 보임
- 형광펜 효과: `background: rgba(255,255,0,0.72)` + `padding: 4px 8px` — z-index를 텍스트보다 낮게
- 메인 "제자리걸음?"은 줄바꿈 없이 **한 줄** 단독 배치 — 임팩트 극대화

---

## 배경 이미지 생성 프롬프트 (Gemini)

```
Crumpled notebook paper texture, slightly yellowed with age, natural soft lighting from above, realistic paper wrinkles and fold lines, visible crease marks and subtle shadows, cream and off-white tones, no text, no ruled lines, no printed content, flat lay photography style, 1080x1080 square format, high resolution, photorealistic
```

---

## CSS 구현 참고 (Playwright 오버레이)

```css
/* 공통 */
font-family: 'Nanum Pen Script', cursive;
/* Google Fonts CDN: https://fonts.googleapis.com/css2?family=Nanum+Pen+Script */

/* 메인 */
.main-copy {
  font-size: 88px;
  color: #2C2C2C;
  transform: rotate(-3deg);
  line-height: 1.1;
}

/* 보조 한 줄 */
.sub-copy {
  font-size: 64px;
  color: #2C2C2C;
  transform: rotate(-1deg);
  line-height: 1.2;
}

/* 형광펜 블록 */
.highlight-copy {
  font-size: 68px;
  color: #2C2C2C;
  background: rgba(255, 255, 0, 0.72);
  padding: 4px 12px;
  transform: rotate(1deg);
  display: inline-block;
}

/* 포스트잇 */
.postit {
  font-size: 44px;
  color: #2C2C2C;
  background: #FFE066;
  padding: 20px 28px;
  box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.18);
  transform: rotate(4deg);
  display: inline-block;
}
```

---

## 주의사항

- **광고처럼 보이는 순간 컨셉 실패** — 과도한 정렬, 깔끔한 여백 금지
- **폰트 규칙 절대 준수**: 핵심 메시지 84px 이상 / 보조 메시지 64px 이상 / 최소 40px (이하 절대 금지)
- 손글씨 폰트 미설치 시 Google Fonts CDN 사용: `Nanum Pen Script` 또는 `Gaegu`
- CSS `transform: rotate()` 값은 각 요소마다 반드시 다르게 적용
- 형광펜 레이어는 텍스트보다 낮은 z-index에 배치
- 포스트잇 drop-shadow 미세하게 — 너무 강하면 광고처럼 보임
- **satori-cardnews 사용 금지** — hybrid-image만 사용