Avatar group

Avatar Group은 여러 사용자를 그룹으로 묶어 표시하는 요소입니다. 겹쳐진 아바타 목록을 통해 공간을 효율적으로 사용하며, 그룹에 속한 멤버들을 직관적으로 보여주고 추가 멤버 수를 표시할 수 있습니다.

Anatomy

  1. 1. Container
  2. 2. Avatar
  3. 3. Trailing content

Variants

Variants
Trailing content

Size

예외적으로 Variant에 없는 사이즈를 사용할 경우 4배수 크기로 작업합니다.

Stacking

왼쪽에서 오른쪽 순으로 Avatar가 쌓이며, -8px 간격으로 겹쳐 배치합니다.

Overflow

화면에 표기하지 않고 생략한 Avatar 수를 텍스트나 Text button을 통해 표기합니다. 최대 5개의 Avatar를 부분적으로 겹쳐 표시할 수 있습니다.

Border

각각의 Avatar가 겹쳐 보일 때, 개별 항목을 명확하게 구분하기 위한 외곽선을 Avatar 바깥으로 추가합니다. 외곽선은 흰색으로, 개별 Avatar 내부에 정의된 외곽선과 대비되어 각각의 개체로 명확하게 인지되도록 돕습니다.

Usage

Display initials

사용자의 프로필 이미지가 없는 경우, 프로필 이름의 첫 글자를 노출할 수 있습니다.

How to use

Do

화면 공간에 맞게 Avatar 수를 제한해 사용합니다.

Don’t

Avatar를 변형해 생략된 항목의 개수를 표기하지 않습니다.

© 2026 Wanted Lab, Inc.