Data Visualization Design
복잡한 데이터를 시각적으로 이해하기 쉽게 표현합니다.
- YEAR
- 2000s
#6366F1
- 둥근 모서리
- 가는 테두리
- 가는 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
Bar Chart
막대 그래프로 데이터 비교
월별 매출
Line Chart
추세를 보여주는 라인 차트
사용자 증가 추이
Pie/Donut Chart
비율을 나타내는 원형 차트
트래픽 소스
Statistics Cards
핵심 지표를 카드로 표시
Progress Indicators
진행도와 비율 표시
Activity Heatmap
활동량을 색상으로 표현
월간 활동
이웃 스타일
어디에 쓰나
실제로 쓰는 곳
- Tableau
- Google Analytics
- Datadog
- Bloomberg Terminal
사용 사례
- 분석 대시보드
- 경영진 보고 툴
- 의료·과학 데이터 앱
- 금융 서비스
이런 프로젝트에 맞습니다
- 분석 대시보드
- BI 툴
- 금융 서비스
- 의료·과학 앱
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
핵심 원칙
- 명확성
- 정확성
- 인사이트
주요 특징
- 차트와 그래프
- 인포그래픽
- 대시보드
- 인터랙티브 시각화
- 색상 코딩
장점과 한계
장점
- 복잡한 데이터를 직관적으로 전달
- 의사결정 속도 향상
- 인터랙티브 탐색으로 인사이트 발굴
한계
- 잘못 설계하면 데이터 왜곡
- 복잡한 차트는 해석 장벽
- 색약·색맹 사용자를 위한 별도 설계 필요
컬러 시스템
데이터 구분을 위한 최대 8~10색 카테고리 팔레트. 색맹 접근성 필수
색의 역할
- categorical-1~8: 독립 데이터 카테고리 색상 — 서로 구분되는 색
- sequential: 같은 색의 연속 변화 (데이터 강도)
- diverging: 중립점 기준 양방향 색 변화
- background: 차트 배경 — 흰색 또는 연한 회색
- grid/axis: 보조선·축 — 낮은 대비 회색
제약
- 색상만으로 데이터 구분 금지 — 패턴·레이블 병행
- 색맹 안전 팔레트 사용 (ColorBrewer 권장)
- 같은 계열 색 인접 사용 금지 — 혼동 방지
다크모드 — 차트 배경 어둡게, 카테고리 색상 채도 조정
명도 대비 — 각 카테고리 색상 간 구분 가능한 명도/채도 차이 확보
타이포그래피
숫자 가독성 최우선 — tabular figures 지원 폰트
글꼴은 최대 1종 · 스케일 비율 1.2 (Minor Third) — 촘촘한 정보 밀도
- 축 레이블 최소 12px
- 숫자 폰트는 monospace 또는 tabular figures 필수 — 숫자 정렬
설계 제약
반드시 포함
- 범례 (legend)
- 색맹 안전 팔레트
- 축 레이블·단위 표시
하지 말 것
- 3D 차트 사용 금지 — 데이터 왜곡
- 파이 차트 과다 조각 금지 (5개 이하)
- Y축 0 기준점 생략 금지 — 왜곡
모션 — 차트 진입 시 값이 0에서 실제값으로 증가하는 애니메이션. 500~800ms ease-out.
자주 묻는 질문
Data Visualization Design이란 무엇인가요?
복잡한 데이터를 시각적으로 이해하기 쉽게 표현합니다.
Data Visualization Design의 핵심 디자인 원칙은 무엇인가요?
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 등이 있습니다.