visual-assets

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

SKILL.md

GitHub

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

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


3가지 시각 자료 유형

1. 이미지 (Images)

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

스크립트 작성법

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

필드 규격

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

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)

데이터 기반 시각화 요소.

스크립트 작성법

### 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 변환 결과

{
  "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)

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

스크립트 작성법

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

필드 규격

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

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

JSON 변환 결과

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

Gemini 렌더링 규칙

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

스크립트 통합 예시

### 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으로)