Data Visualization Overview
Introduction
데이터 시각화의 목적으로 복잡한 데이터의 패턴 또는 추세를 보여주거나 데이터 간의 비교를 통한 상관 관계를 나타내기 위해 다양한 유형의 차트를 활용할 수 있습니다. 주로 서비스 내 대시보드, 분석, 모니터링 등의 맥락에서 트렌드 파악, 비교, 분포 분석 등의 목적으로 활용됩니다.
Core Principles
데이터 시각화 전반에서는 다음 디자인 원칙을 따릅니다.
| 원칙 | 설명 |
|---|---|
| Purpose First | 시각화 목적을 먼저 정의하고, 적합한 시각화 방법을 채택합니다. |
| Clarity | 시각적 장식보다 데이터의 해석 용이성을 우선시합니다. |
| Consistency | 디자인 토큰 기반으로 구성 요소를 적용합니다. |
Chart Sequence Colors
차트 시퀀스 색상은 데이터 시리즈에 고유 색상이 지정되지 않은 경우, 순서대로 자동 할당되는 기본 색상 팔레트입니다. 데이터가 고유한 색상 정보를 가지고 있는 경우에는 해당 색상이 우선 적용됩니다.
Color Sequence
시퀀스 색상은 10개로 구성되어 있습니다. Palette 토큰을 직접 참조하며, Light/Dark 모드에서 동일한 값을 사용합니다. 색상은 데이터 시리즈 수에 따라 다음 순서대로 할당합니다.
| Token | Hex | RGB | |
|---|---|---|---|
{palette.blue_light.500} | #0ba5ec | rgb(11, 165, 236) | |
{palette.yellow.500} | #eaa606 | rgb(234, 166, 6) | |
{palette.teal.400} | #42c5b1 | rgb(66, 197, 177) | |
{palette.pink.400} | #f16bc9 | rgb(241, 107, 201) | |
{palette.purple.500} | #7a5af8 | rgb(122, 90, 248) | |
{palette.orange_dark.400} | #ff6937 | rgb(255, 105, 55) | |
{palette.indigo.400} | #818ef5 | rgb(129, 142, 245) | |
{palette.pink.600} | #c13898 | rgb(193, 56, 152) | |
{palette.green.500} | #16b364 | rgb(22, 179, 100) | |
{palette.blue_dark.500} | #2970ff | rgb(41, 112, 255) |
Basic Chart Anatomy
공통 요소를 활용하여 다양한 타입의 차트에서 데이터를 표현할 수 있습니다.
- Title — 차트 제목
- Legend — 데이터 시리즈 범례
- Axis label — 축 레이블
- Y-axis (y축) — 수치 축
- X-axis (x축) — 범주/시간 축
- Plot area — 차트 영역
- Grid lines — 그리드 선
- Tooltip — 데이터 툴팁
Legend
레전드는 데이터 시리즈 항목과 차트 내 표현된 데이터 간의 대응 관계를 사용자에게 명확히 전달하는 시각적 안내 요소입니다. 여러 시리즈를 포함하는 차트에서 데이터의 비교, 선택, 필터링 기준점 역할을 합니다.
Placement
기본적으로 차트의 상단 또는 하단에 배치합니다. 공간이 부족한 경우 툴팁 버튼을 통해 레전드 정보를 제공할 수 있습니다.
Interaction
차트 플롯 영역 위에 커서를 올려 레전드 별 데이터를 상세히 확인할 수 있습니다.
Axes
축(axis)은 데이터의 수치적 기준과 관계를 명확히 전달하여, 사용자가 시각적 패턴을 정확히 해석할 수 있는 레퍼런스를 제공합니다. 각 축은 값의 의미, 범위, 단위, 스케일을 일관되게 표현해야 합니다.
- X-axis (x축) — 일반적으로 시간 또는 범주를 나타냅니다.
- Y-axis (y축) — 수치를 표시하며, 크기나 비율의 상대적 차이를 표현합니다.
- Axis label — 축에서 나타내는 데이터의 단위를 기재합니다.
여러 데이터 시리즈가 겹칠 때는 공통 y축을 우선 적용하고, 서로 다른 단위를 가진 경우에만 dual axis를 사용합니다.
Chart Types
Trend
시간에 따른 변화나 누적 추이를 보여줍니다.
Comparison
여러 항목이나 그룹의 값을 나란히 비교합니다.
Composition
전체 대비 각 구성 요소의 비율을 나타냅니다.
Distribution
값의 분포와 패턴, 이상치를 드러냅니다.
Status
변수 간 상관관계나 상태를 직관적으로 표현합니다.
