WIZ Design System

데모#

상단 상태 컨트롤로 기본·로딩(Skeleton)·빈(EmptyState)·오류를 전환해 워크스페이스의 상태 매트릭스를 검수합니다. 좌측 지식 소스, 가운데 문서 캔버스, 우측 에이전트 패널이 함께 작동합니다 — 에이전트는 소스를 수집·요약하고, 캔버스에는 근거 기반 AI 제안이 인라인으로 붙습니다.

상태

온보딩 개선 보고서 (초안)

지난 분기 신규 사용자의 온보딩 완료율은 62%로, 목표 대비 13%p 낮았습니다. 인터뷰에서 가장 자주 언급된 이탈 지점은 초기 워크스페이스 설정 단계였습니다.

세 건의 소스를 종합하면, 설정 단계를 3단계에서 1단계로 줄이고 기본값을 제공할 때 완료 지표가 개선되는 패턴이 관찰됩니다.

AI 제안

3번째 문단에 “Q2 사용자 인터뷰”의 인용을 추가하면 근거가 강해집니다. 삽입할까요?

AI Workspace — 소스 · 캔버스 · 에이전트 3영역 + 상태 매트릭스(좁아지면 적층)

구성#

AI Collaboration OS의 Knowledge · Intelligence Workspace를 한 화면으로 구현한 형태입니다.

영역	역할
지식 소스	답변·작성의 근거가 되는 문서·링크 목록 (RAG의 출처)
문서 캔버스	작업 중인 산출물 + 근거 기반 AI 제안(`Alert`)
에이전트	작업을 수행하는 에이전트 체인(`AgentCard`) — 이름·역할·상태·결과

상태#

워크스페이스는 행복 경로 하나가 아니라 상태 매트릭스로 다룹니다. 데모의 상태 컨트롤로 전환합니다.

상태	트리거	표현
기본	데이터 있음	3영역 — 소스·캔버스(AI 제안)·에이전트 체인
로딩	페치 중	3영역 자리에 Skeleton(레이아웃 동형) + 컨테이너 `aria-busy`
빈	소스 0	EmptyState(BloomSpot `noData` + 제목 + 다음 행동 “소스 연결”)
오류	로드 실패	`FormMessage(error)`(Tier 2) + 다시 시도

로딩 자리표시는 같은 3열 위에 레이아웃 동형으로 놓아 콘텐츠 도착 시 이동(CLS)을 막습니다. 캔버스의 AI 제안은 오류가 아니라 정보성 인라인 메시지라 Alert(info)로 두고, 표면 전체 로드 실패만 메시지 위계 Tier 2(FormMessage)로 다룹니다.

적응형 동작#

컨테이너 폭	레이아웃
`≥ 720px`	소스(230px) · 캔버스(유동) · 에이전트(270px) 3열
`< 720px`	소스 → 캔버스 → 에이전트 세로 적층

근거와 추적성#

이 패턴의 핵심은 추적성입니다 — AI의 제안·산출은 항상 좌측 지식 소스로 거슬러 확인할 수 있어야 합니다. 출처 없는 생성은 지양하고, 제안은 어떤 소스에 근거했는지 드러냅니다. 에이전트 패널은 누가(역할) 무엇을(결과) 했는지를 AI State Model의 상태와 함께 보여 줍니다.

접근성#

계약	구현
로딩	컨테이너 `aria-busy="true"` — 보조기술에 진행 중 전달, Skeleton 자리표시는 `aria-hidden`
캔버스	`aria-label="문서 캔버스"`로 영역 식별, 산출물은 표준 제목·본문 구조
AI 제안	`Alert(info)` — 근거 기반 제안을 영역 내 인라인으로 전달
에이전트	`AgentCard`가 이름·역할·상태(state)·결과를 구조적으로 노출
오류 전달	`FormMessage(error)`가 `role="alert"`로 즉시 낭독
빈 상태	`EmptyState` 제목·설명·행동이 흐름 안에서 읽힘

사용 컴포넌트#

Alert(AI 제안) · AgentCard(에이전트 체인) · Skeleton(로딩) · EmptyState + BloomSpot(빈) · FormMessage(오류, Tier 2) · Button · SegmentedButton(데모 컨트롤). 소스·캔버스 레이아웃은 패턴 전용 표면입니다. 관련: AI Chat · AI 가이드라인.