클로드 데이터 시각화 스킬

v1.0.0 · 갱신 2026-10-19

표나 숫자를 주면 막대·꺾은선·도넛·전후 비교 차트 카드를 브라우저로 여는 결과 파일 하나로 만듭니다.

스킬이란 — AI 에 넣어 두는 zip 파일 하나입니다. 넣어 두면 대화로 요청할 때마다 AI 가 그 안의 순서와 점검 도구를 따라 같은 형식의 결과물을 만듭니다.

무료

무료 공개 · 개인·상업 프로젝트에 자유롭게 사용 · 출처 표기는 선택

ZIP 받기 · 1.6 MB 설치 방법 보기

PC 에서 받아 Claude.ai 에 올리세요

클로드 데이터 시각화 스킬은 표나 숫자를 주면 결론 제목과 출처 줄을 단 차트 카드를 그려, 장별 PNG 와 등장 영상으로 저장할 수 있는 결과 파일 하나로 만듭니다. 무료로 받아 씁니다.

이런 분께

보고서·SNS 에 넣을 차트를 표나 숫자에서 바로 만들고 싶은 분

  • 마케터
  • 기획자
  • 1인 사업자

만든 곳 호롱스 · 문의·오류 알리기 — 소개 페이지

작동 환경
Claude.ai · Claude Code
설치 안내
Claude.ai Claude Code
준비물
표·CSV 또는 숫자 · 결론 한 마디 · 사진·일러스트는 넣지 않습니다 · 브랜드 색과 로고는 선택
검증
시험 결과 13개 · 잘 나온 것만 고르지 않고 전부 공개 · 2026-10-19

안전 정보

인터넷 연결
하지 않음 — 결과 화면의 「이어 고치기」(이 사이트에서 마저 고치는 링크)를 누를 때만 이 사이트로 갑니다
로그인·API 키
묻지 않음
따로 깔 프로그램
없음
안전 정보 자세히 보기
zip 확인 값(sha256)
ccbd0c7876211f19b1ea74f9440cbdbefa423eb02d0d7c6a5a5cf07bb0a38117
Claude 가 실행하는 명령
node assets/check.mjs scene.json [kit.json] node assets/make.mjs scene.json result.html [kit.json] python assets/make.py scene.json result.html [kit.json]
만드는 파일
결과 HTML 한 파일(명령에 적은 경로)
배포 전 검사
구성 파일 규약 · 예제 장면 그리기 · 설명서 형식 · zip 5MB 이하 · 허용된 파일만 · 바깥 연결 없음 · 금지 낱말 없음 · 비밀 값 없음 · 실행 범위 제한
zip 안 파일 수
16개

「금지 낱말 없음」은 만든 쪽의 내부 경로나 내부 도구 이름처럼 배포 파일에 들어가면 안 되는 낱말을 zip 안 모든 파일의 본문과 파일 이름에서 찾아, 하나도 없음을 확인했다는 뜻입니다.

설치 방법

무료(Free) 요금제도 됩니다. Pro · Max · Team · Enterprise 요금제에서도 쓸 수 있고, Team · Enterprise 는 조직 관리자 설정을 따릅니다.

Claude.ai (PC 웹 브라우저 기준)

  1. Settings(설정) → Capabilities(기능) 에서 「Code execution and file creation」(코드 실행·파일 만들기)을 켭니다.
  2. Customize → Skills 에서 「+」 → 「+ Create skill」 → 「Upload a skill」(스킬 올리기)을 고릅니다.
  3. 받은 zip 을 풀지 않고 그대로 올립니다. 맥 Safari 가 받자마자 압축을 풀었다면, 풀린 폴더를 오른쪽 클릭 → 「압축」으로 다시 zip 을 만들어 올리세요.

설치한 뒤엔 이렇게 말하세요: 「아래 CSV 로 월별 신규 가입자 차트를 만들어 줘」

개발자용 (Claude Code)

zip 을 풀어 나온 폴더를 macOS · Linux 는 ~/.claude/skills/, Windows 는 %USERPROFILE%\.claude\skills\ 아래에 넣고 새 대화를 엽니다.

메뉴 이름은 영어 화면 기준입니다. 근거: Claude 도움말(스킬 사용) · Claude Code 문서(스킬 폴더) · Claude Code 문서(Windows 경로)

받는 것

  • 가로 막대·세로 막대·꺾은선·도넛·전후 비교 다섯 종류
  • 4:5(인스타 세로)·1:1(정사각)·16:9(가로 화면) 비율, 한 번에 1~10장
  • 장별 PNG 저장과 등장 영상 녹화 단추가 든, 브라우저로 여는 결과 파일 하나(result.html)
  • 잡지·패널·노트 세 디자인 스타일

잘 맞는 경우

  • 보고서·SNS 에 넣을 차트를 표나 숫자에서 바로 만들고 싶은 분
  • 쓰는 곳: 보고서 · SNS 게시물 · 발표 자료

안 맞는 경우

  • 막대의 축을 0 아닌 값에서 자르지 않습니다. 꺾은선을 곡선으로 잇지 않습니다.
  • 도넛 조각은 6개까지입니다. 더 많으면 작은 조각을 「기타」로 묶어야 합니다.
  • 꺾은선 계열은 셋까지입니다.
  • 축 눈금·격자를 켜지 않습니다. 값은 막대·점 곁에 직접 적습니다.
  • 강조색은 브랜드 색 하나만 씁니다. 나머지는 회색 단계입니다.
  • 사진·일러스트를 넣지 않습니다.
  • 이미지
  • 영상
  • 보고서
  • SNS 게시물
  • 발표 자료

이렇게 말하면 이렇게 만듭니다

Claude 가 먼저 묻는 것

  1. 어떤 데이터인가요? 표나 CSV 를 붙이거나 숫자를 말로 적어 주세요.
  2. 차트가 말해야 할 결론 한 마디는 무엇인가요?
  3. 브랜드 색이나 로고, 정해 둔 비율이 있나요? 없으면 기본 색과 4:5 로 만듭니다.

사용자 아래 CSV 로 월별 신규 가입자 차트를 만들어 줘. 결론은 「5월에 가장 많았다」야. (1월~6월 가입자 수 예시 데이터를 붙여 넣음)

클로드 월별 신규 가입자 차트를 세로 막대 한 장(4:5, 잡지 스타일, 기본 색)으로 만들었습니다. 제목은 「5월 신규 가입자가 반년 중 가장 많았다, 522명」이고 5월 막대와 522명을 강조색으로 칠했습니다. 출처 줄은 「출처: 예시 데이터 · 월별 신규 가입자 수」입니다. 점검은 문제·다듬을 곳 없이 통과했습니다. 결과 파일(result.html)을 브라우저로 열면 PNG 저장 단추와 차트가 그려지는 장면을 받는 영상 녹화 단추가 있습니다.

직접 채워 보기

여기서는 내가 칸을 채워 미리 봅니다. 스킬을 쓰면 AI 가 대화로 채워 줍니다.

시험 결과

요청마다 만든 결과의 첫 장을 잡지 · 패널 · 노트 세 디자인 스타일로 나란히 놓았습니다. 그림을 누르면 크게 봅니다.

시험 방법과 표시 뜻

버전마다 정해 둔 요청 13개를 한 번씩만 넣고, 나온 결과를 잘 나온 것만 고르지 않고 전부 올립니다. 스타일을 정해 달라고 한 요청(아래 「13개 모두 보기」 안)은 그 스타일 이름 옆에 「요청」을 붙였습니다.

이 버전은 문제가 없습니다. 다듬을 곳이 있는 결과는 그 아래 「점검 내용 보기」에서 무엇인지 볼 수 있습니다. 문제는 글씨 넘침·겹침·안 읽히는 색처럼 결과에 그대로 보이는 것입니다. 다듬을 곳은 결과는 그렸지만 줄 끝 낱말이 어색하게 나뉘는 것처럼 고치면 더 좋은 점입니다.

우리 팀이 쓰는 업무 도구를 순위로 보여 주는 차트 하나 만들어 줘. 문제 없음
아래 CSV 로 월별 신규 가입자 차트를 만들어 줘. 결론은 「5월에 가장 많았다」야. 문제 없음
지점별 연 매출을 비교하는 차트 만들어 줘. 숫자가 커서 읽기 쉽게 해 줘. 문제 없음
분기별 영업 손익을 세로 막대로 보여 줘. 적자인 분기도 그대로. 문제 없음
13개 모두 보기
평균 응답 시간이 어떻게 줄었는지 꺾은선으로 보여 줘. 소수 둘째 자리까지 보여 줘. 문제 없음
교육 과정별 신청자 수를 순위로 보여 줘. 과정 이름은 줄이지 말고 그대로 써 줘. 문제 없음
발표 슬라이드에 넣을 16:9 차트가 필요해. 고객 문의 유형 비중을 보여 줘. 문제 없음
세 지점의 월별 방문객 추이를 한 차트에 같이 보여 줘. 강남점이 제일 빨리 늘었다는 걸 강조하고 싶어. 문제 없음
한 달 지출 비중을 도넛 차트로 만들어 줘. 항목은 아래 일곱 개 다 넣어 줘. 문제 없음
우리 브랜드 키트로 정사각형(1:1) 차트 세 장 만들어 줘. 장마다 위에 「월간 운영 지표」라고 붙여 줘. 문제 없음
이 숫자로 차트 만들어 줘. 잡지 기사처럼 임팩트 있게 보였으면 해. 문제 없음
깔끔하게, 정보 위주로 정리된 차트가 필요해. 문제 없음
메모장이나 노트 느낌으로 귀엽게 차트 만들어 줘. 문제 없음

디자인 스타일

다른 스킬

자주 묻는 것

스킬이 뭔가요?

AI 에 넣어 두는 zip 파일 하나입니다. 넣어 두면 대화로 요청할 때마다 AI 가 그 안의 순서와 점검 도구를 따라 같은 형식의 결과물을 만듭니다.

내 브랜드 색과 로고로 바꿀 수 있나요?

브랜드 색과 로고는 kit.json 파일 하나에 담고, 모든 스킬이 같은 파일을 읽습니다. Claude 가 브랜드 색이나 로고가 있는지 물으면 이 파일을 대화에 함께 올려 주세요. 없으면 무채색 바탕에 강조색 하나인 기본 색으로 만듭니다.

색은 bg(바탕) · ink(글자) · muted(흐린 글자) · accent(강조색)를 #RRGGBB 꼴로 적고, 로고는 PNG · JPEG · SVG 그림을 data:image/…;base64, 글자로 바꿔 넣습니다. 글자와 바탕 색의 차이(대비)가 4.5:1 보다 작아 글자가 잘 안 읽히면 기본 색으로 그립니다.

version 은 꼭 적는 칸이고 값은 1 입니다. name(이 색·로고 묶음의 이름)과 voice(바라는 말투 한 줄)는 적지 않아도 됩니다.

시험 결과 중 브랜드 색·로고를 넣은 요청에 쓴 예시입니다(로고 값은 앞부분만 보입니다).

{
    "version": 1,
    "name": "예시 브랜드",
    "colors": {
        "bg": "#F2F1EB",
        "ink": "#232521",
        "muted": "#575A52",
        "accent": "#2E6B4F"
    },
    "logo": "data:image/png;base64,iVBORw0KGgoAAAANSU…",
    "voice": "정확하고 담백한 안내 말투"
}
무료로 써도 되나요?

무료 공개 · 개인·상업 프로젝트에 자유롭게 사용 · 출처 표기는 선택

변경 기록

v1.0.0 · 2026-10-19

  • 「안 맞는 경우」 안내를 쉬운 말로 고쳤습니다(강조색은 브랜드 색 하나만 씁니다).
  • 차트를 그리는 방식은 0.1.0 과 같습니다. 시험 결과는 이 판으로 다시 만들었습니다.

v0.1.0 · 2026-10-08

  • 첫 판입니다. 가로 막대·세로 막대·꺾은선·도넛·전후 비교 다섯 종류를 지원합니다.
  • 비율은 4:5·1:1·16:9 셋이고, 한 번에 1~10장을 만듭니다.
  • 결과 화면 위 단추로 같은 차트를 잡지·패널·노트 세 디자인 스타일로 바꿔 볼 수 있습니다.
  • 1만 이상의 큰 수는 만·억·조 단위로 적고, 막대는 늘 0에서 시작합니다.