DLWorker UI/UXPattern 07
2026.10.12.3 · proposed
07

PATTERN · DASHBOARD CHART

차트와 범례의 단일 매핑

차트 segment와 범례는 동일한 semantic key-to-color mapping을 사용하고 숫자와 텍스트를 함께 제공합니다.

proposedContract v12026.10.12.3

01 · PURPOSE

무엇을 해결하는가

차트 segment와 범례는 동일한 semantic key-to-color mapping을 사용하고 숫자와 텍스트를 함께 제공합니다.

02 · USE WHEN

사용 조건

상태별 수량이나 프로젝트 분포를 빠르게 비교하고 해당 목록으로 이동하게 할 때 사용합니다.

  • chart와 legend가 같은 CSS variable 사용
  • 0인 항목도 범례에 유지
  • 선택 가능한 항목은 button으로 구현

03 · STATUS

표준 상태와 버전

표준
proposed
도입 버전
2026.10.12.3
배포
source-only

04 · LIVE EXAMPLE

실행 예제

Illustrative — 실제 Worker runtime 데이터가 아닙니다.

05 · RESPONSIVE

Desktop · Tablet · Mobile

Desktop

정보 밀도와 보조 설명을 유지합니다.

Tablet

열을 축소하고 조작 순서를 보존합니다.

Mobile

320px에서 page overflow 없이 단일 열로 전환합니다.

06 · STATES

상태 변형

populatedzeroloadingemptyerrorselected

07 · STRESS

콘텐츠 스트레스

  • 항목 12개
  • 값 0과 1000 혼합
  • 색각 다양성과 dark theme

08 · ACCESSIBILITY

키보드와 보조기술

  • 차트에 text summary 제공
  • segment 선택을 keyboard로 가능하게 함
  • 색 이외의 label과 count 제공

09 · DO / DON'T

선택 기준

Do
  • 확인·진행·대기·최근 key를 고정
  • 범례 선택 시 목록으로 이동
Don't
  • 차트와 범례 색상을 별도로 하드코딩
  • hover만으로 상세 정보 제공

10 · CODE

구현 예제

<div class="chart"><i class="chart-attention"></i><i class="chart-progress"></i></div><button><span class="legend attention"></span>확인 및 처리 <strong>7</strong></button>

11 · VALIDATION

검증 체크리스트

  1. semantic color mapping
  2. zero values
  3. keyboard selection
  4. theme contrast

12 · ADOPTION

Worker 채택 상태

채택
not-started
소유
Worker 개발세션
실행 증거
없음