WIZ Design System

한눈에#

ChatMessage들을 세로로 쌓는 스크롤 로그입니다. role="log" + aria-live="polite"로 새 메시지를 보조기술에 알리고, 내용이 바뀌면 최신(하단)으로 자동 스크롤합니다(포커스는 옮기지 않고 시각 추적만). 생성 중이면 busy로 aria-busy를 부여합니다.

나: 디자인 시스템을 새 앱에 어떻게 도입하나요?

어시스턴트: 토큰 패키지를 설치하고 루트에 테마 속성을 주입한 뒤, @wds/ui-web 컴포넌트를 가져다 씁니다.

생성 중(aria-busy)

ChatMessage 세로 스택
role=log + aria-live=polite
내용 변화 시 자동 하단 스크롤
busy → aria-busy

메시지를 추가하면 자동으로 하단까지 스크롤합니다 — 포커스는 이동하지 않습니다

사용 시점#

AI 대화의 메시지 묶음을 담는 컨테이너 — ChatMessage를 자식으로 넣습니다. 단발 메시지 하나면 컨테이너 없이 ChatMessage만으로 충분합니다.

권장 — 이렇게 쓰세요

지양 — 이러지 마세요

나: 디자인 시스템을 새 앱에 어떻게 도입하나요?

어시스턴트: 토큰 패키지를 설치하고 루트에 테마 속성을 주입한 뒤, @wds/ui-web 컴포넌트를 가져다 씁니다.

생성 중(aria-busy)

쓴다 — 여러 턴의 대화 — 자동 스크롤·라이브 안내가 필요할 때

ChatMessage

메시지 단위 — 한 턴은 ChatMessage 단독으로

해부#

영역	prop	설명
메시지	`children`	`ChatMessage` 노드들
생성 중	`busy`	`aria-busy` 부여(스트리밍 표시)

내용(children)이 바뀔 때마다 최신으로 스크롤합니다 — useEffect가 scrollTop을 scrollHeight로 맞춥니다(포커스 비이동). 오류·추천 칩 등은 라이브 이중 낭독을 피하려 이 컨테이너 밖의 형제로 두기를 권장합니다.

API#

Prop	타입	기본값	설명
`children`	`ReactNode`	—	메시지들 — ChatMessage 노드.
`busy`	`boolean`	`false`	응답 생성 중 — aria-busy를 부여한다.
`className`	`string`	—	추가 클래스.

접근성#

계약	구현
메시지 로그	`role="log"` + `aria-live="polite"` — 시간순 추가를 polite로 전달(assertive는 읽던 내용을 끊어 부적합)
생성 중	`busy` → `aria-busy="true"` — 스트리밍 중임을 보조기술에 전달
자동 스크롤	시각 추적만 — 포커스를 옮기지 않아 키보드 사용자의 위치를 빼앗지 않음
이중 낭독 방지	오류 alert·추천 칩은 로그 밖 형제로 두기를 권장(라이브 영역 중복 낭독 회피)