Avatar
사용자의 프로필 이미지를 표시하는 컴포넌트입니다.
Anatomy
Avatar는 이미지를 표시하는 Image Area, Border로 구성되어 있으며 필요에 따라 Badge를 표시할 수 있습니다.
Properties
Size
Avatar는 최소 20부터 108까지의 사이즈를 제공합니다. 이외의 사이즈를 사용하는 경우 border의 두께를 일정하게 유지하도록 유의해주세요.
Fallback Image
이미지 콘텐츠를 표시할 수 없는 경우 Fallback 이미지로 Identity Placeholder를 사용합니다.
Badge
우측 하단에 Badge를 표시할 수 있습니다. Badge는 형태에 따라 Circle, Shield, Flower 세 가지 타입을 제공합니다.
Avatar Stack
여러 개의 Avatar를 표시할 때는 Avatar Stack 컴포넌트를 사용할 수 있습니다. 개수를 조정해야 하는 경우에는 앞에서부터 숨긴 후 사용합니다.
Guidelines
Size 선택하기
Avatar는 최소 20부터 108까지의 사이즈를 제공합니다. 사이즈는 상황에 맞게 사용할 수 있으며, 상황별 권장하는 사이즈는 Specification에서 확인할 수 있습니다.
Badge 표시하기
Avatar의 Badge는 마스킹 형태로 구현되어 있습니다. 이는 디폴트 레이어처럼 플랫한 배경뿐만 아니라, 이미지나 영상 콘텐츠 위에 Avatar를 표시하는 상황에서도 배지와 Avatar 사이 간격을 자연스럽게 표현해 줍니다.
마스킹되는 배지의 모양은 Circle, Shield, Flower 세 가지입니다. 각각 동일한 모양의 아이콘을 배지로 넣을 수 있으며, Circle의 경우 Custom Slot으로 사용처에서 원하는 에셋을 만들어 사용할 수 있습니다.
Badge에 Custom Slot 사용하기
Circle 타입의 배지에는 Custom Slot을 사용하여 컴포넌트를 Detach하지 않고, 원하는 요소를 추가하여 사용할 수 있습니다.
Slot을 사용하는 방법은 가이드를 참고하세요.
Specification
Avatar
base
size=20
- 대표 사용처: 댓글을 남긴 사용자
size=24
- 대표 사용처: 답글 프로필
size=36
- 대표 사용처: 댓글 프로필
size=42
- 대표 사용처: 게시글 상세 내 프로필
size=48
- 대표 사용처: 작은 리스트
size=56
- 대표 사용처: 큰 리스트
size=64
- 대표 사용처: 프로필 상세, 캐러셀
size=80
size=96
size=108
- 대표 사용처: 프로필 수정
Avatar Stack
base
size=20
size=24
size=36
size=42
size=48
size=56
size=64
size=80
size=96
size=108
Last updated on