Avatar

Anatomy

Avatar는 이미지를 표시하는 Image Area, Border로 구성되어 있으며 필요에 따라 Badge를 표시할 수 있습니다.

Properties

Size

Avatar는 최소 20부터 108까지 9개의 사이즈를 제공합니다. 이외의 사이즈를 사용하는 경우 border의 두께를 일정하게 유지하도록 유의해주세요.

Fallback Image

이미지 콘텐츠를 표시할 수 없는 경우 Fallback 이미지가 표시됩니다.

Badge

우측 하단에 Badge를 표시할 수 있습니다. Badge는 형태에 따라 Circle, Shield, Flower 세 가지 타입을 제공합니다.

Avatar Stack

여러 개의 Avatar를 표시할 때는 Avatar Stack 컴포넌트를 사용할 수 있습니다. 개수를 조정해야 하는 경우에는 앞에서부터 숨긴 후 사용합니다.

Guidelines

Size 선택하기

Avatar는 최소 20부터 108까지 9개의 사이즈를 제공합니다. 사이즈는 상황에 맞게 사용할 수 있으며, 상황 별 권장하는 사이즈는 다음과 같습니다.

Badge 표시하기

Avatar의 Badge는 마스킹 형태로 구현되어 있습니다. 이는 디폴트 레이어처럼 플랫한 배경뿐만 아니라, 이미지나 영상 콘텐츠 위에 Avatar를 표시하는 상황에서도 배지와 Avatar 사이 간격을 자연스럽게 표현해 줍니다.

마스킹되는 배지의 모양은 Circle, Shield, Flower 세 가지입니다. 각각 동일한 모양의 아이콘을 배지로 넣을 수 있으며, Circle의 경우 Custom Slot으로 사용처에서 원하는 에셋을 만들어 사용할 수 있습니다.

Badge에 Custom Slot 사용하기

Circle 타입의 배지에는 Custom Slot을 사용하여 컴포넌트를 Detach하지 않고, 원하는 요소를 추가하여 사용할 수 있습니다.

Slot을 사용하는 방법은 가이드를 참고하세요.

Avatar V3 변경점

• Fallback Image가 컴포넌트에 포함되지 않습니다.
• Badge, Stack 표현이 마스킹 방식으로 변경되었습니다.
• 컴포넌트 이름이 'Avatar Group'에서 'Avatar Stack'으로 변경되었습니다.
• Avatar Stack에서 가장 위에 올라오는 요소를 선택할 수 있는 Top Item Prop을 제거했습니다.

Specification

Avatar

base

상태	슬롯	속성	값
enabled	root	cornerRadius	$radius.full
		strokeColor	$color.stroke.neutral-subtle

size=20

상태	슬롯	속성	값
enabled	root	size	20px
		strokeWidth	1px

size=24

상태	슬롯	속성	값
enabled	root	size	24px
		strokeWidth	1px
	badgeMask	offset	14px
		size	12px
	badge	offset	15px
		size	10px

size=36

상태	슬롯	속성	값
enabled	root	size	36px
		strokeWidth	1px
	badgeMask	offset	20px
		size	18px
	badge	offset	22px
		size	14px

size=42

상태	슬롯	속성	값
enabled	root	size	42px
		strokeWidth	1px
	badgeMask	offset	24px
		size	20px
	badge	offset	26px
		size	16px

size=48

상태	슬롯	속성	값
enabled	root	size	48px
		strokeWidth	1px
	badgeMask	offset	28px
		size	22px
	badge	offset	30px
		size	18px

size=64

상태	슬롯	속성	값
enabled	root	size	64px
		strokeWidth	1px
	badgeMask	offset	40px
		size	26px
	badge	offset	42px
		size	22px

size=80

상태	슬롯	속성	값
enabled	root	size	80px
		strokeWidth	1px
	badgeMask	offset	52px
		size	32px
	badge	offset	54px
		size	28px

size=96

상태	슬롯	속성	값
enabled	root	size	96px
		strokeWidth	1px
	badgeMask	offset	62px
		size	38px
	badge	offset	65px
		size	32px

size=108

상태	슬롯	속성	값
enabled	root	size	108px
		strokeWidth	1px
	badgeMask	offset	70px
		size	44px
	badge	offset	74px
		size	36px

Avatar Stack

base

상태	슬롯	속성	값
enabled	item	cornerRadius	$radius.full
		strokeColor	$color.bg.layer-default

size=20

상태	슬롯	속성	값
enabled	root	gap	-5px
	item	strokeWidth	1px

size=24

상태	슬롯	속성	값
enabled	root	gap	-6px
	item	strokeWidth	1px

size=36

상태	슬롯	속성	값
enabled	root	gap	-8px
	item	strokeWidth	2px

size=42

상태	슬롯	속성	값
enabled	root	gap	-10px
	item	strokeWidth	2px

size=48

상태	슬롯	속성	값
enabled	root	gap	-12px
	item	strokeWidth	2px

size=64

상태	슬롯	속성	값
enabled	root	gap	-16px
	item	strokeWidth	3px

size=80

상태	슬롯	속성	값
enabled	root	gap	-20px
	item	strokeWidth	4px

size=96

상태	슬롯	속성	값
enabled	root	gap	-24px
	item	strokeWidth	5px

size=108

상태	슬롯	속성	값
enabled	root	gap	-27px
	item	strokeWidth	5px

Identity Placeholder

base

상태	슬롯	속성	값
enabled	root	color	$color.palette.gray-400
	image	color	#f7f8fa