data-illustration은(는) 무엇을 하나요?
일반적인 차트 라이브러리(막대, 선, 레이더)는 정확하지만 기억에 남지 않습니다. 반대의 실패 사례인 AI 생성 "데이터 시각화" 이미지는 아름답지만 숫자를 충실히 인코딩할 수 없어, 데이터인 척하는 장식에 불과합니다. 이 스킬은 두 가지를 모두 정직하게 수행합니다: 데이터가 생성된 SVG의 형상을 결정(정확하고 재현 가능한 핵심)하고, AI 생성 이미지는 분위기로만 사용되며 값을 전달하는 데는 절대 사용되지 않습니다.
사용 시기
- 누군가 점수/메트릭/차원을 시각화하고 싶지만 일반 막대/선/파이 차트가 지루하거나 브랜드에 맞지 않을 때
- "이 시각화가 실제로 디자인된 것처럼 보이게 해달라", "차트보다 더 일러스트레이티브한 것", "대시보드에 기본 차트 대신 진짜 그래픽을 만들어달라"와 같은 요청이 있을 때
- 결과물이 의도적으로 디자인된 것처럼 보여야 할 때, 일회성 차트를 직접 코딩하는 대신 이 스킬을 선호하세요.
정확성 계약 (양보 불가)
- 출력의 모든 수량은 입력 값으로부터 코드에서 계산됩니다. 모양의 길이, 반경, 레이블 텍스트, 중앙의 숫자 판독값 — 모두 프로그램적으로 파생되며, 절대 이미지 모델이 눈대중으로 그리거나 평가하지 않습니다.
- AI 이미지 생성은 장식용으로만 사용됩니다. 생성된 배경을 추가하는 경우, 프롬프트를 추상 질감으로 제한하세요. 텍스트, 숫자, 인물, 로고가 없어야 합니다. 이미지 생성을 사용할 수 없는 경우에도 그래픽은 완전하고 정확해야 합니다.
- 모든 것에 레이블이 붙습니다. 인코딩된 모든 요소에는 레이블이 있고, 헤드라인 숫자에는 중앙 판독값이 있으며, 한 줄 범례는 그 형태가 실제로 무엇을 의미하는지 명시합니다. 아무도 해독할 수 없는 아름다운 그래픽은 실패이지 성공이 아닙니다.
만약 이미지 모델이 차트를 직접 "그리게" 하고 싶은 유혹을 느낀다면 — 멈추세요. 그렇게 하면 계약이 위반되고 결과는 미묘하게(또는 심각하게) 잘못될 것입니다.
기본 형태: 유기적인 "블룸"
N개의 차원/점수 → 중심점에서 방사되는 N개의 꽃잎. 각 꽃잎:
- 길이는 값을 인코딩합니다(더 길수록 높음). 희미한 정수 가이드 링을 기준으로 하여 분위기만이 아닌 숫자로 읽을 수 있습니다.
- **채움(fullness)**은 값에 따라 약간 넓어집니다. 점수가 높을수록 시각적으로 "더 풍성하게" 읽힙니다.
- 색상은 의미론적 램프를 통해 값의 구간에 매핑됩니다(예: 높으면 초록, 중간은 호박색, 낮으면 따뜻한 빨강/테라코타).
- 끝 레이블은 차원 이름과 정확한 숫자를 표시합니다.
- 중앙 디스크는 평균값을 표시하며, 자체 값에 따라 색상이 구분되고 짧은 캡션이 있습니다.
- 범례 줄은 인코딩을 평이한 언어로 명시합니다(예: "꽃잎 길이 = 5점 만점 점수").
이것은 데이터 세트당 독특한 유기체로 읽히며(일반 레이더 차트가 아님), 모든 값이 여전히 정확하게 읽을 수 있습니다.
제작 방법
- 입력을 간단한
{dimension: value}맵과 제목, 평균값으로 받습니다. - 각 꽃잎의 형상을 값에서 직접 계산하는 작은 스크립트(SVG 출력이 가능한 모든 언어)를 작성합니다. — 각도는 차원 수에 따라 균등하게 배치되고, 반경은 값의 함수, 색상은 구간 임계값에 대한 조회입니다.
- 레이블과 범례를 실제 SVG 텍스트 요소로 렌더링하며, 이미지 레이어에 굽지 않습니다.
- 선택적 분위기 레이어: 접근 가능한 이미지 생성 API를 통해 추상적이고 테마에 맞는 배경 이미지를 생성하고, 일러스트레이션 아래에 낮은 불투명도로 합성하고 비네트 뒤에 배치하여 중앙이 읽기 쉽게 유지합니다. 이것을 캐시하세요. 빌드/저작 시점에 한 번 생성하고 페이지를 렌더링할 때마다 생성하지 마세요. 느리고 비용이 듭니다.
- 출력을 자체 포함되게 만듭니다(단일
.svg파일, 배경은 데이터 URI로 포함). 별도 에셋을 관리할 필요가 없습니다. - 모양을 상호작용 가능하게 하려면(호버/클릭으로 각 차원의 정의 + 정확한 점수 + 출처 표시), 각 요소를
data-dimension,data-score,data-definition과 같은 데이터 속성으로 감싸서 작은 스크립트가 읽어 측면 패널을 작동시킬 수 있게 합니다.
형태 확장
블룸은 기본값이지 유일한 옵션이 아닙니다. 데이터 형태에 맞는 형태를 선택하되, 어떤 형태를 사용하든 정확성 계약을 유지하세요:
- 능선/등고선 분포 또는 여러 항목에 걸친 값 추적용
- 아이소타입(반복되는 글리프, 마지막 글리프는 부분적으로 채움) 수를 세는 것이 중요하고 문자 그대로의 양으로 읽히길 원할 때
- 별자리 개별 크기보다 항목 간의 관계가 더 중요할 때
안티 패턴
- 이미지 모델이 차트나 숫자를 렌더링하게 두는 것 — 값이 잘못되거나 조작됩니다.
- 레이블이나 범례가 없는 화려한 그래픽 — 해독할 수 없다면 아무리 예뻐도 쓸모없습니다.
- 데이터 레이어의 가독성을 방해할 만큼 강한 생성 배경 — 낮은 불투명도로 유지하고 비네트 뒤에 배치하세요.
- 캐싱 없이 페이지 렌더링마다 이미지 생성 API를 호출하는 것 — 느리고 불필요하게 비쌉니다.
사용 방법
설치: 개인용으로 이 폴더를 ~/.claude/skills/data-illustration/에 복사하거나, 프로젝트 저장소 내의 .claude/skills/data-illustration/에 복사하세요.
호출:
이 6개의 점수를 지루한 막대 차트 대신 데이터 일러스트레이션 블룸으로 바꿔줘
— 제목은 "Q3 회고", 중앙 평균값, 그리고 범례를 추가해.
이 대시보드의 차트가 평범해 보여. data-illustration을 사용해서 정확하고
레이블이 있는 일러스트레이션으로 만들어줘 — AI가 그린 숫자 없이, 모든 것이
실제 데이터에서 계산되어야 해.