---
title: "시각화 최적화 원칙"
weight: 50
description: "차트 선택 · 색·축·레전드 · 대시보드 구성을 moai-data:data-visualizer로 자동 생성하는 가이드."
geekdocBreadcrumb: true
---
> 좋은 차트는 보는 사람이 0.5초 안에 메시지를 읽고, 나머지 시간은 디테일을 확인하는 데 쓰는 차트입니다. 화려한 색·3D·과한 레이블은 그 0.5초를 빼앗습니다.

```mermaid
flowchart TD
    A["데이터 형태 파악"] --> B{"어떤 비교인가?"}
    B -- "시간 변화" --> C["꺾은선 / 영역"]
    B -- "카테고리 비교" --> D["가로·세로 막대"]
    B -- "구성 비율" --> E["도넛 / 트리맵"]
    B -- "관계" --> F["산점도 / 히트맵"]
    C & D & E & F --> G["data-visualizer<br/>대시보드 생성"]

    style A fill:#eaeaea,stroke:#6e6e6e,color:#09110f
    style G fill:#e6f0ef,stroke:#144a46,color:#09110f
```

## 사용 스킬

- **`moai-data:data-visualizer`** — shadcn/ui 기반 데이터 시각화·차트·대시보드 생성. HTML 대시보드 출력 전 소크라테스식 인터뷰로 메시지 명확화.

## 차트 선택 룰

데이터의 형태가 차트를 결정합니다.

| 데이터 형태 | 첫 번째 선택 | 두 번째 선택 |
|---|---|---|
| 시간에 따른 변화 | 꺾은선 | 영역 |
| 카테고리 비교 | 가로 막대 | 세로 막대 |
| 부분-전체 (3개 이하) | 도넛 | 100% 누적 막대 |
| 부분-전체 (4개 이상) | 100% 누적 막대 | 트리맵 |
| 분포 | 히스토그램 / 박스플롯 | 바이올린 |
| 상관관계 | 산점도 | 히트맵 |
| 지리 데이터 | 지도 (Choropleth) | 거품 지도 |

피해야 할 차트: **3D 파이**, **누적 영역(3개 이상)**, **레이더(3개 이상 축)**.

## 색 사용 5가지 룰

1. **카테고리 색**: 7개 이내. 그 이상이면 회색 + 강조 색 1개로.
2. **순서 색**: 단일 그라데이션(연→진).
3. **발산 색**: 0을 중심으로 양쪽 다른 색(빨강 ↔ 파랑).
4. **하이라이트**: 메시지의 핵심 1개만 강조 색.
5. **색맹 안전**: 빨강·녹색만으로 정보 전달 금지. 모양·라벨로 보강.

## 대시보드 구성 — F자 패턴

사람의 시선은 좌상단 → 우 → 좌 → 우 (F자)로 이동합니다. 가장 중요한 KPI를 좌상단에:

| 위치 | 콘텐츠 |
|---|---|
| 좌상단 | 핵심 KPI 1개 (큰 숫자 + 변화율) |
| 우상단 | 보조 KPI 2-3개 |
| 중간 | 시간 추이 차트 |
| 하단 | 카테고리·세그먼트 분해 |

## 워크플로우 예시 — 주간 KPI 대시보드

{{< terminal title="claude — cowork" >}}
> 주간 KPI 대시보드 만들어줘. 좌상단에 이번 주 매출·전주 대비.
> 우상단에 신규 고객 수, NPS, Churn. 중간에 4주 매출 추이, 하단에 카테고리별 매출.
> shadcn/ui 기반 HTML로.
{{< /terminal >}}

`data-visualizer`가 인터뷰로 메시지를 정련한 뒤 HTML 대시보드를 생성합니다.

## 한국 시각화 함정

- **'백만 원' 단위 표기 누락** — 축 라벨에 단위 명시 (₩백만, ₩만)
- **연도가 한자 표기** — "2026年" → "2026년" 또는 그래프 보조 텍스트
- **한글 폰트 깨짐** — Pretendard·Noto Sans KR 시스템 설치 또는 PDF 출력으로 임베드

## 자주 겪는 실수

- **막대를 0이 아닌 값에서 시작** — 변화가 과장되어 보입니다. 0부터 시작하세요.
- **너무 많은 차트 한 페이지에** — 6개 이상은 정보 과부하. 4개 이내로.
- **레전드 위치가 멀음** — 레전드는 차트 바로 옆 또는 직접 라벨링.

## 다음 단계

- [데이터 분석 가이드](../data-analysis/)
- [엑셀 고급 기법](../../templates/excel/)
- [트랙 — 데이터](../../tracks/track-data/)

---

### Sources

- moai-data 플러그인 [`data-visualizer`](https://github.com/modu-ai/cowork-plugins/blob/main/moai-data/skills/data-visualizer/SKILL.md)
- [shadcn/ui charts](https://ui.shadcn.com/charts) · [Color Brewer](https://colorbrewer2.org)
