# 부록 G — 4 출력 형식 명세

SPEC-META-ADS-001 §2 + 작업명세서 부록 G.1-G.4 직접 인용.
HTML 디자인 토큰: `moai-content:html-report` references/design-tokens.md SSOT 적용.

---

## G.1 HTML 인터랙티브 대시보드

### 기술 스택

- React (CDN import, 단일 HTML 파일 내 `<script type="text/babel">`)
- Recharts (CDN import, 차트 렌더링)
- 단일 `.html` 파일 — 별도 서버·빌드 불필요, 브라우저에서 즉시 열기 가능

### 레이아웃 구조

```
┌─────────────────────────────────────────────┐
│  Header: 제목 + 분석 기간 + 사용자 그룹      │
├────────────────────────────────────────────  │
│  Level 1: 한 줄 요약 (clay 배경 강조 카드)  │
├────────────────────────────────────────────  │
│  Level 2: 핵심 발견 3가지 (카드 3열)        │
├────────┬───────────────────────────────────  │
│  사이드 │ Level 3: KPI 대시보드 (차트)       │
│  내비  │ Level 4: 영역별 진단               │
│  Level │ Level 5: 누수·기회 분석            │
│  2~7   │ Level 6: 강도별 액션 옵션          │
│  링크  │ Level 7: 시뮬레이션 (선택)         │
├────────┴───────────────────────────────────  │
│  Footer: 면책 문구 + attribution            │
└─────────────────────────────────────────────┘
```

### 인터랙션

- 차트 호버 시 상세 툴팁 표시
- 카드 클릭 시 펼침 (Accordion)
- 범용 매트릭스 축 변경 (모듈 4 — select 드롭다운)
- 액션 옵션 선택 → 해당 시뮬레이션 연동 (Level 7 선택 시)
- 다크/라이트 모드 토글

### 디자인 토큰 CSS 변수 (SSOT: moai-content:html-report/references/design-tokens.md)

```css
:root {
  /* 팔레트 */
  --ivory:  #FAF9F5;   /* 페이지 배경 */
  --paper:  #FFFFFF;   /* 카드·패널 배경 */
  --slate:  #141413;   /* 본문 텍스트 */
  --clay:   #D97757;   /* 강조·링크·Level 1 요약 카드 */
  --clay-d: #B85C3E;   /* 고위험 표시 (🔴 적극안·F등급) */
  --oat:    #E3DACC;   /* 보조 배경·차트 기본 막대 */
  --olive:  #788C5D;   /* 긍정 신호 (🟢 보수안·S·A등급) */

  /* 그레이 스케일 */
  --g100: #F0EEE6;     /* 테이블 헤더 배경 */
  --g300: #D1CFC5;     /* 테두리·구분선 */
  --g500: #87867F;     /* 보조 텍스트·레이블 */
  --g700: #3D3D3A;     /* 중간 강도 텍스트 */

  /* 폰트 */
  --sans:  "Pretendard", system-ui, -apple-system, sans-serif;
  --serif: "Pretendard", ui-serif, Georgia, serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;

  /* 레이아웃 */
  --max-width:      1120px;  /* 대시보드는 wide 모드 */
  --radius-panel:   12px;
  --radius-row:     8px;
  --border:         1.5px solid var(--g300);
  --body-lh:        1.6;
  --heading-ls:     -0.01em;
}
```

### 컴포넌트 색상 규칙

| 컴포넌트 | 배경 | 강조 | 비고 |
|---------|------|------|------|
| 페이지 배경 | `--ivory` | — | 전체 페이지 |
| KPI 카드 | `--paper` | `border-left: 4px solid var(--clay)` | 중요 카드 |
| 긍정 델타 | — | `color: var(--olive)` | ROAS 상승, S·A 등급 |
| 위험 표시 | — | `color: var(--clay-d)` | 누수, F 등급, 🔴 적극안 |
| 차트 기본 막대 | `--oat` fill | — | Recharts Bar |
| 차트 피크 막대 | `--clay` fill | — | 최고 성과 강조 |
| 테이블 헤더 | `--g100` | — | |
| 그리드라인 | `--g300` stroke | — | SVG 내부 |

---

## G.2 DOCX 진단 보고서

### 8섹션 구조

| 섹션 | 내용 |
|------|------|
| 1. 표지 | 보고서 제목 + 분석 기간 + 사용자 그룹 + 작성일 |
| 2. 한 줄 요약 + 핵심 발견 | Level 1-2 내용, 경영진용 요약 |
| 3. KPI 대시보드 | Level 3 주요 지표 표·차트 삽입 |
| 4. 영역별 진단 | Level 4: 지면 + 인구통계 + 소재별 성과 표 |
| 5. 누수·기회 분석 | Level 5: 누수 테이블 + 파레토 분석 |
| 6. 강도별 액션 권장안 | Level 6: 🟢🟡🔴 표준 템플릿 기반 권장안 목록 |
| 7. 시뮬레이션 | Level 7 (선택): 낙관/현실/비관 시나리오 표 |
| 8. 부록 | 원본 데이터 요약 + 면책 문구 + attribution |

### 스타일 지침

- 본문 폰트: Pretendard 또는 맑은 고딕 (한글 폰트 우선)
- 표 헤더: 회색 배경 (`#F0EEE6`)
- 강조 색상: Terracotta 계열 (`#D97757`) — 섹션 제목·헤더 accent
- 긍정 신호: Olive (`#788C5D`)
- 고위험: Dark Clay (`#B85C3E`)

---

## G.3 PPTX 발표 자료

### 슬라이드 구성 (10-15 슬라이드)

| 슬라이드 | 내용 |
|---------|------|
| 1. 표지 | 보고서 제목 + 기간 + 로고 |
| 2. 핵심 요약 (Exec Summary) | 한 줄 요약 + 주요 KPI 3가지 |
| 3. 3대 발견 | 가장 중요한 인사이트 3개 카드형 |
| 4. KPI 현황 | 절대값·효율 지표 대시보드 |
| 5-6. 지면별 분석 | 노출 위치별 성과 매트릭스 |
| 7-8. 인구통계 분석 | 연령·성별 분해 + 교차 히트맵 |
| 9. 누수·기회 분석 | 파레토 곡선 + 누수 TOP N |
| 10-12. 강도별 액션 권장안 | 각 발견 + 🟢🟡🔴 옵션 |
| 13. 시뮬레이션 (선택) | 낙관/현실/비관 시나리오 |
| 14. 다음 단계 | 우선순위별 액션 플랜 요약 |
| 15. 면책 + Attribution | 면책 문구 + claude-ads 출처 |

### 슬라이드 디자인 원칙

- 1슬라이드 1메시지 원칙
- 차트 제목에 인사이트 문장 삽입 (숫자 레이블 아닌 해석 문장)
- 그룹별 톤 조정: 대행사용은 클라이언트 보고 형식 강조

---

## G.4 MD 액션 체크리스트

### 포맷 구조

```markdown
# 메타 광고 보고서 분석 — 액션 체크리스트
> 분석 기간: YYYY.MM.DD ~ YYYY.MM.DD | 그룹: {인하우스/대행사/소규모}

## 핵심 발견
- 🔴 {발견 1} — ROAS {N}
- 🟡 {발견 2} — 지출 대비 전환 저조
- 🟢 {발견 3} — 고효율 조합 발견

## 즉시 액션 (🔴 적극·핵심)
- [ ] {액션 1} | 예상 효과: {효과}
- [ ] {액션 2} | 예상 효과: {효과}

## 단기 개선 (🟡 중도)
- [ ] {액션 3} | 우선순위: 중
- [ ] {액션 4} | 우선순위: 중

## 장기 최적화 (🟢 보수)
- [ ] {액션 5} | 우선순위: 낮음

---
> 면책: 본 분석은 데이터 기반 진단이며 의사결정 옵션을 제공합니다.
```

### 활용 최적화

- Notion 붙여넣기: 체크박스 자동 인식
- Slack 공유: 코드 블록 + 이모지 최적화
- 우선순위 태그: 🔴 즉시 / 🟡 단기 / 🟢 장기

---

## G.5 출력 형식 선택 가이드

| 상황 | 권장 형식 | 이유 |
|------|---------|------|
| 즉시 확인·팀 공유 | HTML | 브라우저에서 바로 열기, 차트 인터랙티브 |
| 사내·클라이언트 공식 보고 | DOCX | 문서 편집 가능, 회사 포맷 맞춤 |
| 발표·강의·시연 | PPTX | 화면 발표에 최적화 |
| 실무 체크·Notion 활용 | MD | 체크박스, 간결한 액션 리스트 |
