이 글은 누구를 위한 것인가
- B2B SaaS 또는 어드민 대시보드를 설계하는 디자이너
- 차트를 어떻게 선택해야 할지 모르는 PM과 프론트엔드 개발자
- 기존 대시보드가 "데이터는 있는데 왜 이해하기 어렵지?"라는 피드백을 받는 팀
들어가며
"차트가 너무 많아서 뭘 봐야 할지 모르겠다." B2B 대시보드에서 가장 자주 들리는 불만이다. 반대로 "이 데이터를 왜 이런 차트로 보여주는 거죠?"도 흔하다. 파이 차트로 시계열 데이터를 보여주거나, 라인 차트로 비율 비교를 하려는 경우를 현장에서 자주 본다.
데이터 시각화는 데이터를 예쁘게 만드는 것이 아니라 데이터로 빠른 의사결정을 돕는 것이다. 이 글에서는 어떤 데이터에 어떤 차트가 맞는지, 자주 범하는 시각화 오류는 무엇인지, 그리고 인지 부하를 최소화하는 대시보드 설계 원칙을 다룬다.
이 글은 bluefoxdev.kr의 B2B SaaS UX 설계 원칙 을 참고하고, 데이터 시각화 관점에서 확장하여 작성했습니다. 더 많은 UX 패턴은 bluebutton.kr 에서도 확인할 수 있습니다.
1. 데이터 유형별 차트 선택 매트릭스
1.1 주요 차트 선택 기준
| 목적 | 권장 차트 | 피해야 할 차트 |
|---|---|---|
| 시간에 따른 추이 | 라인 차트, 영역 차트 | 파이 차트, 레이더 차트 |
| 항목 간 비교 | 막대 차트 (수평), 컬럼 차트 | 파이 차트 (5개 이상) |
| 구성 비율 | 파이/도넛 차트 (4개 이하), 누적 막대 | 3D 차트, 버블 차트 |
| 분포 | 히스토그램, 박스 플롯 | 라인 차트 |
| 상관관계 | 산점도 (Scatter Plot) | 파이 차트 |
| 지리 데이터 | 지도 (Choropleth) | 막대 차트 |
| KPI 단일값 | 빅 넘버, 게이지 | 복잡한 차트 |
1.2 파이 차트 사용 금지 케이스
파이 차트는 3~4개 데이터에서, 합이 100%인 구성 비율을 보여줄 때만 적합하다.
❌ 파이 차트 쓰면 안 되는 경우:
- 항목이 5개 이상 → 가장 작은 조각 구분 불가
- 비율이 비슷한 경우 → 크기 차이 인지 어려움
- 시간 비교가 필요한 경우 → 여러 파이 차트 비교 불가
- 값이 100%가 아닌 경우 → 의미 왜곡
✅ 대안:
- 수평 막대 차트 (값 크기 비교 명확)
- 누적 막대 (100% 구성 비율 비교)
- 도넛 차트 + 중앙에 합계 (강조)
2. 흔한 시각화 오류 10가지
오류 1: Y축 0 기준선 무시
❌ 잘못된 예:
Y축: 98 ~ 100 (0 생략)
→ 1% 차이가 엄청난 변화처럼 보임
✅ 올바른 예:
Y축: 0 ~ 100
→ 실제 변화폭 표현
(예외: 주가, 온도처럼 0 기준이 의미 없는 데이터)
오류 2: 3D 차트 사용
3D 차트는 시각적 왜곡을 만들어 정확한 값 비교를 방해한다. 모든 경우에서 2D 차트가 더 정확하다.
오류 3: 색상 과다 사용
❌ 잘못된 예: 카테고리마다 다른 색상 (12가지 색상)
✅ 올바른 예:
- 강조 1가지 색상 + 중립 그레이
- 시퀀셜 팔레트 (명도 그라디언트)
- 발산 팔레트 (긍정/부정 이분법)
오류 4: 적절하지 않은 집계 단위
일별 데이터를 1년 기간으로 보면 데이터 포인트가 365개가 된다. 기간에 따른 자동 집계가 필요하다.
1일 이내: 시간별
1주 이내: 일별
1개월 이내: 일별 또는 주별
1년 이내: 주별 또는 월별
1년 이상: 월별 또는 분기별
오류 5: 차트 제목과 레이블 부재
모든 차트에는 반드시:
- 제목: 무엇을 보여주는가
- Y축 레이블: 단위 포함 (%, 원, 명)
- 데이터 출처: 언제 기준인가
3. 인지 부하 최소화 원칙
3.1 대시보드 정보 계층
[대시보드 레이아웃 원칙]
1단계: 핵심 KPI (Big Number)
- 가장 중요한 지표 3~5개
- 전일/전주 대비 변화율
- 시선이 가장 먼저 닿는 위치
2단계: 추이 차트
- 핵심 지표의 시계열 변화
- 목표값과 실제값 비교
3단계: 세부 분석
- 상세 테이블, 드릴다운 차트
- 접거나 펼치는 방식 권장
3.2 색상 시스템
/* 데이터 시각화 색상 팔레트 */
:root {
/* 주요 색상 (브랜드 색상과 구분) */
--chart-primary: #3B82F6;
--chart-secondary: #10B981;
--chart-tertiary: #F59E0B;
--chart-quaternary: #EF4444;
/* 상태 색상 */
--chart-positive: #10B981; /* 증가/좋음 */
--chart-negative: #EF4444; /* 감소/나쁨 */
--chart-neutral: #6B7280; /* 중립 */
/* 그레이 스케일 */
--chart-grid: #F3F4F6;
--chart-axis: #9CA3AF;
}
3.3 반응형 차트 설계
// React + Recharts 반응형 예시
import { ResponsiveContainer, LineChart, Line, XAxis, YAxis } from 'recharts';
function ResponsiveChart({ data }: { data: DataPoint[] }) {
return (
<ResponsiveContainer width="100%" height={300}>
<LineChart data={data}>
<XAxis
dataKey="date"
tick={{ fontSize: 12 }}
tickLine={false}
/>
<YAxis
tickFormatter={(v) => `${v.toLocaleString()}원`}
axisLine={false}
tickLine={false}
/>
<Line
type="monotone"
dataKey="revenue"
stroke="var(--chart-primary)"
strokeWidth={2}
dot={false} // 데이터 포인트 많을 때 dot 숨김
/>
</LineChart>
</ResponsiveContainer>
);
}
4. 빈 상태와 로딩 상태
데이터 없음:
- "아직 데이터가 없습니다" + 데이터 생성 CTA
- 이전 기간 데이터와 비교 제안
로딩 중:
- 차트 영역에 스켈레톤 (흐릿한 레이아웃 표시)
- 스피너 + 텍스트는 지양 (레이아웃 점프 발생)
오류:
- 구체적인 오류 원인 + 재시도 버튼
- 마지막 성공 데이터 시간 표시
마무리: 좋은 데이터 시각화의 3원칙
- 맥락 전달: 숫자만이 아닌 트렌드, 비교, 목표 함께 표시
- 인지 부하 최소화: 한 화면에 5개 이하 차트, 색상 최대 4개
- 행동 유발: "이 데이터를 보고 무엇을 해야 하는가"를 명확하게
데이터 시각화의 궁극적 목표는 아름다운 차트가 아니라 빠른 의사결정이다.