# Data Visualization Design

> 복잡한 데이터를 시각적으로 이해하기 쉽게 표현합니다.

- 층: 아카이브 (UI 패턴)
- ID: data-visualization
- 연도: 2000s
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/data-visualization

## 정의

복잡한 데이터를 시각적으로 이해하기 쉽게 표현합니다.

## 주요 특징

- 차트와 그래프
- 인포그래픽
- 대시보드
- 인터랙티브 시각화
- 색상 코딩

## 핵심 원칙

- 명확성
- 정확성
- 인사이트

## 컬러 시스템

데이터 구분을 위한 최대 8~10색 카테고리 팔레트. 색맹 접근성 필수

### 색상 역할

- categorical-1~8: 독립 데이터 카테고리 색상 — 서로 구분되는 색
- sequential: 같은 색의 연속 변화 (데이터 강도)
- diverging: 중립점 기준 양방향 색 변화
- background: 차트 배경 — 흰색 또는 연한 회색
- grid/axis: 보조선·축 — 낮은 대비 회색

### 색상 제약

- 색상만으로 데이터 구분 금지 — 패턴·레이블 병행
- 색맹 안전 팔레트 사용 (ColorBrewer 권장)
- 같은 계열 색 인접 사용 금지 — 혼동 방지

### 다크모드 전략

차트 배경 어둡게, 카테고리 색상 채도 조정

### 대비 요구사항

각 카테고리 색상 간 구분 가능한 명도/채도 차이 확보

## 타이포그래피

- 폰트 성격: 숫자 가독성 최우선 — tabular figures 지원 폰트
- 권장 폰트 수: 최대 1개
- 타입 스케일: 1.2 (Minor Third) — 촘촘한 정보 밀도

### 타이포그래피 제약

- 축 레이블 최소 12px
- 숫자 폰트는 monospace 또는 tabular figures 필수 — 숫자 정렬

## 설계 제약

### 하면 안 되는 것

- 3D 차트 사용 금지 — 데이터 왜곡
- 파이 차트 과다 조각 금지 (5개 이하)
- Y축 0 기준점 생략 금지 — 왜곡

### 반드시 포함할 것

- 범례 (legend)
- 색맹 안전 팔레트
- 축 레이블·단위 표시

### 모션 가이드

차트 진입 시 값이 0에서 실제값으로 증가하는 애니메이션. 500~800ms ease-out.

## 사용 사례

- 분석 대시보드
- 경영진 보고 툴
- 의료·과학 데이터 앱
- 금융 서비스

## 추천 프로젝트 유형

- 분석 대시보드
- BI 툴
- 금융 서비스
- 의료·과학 앱

## 장단점

### 장점

- 복잡한 데이터를 직관적으로 전달
- 의사결정 속도 향상
- 인터랙티브 탐색으로 인사이트 발굴

### 단점·한계

- 잘못 설계하면 데이터 왜곡
- 복잡한 차트는 해석 장벽
- 색약·색맹 사용자를 위한 별도 설계 필요

## 실제 사용 제품·서비스

- Tableau
- Google Analytics
- Datadog
- Bloomberg Terminal

## 자주 묻는 질문

### Q1. Data Visualization Design이란 무엇인가요?

복잡한 데이터를 시각적으로 이해하기 쉽게 표현합니다.

### Q2. Data Visualization Design의 핵심 디자인 원칙은 무엇인가요?

Data Visualization Design의 핵심 원칙은 명확성, 정확성, 인사이트입니다.

### Q3. Data Visualization Design은 어떤 프로젝트에 적합한가요?

Data Visualization Design은 분석 대시보드, 경영진 보고 툴, 의료·과학 데이터 앱, 금융 서비스, 분석 대시보드, BI 툴, 금융 서비스, 의료·과학 앱 등의 프로젝트에 적합합니다.

### Q4. Data Visualization Design의 장단점은 무엇인가요?

장점으로는 복잡한 데이터를 직관적으로 전달, 의사결정 속도 향상, 인터랙티브 탐색으로 인사이트 발굴이 있습니다. 단점으로는 잘못 설계하면 데이터 왜곡, 복잡한 차트는 해석 장벽, 색약·색맹 사용자를 위한 별도 설계 필요이 있습니다.

### Q5. Data Visualization Design에서 색상은 어떻게 사용하나요?

데이터 구분을 위한 최대 8~10색 카테고리 팔레트. 색맹 접근성 필수 색상 역할은 categorical-1~8: 독립 데이터 카테고리 색상 — 서로 구분되는 색, sequential: 같은 색의 연속 변화 (데이터 강도), diverging: 중립점 기준 양방향 색 변화입니다. 주의사항: 색상만으로 데이터 구분 금지 — 패턴·레이블 병행, 색맹 안전 팔레트 사용 (ColorBrewer 권장).

### Q6. Data Visualization Design에 어울리는 폰트 스타일은 무엇인가요?

Data Visualization Design에는 숫자 가독성 최우선 — tabular figures 지원 폰트 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 축 레이블 최소 12px, 숫자 폰트는 monospace 또는 tabular figures 필수 — 숫자 정렬.

### Q7. Data Visualization Design 디자인에서 하면 안 되는 것은 무엇인가요?

Data Visualization Design에서 피해야 할 것: 3D 차트 사용 금지 — 데이터 왜곡, 파이 차트 과다 조각 금지 (5개 이하), Y축 0 기준점 생략 금지 — 왜곡.

### Q8. Data Visualization Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?

Data Visualization Design을 적용한 대표적인 제품·서비스로는 Tableau, Google Analytics, Datadog, Bloomberg Terminal 등이 있습니다.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

- primary: #6366F1
- secondary: #4F46E5
- accent: #22D3EE
- background: #F8FAFC
- surface: #FFFFFF
- text: #0F172A
- textSecondary: #64748B
- border: #E2E8F0

### 타이포그래피

- fontFamily: Inter, 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0em

### 간격·반경·그림자·테두리

- spacing: unit 8px × scale 1
- borderRadius: sm 4px / md 8px / lg 12px / full 9999px
- shadow sm: 0 1px 3px rgba(99,102,241,0.08)
- shadow md: 0 4px 12px rgba(99,102,241,0.12)
- shadow lg: 0 8px 24px rgba(99,102,241,0.16)
- border: 1px solid #E2E8F0

### 컴포넌트 형태

- button: rounded / hover lift / text none
- card: elevated / hover lift
- input: outlined / focus border
- badge: rounded / subtle
- icon: lucide / stroke 1.5 / size 20px
- layout: fluid / section normal
- animation: 300ms ease-out

## 관련 링크

### 관련 스타일

- [Bento Grid](https://ui.buildersgate.com/styles/bento-grid)
- [Carbon Design System](https://ui.buildersgate.com/styles/carbon-design)
- [Accessibility-First Design](https://ui.buildersgate.com/styles/accessibility-first)

---

HTML 버전: https://ui.buildersgate.com/styles/data-visualization

이 문서는 https://ui.buildersgate.com/styles/data-visualization.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.