Avatar
Avatar (아바타)
아바타는 사람이나 그룹을 나타내는 이미지나 텍스트를 보여주고, 상태(state)나 활동(activity) 같은 추가 정보도 함께 전달하는 컴포넌트예요. 여러 아바타를 표현해야 한다면 아바타 그룹(avatar group)을 써 보세요.
출처: 문서
본문
아바타는 사람이나 그룹을 대표하는 이미지나 텍스트를 보여주고, 그 사람의 상태와 활동 같은 추가 정보도 함께 전달해요. 아바타가 여럿 필요하다면 아바타 그룹(avatar group)을 사용해 보세요.
Types (유형)
표준(Standard)
표준 아바타는 원형 컨테이너로, 보통 개인 한 사람을 나타내요.
그룹(Group)
그룹 아바타는 사각형 컨테이너로, 팀이나 조직, 회사처럼 여러 사람을 나타내요.
Behavior (동작)
아바타에는 출석 배지(presence badge)를 넣어서 관련된 사람의 상태를 표시할 수 있어요.
아바타에는 활동 링(activity ring)을 넣어서 그 사람이 공유 활동에 지금 참여하고 있는지 표시할 수도 있어요. 예를 들어 Teams 통화에서 말하고 있거나 Office 문서에서 타이핑하고 있는 경우가 그렇죠.
Accessibility (접근성)
중간 크기(32px) 이하 아바타의 출석 배지에 있는 아이콘은 시각 장애가 있는 사람이 인식하기 어려울 수 있어요. 가능하면 툴팁 같은 텍스트로 상태를 함께 표시해 주세요.
기본적으로 아바타는 정적 요소라서 상태(state)가 내장되어 있지 않아요. 다만 더 많은 맥락이나 정보를 주기 위해 추가 상호작용을 넣는다면, 상태와 키보드 상호작용도 함께 작성해야 해요.
아바타가 제공하는 상호작용을 키보드로 탐색하는 사람도 접근할 수 있게 탭 인덱스(tab index)를 꼭 넣어 주세요.