WIZ Design System

한눈에#

사용자·팀의 정체성을 표시합니다 — src 이미지가 있으면 원형에 채우고, 없으면 name의 첫 글자 이니셜로 폴백합니다(이모지처럼 서로게이트 쌍으로 표현되는 글자도 안전하게 잘림).

이니셜 폴백 배경은 primary-subtle + primary-text(AA) — 이니셜 글자는 장식(이중 낭독 없음)

사용자·팀의 정체성을 표시하면 Avatar — 상태 표식이나 정체성+상태 카드는 다른 컴포넌트입니다.

권장 — 이렇게 쓰세요

지양 — 이러지 마세요

쓴다 — 사용자·팀 정체성을 이미지 또는 이름 이니셜로 표시

대신 Badge — 사용자가 아니라 상태·개수를 표식할 때

대신 AgentCard — 정체성 + 상태·메타를 함께 담은 엔티티 카드가 필요할 때

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

Avatar를 직접 조작해 보세요

속성·테마·토큰을 바꾸고 React·Flutter 코드를 확인하는 풀스크린 빌더로 엽니다.

플레이그라운드는 넓은 작업 영역이 필요해 웹·태블릿에서 편집할 수 있어요.

이미지/이니셜 두 모드입니다. 이미지는 src를 주면 object-fit: cover로 원형에 맞춰 채워집니다:

<Avatar name="배현영" src="/team/hy-bae.jpg" />
<Avatar name="배현영" src="/team/hy-bae.jpg" alt="배현영 프로필 사진" />

RSC 계약이라 시드의 onError 클라이언트 폴백은 없습니다 — 이미지 로드에 실패하면 브라우저가 alt 텍스트를 표시합니다.

세 크기를 공유 베이스라인에 올려 지름차를 한눈에 — space 토큰 정렬

sizediametertokenfontsm32pxspace.8captionmd40pxspace.10body-2lg48pxspace.12body-1

이니셜 폰트도 크기에 따라 caption/body-2/body-1로 함께 커집니다.

정적 컴포넌트라 인터랙션 상태가 없습니다(RSC). 상태 표시가 필요하면 AgentCard처럼 칩을 병행 배치하세요.

Prop	타입	기본값	설명
`name`	`string`	—	사용자/팀 이름 — 이니셜 폴백과 접근성 라벨의 원천
`src`	`string`	—	이미지 URL — 부재 시 이니셜 폴백
`alt`	`string`	—	이미지 대체 텍스트 — 기본값 name
`size`	`'sm' \| 'md' \| 'lg'`	`md`	지름 32/40/48px — space 토큰 정렬
`ref`	`Ref<HTMLSpanElement>`	—	루트 <span>으로 전달되는 ref (React 19 ref-as-prop)

이미지 모드 — <img alt>가 이름을 전달합니다 (alt 기본값은 name)
이니셜 모드 — 루트에 role="img" + aria-label이 붙고, 이니셜 글자 자체는 장식(aria-hidden)이라 이중 낭독이 없습니다
장식용 아바타 무리(facepile)라면 호출부에서 aria-hidden을 부여하세요

component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족).

속성	토큰
폴백 배경/잉크	`color.primary-subtle` + `color.primary-text` (AgentCard 아바타 선례)
형태	`radius.full`
크기	`space.8`(sm) / `space.10`(md) / `space.12`(lg)
이니셜 타이포	`font-size.caption/body-2/body-1` + `font-weight.semibold`