# task-1164.1 완료 보고서 — 디자인 철학 학습 + 메타 배너 v2 수정

**작성일**: 2026-03-28
**작성팀**: 디자인팀
**작성자**: 아마테라스 (Amaterasu), 디자인 팀장
**사용 스킬**: hybrid-image (라우터 추천과 일치)

---

## SCQA

**S**: T.O.P 리쿠르팅 Meta 광고 캐러셀 5장(앵글 A 정착지원금)의 v1 이미지가 제작되어 `/output/meta-ads/angle-A/hybrid/` 경로에 5장 존재한다.

**C**: v1 이미지에 3가지 문제가 발견됨 — (1) Pretendard 폰트 미사용 (Noto Sans KR만 적용), (2) 전면 불투명 레이어(opacity 0.58~0.88)가 배경 이미지를 거의 가려 포토리얼 품질 손실, (3) 서브 카피 font-weight 400으로 모바일 가독성 부족. 또한 디자인팀 CLAUDE.md에 광고 배너 디자인 원칙이 문서화되어 있지 않았다.

**Q**: 디자인 원칙을 문서화하고, 벤치마킹 리서치를 수행하며, v1의 3가지 문제를 해결한 v2 배너를 제작할 수 있는가?

**A**: 3개 작업 모두 완료. (1) CLAUDE.md에 3대 원칙 추가, (2) 23KB 벤치마킹 문서 작성, (3) 5장 v2 이미지 생성 — Pretendard 폰트 적용(weight 700~900), 전면 오버레이 제거→하단 그라디언트+frosted glass 카드, 배경 이미지 상단 30~40% 노출. 전체 1080x1080px, 한글 텍스트 100% 정확, 면책 문구 슬라이드 3/5 포함.

---

## 작업 1: 디자인 철학 CLAUDE.md 반영

- 파일: `/home/jay/workspace/teams/design/CLAUDE.md`
- 추가 내용: "광고 배너 디자인 3대 원칙" 섹션
  1. 모바일 퍼스트 (36px+, weight 700+, 얇은 폰트 절대 금지)
  2. 불투명 레이어 최소 사용 (전면 금지, 부분적/그라디언트만)
  3. 세계 최고 수준 벤치마킹 (Dribbble/Behance 참조 필수)

## 작업 2: 벤치마킹 리서치

- 출력: `/home/jay/workspace/memory/specs/design-benchmark.md` (23KB)
- 내용: 레이아웃 패턴, 타이포그래피 규칙, 오버레이 기법, 컬러 하모니 분석

## 작업 3: 메타 배너 v2 (5장)

### v1 → v2 변경 요약

| 항목 | v1 | v2 |
|------|----|----|
| 폰트 | Noto Sans KR (CDN) | Pretendard (로컬 @font-face) |
| 메인 카피 크기 | 68-72px | 60-72px (전체 ≥48px) |
| 서브 카피 weight | 400 | 700 |
| 오버레이 | 전면 rgba 0.58~0.88 | 하단 그라디언트 55~70% |
| 배경 노출 | 거의 없음 | 상단 30~40% 선명 노출 |
| 텍스트 가독성 | 오버레이 의존 | text-shadow + frosted glass |

### 산출물

| 슬라이드 | 파일 | 크기 | 해상도 |
|-----------|------|------|--------|
| 1 (문제 공감) | recruiting-angleA-hybrid-slide1-v2.png | 883KB | 1080x1080 |
| 2 (긴급성) | recruiting-angleA-hybrid-slide2-v2.png | 1,215KB | 1080x1080 |
| 3 (해결책) | recruiting-angleA-hybrid-slide3-v2.png | 912KB | 1080x1080 |
| 4 (증거) | recruiting-angleA-hybrid-slide4-v2.png | 1,007KB | 1080x1080 |
| 5 (CTA) | recruiting-angleA-hybrid-slide5-v2.png | 1,202KB | 1080x1080 |

저장 경로: `/home/jay/workspace/output/meta-ads/angle-A/hybrid-v2/`

---

## 발견 이슈 및 해결

### 자체 해결 (3건)

1. **Pretendard 폰트 미설치** — `Pretendard-1.3.9.zip`을 GitHub에서 다운로드, `~/.local/share/fonts/`에 설치, `fc-cache -f` 실행. `fc-list | grep Pretendard`로 9종 weight 확인.
2. **v1 전면 오버레이 구조** — HTML 구조를 전면 오버레이에서 bottom-gradient + frosted-glass card 패턴으로 재설계. 배경 이미지 상단 30~40% 노출 확보.
3. **서브 카피 font-weight 부족** — v1의 400에서 700으로 상향. 모바일 가독성 개선.

### 범위 외 미해결 (1건)

1. **Pretendard @font-face 경로의 Puppeteer 호환성** — HTML 내 `file:///` 프로토콜 경로는 로컬 Playwright 렌더링에서만 동작. 외부 배포 시 CDN 경로(`cdn.jsdelivr.net/gh/orioncactus/pretendard/...`)로 교체 필요. 범위 외 사유: 현재 이미지 렌더링은 로컬 환경에서 수행되므로 영향 없음.

---

## 셀프 QC 체크리스트

- [x] 1. 다른 파일 영향: CLAUDE.md 1건 수정 (디자인 원칙 추가), 신규 파일 6건 생성 (benchmark + v2 슬라이드 5장)
- [x] 2. 엣지 케이스: 폰트 fallback (`'Pretendard', 'Noto Sans KR', sans-serif`) 체인 확보
- [x] 3. 작업 지시 일치: 3개 작업 모두 지시서 요구사항과 매칭 확인
- [x] 4. 보안: file:// 프로토콜은 로컬 렌더링 전용, 외부 노출 없음
- [x] 5. 테스트: PIL로 5장 전체 1080x1080 해상도 확인, HTML 소스 코드 리뷰 완료
- [x] 6. 발견 이슈 해결: 3건 자체 해결, 1건 범위 외 명시
- [x] 7. 코드 아키텍처: 디자인 작업으로 해당 없음
- [x] 8. 인터페이스 변경: 없음

## QC 자동 검증 결과

```json
{
  "task_id": "task-1164.1",
  "overall": "PASS (보고서/done 미생성 상태에서 실행)",
  "checks": {
    "data_integrity": "PASS",
    "spec_compliance": "PASS",
    "api_health": "SKIP (서버 작업 아님)",
    "test_runner": "SKIP (코드 작업 아님)",
    "tdd_check": "SKIP",
    "schema_contract": "SKIP",
    "pyright_check": "SKIP",
    "style_check": "SKIP"
  }
}
```