# Data Visualization Design — 디자인 스타일 가이드

## 기본 정보
- **ID**: data-visualization
- **카테고리**: ui-pattern
- **연도**: 2000s

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

## 핵심 원칙
- 명확성
- 정확성
- 인사이트

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

## 컬러 시스템 가이드
데이터 구분을 위한 최대 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

## 관련 스타일
- [bento-grid](https://ui.buildersgate.com/styles/bento-grid)
- [carbon-design](https://ui.buildersgate.com/styles/carbon-design)
- [accessibility-first](https://ui.buildersgate.com/styles/accessibility-first)

## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.

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

### 헤더
- background: linear-gradient(135deg, #6366F1 0%, #3730A3 100%)
- textColor: #FFFFFF
- accentColor: #22D3EE

### 타이포그래피
- fontFamily: Inter, 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0em

### 스페이싱
- unit: 8px
- scale: 1

### 그림자 (Shadows)
- sm: 0 1px 3px rgba(99,102,241,0.08)
- md: 0 4px 12px rgba(99,102,241,0.12)
- lg: 0 8px 24px rgba(99,102,241,0.16)
- xl: 0 16px 40px rgba(99,102,241,0.20)

### Border Radius
- none: 0
- sm: 4px
- md: 8px
- lg: 12px
- full: 9999px

### 테두리 (Borders)
- width: 1px
- style: solid
- color: #E2E8F0

### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.2s ease

### 애니메이션
- duration: 300ms
- easing: ease-out

### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=lift / textTransform=none
- 카드: style=elevated / hoverEffect=lift
- 인풋: style=outlined / focusEffect=border
- 배지: shape=rounded / style=subtle
- 아이콘: package=lucide / strokeWidth=1.5 / defaultSize=20

### 레이아웃
- containerStyle: fluid
- sectionSpacing: normal

### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false

## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=data-visualization
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=data-visualization&merged=true

이 페이지 주소를 AI에게 보여주고 "디자인 시스템 문서를 만들어줘"라고 해보세요.

← 홈으로 돌아가기

Data Visualization Design

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

연도

2000s

#6366F1

핵심 원칙

1

명확성

2

정확성

3

인사이트

주요 특징

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

장단점

장점

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

단점 / 한계

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

적합한 사용처

사용 사례

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

이런 프로젝트에 추천

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

실제 사용 예시

TableauGoogle AnalyticsDatadogBloomberg Terminal

UI 컴포넌트 예제

이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.

Bar Chart

막대 그래프로 데이터 비교

월별 매출

Jan
Feb
Mar
Apr
May
Jun

Line Chart

추세를 보여주는 라인 차트

사용자 증가 추이

JanFebMarAprMayJunJulAugSep

Pie/Donut Chart

비율을 나타내는 원형 차트

트래픽 소스

100%
Total
직접 방문50%
검색25%
소셜17.5%
기타7.5%

Statistics Cards

핵심 지표를 카드로 표시

총 사용자
2,543
↑ 12% 증가
총 매출
$89.5K
↑ 8% 증가
전환율
3.2%
↓ 2% 감소
평균 세션
4m 32s
↑ 5% 증가

Progress Indicators

진행도와 비율 표시

CPU 사용량68%
메모리45%
디스크82%
네트워크92%

Activity Heatmap

활동량을 색상으로 표현

월간 활동

Less
More

관련 스타일 탐색

Bento Grid

일본 도시락 상자에서 영감을 받은 비대칭 그리드 레이아웃입니다.

Carbon Design System

IBM의 오픈소스 디자인 시스템으로, 엔터프라이즈 제품에 최적화되어 있습니다.

Accessibility-First Design

모든 사용자가 접근 가능한 포용적 디자인을 우선합니다.