/graph: 숫자가 애니메이션 차트가 됩니다
사용자가 어떤 형태로든 숫자를 제공합니다: 3월 20만, 4월 65만, 11월 150만, 붙여넣은 표, CSV 파일, 스크린샷 또는 문장. 이를 작은 스펙으로 변환하고, 프레임을 확인한 후 비디오를 렌더링하여 무음 MP4(약 5초)를 반환합니다.
아래 ${CLAUDE_SKILL_DIR}은 이 스킬의 폴더입니다(이 SKILL.md가 있는 폴더). 환경이 이를 자동으로 채워주지 않으면 해당 폴더 경로를 사용하세요. 모든 파일은 사용자의 현재 폴더 또는 사용자가 지정한 폴더에 저장하세요.
0. 설치 확인
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" --check
몇 초 정도 걸립니다. 이 컴퓨터가 설정되었는지 확실하지 않으면 실행하세요. "ready": true이면 진행합니다. 그렇지 않으면 "fix" 아래 나열된 명령을 실행하고, 사용자에게 일회성 설치라고 알리세요: python3 -m pip install playwright (브라우저 드라이버), python3 -m playwright install chromium (Google Chrome 또는 Edge가 설치되지 않은 경우에만, 약 150MB), python3 -m pip install imageio-ffmpeg (ffmpeg가 없는 경우에만). pip가 "외부 관리 환경" 오류를 반환하면 한 번만 개인 환경을 만들고 모든 명령에 해당 Python을 사용하세요: python3 -m venv ~/.animate-skills && ~/.animate-skills/bin/pip install playwright imageio-ffmpeg, 필요한 경우 ~/.animate-skills/bin/python -m playwright install chromium. Windows에서는 python3 대신 py를 사용하세요. 여기서 브라우저를 사용할 수 없는 경우(예: Claude 앱 샌드박스)? 이 파일의 끝부분을 참조하세요.
1. 스펙 작성
graph-<주제>.json을 저장합니다:
{
"title": "내 인스타그램 팔로워",
"subtitle": "2026",
"data": [["3월", 200000], ["4월", 650000], ["11월", 1500000]],
"source": "Instagram",
"theme": "night"
}
규칙:
- 사용자의 정확한 숫자를 사용하세요. 값을 절대 임의로 만들거나, 반올림하거나, 채우지 마세요. 어떤 것이 명확히 모호하다면(어떤 열인지, 어떤 단위인지) 짧은 질문을 하나 하세요. 그렇지 않으면 진행하세요.
- 전체 숫자를 작성하세요: 65만 →
650000, 150만 →1500000, 12% →12및"suffix": "%". - 레이블을 짧게 유지하세요(약 8자 이내가 가장 좋음):
3월,1분기,2024,월. - 제목은 숫자가 무엇인지 사용자의 말을 최대한 사용하여 나타냅니다(약 30자 이내;
|는 줄 바꿈을 강제합니다).subtitle과source는 사용자가 제공했거나 요청에서 명확한 경우에만 추가합니다("내 인스타그램 팔로워" → 출처 Instagram); 임의로 만들지 마세요.
| 필드 | 설명 |
|---|---|
title, subtitle | 제목과 그 아래 작은 줄(마침표, 단위). |
data | [["레이블", 숫자], ...] 또는 [{"label": "...", "value": n}, ...] 형태, 순서대로. |
type | 자동으로 설정하려면 생략: 값이 10개 이하이면 막대 그래프; 더 긴 시리즈와 크기에 비해 변화가 적은 값(210 → 178로 가는 몸무게, 가격, 온도)에 대해 선 그래프가 범위를 확대합니다. 강제하려면 "bar" 또는 "line". |
prefix, suffix | 단위: "$", "€", "%", " kg". |
decimals | 소수점을 강제합니다. 기본값: 각 값은 자체 소수점을 유지합니다. |
compact | 기본값은 10,000 이상을 1.2만 / 150만 / 20억으로 표시합니다. 전체 숫자로 표시하려면 false. |
callout | 자동 성장 태그(첫 번째 값에서 마지막 값까지: ↑ 7.5배; 10배 이상은 정수, ↑ 77배; ↑ 32%; ↓ 18%)를 사용하려면 생략합니다. 직접 입력한 짧은 텍스트("흑자 전환") 또는 없음(null). |
good | 낮을수록 좋은 경우(체중 감량, 부채 상환, 비용, 경주 시간) "down": 감소가 빨간색 태그 대신 녹색 태그를 얻습니다. |
highlight | 금색으로 강조할 막대: "last"(기본값), "max", 인덱스 또는 "none". |
theme | night (진한 남색, 산호색 막대; 기본값), light, sunset, mint. |
source | 차트 아래 작은 "출처: ..." 표시. |
size | "1080x1920" (세로, 기본값), "1080x1080", "1920x1080". |
duration, fps | 초(기본값 ~5) 및 초당 프레임 수(기본값 30; 60은 더 부드럽지만 더 느림). |
예시: examples/instagram-followers.json (막대), examples/website-visitors-line.json (선).
2. 마지막 프레임 확인
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" graph-<주제>.json --still end --out graph-<주제>-check.png
이미지를 확인하세요(2-3초 소요): 레이블이 읽기 쉽고, 겹치는 부분이 없으며, 숫자가 사용자의 것과 정확히 일치하는지 확인합니다. 그렇지 않으면 스펙을 수정하고 다시 확인하세요.
3. 비디오 렌더링
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" graph-<주제>.json --out graph-<주제>.mp4
약 10-20초 소요됩니다. 확인 이미지를 삭제하세요.
4. 전달
사용자에게 MP4 파일 경로를 알려주세요(환경에서 파일을 표시할 수 있으면 보여주세요). 소리가 없으므로 음악이나 음성 해설을 추가할 준비가 되었습니다. 하나의 빠른 변형(다른 테마, 정사각형 크기, 막대 대신 선 그래프)을 제안하세요.
여기 브라우저가 없나요? (예: Claude 앱 샌드박스)
설치 확인이 브라우저를 실행할 수 없는 경우, 대신 페이지로 애니메이션을 작성하세요:
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" graph-<주제>.json --html graph-<주제>.html. 이 페이지는 모든 브라우저에서 차트를 재생합니다(가능하면 아티팩트로 표시). MP4는 컴퓨터에서 Claude Code가 필요하거나 페이지를 화면 녹화해야 한다고 사용자에게 알리세요.