Avatar

사용자 또는 기업, 학교를 나타내는 대표 이미지 또는 아이콘입니다. 다양한 크기와 모양 옵션을 제공하여 프로필, 댓글, 목록 등 맥락에 맞춰 시각적으로 일관되게 표시할 수 있도록 돕습니다.

Design

Web

iOS

Android

Anatomy

예외적으로 Variant에 없는 사이즈를 사용할 경우 4배수 크기로 작업합니다. 사이즈 커스터마이징을 할 경우 모서리 둥글기는 사이즈의 0.25배로 사용합니다. 이 때, 지정된 값이 홀수라면 짝수로 올려 사용합니다.

프로필에 업데이트 정보가 있을 때 Avatar 우측 상단에 Push badge로 표기합니다. 노출 기한은 각 프로젝트에서 자유롭게 지정할 수 있습니다. Avatar 사이즈를 커스터마이징해서 사용하는 경우 Push badge는 아래 규칙에 맞게 사용합니다.

이미지의 경우 원본이 잘려나가는 부분을 최소화하면서 Avatar 공간을 가득 채우도록 표시합니다.

상호작용이 필요한 경우 Avatar를 클릭 가능한 버튼 요소로 사용할 수 있습니다.

호버할 경우 Tooltip으로 유저에 대한 정보를 노출할 수 있습니다.

기본 이미지가 없을 시 Fallback을 사용합니다.

Don’t

형태나 둥글기를 임의로 변경하여 사용하지 않습니다.

Avatar

borderColor

borderWeight

size