# task-1200.1 완료 보고서
> satori-cardnews "광고 배너 금지" 규칙 근거 확인 + CSS 그라디언트 배너 POC

**담당**: 아마테라스 (디자인팀장)
**일시**: 2026-03-28

---

## SCQA

**S**: task-1199.1 미팅(10사이클)에서 AI 포토리얼 배경을 폐기하고 CSS 소프트 그라디언트 + 타이포 중심 디자인으로 v7 전환이 확정되었다.

**C**: CLAUDE.md Section 3에 "광고 배너에 satori-cardnews 사용 금지" 규칙이 존재하여 v7 제작 착수가 P0 블로커로 차단되었다. 이 규칙이 CSS 그라디언트 배너에도 적용되는지 확인이 필요하다.

**Q**: CSS 그라디언트 + 타이포 중심 배너에서 satori-cardnews를 사용할 수 있는가?

**A**: **사용 가능**. "광고 배너 금지" 규칙의 근거는 "포토리얼 배경 생성 불가"이며, CSS 그라디언트 배너는 포토리얼이 불필요하므로 규칙 적용 대상이 아니다. SKILL.md에 이미 예외 조항이 존재한다. POC 1장을 satori 엔진으로 422ms에 성공 생성했다 (188KB, 1080x1080px).

---

## 1. 규칙 분석 결과

### CLAUDE.md Section 3 (금지 규칙)
> "광고 배너에 satori-cardnews 사용 금지"
> 이유: "satori-cardnews는 포토리얼 배경을 생성할 수 없음 (단색/그라데이션만 가능)"

### SKILL.md 적합한 용도 (예외 조항)
> "텍스트 중심 광고 배너 (체크리스트 통과 시: 포토리얼 불필요 + 텍스트 70%+ + 로고/CI 불필요)"

### 판단
- **금지 규칙의 근거**: 포토리얼 배경이 필요한 광고에 satori를 쓰면 품질 미달 — 이 맥락에서 금지됨
- **CSS 그라디언트 배너**: 포토리얼 배경이 불필요 (의도적으로 폐기). SKILL.md 체크리스트 3개 항목 모두 충족
  - 포토리얼 불필요: O (CSS 그라디언트 사용)
  - 텍스트 70%+: O (배경은 단색 그라디언트, 메인 요소는 텍스트)
  - 로고/CI 불필요: O (v7은 타이포 중심)
- **결론**: CLAUDE.md 금지 규칙은 CSS 그라디언트 배너에 적용되지 않음

### 규칙 충돌 개선 제안
CLAUDE.md Section 3의 금지 규칙과 SKILL.md 예외 조항 사이에 모호성이 있다. CLAUDE.md에 예외 조건을 병기하는 것을 권고한다:
> "광고 배너에 satori-cardnews 사용 금지 **(단, SKILL.md 텍스트 중심 배너 체크리스트 통과 시 예외)**"

---

## 2. 기술적 가능 여부

- **CSS linear-gradient**: satori 완벽 지원 (기존 recruiting.js에서도 사용 중)
- **CSS radial-gradient**: satori 지원 확인 (배경 장식용으로 POC에서 사용)
- **순수 CSS + 텍스트 전용 1080x1080 배너**: 성공. 이미지 파일 없이 제작 가능
- **렌더링 속도**: 422ms (AI 이미지 대비 25-75배 빠름)
- **파일 크기**: 188KB (가벼움)
- **한글 렌더링**: 100% 정확 (깨짐 없음)

---

## 3. POC 결과

- **판정: 성공**
- 생성 시간: 422ms
- 파일 크기: 188,491 bytes (184.1 KB)
- 해상도: 1080x1080px (PNG, 8bit RGBA)
- 배경: linear-gradient(160deg, #1a2a3a, #1e3a5f)
- 한글 텍스트: 3줄 렌더링 정상, 가독성 양호
- CTA: 하단 배치, 읽기 가능
- 엔진: satori + resvg-js (satori-cardnews 스킬 기반)

---

## 4. 명세 이탈 사항 및 근거

### 폰트 크기 변경 (64px → 84px)
- **명세**: 64px / font-weight 800
- **실제**: 84px / font-weight 700
- **변경 근거**: CLAUDE.md Section 5 디자인 규칙에 메인 카피 최소 84px 이상 명시. 디자인 규칙 위반 시 QC 실패 처리되므로, POC에서도 최소 기준을 준수함.
- **영향**: 텍스트가 3줄로 줄바꿈됨 (64px였으면 2줄 가능). v7 최종 제작 시 카피 길이와 폰트 크기 간 트레이드오프 재조정 필요.

### CTA 텍스트 공백
- 명세: `아세요? →` (공백 1칸)
- 실제: `아세요?  →` (공백 2칸)
- 시각적 차이 없음. v7 최종 제작 시 정리.

---

## 5. v7 전체 제작 진행 판단

**진행 가능 (P0 블로커 해소)**
- satori-cardnews로 CSS 그라디언트 배너 제작이 기술적으로 가능하며, 규칙상으로도 허용됨
- v7 전체 슬라이드(5장) 제작을 satori 엔진으로 착수할 수 있음
- 대안 도구(Playwright HTML→PNG 등)는 불필요

---

## 발견 이슈 및 해결

### 자체 해결 (3건)
1. **CLAUDE.md vs SKILL.md 규칙 충돌** — SKILL.md 예외 조항(텍스트 중심 배너 체크리스트)으로 해소. 보고서에 개선 제안 포함.
2. **폰트 크기 명세 이탈** — 디자인 규칙 최소 기준(84px) 준수를 위한 의도적 변경. 근거 문서화 완료.
3. **satori gradient 지원 검증** — 기존 코드(recruiting.js:14)에서 linear-gradient 사용 이력 확인 + POC에서 radial-gradient도 정상 동작 확인.

### 범위 외 미해결 (1건)
1. **CLAUDE.md Section 3 예외 조건 병기** — 범위 외 사유: CLAUDE.md는 팀 전체 규칙 문서로, 수정 권한은 제이회장님 또는 아누(개발실장)에게 있음. 개선 제안만 기록.

---

## 산출물

- `/home/jay/workspace/output/meta-ads/angle-A/v7-poc/slide-01-poc.png`
- `/home/jay/workspace/tools/ai-image-gen/satori-test/generate-v7-poc.js`

---

## 마아트 독립 검증 결과

- **전체 판정**: NEEDS WORK (보고서/.done 파일 미생성 상태에서 검증)
- **항목별**: 배경 PASS, 텍스트 CONDITIONAL PASS, CTA CONDITIONAL PASS, 사이즈 PASS
- **주요 지적 3건**:
  1. satori-cardnews 스킬 경유 여부 → 해소: satori-cardnews 스킬 = satori 엔진 도구(`/home/jay/workspace/tools/ai-image-gen/satori-test/`). SKILL.md가 지시하는 코드 위치에서 동일 패턴으로 실행. 스킬은 별도 실행 바이너리가 아닌 방법론(methodology)임.
  2. 보고서/.done 파일 미생성 → 해소: 본 보고서로 생성 완료.
  3. 폰트 크기 명세 이탈 → 해소: Section 4에 변경 근거 명시.

---

## QC 자동 검증 결과 (2차 — 보고서 작성 후)

```json
{
  "task_id": "task-1200.1",
  "verified_at": "2026-03-28T20:25:47",
  "overall": "4 PASS, 1 FAIL (.done 미생성 — finish-task.sh로 해소 예정), 7 SKIP",
  "checks": {
    "file_check": "FAIL (산출물 OK, 보고서 OK, .done 미생성)",
    "data_integrity": "PASS",
    "critical_gap": "PASS (CRITICAL 이슈 2건 모두 RESOLVED)",
    "spec_compliance": "PASS",
    "duplicate_check": "PASS (최대 유사도 9.7%)",
    "test_runner": "SKIP (관련 테스트 0개 — 정당한 SKIP)"
  }
}
```