Avatar group

Avatar group (아바타 그룹)

아바타 그룹은 여러 아바타를 한 번에 보여주는 컴포넌트예요. 표시할 사람·그룹이 많을 때 공간을 아끼면서도 누가 있는지 한눈에 보여줄 수 있죠.

출처: 문서

본문

아바타 그룹은 여러 아바타를 보여주는 컴포넌트예요.

Types (유형)

아바타 퍼짐(Avatar spread)

아바타 퍼짐(spread)은 여러 아바타를 펼쳐 놓는 기본 구성이에요.

아바타 쌓기(Avatar stack)

아바타 쌓기(stack)는 아바타들이 서로 겹쳐지는, 더 압축된 구성이에요.

아바타 파이(Avatar pie)

아바타 파이(pie)는 하나의 원형 컨테이너 안에 두세 개의 아바타를 보여줘요. Teams 그룹 채팅처럼 공간이 아주 부족한 경우에 사용해요.

Behavior (동작)

넘침(Overflow)

표시할 사람이나 그룹이 다섯 명보다 많다면, 다섯 번째 아바타 자리에 넘침(overflow) 아바타를 두고 관련 개체의 정확한 개수를 표시할 수 있어요. 단일 아바타는 항상 상호작용이 가능한 게 아니어서 포커스를 받지 않을 수도 있어요. 반면 넘침 아바타는 보통 사람들의 상세 목록을 담은 팝업 메뉴를 보여줄 수 있어요.

활동과 출석(Activity and presence)

아바타 퍼짐과 쌓기 모두 활동 링(activity ring) 표시를 지원해요. 퍼짐 배열은 출석 배지(presence badge)도 표시할 수 있어요. 아바타 파이는 활동이나 출석을 표시할 수 없어요.

Accessibility (접근성)

중간 크기(32픽셀) 이하 아바타의 출석 배지에 있는 아이콘은 시각 장애가 있는 사람이 인식하기 어려울 수 있어요. 가능하면 툴팁 같은 텍스트로 상태를 함께 표시해 주세요.

기본적으로 아바타는 정적 요소라서 상태(state)가 내장되어 있지 않아요. 다만 더 많은 맥락이나 정보를 주기 위해 추가 상호작용을 넣는다면, 상태와 키보드 상호작용도 함께 작성해야 해요.

아바타가 제공하는 상호작용을 키보드로 탐색하는 사람도 접근할 수 있게 탭 인덱스(tab index)를 꼭 넣어 주세요.