아바타 컴포넌트 생성기.

프롬프트 한 줄로 프로덕션 수준의 아바타를 생성하세요. 사진, Notion 스타일 일러스트, 이니셜 대체 표시, 상태 표시 점, 겹친 그룹, 업로더 — 6가지 오픈소스 패턴 모두 Tailwind + shadcn 기반이며 접근성을 갖추고 테마를 적용할 수 있으며 MIT 라이선스입니다. 코드를 그대로 복사하거나, 어떤 패턴이든 Lovable, Bolt, v0, Cursor 프로젝트에 바로 다시 생성하세요.

템플릿 6개

생성할 수 있는 아바타 템플릿

모든 템플릿은 스크린샷이 아니라 실제 프롬프트입니다. 어떤 AI 에디터에든 붙여넣거나 MeDo에서 실행해 React + Tailwind 코드를 그대로 받으세요.

기본이미지 + 대체

이니셜 대체 표시가 있는 사진 아바타

로드되면 사진, 실패하면 이니셜. 모든 앱이 가장 먼저 필요한 아바타입니다.

Tailwind CSS로 재사용 가능한 <Avatar /> React 컴포넌트를 만들어 주세요. 패턴: 이미지와 이니셜 대체 표시를 갖춘 기본 아바타. 레이아웃: src가 로드되면 <img>를 렌더링하는 원형 아바타. 오류가 나거나 src가 없으면 이름 문자열에서 결정론적으로 도출한 배경색과 함께 생성된 이니셜 대체 표시를 렌더링하세요. API: src, name(필수, alt 텍스트와 이니셜에 사용), size("xs" | "sm" | "md" | "lg" | "xl") props와 className 전달을 지원하세요. 포함: name에서 도출한 필수 alt 텍스트, loading="lazy", 로컬 상태를 통한 onError 대체 전환, 링크나 버튼 안에서 렌더링될 때의 focus-visible 링, Tailwind dark: 클래스를 통한 라이트/다크 지원. 제약: React + Tailwind만 사용하고, 외부 UI나 이미지 의존성 없이, 이미지 로딩 중 레이아웃 시프트가 없도록 하세요(고정 width/height로 박스를 미리 확보).

MeDo에서 시도하기

상태상태 표시 점

상태 표시 점이 있는 아바타

online, away, busy, offline — 아바타 가장자리에 고정된 상태 표시 점.

Tailwind CSS로 <AvatarWithStatus /> React 컴포넌트를 만들어 주세요. 패턴: 상태 표시 점이 있는 아바타. 레이아웃: 오른쪽 아래에 작은 상태 점을 고정한 원형 아바타. 어떤 표면에서도 구분되도록 배경색 링으로 사진과 분리하세요. API: src, name, size, status("online" | "away" | "busy" | "offline") props를 지원하고, 상태별로 점 색상을 매핑하며 점 크기는 아바타 크기에 따라 조절되게 하세요. 포함: 이니셜 대체 표시, 스크린 리더에 상태를 알리는 시각적으로 숨긴 텍스트 레이블(색만으로 전달하지 말 것), 래퍼의 aria-label, 라이트/다크 지원. 제약: React + Tailwind만 사용하고, 외부 UI 의존성 없이, 점이 아바타 가장자리의 30%를 넘게 덮지 않도록 하세요.

MeDo에서 시도하기

그룹겹침 + 오버플로

+N 칩이 있는 아바타 그룹

+N 오버플로 칩이 붙은 겹친 아바타 스택. 팀, 담당자, 협업자용입니다.

Tailwind CSS로 <AvatarGroup /> React 컴포넌트를 만들어 주세요. 패턴: 오버플로 카운트가 있는 겹친(스택) 아바타 그룹. 레이아웃: 아바타를 약 3분의 1씩 겹친 가로 행으로 배치하고, 스택이 읽기 쉽도록 각 아바타에 배경색 링을 두르세요. 최대 표시 개수를 넘으면 같은 크기와 모양의 "+N" 카운터 칩을 렌더링하세요. API: users({ src, name } 배열), max(기본값 4), size props와, 행 끝에 점선 "초대" 요소를 렌더링하는 선택적 onAddClick을 지원하세요. 동작: 호버 시 해당 아바타가 약간의 translate와 z-index 변경으로 이웃 위로 올라오고, "dir" prop으로 스택의 겹침 방향을 반대로 바꿀 수 있게 하세요. 포함: 아바타별 이니셜 대체 표시, 전체 멤버 수를 요약하는 aria-label, focus-visible 링을 갖춘 키보드 포커스 가능 항목, 라이트/다크 지원. 제약: React + Tailwind만 사용하고, 외부 UI 의존성과 애니메이션 라이브러리는 사용하지 마세요.

MeDo에서 시도하기

크기·모양스케일 + 모양

스케일 시스템

하나의 스케일에 담은 xs부터 xl까지, 그리고 circle, squircle, 둥근 사각형 변형.

Tailwind CSS를 사용해 크기와 모양 스케일을 완비한 테마 적용 가능한 <Avatar /> React 컴포넌트를 만들어 주세요. 패턴: 아바타 디자인 시스템 프리미티브. API: width, height, 폰트 크기, border-radius를 함께 제어하는 단일 조회 객체로 매핑되는 size("xs" | "sm" | "md" | "lg" | "xl" | "2xl"), shape("circle" | "squircle" | "square"), 그리고 src, name, className을 지원하세요. 요구사항: 이니셜 폰트 크기가 아바타 박스에 비례해 조절되어 xs와 2xl 모두 균형을 유지해야 합니다. 팀이 한곳에서 테마를 바꿀 수 있도록 모든 토큰은 파일 상단의 설정 객체 하나에 두세요. 포함: 이니셜 대체 표시, name에서 도출한 alt 텍스트, 루트 요소로의 forwardRef, 내보낸 TypeScript prop 타입, 라이트/다크 지원. 제약: React + Tailwind만 사용하고, 외부 UI 의존성 없이, 계산된 픽셀 크기를 제외하면 인라인 스타일을 쓰지 마세요.

MeDo에서 시도하기

업로더편집 가능

업로드와 삭제가 가능한 아바타

카메라 배지, 업로드 버튼, 파일 제약을 갖춘 아바타. 설정 페이지용입니다.

Tailwind CSS로 <AvatarUploader /> React 컴포넌트를 만들어 주세요. 패턴: 설정 페이지용 편집 가능한 프로필 사진 컨트롤. 레이아웃: 왼쪽에 큰 아바타를 두고 오른쪽 아래에 원형 카메라 배지를 고정하세요. 오른쪽에는 "프로필 사진" 레이블, 파일 제약 안내 줄("PNG 또는 JPG, 최대 2 MB"), 그리고 업로드 주요 버튼과 삭제 텍스트 버튼을 배치하세요. 동작: 배지와 업로드 버튼 모두에서 트리거되는 숨겨진 <input type="file" accept="image/png,image/jpeg">, 인라인 오류 메시지를 포함한 클라이언트 측 크기/형식 검증, URL.createObjectURL을 통한 로컬 미리보기(언마운트 시 해제), 삭제 시 이니셜 대체 표시로 복원. 포함: 파일 입력에 대한 <label> 연결, 검증 메시지용 aria-live 영역, focus-visible 링, 버튼의 비활성/업로드 중 상태, 라이트/다크 지원. 제약: React + Tailwind만 사용하고, 업로드 라이브러리와 크롭 의존성 없이, 호출자를 위해 onChange(file) 콜백을 노출하세요.

MeDo에서 시도하기

프로필 행아바타 + 메타

아바타, 이름, 역할 행

아바타, 이름, 인증 체크, 역할 — 테이블과 멤버 목록을 채우는 그 행입니다.

Tailwind CSS로 <AvatarRow /> React 컴포넌트와 <MemberList /> 래퍼를 만들어 주세요. 패턴: 멤버 목록, 테이블, 댓글 스레드용 아바타와 메타데이터 행. 레이아웃: 왼쪽에 아바타, 가운데에 이름(선택적 인증 체크 포함)과 흐린 보조 줄("팀 · 역할")로 구성된 두 줄 블록, 오른쪽에 후행 액션 버튼을 배치하세요. 가운데 블록은 줄바꿈 대신 min-w-0 + truncate로 잘리게 하세요. API: users({ src, name, role, team, verified } 배열) props, 후행 액션 레이블, onAction(user) 콜백을 지원하세요. 포함: 이니셜 대체 표시, 래퍼의 의미론적 <ul>/<li> 마크업, 후행 버튼의 접근성 이름("{name}의 접근 권한 관리"), 행 호버 강조, focus-visible 링, 라이트/다크 지원. 제약: React + Tailwind만 사용하고, 테이블이나 리스트 라이브러리 없이, 320px 너비에서도 넘침 없이 동작하게 하세요.

MeDo에서 시도하기

웹사이트 유형별 아바타 패턴

같은 아바타 컴포넌트를 게시되는 사이트 유형에 맞춰 조정합니다.

01 / 06

SaaS 팀 설정

멤버 목록의 성패는 아바타 행에 달려 있습니다. 사진, 이름, 역할, 접근 권한 액션이죠. 아직 아무도 사진을 올리지 않았을 때도 이니셜 대체 표시가 테이블을 깔끔하게 유지합니다.

아바타 스타일과 변형

페이지의 나머지 부분과 어울리는 변형을 골라 바로 생성하세요.

01 / 06

기본 아바타

이니셜 대체 표시와 이름별 결정론적 배경색을 갖춘 이미지. 다른 모든 변형이 확장하는 기준점입니다.

React, Next.js, Vue, Svelte에서의 아바타

React, Next.js, Vue 3, SvelteKit, Astro 또는 순수 HTML — 같은 아바타을 여섯 가지 방식으로 넣을 수 있습니다.

01 / 06

React 아바타

크기 조회 객체와 onError 대체 처리를 갖춘 단일 함수 컴포넌트입니다. 이미지 실패 플래그 외에는 클라이언트 상태가 없어 React 18+ 트리 어디에서나 안전합니다.

src/components/Avatar.tsx

export function Avatar({ src, name, size = "md" }) {
  const [failed, setFailed] = useState(false);
  return failed || !src
    ? <span className={box[size]}>{initials(name)}</span>
    : <img src={src} alt={name} onError={() => setFailed(true)} />;
}

아바타 컴포넌트를 사용하는 사람

팀 및 멤버 목록

설정 페이지, 조직도, 권한 테이블은 모두 같은 행을 필요로 합니다. 아바타, 이름, 역할, 액션입니다. 한 번 생성해 앱의 모든 테이블에서 재사용하세요.

실시간 협업

"+N" 칩이 붙은 겹친 아바타는 가장 저렴한 프레즌스 UI입니다. 사이드바나 웹소켓 대시보드 없이도 한 줄로 누가 함께 편집 중인지 알려줍니다.

소셜 피드 및 댓글

댓글 스레드, 리액션, 멘션은 한 페이지에서 아바타를 수백 번 반복합니다. 크기 스케일을 갖춘 단일 프리미티브 하나로 레이아웃은 일관되게, 번들은 작게 유지하세요.

채팅 및 고객 지원 인박스

상태 표시 점은 상담원에게 고객이 아직 온라인인지 알려주고, 이니셜 대체 표시는 프로필 사진이 없는 사람이 많아도 인박스를 읽기 쉽게 유지합니다.

계정 설정 및 온보딩

업로드 아바타는 파일 형식과 크기 검증, 로컬 미리보기, 삭제까지 처리합니다. 업로드 라이브러리 없이 프로필 사진 흐름 전체를 담았습니다.

마켓플레이스 및 리뷰

인증 체크가 붙은 리뷰어 아바타는 별 하나를 더 주는 것보다 신뢰감에 훨씬 크게 기여합니다. 프로필 행을 상품 페이지에 그대로 넣으세요.

아바타을 프로젝트에 추가하는 방법

아바타 템플릿을 고르고 프로덕션에 배포하기까지 네 단계.

01약 30초

아바타 패턴 고르기

위의 6가지 템플릿을 살펴보고 여러분의 화면에 가장 가까운 것을 고르세요. 사진, 일러스트, 테이블 행, 프레즌스 스택, 업로드 컨트롤 중에서요.

02약 2초

실시간으로 미리보기

모든 카드가 실제 React + Tailwind 미리보기를 렌더링하므로, 무엇이든 복사하기 전에 간격과 크기를 직접 확인할 수 있습니다.

03약 10초

프롬프트 또는 코드 복사

프롬프트를 MeDo, Lovable, Bolt, v0, Cursor에 복사하거나, 카드에서 컴포넌트 코드를 바로 가져가세요.

04약 1분

앱에 넣기

<Avatar />를 한 번 import한 뒤, size와 shape props로 테이블, 헤더, 댓글 스레드에서 재사용하세요.

아바타에 대한 자주 묻는 질문

아바타 컴포넌트란 무엇인가요?

아바타 컴포넌트는 사용자, 팀, 조직을 나타내는 작은 이미지를 렌더링합니다. 보통 원형 프로필 사진입니다. 프로덕션 수준의 아바타는 사진이 없거나 로드에 실패한 경우도 처리하는데, 일반적으로 생성된 배경색 위에 해당 인물의 이니셜을 표시합니다.

아바타 이니셜 대체 표시는 어떻게 동작하나요?

컴포넌트가 사용자 이름을 받아 공백으로 분리한 뒤, 첫 부분과 마지막 부분의 첫 글자를 대문자로 렌더링합니다. 배경색은 이름 문자열에서 결정론적으로 도출되므로 같은 사람은 세션과 기기를 넘어 항상 같은 색을 갖습니다.

아바타 그룹 또는 겹친 아바타란 무엇인가요?

아바타 그룹은 아바타를 가로로 겹쳐 놓은 행이며, 각 아바타에 배경색 링을 둘러 스택을 읽기 쉽게 유지합니다. 최대 표시 개수를 넘으면 "+N" 칩을 렌더링합니다. 팀 멤버, 작업 담당자, 실시간 협업자를 보여주는 표준 패턴입니다.

이 아바타 컴포넌트는 접근성을 갖추고 있나요?

네. 모든 아바타는 사용자 이름에서 도출한 alt 텍스트를 갖고, 상태는 색만으로 전달하지 않고 시각적으로 숨긴 레이블로 안내하며, 툴팁은 aria-describedby로 연결되고, 상호작용 가능한 아바타는 눈에 보이는 focus-visible 링을 유지합니다.

이 아바타 컴포넌트를 상업적으로 무료로 사용할 수 있나요?

네. 갤러리의 모든 템플릿은 MIT 라이선스입니다. 개인 프로젝트, 클라이언트 작업, 상업용 제품에 출처 표기나 라이선스 비용 없이 사용하세요.

React, Vue, Svelte에서도 동작하나요?

컴포넌트는 React + Tailwind로 작성되었지만 마크업 자체는 프레임워크에 종속되지 않습니다. 위 프레임워크 섹션에서 같은 아바타를 Next.js, Vue 3, SvelteKit, Astro, 순수 HTML로 확인할 수 있습니다.

아바타 이미지 크기는 어떻게 정하고 최적화해야 하나요?

레티나 화면에서 선명하게 보이도록 렌더링 박스의 약 두 배 크기로 정사각형 크롭을 제공하고(40px 아바타에는 80px), 레이아웃 시프트를 막기 위해 width와 height를 명시하고, object-cover를 사용하며, 스크롤 아래쪽 아바타에는 loading="lazy"를 추가하세요.

사진 아바타와 일러스트 아바타 중 무엇을 써야 하나요?

팀 디렉터리, 고객 지원 인박스, 마켓플레이스 리뷰처럼 신원이 중요한 곳에는 실제 사진 아바타를 쓰세요. 얼굴은 사람을 가장 빠르게 알아보는 수단입니다. 대부분의 사용자가 사진을 올리지 않거나, 브랜드에 맞는 일관된 룩을 원하거나, 실제 얼굴 노출이 프라이버시 우려를 낳는 경우에는 Notion 스타일의 일러스트 아바타가 적합합니다. 좋은 시스템은 둘 다 지원합니다. 사진이 있으면 사진을, 없으면 결정론적 일러스트나 이니셜을 씁니다.

30초 만에 아바타 컴포넌트를 생성하세요.

6가지 아바타 템플릿을 프롬프트로 다시 생성하거나, 직접 원하는 것을 서술하세요. 사진, 일러스트, 상태 표시 점, 겹친 그룹, 업로더까지. 무료, MIT 라이선스, 가입 불필요.

생성기 열기 요금 보기