WIZ Design System

패턴 원칙#

패턴은 토큰·컴포넌트 위에 올라가는 표준 화면입니다. WIZ의 모든 UI는 Token → Component → Pattern → Product 순서로 만들어지며, 패턴은 제품이 바로 가져다 조립할 수 있는 재사용 가능한 UI Reference입니다(실제 비즈니스 로직은 포함하지 않습니다).

컴포넌트를 조합하되 새로 만들지 않는다 — 패턴은 06 컴포넌트의 실물을 배치합니다.
semantic 토큰만 소비한다 — 패턴 전용 색·수치를 두지 않습니다.
적응형이 기본 — 컨테이너 폭에 따라 레이아웃이 자동 전환됩니다(레이아웃 시스템).
접근성은 출하 조건 — 키보드·스크린리더·비색의존·reduced-motion을 지킵니다(접근성).
웹과 모바일을 같은 말로 뭉개지 않는다 — 같은 패턴도 웹은 밀도·비교·키보드, 모바일은 단계·터치·복귀 흐름을 따로 정의합니다.

패턴 카탈로그#

대표 표준 화면 패턴과 Future Interaction 패턴을 함께 봅니다. 카드를 눌러 상세로 이동합니다.

레이아웃 기반 규칙(12컬럼 · 52/48 분할)은 레이아웃 시스템에 정의되어 있습니다.

Future Interaction Patterns#

아래 패턴은 WIZ 제품군에서 반복될 가능성이 높은 차세대 업무 흐름입니다. 레퍼런스의 모양을 그대로 가져오지 않고, WIZ의 컴포넌트·레이아웃·AI 협업 모델에 맞게 웹과 모바일 동작을 분리했습니다.

Adaptive Search Results: 중심 표면은 검색·필터·결과 조회입니다. 웹은 검색 조건과 결과 도구를 분리하고 Select·아이콘 스위치·페이지네이션을 둡니다. 모바일은 검색 우선, 필터 접힘/BottomSheet, 결과 카드와 제한 렌더를 기준으로 합니다.
Adaptive List Detail: 중심 표면은 목록·상세 탐색입니다. 웹은 2~3 pane 동시 비교와 보조 pane 접힘을 쓰고, 모바일은 목록→상세 단계 이동과 뒤로가기·스크롤 상태 보존을 우선합니다.
Contextual Command Surface: 중심 표면은 빠른 명령·상황 액션입니다. 웹은 Command Palette·Popover·키보드 진입을 쓰고, 모바일은 BottomSheet·Drawer·터치 확인 흐름으로 전환합니다.
AI Assisted Review: 중심 표면은 AI 제안 검토·승인입니다. 웹은 제안·근거·diff·결정을 함께 보여 주고, 모바일은 요약 우선·근거 접힘·승인 전 확인 sheet를 기준으로 합니다.
Background Task Monitor: 중심 표면은 장기 작업·큐입니다. 웹은 task tray·진행률·로그·재시도를, 모바일은 compact status·알림 복귀·실패 항목 유지를 우선합니다.
Loading Feedback: 중심 표면은 대기·결과 피드백입니다. Spinner·Skeleton·Progress·FormMessage·Alert·Toast를 대기 성격과 피드백 범위에 따라 고르고, 모바일은 작은 로딩 표시를 흩뿌리지 않고 기다리는 대상 가까이에 모읍니다.
File Import / Upload Review: 중심 표면은 파일 선택·검증·부분 실패 복구입니다. 웹은 선택 표면과 검증 리뷰를 분리하고, 모바일은 큰 드롭존 대신 버튼형 선택과 카드형 검토 목록을 기준으로 합니다.

적용 로드맵#

패턴은 문서 기준서에서 시작하고, 실제 화면 적용과 반복 구현이 확인된 뒤에만 패키지 후보로 승격합니다. 상세 현황은 패턴 적용 로드맵을 기준으로 관리합니다.

기준서: 문서에 웹·모바일 규칙과 검수 기준이 있음 — Future Interaction 패턴 7종
포털 적용: 실제 포털 화면이나 데모에 적용됨 — Adaptive Search Results(/docs/components), Adaptive List Detail, Contextual Command Surface, AI Assisted Review, Background Task Monitor, Chart Data States, Loading Feedback, File Import / Upload Review, Security Settings
재사용 구현: 반복 조합을 훅·컴포넌트·유틸로 추출 — 적용 후 판단
패키지 포함: @wds/ui-web 또는 별도 패턴 산출물로 배포 — 아직 없음

Core Patterns — Workspace 5축#

WIZ AI Collaboration OS는 다섯 축(People · Task · Document · Knowledge · Intelligence)으로 구성되며, 모든 제품은 이 Workspace 패턴 5종을 기반으로 설계합니다.

People Workspace: WIZ-FLOW Next
Task Workspace: WIZ-FLOW Next · WIZ-GOV AI
Document Workspace: WIZ-DOCS · WIZ-GOV AI
Knowledge Workspace: WIZON · WIZ-DOCS
Intelligence Workspace: WIZON · WIZ-GOV AI

AI 협업의 상태·에이전트 표현 표준은 AI 가이드라인이 정본입니다.