Claude Code (2.1.199 시점)에 동봉되어 있는 dataviz 스킬을 사용하여 매출 대시보드를 만들어 보았습니다.

배색도 마크의 굵기도, 제 스스로는 단 하나도 결정하지 않았습니다.

Claude Code의 /dataviz 스킬이 제시하는 절차와 검증된 팔레트(palette)를 그대로 따랐을 뿐입니다. 그렇게 해서 이것이 완성되었습니다.

스킬의 절차대로 구성한 매출 대시보드. 청색 단색 바, 가는 마크, 여백이 많은 카드.

다크 모드(Dark mode)도 단순히 "대응"하는 것이 아니라, 별도의 단계에서 색상을 다시 만들어 만든 것이 처음부터 포함되어 있습니다. 토글 하나로 전환됩니다.

동일한 대시보드. 청색도 녹색도 라이트 모드와는 다른 색으로 교체되어 있다.

"그래프 색상을 대충 정하고 있지 않은가?"라는 자각이 있는 사람일수록 와닿는 기능이라고 생각합니다.

먼저, 흔히 "저지르기 쉬운" 제작 방식을 일부러 시도해 본 것이 이것입니다.

데이터는 위의 대시보드와 완전히 동일합니다.

무지개색 바, 2축 중첩, 모든 점 라벨, 이모지. 어디선가 본 적이 있는 것 같지 않나요.

이 Before는 사실 안티 패턴(anti-pattern)의 전시장과 같습니다.

저지르기 쉬운 것	왜 안 되는가
🌈 1개 계열의 막대에 무지개색 적용	순서가 없는 카테고리에 색상을 부여하면, 막대의 길이와 색상으로 정보가 이중화됨. 색약(color vision deficiency)인 경우 옆의 색과 같아 보임
...

After는 이것들을 하나씩 해결한 결과입니다.

화려함은 없지만, 읽을 수 있습니다.

dataviz 스킬은 이 "수수하지만 올바른" 방향으로 기계적으로 도달하게 해줍니다.

스킬을 로드하면 다음과 같은 문장으로 시작하는 절차서가 나옵니다.

🌈

색은 마지막에 결정한다. 대부분의 잘못된 차트(chart)는 색을 가장 먼저 결정해 버린다.

절차는 7단계입니다. 색에 관한 이야기는 단계 2부터이며, 그보다 앞서 "애초에 이 데이터를 차트로 만들어야 하는가?"를 묻습니다.

#	단계	요점
1	형태 선택	데이터의 역할(대소·식별·정부·추이)에 따라 종류를 결정. "stat 타일이 정답"인 경우도 있음
...	동봉된 validate_palette.js가 배색을 pass/warn 판정(명도·채도·색약 식별 가능 여부·대비). 이 부분은 직접 작성하지 않고 스킬이 자동으로 실행함
4	마크 사양과 여백	막대는 가늘게·모서리 곡률 4px·선 2px, 간격으로 구분
5	호버(hover) 레이어 추가	크로스헤어(crosshair) + 툴팁(tooltip)은 표준 사양
6	접근성(Accessibility)	2개 계열 이상은 반드시 범례, 테이블 뷰, 다크 모드는 "선택"
7	렌더링 후 육안 확인	검증기(validator)는 색상만 확인. 레이아웃은 사람의 눈으로

서두의 "색을 하나도 선택하지 않았다"의 정체는 단계 3입니다. 검증을 통과한 8가지 색상이 이것입니다. 얼핏 보면 그저 "예쁜 색 견본" 같지만, 이 이면에서 명도·채도·색약 식별성·대비가 모두 체크되어 있습니다.

validate_palette.js의 검증을 통과한 8색. 왼쪽이 라이트, 오른쪽이 다크이며, 같은 "blue"라도 #2a78d6 → #3987e5로 다른 색(즉, 반전이 아니라 다크 모드용으로 다시 선택함)입니다.

dataviz 스킬은 Claude Code가 "차트 만들어줘"라는 요청에 대해 묵묵히 읽어 들이는 설계 가이드입니다.

컬러 팔레트(color palette) 검증이 "읽고 납득하는" 것이 아니라 "실행하여 합격/불합격이 나오는" 형태로 동봉되어 있다는 점이 다른 디자인 가이드라인과 가장 다른 점입니다.