# 컨셉 #04 — 현실-판타지 경계 해체 (Reality-Fantasy Dissolution)
# 폰트 규칙 준수 v2 브리프

**작성일:** 2026-03-29
**작성자:** Apollo (콘텐츠 프로듀서)
**버전:** v2 (폰트 규칙 전면 적용)

---

## 1. 개요

| 항목 | 내용 |
|------|------|
| 캔버스 사이즈 | 1080 × 1080 px |
| 출력 포맷 | PNG |
| 제작 방식 | hybrid-image (Gemini 배경 생성 + HTML 오버레이) |
| 금지 도구 | satori-cardnews 절대 금지 |

---

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

> 이 규칙을 위반하는 폰트 크기는 단 한 줄도 허용되지 않습니다.

| 용도 | 최소 크기 | 비고 |
|------|----------|------|
| 핵심 메시지 (Main Headline) | **84px 이상** | 필수 |
| 보조 메시지 (Sub Copy / 이벤트 보상) | **64px 이상** | 필수 |
| 모든 나머지 요소 (CTA, HUD 배지 등) | **40px 이상** | 절대 하한선 |
| **40px 미만** | **절대 금지** | 위반 시 재제작 |

---

## 3. v1 vs v2 폰트 비교

| 요소 | v1 (위반) | v2 (준수) | 변화 |
|------|----------|----------|------|
| `main-headline` | 52px | **88px** | +36px |
| `sub-copy` | 22px | **64px** | +42px |
| `cta-btn` | 20px | **44px** | +24px |
| `hud-label` | 11px | 삭제 → 단순화 | — |
| `hud-stat-name` | 10px | 삭제 → 단순화 | — |
| `hud-stat-val` | 10px | 삭제 → 단순화 | — |
| `lv-badge` | 13px | **48px** | +35px |
| `event-title` | 12px | 삭제 → 단순화 | — |
| `event-body` | 13px | 삭제 → 단순화 | — |
| `event-reward` | 16px | **72px** | +56px |
| `footer-notice` | 13px | **40px** | +27px |

---

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

```
┌─────────────────────────────────────────────────┐  ← 1080px
│                                                 │
│  ┌──────────────────┐        ┌───────────────┐  │  ← y:48px
│  │  HP ████░░  80%  │        │  [ LV.3 ]     │  │
│  │  EXP █░░░  15%   │        │  48px, 네온그린│  │
│  │  (바 그래픽만,   │        └───────────────┘  │
│  │   텍스트 삭제)   │                           │
│  └──────────────────┘                           │
│           ← 좌상단 HUD (바 그래픽 전용)         │
│                                                 │
│                                                 │
│                         ┌─────────────────────┐ │
│                         │  ⚡ 레벨업 이벤트   │ │  ← y:center
│                         │                     │ │
│                         │  +1,000만원         │ │
│                         │  72px, #FFB800      │ │
│                         └─────────────────────┘ │
│                             ← 우측 이벤트 팝업  │
│                                                 │
│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│  ← y:702px
│  ┌─────────────────────────────────────────┐   │
│  │                                         │   │
│  │  월급 제자리걸음?                       │   │
│  │  88px, Bold, #FFFFFF                   │   │
│  │                                         │   │
│  │  정착지원금 최대 1,000만원             │   │
│  │  64px, Regular, 1,000만원=네온그린     │   │
│  │                                         │   │
│  │  [상담 신청하기]   T.O.P | 7월 조건변경│   │
│  │  44px, 네온그린    40px, rgba 화이트   │   │
│  └─────────────────────────────────────────┘   │
└─────────────────────────────────────────────────┘
       ← 하단 패널 (378px, 배경 어두운 오버레이)
```

---

## 5. 색상 팔레트

| 역할 | 색상 코드 | 용도 |
|------|----------|------|
| 네온 그린 (브랜드 액센트) | `#00FF88` | HUD 테두리, lv-badge, sub-copy 강조, CTA 버튼 |
| 골드 앰버 (이벤트 강조) | `#FFB800` | 이벤트 팝업 테두리, +1,000만원 텍스트 |
| 위험 빨강 | `#FF4444` | HP 번아웃 바, 조건 변경 경고 텍스트 |
| 순수 화이트 | `#FFFFFF` | 메인 헤드라인 |
| 서브 화이트 | `rgba(255,255,255,0.85)` | 서브 카피 |
| 어두운 배경 패널 | `rgba(0, 8, 4, 0.85)` | 하단 텍스트 패널 배경 |
| HUD 패널 배경 | `rgba(0, 20, 10, 0.80)` | 좌상단 / 우측 HUD 패널 |
| 네온 글로우 그림자 | `rgba(0,255,136,0.4)` | box-shadow, text-shadow |
| 배경 어둡힘 | `rgba(0, 0, 0, 0.45)` | 전체 오버레이 |

---

## 6. 레이어 구조

```
Z-INDEX 스택 (낮은 → 높은)
─────────────────────────────
[1] #bg           — Gemini 생성 배경 이미지 (brightness 60%, saturate 70%)
[2] #overlay      — 전체 어두운 오버레이 (rgba 0,0,0,0.45)
[3] #scanlines    — 스캔라인 텍스처 (opacity 0.4, pointer-events none)
[4] #hud-stats    — 좌상단 HUD 스탯 패널 (HP/EXP 바 그래픽)
[5] #hud-level    — 우상단 레벨 배지
[6] #hud-event    — 우측 중단 이벤트 팝업
[7] #bottom-panel — 하단 텍스트 패널 (메인 카피 + CTA)
```

---

## 7. 각 요소 상세 스펙

### 7-1. 좌상단 HUD 스탯 패널 (`#hud-stats`)

```
위치: top 48px, left 48px
크기: width 260px
배경: rgba(0, 20, 10, 0.80)
테두리: 2px solid #00FF88
글로우: box-shadow 0 0 12px #00FF88

내부 구성:
- HP 번아웃 바 레이블: 폰트 없음 (색상 바 그래픽으로만 표현)
  → 바 높이: 16px (텍스트 없이 바 색상으로 구분)
  → HP 바: #FF4444 그라디언트, 너비 80%
  → EXP 바: #AAAAAA, 너비 15%
  → 바 사이 간격: 12px
- 바 위에 레이블 텍스트는 생략 (폰트 규칙 위반 방지)
```

> HUD 세부 수치 텍스트는 완전히 제거합니다. 게임 느낌은 바 그래픽 색상과 테두리 글로우로 유지합니다.

### 7-2. 우상단 레벨 배지 (`#hud-level`)

```
위치: top 48px, right 48px
패딩: 12px 24px
배경: rgba(0, 20, 10, 0.80)
테두리: 2px solid #00FF88
글로우: box-shadow 0 0 12px #00FF88

텍스트: "LV.3"
  font-size: 48px       ← 규칙 준수 (40px 이상)
  font-weight: 900
  color: #00FF88
  text-shadow: 0 0 16px #00FF88
  letter-spacing: 2px
```

### 7-3. 우측 이벤트 팝업 (`#hud-event`)

```
위치: right 48px, top 50% (translateY -50%)
크기: width 280px
패딩: 20px 24px
배경: rgba(0, 20, 10, 0.80)
테두리: 2px solid #FFB800
글로우: box-shadow 0 0 12px #FFB800

텍스트 1 (이벤트 라벨): "⚡ LEVEL UP EVENT"
  font-size: 40px       ← 규칙 준수 (40px 최소)
  font-weight: 900
  color: #FFB800
  letter-spacing: 1px
  margin-bottom: 12px

텍스트 2 (보상 금액): "+1,000만원"
  font-size: 72px       ← 규칙 준수 (64px 이상)
  font-weight: 900
  color: #FFB800
  text-shadow: 0 0 16px rgba(255,184,0,0.8)
  line-height: 1.1
```

### 7-4. 하단 텍스트 패널 (`#bottom-panel`)

```
위치: bottom 0, left 0, right 0
높이: 378px (1080 × 0.35)
배경: rgba(0, 8, 4, 0.85)
상단 테두리: 1px solid rgba(0,255,136,0.35)
패딩: 40px 56px 36px
레이아웃: flex-direction column, justify-content space-between
```

**메인 헤드라인**

```
텍스트: "월급 제자리걸음?"
  font-size: 88px       ← 규칙 준수 (84px 이상)
  font-weight: 800
  color: #FFFFFF
  line-height: 1.2
  letter-spacing: -1px
```

**서브 카피**

```
텍스트: "정착지원금 최대 1,000만원"
  font-size: 64px       ← 규칙 준수 (64px 이상)
  font-weight: 500
  color: rgba(255,255,255,0.85)
  margin-top: 16px
  line-height: 1.3

  강조 부분 "1,000만원":
    color: #00FF88
    font-weight: 700
```

**CTA 버튼**

```
텍스트: "상담 신청하기"
  font-size: 44px       ← 규칙 준수 (40px 이상)
  font-weight: 800
  color: #00FF88
  padding: 20px 48px
  border: 2px solid #00FF88
  border-radius: 4px
  background: rgba(0,255,136,0.10)
  box-shadow: 0 0 16px rgba(0,255,136,0.40)
  text-shadow: 0 0 10px rgba(0,255,136,0.6)
```

**푸터 노티스**

```
텍스트: "T.O.P 사업단 | 2026.7월 조건 변경 예정"
  font-size: 40px       ← 규칙 준수 (40px 최소 정확히)
  font-weight: 500
  color: rgba(255,255,255,0.50)

  강조 부분 "2026.7월 조건 변경 예정":
    color: #FF4444
    font-weight: 700
```

---

## 8. 게임 분위기 유지 전략

세부 수치 텍스트를 제거하되 게임 UI 느낌은 다음 시각 요소로 유지합니다.

1. **네온 글로우 테두리**: 모든 HUD 패널에 `box-shadow: 0 0 12px #00FF88` 적용
2. **스캔라인 효과**: `#scanlines` 레이어 — `repeating-linear-gradient` 0.4 opacity
3. **HP/EXP 바 그래픽**: 텍스트 없이 색상 바만으로 번아웃/성장 상태 시각화
4. **컬러 코딩**: 위험(빨강), 정상(그린), 이벤트(골드) — 게임 HUD 관례 준수
5. **대문자 영문**: `LEVEL UP EVENT` 등 게임 UI 특유의 올캡스 활용
6. **배경 어둡힘 + 채도 감소**: 현실(어두운 사무실)과 판타지(네온 HUD)의 대비 극대화

---

## 9. Gemini 배경 이미지 생성 프롬프트

### 메인 프롬프트 (권장)

```
A dark, moody office interior at night. A tired Korean office worker (30s, male)
sits at a cluttered desk with papers and a laptop, dimly lit by the monitor glow.
The room has gray walls, fluorescent lights mostly off, a coffee cup, and a stack
of documents. The atmosphere is heavy and exhausted — blue-gray color tone,
cinematic shallow depth of field. No text, no UI elements, no overlays.
Photorealistic, ultra-high quality, 1:1 square format.
```

### 대체 프롬프트 (배경 인물 없이)

```
Dark corporate office at midnight, empty desk with glowing computer monitor,
scattered papers and coffee cups, urban city lights visible through large window,
muted blue-gray cinematic tones, atmospheric fog effect, professional photography
style, no text, no UI elements. Square 1:1 format, photorealistic.
```

### Gemini 파라미터

| 파라미터 | 값 |
|---------|-----|
| 종횡비 | 1:1 (1080×1080) |
| 스타일 | photorealistic |
| 색조 | dark, cinematic, blue-gray |
| 금지 요소 | text, UI, overlays, bright colors |

### HTML 배경 처리

```css
#bg {
  filter: brightness(0.60) saturate(0.70);
  /* 배경을 충분히 어둡게 → HUD 오버레이 가독성 확보 */
}
```

---

## 10. 폰트 규칙 최종 검증 체크리스트

작업 완료 후 아래 항목을 전수 확인하세요.

```
[ ] main-headline       : 88px  ≥ 84px  ✓
[ ] sub-copy            : 64px  ≥ 64px  ✓
[ ] event-reward        : 72px  ≥ 64px  ✓
[ ] event-label         : 40px  ≥ 40px  ✓
[ ] lv-badge            : 48px  ≥ 40px  ✓
[ ] cta-btn             : 44px  ≥ 40px  ✓
[ ] footer-notice       : 40px  ≥ 40px  ✓
[ ] hud 세부 수치 텍스트 : 완전 삭제됨 (바 그래픽으로 대체)
[ ] 40px 미만 폰트      : 전체 파일에서 0건
```

---

## 11. v2 구현 시 주의사항

1. **HUD 스탯 패널에 텍스트 레이블 추가 금지**: `hud-stat-name`, `hud-stat-val`, `hud-label` 클래스는 v2에서 사용하지 않습니다.
2. **이벤트 팝업 단순화 유지**: "T.O.P 합류 시" 같은 보조 설명 텍스트는 삭제합니다. `+1,000만원` 하나로 임팩트를 줍니다.
3. **메인 헤드라인 1줄 유지**: `월급 제자리걸음?`은 7자로 88px에서 1줄에 들어옵니다. 줄바꿈하지 마세요.
4. **서브 카피 1줄 유지**: `정착지원금 최대 1,000만원`은 64px에서 약 960px 너비를 차지합니다. 하단 패널 패딩(56px × 2)을 고려하면 정확히 1줄입니다.
5. **CTA와 푸터 노티스 같은 줄 배치**: `cta-row`에서 `justify-content: space-between`으로 좌(CTA)/우(푸터) 배치 유지. 단, 두 요소 모두 40px 이상임을 확인하세요.

---

## 12. 파일 경로 및 산출물

| 파일 | 경로 |
|------|------|
| v1 원본 템플릿 (위반 버전) | `/home/jay/workspace/output/meta-ads/concept-catalog/04-reality-fantasy/template.html` |
| v2 브리프 (본 문서) | `/home/jay/workspace/output/meta-ads/concept-catalog/04-reality-fantasy/brief-v2.md` |
| v2 구현 HTML (작업 예정) | `/home/jay/workspace/output/meta-ads/concept-catalog/04-reality-fantasy/template-v2.html` |
| 배경 이미지 (생성 예정) | `/home/jay/workspace/output/meta-ads/concept-catalog/04-reality-fantasy/bg.png` |
| 최종 광고 이미지 (출력 예정) | `/home/jay/workspace/output/meta-ads/concept-catalog/04-reality-fantasy/ad-1080.png` |