KPI 카드
카드 5장높이 1–2단위
대표 수치와 증감이 먼저 읽히는 카드입니다. 모든 KPI 카드는 제목, 기간 부제, 대표 수치와 바로 뒤의 증감 배지 순서로 같은 머리를 쓰고, 배지의 화살표는 오르내림을, 색은 좋고 나쁨을 나타냅니다.
숫자와 증감 배지만 있는 카드입니다. 그래픽이 없어 좁은 자리에도 들어갑니다.
들어 있는 판단 3
- 증감은 숫자 바로 뒤에 배지로 두고, 옆에 비교 기준과 그 값을 적습니다. 무엇과 비교했는지 모르는 0.3%p는 읽을 수 없습니다.
- 비율 지표(
pct)는 증감을 %p로 적습니다. 3.1%에서 3.4%는 0.3%p 증가이고, 9.7%로 적으면 변화가 실제보다 커 보입니다. - 배지의 화살표는 오르내림을, 색은 좋고 나쁨을 나타냅니다. 반품률처럼 낮을수록 좋은 지표는
"better": "down"으로 두면 증가가 빨간 배지가 됩니다.
숫자 아래에 선 차트를 둔 카드입니다. 월별 흐름을 함께 보여줄 때 씁니다.
들어 있는 판단 3
- 월별 선은 13개월을 그립니다. 처음과 마지막이 같은 달이라 계절의 영향 없이 작년 같은 달과 비교할 수 있고, 증감도 전년 동월 대비로 적습니다.
- y축은 값의 범위에 맞춰 작은 변동도 보이게 합니다. 대신 바닥 색은 아래로 갈수록 사라지게 칠해, 면적이 0부터의 양으로 읽히지 않게 합니다.
- 기간 이름은 석 달 간격으로 적되 처음과 마지막은 항상 남기고, 나머지 달의 값은 마우스를 올리거나 화살표 키로 봅니다.
숫자 아래에 세로 막대를 둔 카드입니다. 이번 기간 값을 지난 기간들의 규모와 함께 볼 때 씁니다.
들어 있는 판단 3
- 막대는 길이로 읽으므로 0에서 시작합니다. 흐름만 보는 KPI - Line과 다른 점입니다.
- 진행 중인 이번 달(
partial)은 점선 윤곽으로 그려, 다 끝난 달과 길이를 그대로 비교하지 않게 합니다. 집계 기간은 제목 아래 부제에 적고, 비교는 대표 수치의 전월 동기 대비로 합니다. - 지난 기간은 옅은 주황, 마지막 기간만 진하게 둡니다. 기간 이름은 석 달 간격으로 적되 이번 기간은 항상 남깁니다.
반원 게이지 가운데에 숫자를 둔 카드입니다. 목표나 한도가 정해진 지표의 진척을 보여줄 때 씁니다.
차트 가이드 · 게이지 차트 ↗
들어 있는 판단 3
- 전월 대비 증감은 넣지 않습니다. 목표 대비와 전월 대비가 한 카드에 함께 있으면 숫자를 어느 기준으로 읽어야 할지 헷갈립니다.
- 목표를 넘으면 게이지를 끝까지 채우고, 초과분은 비율 숫자로만 보여줍니다.
- 예산·한도처럼 적게 쓸수록 좋은 지표(
"better": "down")는 사용률로 적고, 한도를 넘으면 빨간색으로 적습니다.
KPI - Stacked Bar
kpi-stacked-bar숫자 아래에 비중을 나눈 막대 한 줄과 범례를 둔 카드입니다. 합계를 이루는 부분의 비중을 보여줄 때 씁니다.
들어 있는 판단 3
- 조각은 네 개까지 그립니다. 큰 세 항목만 색으로 나누고, 나머지는 회색 기타로 묶습니다. 기타에 든 항목은 마우스를 올리면 보여줍니다.
- 큰 항목부터 왼쪽에 놓고 주황, 분홍빨강, 노랑 순으로 칠합니다. 조각 사이를 띄워 맞닿은 색이 섞여 보이지 않게 합니다.
- 범례는 두 줄 두 칸에 이름과 비중만 적어 색만으로 읽지 않게 합니다. 비중 카드에 금액까지 적으면 무엇을 비교하는지 흐려지므로, 금액은 조각이나 범례에 마우스를 올리면 보여줍니다.
