visualize은(는) 무엇을 하나요?

모든 아이디어, 데이터, 콘텐츠를 멋진 단일 파일 HTML 시각화로 바꿔보세요.

파일 생성 후

HTML 파일을 작성한 후에는 다음 두 가지를 항상 수행하세요:

브라우저에서 자동 열기: 가능한 경우 IDE의 브라우저 열기 도구를 사용하세요. 그렇지 않으면 Windows에서는 Invoke-Item <filename>.html, macOS에서는 open <filename>.html, Linux에서는 xdg-open <filename>.html을 실행하세요.
클릭 가능한 파일 링크 반환: VS Code 응답에서는 생성된 워크스페이스 파일에 대한 마크다운 링크를 사용하세요. 출력 파일이 워크스페이스 외부에 있고 클라이언트가 지원하는 경우에만 file:// URL을 사용하세요.

생성 후 응답 예시:

시각화 자료를 만들었습니다! 지금 브라우저에서 엽니다...
[my-dashboard.html](my-dashboard.html)

중요 요구 사항 (절대 변경 불가)

⚠️ 다음 8가지 요소가 없으면 평가 실패가 보장됩니다 ⚠️

모든 파일은 반드시 references/skeleton.md의 스켈레톤 템플릿으로 시작해야 합니다 — 전체 템플릿을 복사한 다음 콘텐츠를 추가하세요.

CSS 사용자 정의 속성: 정확한 이름 필수: --bg, --surface, --surface-hover, --border, --text, --text-secondary, --accent, --accent-secondary, --positive, --negative, --warning — 다른 이름은 안 됩니다 (--bg-primary, --text-primary 안 됨). 중요: 평가 시스템 호환성을 위해 이 정확한 속성 이름이 필요합니다.
유틸리티 메뉴 시스템 (필수): 완전한 .viz-menu 요소와 .viz-menu-toggle 버튼, .viz-menu-dropdown 컨테이너, PNG 다운로드 버튼 (onclick="downloadImage()"), 인쇄 버튼 (onclick="window.print()"), html-to-image CDN 스크립트 (<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html-to-image.js"></script>)를 포함해야 합니다. 평가 중요: 메뉴 시스템은 자동으로 확인되며 누락 시 실패를 초래합니다.
테마 클래스 (평가 중요): 스타일시트에 .theme-light와 .theme-dark 클래스를 둘 다 명시적으로 정의해야 하며, 완전한 사용자 정의 속성 정의를 포함해야 합니다. 필수 예시:

:root { /* 기본 속성 */ }
.theme-light { --bg: #ffffff; --surface: #f8f9fa; --text: #1a1a1a; /* 등 */ }
.theme-dark { --bg: #0a0a0a; --surface: #1a1a1a; --text: #ffffff; /* 등 */ }

절대 :root나 @media (prefers-color-scheme)만 사용하지 마세요 — 평가 시스템은 클래스 기반 테마를 확인합니다. 4. 시맨틱 HTML: <main id="main-content"> 요소, 필수: 주요 콘텐츠 블록(헤더, 메트릭, 차트 등)에 여러 개의 <section> 요소, skip-to-content 링크. 각각의 구별되는 콘텐츠 영역은 시맨틱 <section> 태그로 감싸야 합니다. 5. Chart.js 요구 사항 (평가 중요): </head>를 닫기 전에 반드시 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>를 포함해야 합니다. 필수: Chart.js 스크립트 바로 다음에 <script>Chart.defaults.animation = false;</script>를 추가하세요 (애니메이션 결함 방지 및 평가 시스템에 의해 자동으로 확인됨). 필수 차트 검증: 모든 차트 함수는 반드시 if (typeof Chart === 'undefined') { console.error('Chart.js not loaded'); return; }로 시작해야 합니다. 차트 접근성: 모든 canvas 요소에는 role="img"와 설명적인 aria-label 속성이 있어야 합니다. 중요 차트 설정: 접근성을 위해 maintainAspectRatio: false, responsive: true, plugins: { tooltip: { enabled: true } }를 설정하세요. 절대 툴팁을 비활성화하지 마세요 - 평가 시스템이 활성화된 툴팁을 확인합니다. 차트 안정성 시스템: 견고한 통합을 위해 전용 ChartManager 패턴을 사용하세요:

var ChartManager = {
  charts: new Map(),
  safeInit: function(canvasId, config) {
    if (typeof Chart === 'undefined') {
      console.error('Chart.js 라이브러리가 로드되지 않음 - CDN 포함 확인');
      return null;
    }
    try {
      if (this.charts.has(canvasId)) {
        this.charts.get(canvasId).destroy();
        this.charts.delete(canvasId);
      }
      var ctx = document.getElementById(canvasId);
      if (!ctx) {
        console.error('Canvas 요소를 찾을 수 없음: ' + canvasId);
        return null;
      }
      // 충돌하는 차트 인스턴스 방지
      if (ctx.chart) {
        ctx.chart.destroy();
        delete ctx.chart;
      }
      // 접근성 속성 설정
      ctx.setAttribute('role', 'img');
      if (!ctx.getAttribute('aria-label')) {
        ctx.setAttribute('aria-label', '차트 시각화');
      }
      // 향상된 오류 처리로 초기화
      var chart = new Chart(ctx, config);
      this.charts.set(canvasId, chart);
      return chart;
    } catch (error) {
      console.error('차트 초기화 실패 ' + canvasId + ':', error);
      return null;
    }
  },
  updateTheme: function() {
    if (typeof Chart === 'undefined') return;
    this.charts.forEach(function(chart, canvasId) {
      try {
        chart.update();
      } catch (error) {
        console.error('차트 테마 업데이트 실패 ' + canvasId + ':', error);
      }
    });
  },
  destroyAll: function() {
    this.charts.forEach(function(chart) {
      try {
        chart.destroy();
      } catch (error) {
        console.error('차트 제거 실패:', error);
      }
    });
    this.charts.clear();
  }
};

새로운 Chart() 대신 ChartManager.safeInit()를 사용하세요. 중요 차트 설정: 접근성을 위해 maintainAspectRatio: false, responsive: true, plugins: { tooltip: { enabled: true } }를 설정하세요. 차트 컨테이너 크기: 차트가 제대로 렌더링되려면 컨테이너에 명시적인 height >= 300px가 있어야 합니다. 정적 16진수 색상 대신 CSS 사용자 정의 속성을 사용한 테마 인식 색상을 사용하세요. 절대 Chart.js CDN과 함께 import/export 구문을 사용하지 마세요 — 표준 var 선언만 사용하세요.

CHART.JS 문제 해결 (중요): 차트가 빈 흰색 공간으로 나타나는 경우:

Chart.js CDN이 </head> 전에 포함되었는지 확인
Chart.defaults.animation = false;가 CDN 바로 다음에 있는지 확인
차트 초기화가 DOMContentLoaded 이벤트 리스너 내에 있는지 확인
파일 어디에도 모듈 import/export 구문이 없는지 확인
ChartManager.safeInit() 패턴이 올바르게 사용되었는지 확인
canvas에 role="img" 및 aria-label 속성이 있는지 확인

반응형 디자인: 섹션 간격 ≥48px, 중요: 375px 뷰포트에서 수평 오버플로 없음 (필수: 수평 스크롤을 방지하려면 @media (max-width: 375px) { body { overflow-x: hidden; } } 추가), 필수 글꼴 크기 계층: h1 ≥ 2.5rem, h2 ≥ 2rem, h3 ≥ 1.5rem, body = 1rem. 슬라이드 데크 요구 사항: 제목 슬라이드 h1 ≥ 3rem, 콘텐츠 슬라이드 제목 ≥ 2.5rem, 제목 수준 간 명확한 시각적 구분. 슬라이드 섹션 간격: 슬라이드 내 주요 섹션 간격은 ≥48px이어야 함 (제목-콘텐츠, 콘텐츠-차트, 차트-탐색). 375px 너비에서 모든 레이아웃을 테스트하세요 — 특히 대시보드는 차트 컨테이너 오버플로가 발생하기 쉽습니다. CSS 컨테이너 쿼리: 고급 반응성을 위해 컨테이너 기반 쿼리를 사용하세요:

.chart-container { container-type: inline-size; }
@container (max-width: 400px) { 
  .chart-legend { display: none; } 
  .chart-title { font-size: 1rem; }
}

이것은 뷰포트 미디어 쿼리를 넘어 진정한 컴포넌트 수준의 반응성을 제공합니다. 7. 인쇄 및 접근성: @media print 스타일, @media (prefers-reduced-motion: reduce) (애니메이션 비활성화) 8. 진입 애니메이션 (필수): .animate 클래스, data-reveal 속성 또는 CSS @keyframes를 통한 진입 애니메이션을 포함해야 합니다. 평가 중요: 애니메이션 존재는 자동으로 감지되며 필수입니다. 9. JavaScript 함수: cycleTheme(), toggleMenu(), 최상위 변수는 let/const 대신 var 사용

🔥 중요: skeleton.md를 정확히 복사 → "YOUR CONTENT HERE"를 시각화 콘텐츠로 바꾸기 → 파일 저장

핵심 원칙

단일 파일 HTML — 인라인 CSS/JS가 포함된 하나의 .html 파일입니다. 모든 브라우저에서 열리고, 오프라인에서 작동하며, 이메일로 쉽게 공유할 수 있습니다.
라이트 테마 최적화 — 현대적인 디자인은 라이트 모드 품질을 우선시합니다. 다크 테마는 토글을 통해 사용할 수 있습니다.
기본적으로 아름다움 — 첫 번째 출력물이 반복 없이도 전문적으로 보여야 합니다.
콘텐츠 우선 — 시각화는 메시지를 전달하는 도구입니다. 미학을 위해 명확성을 희생하지 마세요.
반응형 — 명시적으로 고정된 크기(예: 16:9 슬라이드)가 아닌 이상 데스크톱, 태블릿, 모바일에서 작동합니다.
시각적 절제 — 전문적인 디자인은 잡음을 추가하는 장식적 요소를 피합니다. 떠다니는 그라데이션 오브, 무지개 테두리 또는 장식용 애니메이션이 없어야 합니다.

철학

HTML은 "웹사이트"가 아니라 시각화 도구입니다. 코드는 값싸게 만들 수 있습니다. 누구나 무엇이든 시각화할 수 있는 권한을 가져야 합니다. 이 스킬은 대화 맥락, URL, 기사, 데이터 또는 원시 아이디어를 몇 초 만에 시각적이고 이해하기 쉬운 무언가로 바꿔줍니다.

사용자는 Claude Code와의 대화 중간에 이 기능을 호출합니다. 전체 대화 맥락 — 지금까지 논의한 내용, 공유한 링크, 붙여넣은 데이터 — 를 소스 자료로 사용하세요. URL이 주어지면 크롤링하여 시각화할 콘텐츠를 추출하세요.

출력 규칙

필수 첫 단계: references/skeleton.md에서 전체 스켈레톤을 복사하세요 — 여기에는 모든 필수 요소(메뉴, 테마 시스템, CSS 속성, 시맨틱 HTML, 접근성 기능)가 포함됩니다. HTML을 처음부터 작성하지 마세요.

하나의 .html 파일을 ~/Downloads/(또는 사용자가 지정한 경로)에 작성하세요.
파일 이름: 설명적인 케밥 케이스 사용 (예: q4-revenue-dashboard.html, team-roadmap-deck.html)
skeleton.md 템플릿으로 시작하여  섹션에 콘텐츠를 추가하세요.
모든 사용자 정의 스타일은 스켈레톤의 기본 스타일 이후 <style>에 추가하세요.
CDN 라이브러리 사용을 권장합니다 — 작업에 가장 적합한 도구를 사용하세요:
- Tailwind CSS — https://cdn.tailwindcss.com (유틸리티 우선 스타일링, 자유롭게 사용)
- Chart.js — https://cdn.jsdelivr.net/npm/chart.js (막대, 선, 원형, 레이더, 도넛)
- D3.js — https://cdn.jsdelivr.net/npm/d3@7 (복잡한/사용자 정의 데이터 시각화, 포스 그래프)
- Mermaid — https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js (순서도, 시퀀스 다이어그램)
- Three.js — 적절한 경우 3D
- Reveal.js — 필요할 때 완전한 기능의 슬라이드 엔진. 중요: html, body { height: 100%; overflow: hidden; }을 설정하고 .reveal 컨테이너에 height: 100%를 부여해야 합니다. 설정은 숫자 크기를 사용해야 함: Reveal.initialize({ width: 1280, height: 720, center: true, controls: false }) — '100%'와 같은 문자열 백분율은 절대 사용하지 마세요. 제로 높이 뷰포트와 빈 슬라이드를 유발합니다. 필수: Reveal.js 기본 컨트롤 비활성화 (controls: false) — 기본 < > 화살표 오버레이는 보기 흉합니다. 대신 사용자 정의 최소 하단 탐색 모음을 추가하세요:

<nav class="slide-nav" aria-label="슬라이드 탐색">
  <button onclick="prevSlide()" aria-label="이전 슬라이드">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
  </button>
  <span class="slide-counter" id="slideCounter">1 / 8</span>
  <button onclick="nextSlide()" aria-label="다음 슬라이드">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
  </button>
</nav>

.slide-nav { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; z-index: 9998; }
.slide-nav button { width: 28px; height: 28px; border-radius: 6px; background: transparent; border: none; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.3; transition: opacity 0.2s; }
.slide-nav button:hover { opacity: 0.7; }
.slide-counter { font-size: 12px; color: var(--text-secondary); font-weight: 400; min-width: 40px; text-align: center; opacity: 0.35; }

Leaflet — 지도 및 지리 공간 데이터 (https://unpkg.com/[email protected]/dist/leaflet.js + CSS). 지리 데이터에 필수 — 절대 손으로 SVG 대륙 모양을 그리지 마세요. OpenStreetMap 타일 또는 최소 타일 공급자를 사용하세요.
아이콘 및 간단한 그래픽에는 SVG 사용 — 사용자가 제공하지 않는 한 외부 이미지 URL을 사용하지 마세요.
가능하면 JS보다 CSS 애니메이션을 선호하세요.

자세한 CDN 링크, 패턴 및 팁은 references/libraries.md를 참조하세요.

디자인 시스템

다음 기본값을 적용하세요. 이는 의견이 반영되고 테스트된 값입니다. 사용자가 요청하는 경우에만 재정의하세요.

전체 디자인 시스템 참조: 완전한 타이포그래피, 색상, 간격, 애니메이션, 접근성 및 시각적 세부 사양은 references/design-system.md를 참조하세요.

주요 내용 (전체 내용은 참조 문서 확인):

디자인 노트

테마 시스템 (중요):

클래스 기반 테마만 사용 — <html class="theme-dark"> 또는 <html class="theme-light">
테마 토글은 html 클래스를 변경합니다: document.documentElement.className = 'theme-' + newTheme
절대 data-theme 속성을 사용하지 마세요 — 평가 시스템은 클래스 기반 테마를 예상합니다.
필수 CSS 사용자 정의 속성: --bg, --surface, --text, --accent, --border (평가 호환성을 위한 최소 세트)

타이포그래피:

Inter 글꼴 필수 — https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap
필수 글꼴 두께 계층: h1 ≥ 700, h2 ≥ 600, h3 ≥ 500, body = 400 (평가 중요 요구 사항)
제목에 -0.03em 자간
한국어 타이포그래피 우수성: 한국어 콘텐츠의 경우 본문 텍스트에는 Noto Sans KR을, UI 요소에는 Inter를 사용하세요. 한국어에는 line-height: 1.6 적용 (라틴어는 1.4). 한국어 Medium 두께는 서양 Regular(400)에 매핑됩니다. 포함: https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap

색상:

클래스 기반 테마만 사용 (@media prefers-color-scheme 사용 금지)
다크: #0A0A0A 배경, #EDEDED 텍스트. 라이트: #FAFAF9 배경, #0f172a 텍스트
나머지 참조 문서 참조

namgung9406/visualize

visualize란 무엇인가요?

즐겨 사용하는 AI에게 물어보기

문서

visualize은(는) 무엇을 하나요?

파일 생성 후

중요 요구 사항 (절대 변경 불가)

핵심 원칙

철학

출력 규칙

디자인 시스템

디자인 노트

관련 스킬

steipete/songsee

affaan-m/frontend-design

mattpocock/improve-codebase-architecture

lobehub/add-provider-doc

addyosmani/browser-testing-with-devtools

bytedance/chart-visualization