Visual Assets

---
name: visual-assets
description: "시각 자료 관리 스킬. 제안서 스크립트에 이미지, 차트/그래프, 출처 인용을 추가하고 JSON으로 변환합니다. Gemini가 HTML 슬라이드에 시각 자료를 렌더링할 수 있도록 구조화된 데이터를 제공합니다. 트리거: 이미지, 차트, 그래프, 출처, 시각 자료, visual, 데이터 시각화, 인포그래픽"
---

# 시각 자료 관리 스킬 (Visual Assets)

제안서 스크립트(`proposal_script.md`)에 **이미지, 차트/그래프, 출처 인용**을 추가하고, JSON 변환 시 Gemini가 렌더링할 수 있는 구조화된 데이터로 변환합니다.

---

## 3가지 시각 자료 유형

### 1. 이미지 (Images)

슬라이드에 삽입할 이미지 참조.

#### 스크립트 작성법

```markdown
### S15. 벤치마킹 사례 3선
- **이미지**: 서울시 관광 캠페인 키비주얼 | 크기: half | 출처: 서울관광재단 2025 보고서
- **이미지**: 부산시 숏폼 콘텐츠 예시 | 크기: quarter | 출처: 부산관광공사 인스타그램
```

#### 필드 규격

| 필드 | 필수 | 설명 | 예시 |
|------|------|------|------|
| 설명 | ✅ | 이미지 내용 설명 (Gemini가 플레이스홀더 생성 시 참조) | 서울시 관광 캠페인 키비주얼 |
| 크기 | ❌ | full / half / quarter / icon (기본: half) | half |
| 출처 | ✅ | 이미지 출처 | 서울관광재단 2025 보고서 |
| URL | ❌ | 실제 이미지 URL (있으면 Gemini가 `<img>` 태그 사용) | https://... |

#### JSON 변환 결과

```json
{
  "visual_assets": {
    "images": [
      {
        "description": "서울시 관광 캠페인 키비주얼",
        "size": "half",
        "source": "서울관광재단 2025 보고서",
        "url": null
      }
    ]
  }
}
```

#### Gemini 렌더링 규칙
- **URL 있음**: `<img src="URL">` 태그로 실제 이미지 삽입
- **URL 없음**: 설명 텍스트가 포함된 스타일링된 플레이스홀더 박스 생성
  - 배경: `#E8E8E8` + 카메라 아이콘 + 설명 텍스트
  - 크기: full(100%), half(50%), quarter(25%), icon(64px)

---

### 2. 차트/그래프 (Charts)

데이터 기반 시각화 요소.

#### 스크립트 작성법

```markdown
### S08. 시장 규모 분석
- **차트**: bar_chart | 데이터: {"2023": 42, "2024": 51, "2025(E)": 63} | 단위: 조원 | 색상: primary
- **차트**: pie_donut | 데이터: {"SNS": 35, "검색": 28, "영상": 22, "기타": 15} | 단위: % | 색상: multi
```

#### 차트 유형 (6종)

| 유형 | 설명 | 적용 장면 |
|------|------|----------|
| `bar_chart` | 세로/가로 막대 | 연도별 비교, 점유율, 예산 |
| `pie_donut` | 파이/도넛 | 구성 비율, 예산 배분 |
| `line_trend` | 라인/면적 | 트렌드, 성장 추이 |
| `stacked_bar` | 누적 막대 | 카테고리별 구성 비교 |
| `radar` | 방사형 | 다차원 역량 비교 |
| `gauge` | 게이지/진행률 | 목표 달성률, KPI |

#### 필드 규격

| 필드 | 필수 | 설명 | 예시 |
|------|------|------|------|
| 유형 | ✅ | 차트 유형 (6종 중 택1) | bar_chart |
| 데이터 | ✅ | JSON 형식 키-값 쌍 | {"2023": 42, "2024": 51} |
| 단위 | ✅ | 데이터 단위 | 조원, %, 만명 |
| 색상 | ❌ | primary / secondary / teal / accent / multi (기본: primary) | multi |
| 제목 | ❌ | 차트 제목 (없으면 Action Title 사용) | 연도별 시장 규모 |
| 방향 | ❌ | vertical / horizontal (bar_chart 전용, 기본: vertical) | horizontal |

#### JSON 변환 결과

```json
{
  "visual_assets": {
    "charts": [
      {
        "type": "bar_chart",
        "data": {"2023": 42, "2024": 51, "2025(E)": 63},
        "unit": "조원",
        "color": "primary",
        "title": null,
        "direction": "vertical"
      }
    ]
  }
}
```

#### Gemini 렌더링 규칙
- SVG 또는 CSS 기반 차트 생성
- 브랜드 컬러 팔레트 적용 (design_system.brand_colors 참조)
- `multi` 색상: primary → secondary → teal → accent 순서 사용
- 데이터 라벨 + 단위 표시
- 반응형 크기 (슬라이드 영역 내 자동 조절)

---

### 3. 출처 인용 (Sources)

슬라이드 하단 각주 스타일 출처 표시.

#### 스크립트 작성법

```markdown
### S07. 국내 관광 시장 52조
- **출처**: 한국관광공사, 「2025 관광 동향 보고서」, 2025.03
- **출처**: 문화체육관광부, 관광 통계 DB, 2025.06 접근
```

#### 필드 규격

| 필드 | 필수 | 설명 | 예시 |
|------|------|------|------|
| 텍스트 | ✅ | 출처 전문 | 한국관광공사, 「2025 관광 동향 보고서」, 2025.03 |
| URL | ❌ | 출처 URL | https://... |

> **참고**: S-E-P의 Evidence 출처와 별도. Evidence 출처는 본문 내 인라인, 이 출처는 슬라이드 하단 각주.

#### JSON 변환 결과

```json
{
  "visual_assets": {
    "sources": [
      {
        "text": "한국관광공사, 「2025 관광 동향 보고서」, 2025.03",
        "url": null
      }
    ]
  }
}
```

#### Gemini 렌더링 규칙
- 슬라이드 하단 (y: 1040px 부근) 에 10pt 회색 텍스트로 표시
- 여러 출처는 ` | ` 로 구분
- URL이 있으면 밑줄 스타일 적용 (클릭 불가, 시각적 표시만)

---

## 스크립트 통합 예시

```markdown
### S08. 시장 규모와 성장 기회
- **Action Title**: "관광 시장 52조, 디지털 전환이 핵심 성장 동력"
- **의도**: 시장 규모의 크기와 디지털 전환 트렌드를 데이터로 증명
- **내용**:
  - Story: 국내 관광 시장이 코로나 이후 빠르게 회복하며 52조원 규모에 도달
  - Evidence: 2025년 국내 관광 시장 52.3조원, 전년 대비 12% 성장 (한국관광공사, 2025)
  - Promise: 디지털 마케팅 강화로 이 성장세를 지역 관광에 연결
- **시각 의도**: 좌측에 연도별 시장 규모 바 차트, 우측에 핵심 수치 카드 3개
- **분위기**: white
- **Win Theme**: W1
- **차트**: bar_chart | 데이터: {"2021": 32, "2022": 38, "2023": 42, "2024": 47, "2025": 52} | 단위: 조원 | 색상: primary
- **이미지**: 관광 산업 인포그래픽 | 크기: quarter | 출처: 한국관광공사
- **출처**: 한국관광공사, 「2025 관광 동향 보고서」, 2025.03
- **출처**: 문화체육관광부, 관광 통계 DB, 2025.06 접근
```

---

## 시각 자료 품질 기준

### 권장 사항
- 데이터 차트는 **3~7개 데이터 포인트** 적정 (너무 많으면 가독성 저하)
- 이미지 플레이스홀더에는 **구체적 설명** 작성 (나중에 실제 이미지로 교체 가능)
- 출처는 **기관명 + 자료명 + 날짜** 3요소 포함

### 주의 사항
- ❌ 한 슬라이드에 차트 3개 이상 금지 (가독성)
- ❌ full 크기 이미지 + 본문 텍스트 동시 배치 금지 (공간 부족)
- ❌ 출처 없는 데이터를 차트로 시각화 금지
- ❌ 차트 데이터에 실제 수치 대신 예시/가상 데이터 사용 금지 (리서치 데이터 활용)

---

## 절대 하지 말 것

- ❌ 사용자가 제공하지 않은 이미지 URL을 임의 생성
- ❌ 리서치 데이터 없이 차트 수치를 가공/날조
- ❌ 출처를 생략하거나 "인터넷 자료" 등 모호한 출처 사용
- ❌ 차트 유형을 데이터 성격에 맞지 않게 선택 (예: 시계열을 pie_donut으로)