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

## 도구
- hybrid-image (Playwright HTML→PNG)

## 사이즈
- 1080x1080px PNG

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

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

## 카피
- 상단 (약함): "제자리걸음"
- 중단 (연결): "T.O.P 사업단과 함께"
- 하단 (강함): "성장을 시작하세요"
- 보조 정보: "신입 정착지원금 최대 1,000만원 | 경력직 직전연봉 50%까지 지원"
- CTA: "지금 상담 신청하기"

## 색상 팔레트
- 배경: 딥 네이비(#0A1628)
- 기본 텍스트: 화이트(#FFFFFF)
- 포인트 컬러 (선택적): 민트(#4ECDC4) — "성장" 또는 CTA에 적용
- CTA 버튼: 민트(#4ECDC4) 또는 화이트 테두리

## 폰트
- 전체: Pretendard Variable
- "제자리걸음": font-variation-settings: 'wght' 100, font-size: 72~80px, opacity: 0.6
- "T.O.P 사업단과 함께": font-variation-settings: 'wght' 400, font-size: 24px, color: #FFFFFF
- "성장을 시작하세요": font-variation-settings: 'wght' 900, font-size: 72~80px
- 보조 정보: font-variation-settings: 'wght' 300, font-size: 16~18px, opacity: 0.7
- CTA: font-variation-settings: 'wght' 600, font-size: 20px

## 레이아웃
```
[배경: 딥 네이비 #0A1628 단색]

  상단 30%:
    "제자리걸음"
    (weight 100, 얇고 흐릿, 약하게 — 거의 사라질 듯)

  중앙 15%:
    "T.O.P 사업단과 함께"
    (weight 400, 작은 사이즈, 중간 역할)

  중하단 30%:
    "성장을 시작하세요"
    (weight 900, 굵고 강렬, 화이트 또는 민트 #4ECDC4)

  하단 15%:
    "신입 정착지원금 최대 1,000만원 | 경력직 직전연봉 50%까지"
    (weight 300, 소형, 보조 정보)

  최하단 10%:
    [ 지금 상담 신청하기 ]
    (민트 버튼 또는 언더라인 링크 스타일)
```
- 전체 중앙 정렬 (text-align: center)
- 상하 텍스트 간 여백으로 감정 전환 호흡 부여
- "제자리걸음"과 "성장을 시작하세요" 사이에 얇은 수평 구분선(1px, 민트 #4ECDC4) 선택적 추가

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

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