카드 37종 · 차트 14가지 · MIT 라이선스

분석가의 판단을 담은
대시보드 카드

카드를 복사해 HTML에 붙여 넣고 JSON만 바꾸세요. 증감, 비중, 달성률은 카드가 계산하고, 색과 강조는 Vizney 차트 가이드의 규칙을 따릅니다.

카드 둘러보기GitHub에서 보기

AI에게 맡길 때는 카드 링크나 llms.txt를 주고, 코딩 에이전트에는 스킬을 설치하세요.

영업 현황

카드 5장을 격자에 붙여 넣어 만든 대시보드

목적으로 고르기

보여줄 것부터 정하세요. 목적마다 기본 카드를 먼저 쓰고, 다른 카드는 조건이 맞을 때만 고릅니다.

  1. 현황지금 얼마인가?

    기본KPI - Number숫자와 비교 기준만 둘 때

  2. 추이어떻게 변해 왔나?

    기본Line - Basic한 지표의 흐름을 볼 때

  3. 목표목표까지 얼마나 왔나?

    기본KPI - Gauge지표 하나의 목표·한도 대비 진척을 볼 때

  4. 비교무엇이 크고 작은가?

    기본Bar - Ranking항목별 크기와 순위를 볼 때

  5. 구성무엇으로 이뤄져 있나?

    기본Donut - Basic한 시점의 비중을 볼 때

  6. 표항목마다 정확히 얼마인가?

    기본Grid - Basic항목마다 여러 지표와 합계를 적을 때

  7. 증감왜 늘고 줄었나?

    기본Waterfall - Basic두 시점 사이의 변화를 요인별로 나눌 때

  8. 흐름어디서 빠지고 어디로 가나?

    기본Funnel - Flow단계마다 얼마나 빠져나가는지 볼 때

  9. 관계두 값은 어떤 관계인가?

    기본Scatter - Basic두 측정값이 함께 움직이는지 볼 때

차트로 고르기

차트 14가지, 카드 37종을 Vizney 차트 가이드의 차트 이름으로 묶었습니다. 차트를 고르면 그 차트의 카드가 모두 나옵니다.

KPI 카드5 막대 차트8 라인 차트6 그리드 차트4 도넛 차트1 스캐터 차트3 트리맵 차트1 히트맵 차트1 워터폴 차트2 퍼널 차트1 와플 차트1 범프 차트1 생키 차트2New 레이더 차트1New

쓰는 법

설치할 것은 없습니다. 카드 하나가 스타일, 데이터, 스크립트를 모두 담은 HTML 조각입니다.

  1. 복사해서 붙이기

    카드의 복사를 눌러 HTML의 <body> 안 원하는 자리에 붙여 넣습니다.

    <div class="vzb-card"
     data-vzb="bar-basic">
  …
</div>

  2. JSON만 바꾸기

    카드 안 JSON의 값만 바꿉니다. 증감, 비중, 달성률은 카드가 계산합니다.

    "title": "분기별 출고 금액",
"format": "eok",
"labels": ["1Q26", "2Q26", "3Q26"],
"values": [2561, 2654, 2750]

  3. 변수로 맞추기

    색과 글꼴은 :root의 변수로 바꿉니다. 모든 카드에 한 번에 적용됩니다. 변수 목록은 tokens.css에 있습니다.

    :root {
  --vzb-primary: #0f766e;
  --vzb-font: 'Pretendard';
}

  4. AI에게 맡기기

    채팅 AI에는 카드의 AI용 링크를 주고, 코딩 에이전트에는 스킬을 설치합니다.

    blocks.vizney.com/cards/
  bar-basic.txt
이 카드로 지점별 월 매출을
그려줘

npx skills add
  yehwanhwang/vizney-blocks
공통 필드와 여러 장 배치
title
지표명
subtitle
기간 부제. 무엇을 언제 기준으로 보는지 적습니다.
value
KPI 카드의 대표 수치. KPI - Line과 KPI - Bar는 생략하면 마지막 값을 씁니다.
format
eok 억 단위 값, krw 원 단위 값을 만·억·조로, usd 달러 값을 $745.6K·$1.2M처럼, count 개수(unit에 단위), pct 비율(증감은 %p), days 일수
better
up, down, neutral. 증감을 초록과 빨강 중 무엇으로 칠할지 정합니다.
compare
{ "label", "value" }. KPI 카드에서 증감을 계산할 비교 기준입니다.
labels
기간 이름. values와 같은 길이로 적고, 값이 없는 기간은 null로 둡니다.
series
[{ "name", "values" }]. 선이나 막대를 여러 묶음 그릴 때 씁니다.
rows
표와 목록의 줄. 줄마다 name과 값을 적습니다. 합계 줄과 비중, 증감률, 달성률은 카드가 계산합니다.
curve
선 모양. smooth(기본) 곡선, linear 직선, step 계단. 라인 카드와 KPI - Line에서 씁니다.
lang
en이면 카드 안의 합계 · 기타 · 달성 같은 문구가 영어가 됩니다. 비우면 한국어입니다.

여러 장을 한 줄에

카드는 배치를 맡지 않습니다. 감싸는 요소에 격자를 주면 폭에 맞춰 줄이 바뀝니다. 카드 폭은 340px 이상이 되게 두세요. 더 좁으면 표와 도넛의 글자가 잘립니다. 같은 줄의 카드는 가장 높은 카드에 맞춰 늘어나므로, 높이가 같은 카드끼리 한 줄에 두면 빈 곳이 없습니다.

<div style="display:grid;
  grid-template-columns:
    repeat(auto-fit,
      minmax(min(100%, 340px), 1fr));
  gap:16px;">
  <!-- 카드 여러 장 -->
</div>