# Avatar
URL: /components/avatar
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/components/avatar.mdx

사용자의 프로필 이미지를 표시하는 컴포넌트입니다.

| Platform | Status |
| --- | --- |
| Figma | Done |
| [React](/react/components/avatar) | Done |
| Lynx | Not Ready |
| iOS | Done |
| Android | Done |

## Anatomy

![Avatar의 Anatomy 이미지. Image Area와 Border로 구성되며 Badge를 표시할 수 있습니다.](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/9c1c1bf8-e252-4815-a16f-d00d5556735b)

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

## Properties

### Size

![Avatar의 Size Property - 20부터 108까지 사이즈](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/d86df5a3-fe64-4b9d-b3b8-6ca860330716)

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

### Fallback Image

![Avatar의 Fallback Image](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/28ecff7f-8098-437b-9fb1-db8f9583f2eb)

이미지 콘텐츠를 표시할 수 없는 경우 Fallback 이미지로 [Identity Placeholder](/components/identity-placeholder)를 사용합니다.

### Badge

![Avatar의 Badge Property - Circle, Shield, Flower 타입](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/877a0857-0da5-4159-8d7f-369c9e926e8d)

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

### Avatar Stack

![Avatar Stack 컴포넌트](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/a4b9adf6-630b-45ae-856f-7af20322624c)

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

## Guidelines

### Size 선택하기

![Avatar Size 선택 가이드 - 사용처에 따른 권장 사이즈](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/239c497b-be81-42ca-a027-d614d992019b)

Avatar는 최소 20부터 108까지의 사이즈를 제공합니다. 사이즈는 상황에 맞게 사용할 수 있으며, 상황별 권장하는 사이즈는 [Specification](#specification)에서 확인할 수 있습니다.

![Size 48 및 56 Avatar 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/1415cec0-8ce0-4a6b-8037-15b033ccd550)

![Size 42 및 64 Avatar 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/60343270-8c75-4cce-b09a-12ee114eb65c)

![Size 64 및 108 Avatar 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/94e24fcf-8043-4e12-859b-3560f4f6ecad)

### Badge 표시하기

![Avatar Badge 표시 예시 - 다양한 배경에서의 Badge 표현](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/46c93f6a-5645-459a-b5ed-4ffd4de8b523)

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

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

### Badge에 Custom Slot 사용하기

![Badge Custom Slot 사용 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/ed6b1b97-a49b-4c0d-8536-fb6a7be994c0)

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

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

## Specification

### Avatar

Component spec (JSON): /rootage/components/avatar.json

### Avatar Stack

Component spec (JSON): /rootage/components/avatar-stack.json