데이터 시각화 시스템

데이터 시각화 시스템은(는) 무엇을 하나요?

목적

데이터 시각화 시스템은 개별 지표 수준을 넘어 차트와 그래프를 설계하기 위한 방법론을 제공합니다. 시간에 따른 추세, 카테고리 간 비교, 값의 분포와 같은 정량적 관계를 명확하고 정확하며 접근 가능하게 전달하도록 보장합니다. 이 시스템은 차트 선택, 광학적 정규화, 접근 가능한 색상 코딩, 반응형 재배치에 대한 규칙을 수립하여 '시각적 노이즈'와 인지 과부하를 방지합니다.

사용 사례

• SaaS 대시보드: 사용자 성장, 수익 트렌드 또는 시스템 성능 시각화.
• 재무 보고서: 포트폴리오 분포, 비용 카테고리 또는 시장 변동 표시.
• 분석 플랫폼: 트래픽 소스, 전환 퍼널 또는 행동 코호트 표시.
• 영향 및 지속 가능성 보고서: 시간에 따른 환경 지표 또는 사회적 영향 데이터 시각화.
• 건강 및 피트니스 앱: 활력 징후, 활동 수준 또는 목표 달성 진행 상황 추적.

사용하지 말아야 할 때

• 단일 고영향 숫자: 격리된 KPI(예: "총 수익: $10k")에는 metric-and-statistic-system을 사용하세요.
• 원시 다중 속성 데이터: 사용자가 여러 열에 걸쳐 20개 이상의 항목에 대한 특정 값을 읽어야 하는 경우 data-table-ui-system을 사용하세요.
• 순수 장식용 인포그래픽: 비동적, 비데이터 기반 그래픽을 사용한 예술적 표현이나 스토리텔링이 목적인 경우.
• 단계별 상태: 선형 프로세스(예: "2/4단계")에는 step-progress-system을 사용하세요.

입력

1. 사용자 목표: 사용자가 이해하려는 것은 무엇인가? (비교, 추세, 분포 또는 부분-전체).
2. 데이터 유형: 데이터는 범주형(예: "브라우저 유형"), 시간적(예: "월별 매출"), 또는 정량적(예: "가격 대비 품질")인가?
3. 카디널리티: 동시에 표시해야 하는 항목 또는 시리즈의 수는?
4. 기기 제약 조건: 대상 뷰포트 및 상호작용 모드(터치 vs. 마우스).
5. 브랜드 토큰: 상위 디자인 시스템의 팔레트, 타이포그래피 및 간격.

출력

1. 차트 선택 맵: 목표와 데이터에 기반한 선택된 차트 유형(라인, 막대, 원형, 산점도).
2. 접근 가능한 색상 사양: 색맹 사용자(원시, 적색맹, 청색맹)도 구별할 수 있는 팔레트.
3. 해부학 및 레이블링 사양: 축 제목, 범례, 툴팁 및 데이터 마커에 대한 규칙.
4. 반응형 전환 맵: 데스크탑에서 모바일로 차트가 어떻게 적응하는지 (예: 방향 전환, 데이터 단순화).

워크플로우

1. 커뮤니케이션 목표 식별

차트를 선택하기 전에 데이터가 무엇을 "말해야" 하는지 정의하세요:

• 시간에 따른 추세: 라인 차트 또는 영역 차트를 사용하세요.
• 카테고리 간 비교: 막대 차트(세로 또는 가로)를 사용하세요.
• 부분-전체 관계: 도넛 차트 또는 트리맵을 사용하세요(3개 이상의 카테고리에는 표준 파이 차트를 피하세요).
• 상관 관계/분포: 산점도 또는 히스토그램을 사용하세요.

2. 차트 유형 선택 및 정규화

정확성을 보장하기 위해 "데이터의 진실" 규칙을 적용하세요:

• 0 기준선 규칙: 막대 차트는 값 축의 0 기준선에서 시작해야 차이를 과장하지 않습니다.
• 종횡비 규칙: 라인 차트의 경우 균형 잡힌 종횡비(보통 2:1 또는 3:2)를 유지하여 기울기가 인위적으로 급해지거나 평평해지지 않도록 하세요.
• 미니멀리스트 기하학: 3D 효과, 두꺼운 그리드선 또는 데이터를 전달하지 않는 그림자와 같은 비필수 "차트 잡동사니"를 제거하세요.

3. 시각적 계층 구조 및 레이블링 설정

visual-hierarchy-system을 차트 구성 요소에 적용하세요:

• 직접 레이블링: 가능하면 별도의 범례 대신 라인/막대 바로 옆에 데이터 시리즈에 직접 레이블을 지정하여 시선 추적 피로를 줄이세요.
• 강조: "현재" 또는 "목표" 데이터 시리즈에는 고대비 색상을 사용하고, 과거 또는 벤치마크 데이터에는 흐릿한 중성 색상을 사용하세요.
• 컨텍스트 계층 구조: 축 제목은 있어야 하지만 기본 데이터 및 차트 제목보다 하위(더 작고/연하게) 위치해야 합니다.

4. 접근 가능한 색상 및 패턴 적용

모든 사람이 데이터를 인지할 수 있도록 보장하세요:

• 색맹 안전 팔레트: 서로 다른 색상과 다양한 밝기 단계를 사용하세요. "나쁨" vs. "좋음"을 나타내기 위해 빨간색과 녹색만 짝짓지 말고 빨간색/파란색을 사용하거나 아이콘/기호를 추가하세요.
• 중복 인코딩: 색상만 사용하지 마세요. 점선, 다른 마커 모양(원, 사각형, 삼각형) 또는 별개의 패턴/질감을 추가하여 시리즈를 구분하세요.
• 대비: 모든 텍스트(레이블, 축)는 배경에 대해 WCAG AA(4.5:1) 대비를 충족해야 합니다.

5. 상호작용 및 반응형 설계

• 점진적 공개: 호버/터치 시 정확한 값을 표시하는 툴팁을 사용하여 차트를 깔끔하고 스캔하기 쉽게 유지하세요.
• 반응형 재배치:
  • 가로에서 세로로: 데스크탑의 넓은 세로 막대 차트는 모바일에서 가로 막대 차트로 전환하여 가로 스크롤을 피해야 합니다.
  • 데이터 축소: 모바일에서는 X축 레이블 수를 줄이거나(예: 한 달 건너뛰기) 데이터 포인트를 집계하세요.
  • 종횡비 고정: 차트의 가독성을 유지하세요. CSS에서 aspect-ratio를 사용하여 공간을 확보하고 CLS를 방지하세요.

의사 결정 규칙

• "파이 금지" 규칙: 5개 이상의 카테고리가 있거나 카테고리 간 차이가 적은 경우 파이/도넛 차트를 피하세요. 대신 가로 막대 차트를 사용하세요.
• 범례보다 레이블: 범례가 필요한 경우 맨 아래가 아닌 데이터에 최대한 가깝게(예: 차트 위 또는 오른쪽 정렬) 배치하세요.
• 단색 성공: 좋은 차트는 흑백으로 인쇄해도 이해할 수 있어야 합니다. 그렇지 않다면 색상 선택이나 마커가 색상에만 너무 의존하고 있는 것입니다.
• 정밀도 vs. 스캐닝: 대시보드에서는 즉시 스캔할 수 있도록 값을 반올림하세요(예: 1,242,301 대신 1.2M). 툴팁에는 높은 정밀도를 유지하세요.

제약 조건

• 접근성: 차트에는 데이터 테이블 또는 핵심 인사이트를 요약하는 설명 aria-label이 함께 제공되어야 합니다. role="graphics-document" 또는 role="img"와 aria-label을 사용하세요. 모든 대화형 요소(마커)는 24x24px 최소 대상 크기를 충족해야 합니다.
• 반응형: 차트는 고정 픽셀 너비를 가져서는 안 되며 유동적이어야 합니다. 복잡한 SVG 차트의 경우 크기 조정을 위해 viewBox를 사용하세요.
• 계층 구조: 차트 제목이 가장 눈에 띄는 텍스트여야 하며, 그 다음이 데이터 자체여야 합니다.

일반적인 실패 패턴

• 파이 차트 과부하: 파이 차트에 10개의 조각을 표시하여 작은 조각을 구별할 수 없게 만드는 경우.
• 잘린 축: 작은 차이를 크게 보이게 하기 위해 막대 차트를 0이 아닌 값에서 시작하는 경우(기만적인 디자인).
• 색상 전용 의존성: 비슷한 파란색 음영만 사용하여 라인 차트에서 5개의 라인을 구분하여 색맹 사용자에게 접근 불가능하게 만드는 경우.
• 범례 피로: 사용자가 색상 키와 데이터 사이를 10번이나 왔다 갔다 하게 하여 차트를 이해하게 만드는 경우.
• 모바일 차트 넘침: 차트 유형이나 레이블을 모바일에 맞게 조정하지 않아 읽을 수 없는 작은 텍스트나 깨진 레이아웃이 발생하는 경우.

검증 기준

• 차트 유형 선택이 커뮤니케이션 목표와 일치합니다(예: 추세에는 라인).
• 막대 차트는 0 기준선에서 시작합니다.
• 색상 팔레트는 색맹 안전하며 중복 인코딩(마커/패턴)을 사용합니다.
• 공간이 허락하는 경우 직접 레이블링이 사용되며, 범례는 가까운 위치에 배치됩니다.
• 차트는 유동적이며 모바일에 올바르게 적응합니다(예: 가로 재배치).
• 접근성: aria-label이 데이터/인사이트 요약을 제공합니다.
• 상호작용: 툴팁이 호버/터치 시 정확한 데이터를 제공합니다.
• 모든 텍스트가 WCAG AA 대비(4.5:1)를 충족합니다.