---
title: "화신"
type: component
version: "2.2.5"
doc_version: "2.7.22"
status: stable
date: 2026-07-13
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "이미지, 이니셜, 아이콘 변형이 포함된 Tailwind CSS 아바타입니다. 스택형 그룹, 상태 표시기 및 다양한 크기를 지원합니다. JavaScript가 필요하지 않습니다."
url: https://frutjam.com/ko/components/avatar
---

# 아바타 구성요소

 아바타 구성 요소는 사용자 정의 가능한 소형 컨테이너에 사용자 프로필 이미지나 이니셜을 표시합니다. Frutjam의 CSS 사용자 정의 속성으로 구축된 아바타는 인터페이스 전체에서 사용자, 기여자 또는 팀 구성원을 나타냅니다. 아바타 시스템은 이미지와 텍스트, 다양한 크기, 색상, 모양, 상태 표시기, 링 및 그룹 정렬을 지원하므로 사용자 목록, 댓글, 팀 디스플레이, 프로필 섹션 및 메시징 인터페이스에 이상적입니다.

CSS 전용이며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능 및 프레임워크에 구애받지 않음 — Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

| 수업                    | 유형  | 설명                          |
| --------------------- | --- | --------------------------- |
| avatar                | 베이스 | 이니셜 또는 이미지가 포함된 원형 아바타 컨테이너 |
| avatar-group          | 수정자 | 여러 아바타의 중첩 스택               |
| avatar-ring           | 수정자 | 아바타 주위에 컬러링 테두리를 추가합니다.     |
| avatar-circle         | 스타일 | 완전한 원형 모양(기본값)              |
| avatar-rounded        | 스타일 | 둥근 직사각형 모양                  |
| avatar-square         | 스타일 | 둥글림이 없는 정사각형 모양             |
| avatar-online         | 스타일 | 녹색 온라인 상태 표시기               |
| avatar-away           | 스타일 | 노란색 자리 비움 상태 표시기            |
| avatar-busy           | 스타일 | 빨간색 통화 중 상태 표시기             |
| avatar-offline        | 스타일 | 회색 오프라인 상태 표시기              |
| avatar-xs             | 크기  | 아주 작은                       |
| avatar-sm             | 크기  | 작은                          |
| avatar-md             | 크기  | 중간(기본값)                     |
| avatar-lg             | 크기  | 크기가 큰                       |
| avatar-xl             | 크기  | 특대                          |
| avatar-2xl            | 크기  | 2배 특대형                      |
| avatar-primary        | 색상  | 기본 테마 색상                    |
| avatar-secondary      | 색상  | 보조 테마 색상                    |
| avatar-accent         | 색상  | 악센트 테마 색상                   |
| avatar-neutral        | 색상  | 중립 테마 색상                    |
| avatar-info           | 색상  | 정보 의미 색상                    |
| avatar-success        | 색상  | 성공 의미 색상                    |
| avatar-warning        | 색상  | 경고 의미 색상                    |
| avatar-error          | 색상  | 오류 의미 색상                    |
| avatar-ring-primary   | 색상  | 기본 색상의 반지                   |
| avatar-ring-secondary | 색상  | 보조 색상의 반지                   |
| avatar-ring-accent    | 색상  | 포인트 컬러의 반지                  |
| avatar-ring-neutral   | 색상  | 뉴트럴 컬러의 링                   |
| avatar-ring-info      | 색상  | 정보 색상으로 링                   |
| avatar-ring-success   | 색상  | 성공 색상의 반지                   |
| avatar-ring-warning   | 색상  | 경고 색상의 링                    |
| avatar-ring-error     | 색상  | 오류 색상의 링                    |

## 기본 사용법

텍스트 이니셜이나 색상으로 간단한 아바타를 만들어보세요.

## 이미지가 포함된 아바타

자동 이미지 맞춤 및 반응형 크기 조정을 통해 사용자 프로필 사진을 표시합니다.

```html
<div class="avatar avatar-sm">
  <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=32&height=32&face_crop=true" alt="Strawbery" loading="lazy" />
</div>

<div class="avatar avatar-md">
  <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=40&height=40&face_crop=true" alt="Strawbery" loading="lazy" />
</div>

<div class="avatar avatar-lg">
  <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=56&height=56&face_crop=true" alt="Strawbery" loading="lazy" />
</div>
```

## 아바타 크기

다양한 상황에 맞게 크기 변형을 사용하여 매우 작은 크기(xs)에서 2배 큰 크기(2xl)까지 아바타의 크기를 조정합니다.

```html
<div class="avatar avatar-xs avatar-primary">XS</div>
<div class="avatar avatar-sm avatar-secondary">SM</div>
<div class="avatar avatar-md avatar-accent">MD</div>
<div class="avatar avatar-lg avatar-primary">LG</div>
<div class="avatar avatar-xl avatar-secondary">XL</div>
<div class="avatar avatar-2xl avatar-accent">2XL</div>
```

## 아바타 색상

이미지를 사용하지 않을 때 역할, 팀 또는 상태별로 아바타를 구별하기 위해 색상 변형을 적용합니다.

```html
<div class="avatar avatar-md avatar-primary">A</div>
<div class="avatar avatar-md avatar-secondary">B</div>
<div class="avatar avatar-md avatar-accent">C</div>
<div class="avatar avatar-md avatar-info">D</div>
<div class="avatar avatar-md avatar-neutral">E</div>
<div class="avatar avatar-md avatar-success">F</div>
<div class="avatar avatar-md avatar-warning">G</div>
<div class="avatar avatar-md avatar-error">H</div>
```

## 아바타 모양

디자인 시스템에 맞게 원형(기본값), 둥근 모양 또는 사각형 모양 중에서 선택하세요.

```html
<div class="avatar avatar-lg avatar-circle avatar-primary">●</div>
<div class="avatar avatar-lg avatar-rounded avatar-secondary">◇</div>
<div class="avatar avatar-lg avatar-square avatar-accent">■</div>
```

## 이니셜이 있는 아바타

목록, 댓글 스레드 및 팀 섹션에서 빠른 식별을 위해 사용자 이니셜을 표시합니다.

```html
<div class="avatar avatar-sm avatar-primary">JD</div>
<div class="avatar avatar-md avatar-secondary">AR</div>
<div class="avatar avatar-lg avatar-accent">MS</div>
<div class="avatar avatar-xl avatar-info">KL</div>
```

## 상태 표시기가 있는 아바타

아바타를 상태 배지와 결합하여 사용자 존재 또는 가용성(온라인, 오프라인, 바쁨, 부재중)을 표시합니다.

```html
<div class="avatar avatar-md avatar-online avatar-primary">JD</div>

<div class="avatar avatar-md avatar-offline avatar-secondary">AR</div>

<div class="avatar avatar-md avatar-busy avatar-accent">MS</div>

<div class="avatar avatar-md avatar-away avatar-info">KL</div>
```

## 링 테두리가 있는 아바타

강조, 상태 강조 또는 시각적 분리를 위해 아바타 주위에 장식 링을 추가합니다.

```html
<div class="avatar avatar-md avatar-ring avatar-ring-primary avatar-primary">A</div>
<div class="avatar avatar-lg avatar-ring avatar-ring-secondary avatar-secondary">B</div>
<div class="avatar avatar-xl avatar-ring avatar-ring-accent avatar-accent">C</div>
```

### 링 색상 변형

아바타 배경색과 별도로 벨소리 색상을 선택하세요.

```html
<div class="avatar avatar-md avatar-ring avatar-ring-primary avatar-primary">A</div>
<div class="avatar avatar-md avatar-ring avatar-ring-secondary avatar-secondary">B</div>
<div class="avatar avatar-md avatar-ring avatar-ring-accent avatar-accent">C</div>
<div class="avatar avatar-md avatar-ring avatar-ring-info avatar-info">D</div>
<div class="avatar avatar-md avatar-ring avatar-ring-success avatar-success">E</div>
<div class="avatar avatar-md avatar-ring avatar-ring-warning avatar-warning">F</div>
<div class="avatar avatar-md avatar-ring avatar-ring-error avatar-error">G</div>
```

## 아바타 그룹

팀 구성원과 공동작업자가 겹쳐 표시되도록 자동 음수 여백을 사용하여 여러 아바타를 쌓습니다.

```html
<div class="avatar-group">
  <div class="avatar avatar-md avatar-primary">A</div>
  <div class="avatar avatar-md avatar-secondary">B</div>
  <div class="avatar avatar-md avatar-accent">C</div>
  <div class="avatar avatar-md avatar-info">D</div>
</div>
```

### 다양한 크기의 아바타 그룹

시각적 계층 구조를 위해 그룹 내에서 여러 크기를 결합합니다.

```html
<div class="avatar-group">
  <div class="avatar avatar-sm avatar-primary">A</div>
  <div class="avatar avatar-md avatar-secondary">B</div>
  <div class="avatar avatar-lg avatar-accent">C</div>
</div>
```

### 상태가 있는 아바타 그룹

팀 그룹의 각 구성원에 대한 가용성 상태를 표시합니다.

```html
<div class="avatar-group">
  <div class="avatar avatar-md avatar-online avatar-primary">A</div>
  <div class="avatar avatar-md avatar-offline avatar-secondary">B</div>
  <div class="avatar avatar-md avatar-busy avatar-accent">C</div>
</div>
```

## 결합된 변형

복잡한 아바타 디스플레이를 위해 크기, 색상, 모양, 상태 및 링 수정자를 혼합하고 일치시킵니다.

```html
<div class="avatar avatar-xl avatar-rounded avatar-ring avatar-ring-success avatar-success avatar-online">SK</div>

<div class="avatar avatar-lg avatar-square avatar-ring avatar-ring-primary avatar-primary">AB</div>

<div class="avatar avatar-2xl avatar-circle avatar-ring avatar-ring-error avatar-error avatar-busy">MR</div>
```