# 디자인 브리프 — #03 비완성의 진정성 (Anti-Polish Authenticity)

## 도구
- hybrid-image (Gemini 배경 생성 + Playwright HTML 오버레이)

## 사이즈
- 1080x1080px PNG

## 비주얼 컨셉
광고처럼 보이면 실패하는 컨셉. 누군가 실제로 노트에 끄적인 메모처럼 보여야 한다. 구겨진 노트 위에 손글씨로 쓴 고민("열심히는 하는데, 월급은 제자리걸음?")과 형광펜 하이라이트, 포스트잇 메모가 자연스럽게 배치된 UGC 감성 구성. 정렬·여백·완성도를 의도적으로 낮춰 진정성을 높인다.

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

## 카피
- 메인: "열심히는 하는데, 월급은 제자리걸음?"
- 형광펜 하이라이트: "정착지원금 최대 1,000만원"
- 포스트잇 메모: "T.O.P 사업단 상담 신청하기 →"
- 보조 메모 (선택): "경력직 직전연봉 50%까지 지원" (작은 손글씨, 메모 느낌)

## 색상 팔레트
- 배경 (노트): #F5F0E1 (크림/미색 — 구겨진 노트 질감)
- 메인 텍스트: #2C2C2C (거의 검정, 손글씨 잉크 느낌)
- 형광펜 하이라이트: #FFFF00 (노란 형광 — 투명도 70~80%로 겹치기)
- 포스트잇: #FFE066 (노란 포스트잇), 텍스트 #2C2C2C
- 화살표/밑줄: #2C2C2C 또는 #E74C3C (빨간 볼펜 느낌)

## 폰트
- 메인 텍스트: 나눔손글씨 펜 (또는 Gaegu, Hi Melody 등 한글 손글씨 폰트), 40~52px
- 포스트잇 텍스트: 나눔손글씨 펜, 22~26px
- 보조 메모: 나눔손글씨 펜, 18~20px
- CSS transform: rotate(-2deg) ~ rotate(3deg) — 각 텍스트 블록마다 불규칙하게 적용

## 레이아웃
```
[배경: 구겨진 노트 질감 이미지 (Gemini 생성) — #F5F0E1 기조]

  상단 좌측 (약간 기울어짐, -2deg):
    "열심히는 하는데,
     월급은 제자리걸음?"
    (손글씨 폰트, 대형, #2C2C2C)

  중앙 (형광펜 덮기):
    ████████████████████████████
    "정착지원금 최대 1,000만원"    ← 형광펜(#FFFF00) 레이어 위에 텍스트
    ████████████████████████████

  우측 하단 (포스트잇, +3deg):
  ┌─────────────────────────────┐
  │  T.O.P 사업단               │  (포스트잇 노란색 #FFE066)
  │  상담 신청하기 →            │
  └─────────────────────────────┘

  좌측 하단 (작은 보조 메모, -1deg):
    "경력직 직전연봉
     50%까지 지원"
    (작은 손글씨, #2C2C2C, opacity 0.8)
```
- 의도적 비정렬: 각 요소가 조금씩 다른 각도, 다른 위치에 자유 배치
- 포스트잇은 CSS `box-shadow: 2px 3px 6px rgba(0,0,0,0.2)` 적용으로 입체감 부여
- 형광펜 효과: `background: rgba(255,255,0,0.7)` + padding으로 자연스러운 밑칠 표현

## 배경 이미지 생성 프롬프트 (필요 시)
**Gemini 이미지 생성용 영문 프롬프트:**
```
Crumpled notebook paper texture, slightly yellowed with age, natural soft lighting from above, realistic paper wrinkles and fold lines, subtle grain texture, cream and off-white tones, no text, no lines, flat lay photography style, 1080x1080 square format
```

## 주의사항
- 광고처럼 보이는 순간 컨셉 실패 — 과도한 정렬, 깔끔한 여백 금지
- 손글씨 폰트가 시스템에 없을 경우 Google Fonts CDN 사용: Gaegu(가규), Nanum Pen Script(나눔손글씨 펜)
- CSS transform rotate 값은 각 요소마다 다르게 적용 (같은 각도 반복 금지)
- 형광펜 레이어는 텍스트보다 아래 z-index에 배치하여 겹치기 효과 구현
- 포스트잇 drop-shadow 너무 과하면 광고처럼 보임 — 미세하게 적용
- satori-cardnews 사용 금지 — hybrid-image만 사용