WIZ Design System

쓰는 곳#

메일함, 문서함, 승인 목록, 고객 목록, 정책 목록처럼 “여러 항목 중 하나를 선택하고 상세를 보며, 필요하면 보조 정보나 액션을 곁들이는” 화면에 씁니다.

List pane

승인 항목

Detail pane

정책 개정안 검토

개정안 본문과 근거 문서를 나란히 확인해야 하므로 상세 pane에는 요약, 주요 결정, 1차 행동을 먼저 둡니다.

검토 중문서높음

담당: 운영기획
기한: 오늘 16:00

Adaptive List Detail — 목록·상세·보조 pane의 폭별 전환

적용 현황#

기준서: 완료
포털 적용: 이 문서의 승인 목록 조합 데모에 1차 적용
재사용 구현: 포털 전용 조합 데모 있음 — 패키지 API는 아직 없음
배포 패키지: 미포함
다음 조치: 문서 목록·관리자 목록에 반복 적용 가능성 검토

구조#

목록 pane: 항목 탐색, 검색, 상태 요약
상세 pane: 선택 항목의 본문, 주요 속성, 1차 행동
보조 pane: 활동 기록, 댓글, AI 요약, 관련 문서

웹 규칙#

넓음: 목록 + 상세 + 보조 3 pane. 보조 pane은 접을 수 있음
중간: 목록 + 상세 2 pane. 보조 정보는 상세 안 탭 또는 Drawer
좁음: 목록 또는 상세 1 pane. 선택 시 상세로 전환

목록의 선택 상태는 URL 또는 route state로 보존합니다. 상세 pane이 비어 있으면 첫 항목을 자동 선택하지 않고 “항목을 선택하세요” 상태를 보여 사용자의 의도를 보존합니다.

모바일 규칙#

진입: 목록이 첫 화면. 상세는 별도 단계로 이동
복귀: 시스템 뒤로가기와 화면 내 Back이 같은 목록 위치로 복귀
상태 보존: 검색어, 필터, 스크롤 위치, 선택 항목을 유지
보조 정보: 댓글·기록·AI 요약은 상세 하단 섹션 또는 BottomSheet
다중 선택: 목록 단계에서만 시작. 상세 안에서는 선택 모드로 갑자기 바꾸지 않음

상태#

미선택: 상세 pane에 EmptyState
로딩: 목록 Skeleton과 상세 Skeleton을 독립적으로 표시
상세 오류: 목록은 유지하고 상세 pane에 오류·다시 시도
삭제됨: 목록에서 제거 후 다음 항목 자동 선택 또는 목록으로 복귀
권한 없음: 상세 pane에서 권한 안내, 목록 탐색은 유지

접근성#

pane은 region과 명확한 aria-label을 갖습니다.
목록 항목은 선택 상태를 aria-current 또는 aria-selected로 전달합니다.
모바일 상세 진입 시 제목으로 포커스를 이동하고, 뒤로가기 후 선택 항목 또는 목록 컨테이너로 복귀합니다.
보조 pane 접힘은 aria-expanded와 키보드 토글을 제공합니다.
상세 업데이트가 목록 탐색을 방해하지 않도록 live region은 오류·저장 결과에만 사용합니다.

히스토리 조직#

대화·문서 목록처럼 시간이 흐를수록 쌓이는 리스트는 최신성으로 묶어야 스캔된다. @wds/ui-web의 groupByRecency가 항목을 오늘 · 어제 · 지난 7일 · 지난 30일 · 달(N월) · 연·월 섹션으로 나눈다. 선택 모드에서는 Checkbox로 일괄 선택·삭제한다.

히스토리대화 9개

오늘
- 온보딩 체크리스트 자동화 방안오늘
  새 대화
- 분기 OKR 초안 검토오늘
  새 대화
어제
- 고객 인터뷰 요약 — 3월 배치어제
지난 7일
- 릴리스 노트 문구 다듬기3일 전
- API 오류율 급증 원인 분석6일 전
지난 30일
- 경쟁사 기능 비교표12일 전
- 연간 예산 계획 v227일 전
6월
- 브랜드 리프레시 무드보드44일 전
2025년 11월
- 작년 회고 — 무엇이 통했나240일 전

히스토리 조직 — 최근성 그룹핑 + 일괄 선택/삭제

언어 중립 키: groupByRecency/relativeDayGroup은 today · last-7-days 같은 버킷 키만 반환한다. 섹션 라벨 문자열은 소비자가 i18n으로 매핑한다(“오늘”/“Today”). WDS는 정책을 주고 언어는 강요하지 않는다.
순서 보존: 유틸은 입력 순서를 유지한다 — 소비자가 최신순으로 정렬해 넘긴다. 날짜가 없거나 무효한 항목은 today로 폴백한다.
로컬 day 경계: 시각(time)이 아니라 로컬 타임존의 “일” 단위로 비교한다. 미래 날짜(시계 오차)는 today.
일괄 선택: “선택” 진입 → 항목별 Checkbox, 헤더 Checkbox는 전체 선택(부분 선택 시 indeterminate). 선택 수를 라벨로 표시하고, 삭제는 선택이 있을 때만 활성화한다.
섹션 헤더는 sticky로 스크롤 중 현재 구간을 고정 표시한다. 태그·폴더 조직은 태그↔항목 매핑이 제품 데이터 모델이므로 소비자 소유다 — WDS는 그룹핑 유틸과 렌더 레시피만 제공한다.

사용 컴포넌트#

Card · Table · DataGrid · Tabs · Drawer · SideSheet · EmptyState · Skeleton

검수 기준#

3 pane: 넓은 화면에서 목록·상세·보조가 동시에 보이고 각 pane이 독립 스크롤
1 pane: 모바일에서 목록과 상세가 한 화면에 어설프게 끼지 않음
복귀: 상세에서 뒤로가기 시 목록 조건과 스크롤 위치 유지
미선택: 자동 선택으로 사용자의 의도를 만들지 않음
보조 pane: 접힘·펼침이 레이아웃을 크게 흔들지 않음