# 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
## 자주 묻는 질문 (FAQ)
### Q: Data Visualization Design이란 무엇인가요?
A: 복잡한 데이터를 시각적으로 이해하기 쉽게 표현합니다.
### Q: Data Visualization Design의 핵심 디자인 원칙은 무엇인가요?
A: Data Visualization Design의 핵심 원칙은 명확성, 정확성, 인사이트입니다.
### Q: Data Visualization Design은 어떤 프로젝트에 적합한가요?
A: Data Visualization Design은 분석 대시보드, 경영진 보고 툴, 의료·과학 데이터 앱, 금융 서비스, 분석 대시보드, BI 툴, 금융 서비스, 의료·과학 앱 등의 프로젝트에 적합합니다.
### Q: Data Visualization Design의 장단점은 무엇인가요?
A: 장점으로는 복잡한 데이터를 직관적으로 전달, 의사결정 속도 향상, 인터랙티브 탐색으로 인사이트 발굴이 있습니다. 단점으로는 잘못 설계하면 데이터 왜곡, 복잡한 차트는 해석 장벽, 색약·색맹 사용자를 위한 별도 설계 필요이 있습니다.
### Q: Data Visualization Design에서 색상은 어떻게 사용하나요?
A: 데이터 구분을 위한 최대 8~10색 카테고리 팔레트. 색맹 접근성 필수 색상 역할은 categorical-1~8: 독립 데이터 카테고리 색상 — 서로 구분되는 색, sequential: 같은 색의 연속 변화 (데이터 강도), diverging: 중립점 기준 양방향 색 변화입니다. 주의사항: 색상만으로 데이터 구분 금지 — 패턴·레이블 병행, 색맹 안전 팔레트 사용 (ColorBrewer 권장).
### Q: Data Visualization Design에 어울리는 폰트 스타일은 무엇인가요?
A: Data Visualization Design에는 숫자 가독성 최우선 — tabular figures 지원 폰트 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 축 레이블 최소 12px, 숫자 폰트는 monospace 또는 tabular figures 필수 — 숫자 정렬.
### Q: Data Visualization Design 디자인에서 하면 안 되는 것은 무엇인가요?
A: Data Visualization Design에서 피해야 할 것: 3D 차트 사용 금지 — 데이터 왜곡, 파이 차트 과다 조각 금지 (5개 이하), Y축 0 기준점 생략 금지 — 왜곡.
### Q: Data Visualization Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?
A: Data Visualization Design을 적용한 대표적인 제품·서비스로는 Tableau, Google Analytics, Datadog, Bloomberg Terminal 등이 있습니다.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=data-visualization
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=data-visualization&merged=true
Data Visualization Design의 핵심 원칙은 명확성, 정확성, 인사이트입니다.
Data Visualization Design은 어떤 프로젝트에 적합한가요?
Data Visualization Design은 분석 대시보드, 경영진 보고 툴, 의료·과학 데이터 앱, 금융 서비스, 분석 대시보드, BI 툴, 금융 서비스, 의료·과학 앱 등의 프로젝트에 적합합니다.
Data Visualization Design의 장단점은 무엇인가요?
장점으로는 복잡한 데이터를 직관적으로 전달, 의사결정 속도 향상, 인터랙티브 탐색으로 인사이트 발굴이 있습니다. 단점으로는 잘못 설계하면 데이터 왜곡, 복잡한 차트는 해석 장벽, 색약·색맹 사용자를 위한 별도 설계 필요이 있습니다.
Data Visualization Design에서 색상은 어떻게 사용하나요?
데이터 구분을 위한 최대 8~10색 카테고리 팔레트. 색맹 접근성 필수 색상 역할은 categorical-1~8: 독립 데이터 카테고리 색상 — 서로 구분되는 색, sequential: 같은 색의 연속 변화 (데이터 강도), diverging: 중립점 기준 양방향 색 변화입니다. 주의사항: 색상만으로 데이터 구분 금지 — 패턴·레이블 병행, 색맹 안전 팔레트 사용 (ColorBrewer 권장).
Data Visualization Design에 어울리는 폰트 스타일은 무엇인가요?
Data Visualization Design에는 숫자 가독성 최우선 — tabular figures 지원 폰트 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 축 레이블 최소 12px, 숫자 폰트는 monospace 또는 tabular figures 필수 — 숫자 정렬.
Data Visualization Design 디자인에서 하면 안 되는 것은 무엇인가요?
Data Visualization Design에서 피해야 할 것: 3D 차트 사용 금지 — 데이터 왜곡, 파이 차트 과다 조각 금지 (5개 이하), Y축 0 기준점 생략 금지 — 왜곡.
Data Visualization Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Data Visualization Design을 적용한 대표적인 제품·서비스로는 Tableau, Google Analytics, Datadog, Bloomberg Terminal 등이 있습니다.