WIZ Design System

데모#

상단 상태 컨트롤로 기본·로딩(SkeletonCard)·빈(EmptyState + 일러스트)·오류를 전환해 데이터 화면의 상태 매트릭스를 검수합니다. 실제 데이터 연결은 없습니다(UI Reference).

상태

워크스페이스 개요

최근 7일 · 자동 갱신

활성 사용자

12,840▲ 8.2%

최근 8주

온보딩 완료율

74%목표 80%

미해결 이슈

18▲ 3

지난주 대비 +3건

주간 활동 추이

일 평균 9,459

지역별 활성률

서울82%

부산64%

도쿄45%

최근 활동

김도현 · 보고서를 게시했습니다2분 전

이서연 · 승인을 요청했습니다14분 전대기

박준호 · 워크플로를 완료했습니다1시간 전

Dashboard — KPI bento + 주간 추이 + 활동(좁아지면 적층) + 상태 매트릭스

구성#

벤토(크기 다양한 위젯) 그리드 위에 자기완결적 위젯 카드를 배치합니다 — 데이터 우선순위로 크기를 정하고, 각 카드 안에 토큰 기반 미니 차트를 그립니다(차트 라이브러리 0).

모든 위젯은 표준 프레임을 공유합니다 — 헤더(좌: 타이틀 · ⓘ 정보 / 우: 크기 변경 · 편집 · ⋯ 메뉴[이동·복제·삭제]) + 바디(콘텐츠). 옵션 아이콘은 IconButton(ghost), ⋯ 메뉴는 role="menu"로 외부 클릭·Esc 닫기를 갖춥니다.

위젯	데이터비주얼
헤더	화면 제목 + 범위(기간) + 1차 행동(내보내기)
활성 사용자(히어로)	대형 값 + 델타 + 스파크라인(끝점 강조)
온보딩 완료율	링 게이지(`pathLength=100` 백분율 호) + 중앙 값·목표
미해결 이슈	값 + 델타(증가=부정 시멘틱 색)
주간 활동 추이	막대 + 점선 평균선 + 현재(마지막) 막대 강조(Apple Health "avg this week" 패턴)
지역별 활성률	진행률 바 리스트(`role="progressbar"`)
최근 활동	Avatar 피드 + 대기 Badge(한 줄 전체)

데이터 시각화는 별도 라이브러리 기본값을 끼우지 않고 순수 SVG/CSS + 토큰으로 그립니다 — 색은 currentColor/semantic 토큰을 상속해 [data-theme] 다크에 자동 적응합니다. (정렬·드릴다운이 필요한 본격 차트는 @wds/charts(ADR-014) 소관 — 패턴은 요약 viz만.)

적응형 동작#

벤토는 컨테이너 쿼리로 자기 폭에 반응합니다(뷰포트 아님).

컨테이너 폭	벤토
`≥ 920px`	12-col — 위젯이 우선순위대로 스팬(히어로 5 · 링 3 · 스탯 4 · 추이 7 · 진행률 5)
`600–920px`	2-col
`< 600px`	1-col 적층(모바일)

모바일에선 모든 위젯이 전체 폭으로 쌓이고, 활동 피드는 항상 한 줄 전체입니다. 터치 타깃·값 가독성을 유지합니다.

상태#

데이터 화면은 행복 경로 하나가 아니라 상태 매트릭스로 다룹니다. 데모의 상태 컨트롤로 전환합니다.

상태	트리거	표현
기본	데이터 있음	벤토 위젯 — 스파크라인 KPI·링 게이지·막대추이·진행률·활동 피드
로딩	페치 중	위젯 자리에 SkeletonCard(레이아웃 동형) + 컨테이너 `aria-busy` + 내보내기 비활성
빈	데이터 0	EmptyState(BloomSpot `noData` 일러스트 + 제목 + 다음 행동 "데이터 소스 연결")
오류	갱신 실패	`FormMessage(error)`(Tier 2) + 다시 시도

로딩 자리표시는 같은 벤토 그리드 위에 레이아웃 동형으로 놓아 콘텐츠 도착 시 이동(CLS)을 막습니다. 빈 상태는 막다른 길이 아니라 다음 행동을 제시하고, 오류는 표면 전체 범위라 메시지 위계 Tier 2로 둡니다.

접근성#

계약	구현
인-카드 차트	스파크라인·링·막대는 `role="img"` + 실수치 `aria-label`(예: "8주 추이 상승, 12,840명")
진행률	진행률 바는 `role="progressbar"` + `aria-valuenow/min/max`
색 비의존	증감은 ▲/▼ 기호 + 시멘틱 색 병행, 현재 막대는 색+위치로 구분(비색의존)
로딩	컨테이너 `aria-busy="true"` — 보조기술에 진행 중 전달, SkeletonCard로 형태 예고
오류 전달	`FormMessage(error)`가 `role="alert"`로 즉시 낭독
빈 상태	`EmptyState` 제목·설명·행동이 흐름 안에서 읽힘

사용 컴포넌트#

Button · Avatar · Badge · SkeletonCard(로딩) · EmptyState + BloomSpot(빈) · FormMessage(오류, Tier 2) · SegmentedButton(데모 컨트롤). KPI·추이·활동 레이아웃은 레이아웃 시스템의 그리드 위에 구성하고, 패턴은 상태 매트릭스를 더합니다.