디자인 아틀라스
EN
⬡ 아이콘·일러스트

아바타 일러스트

Avatar Illustration

실제 사진 대신, 간단한 도형만으로 사람의 형태를 암시하는 그림 — 프로필 사진이 없는 사용자의 기본값으로 쓰인다.

다른 이름: Default avatarGenerated avatar
···
html
<div class="stage">
  <svg viewBox="0 0 40 40" class="ic">
    <circle cx="20" cy="20" r="20" fill="var(--accent)" id="bg"/>
    <circle cx="20" cy="15" r="7" fill="var(--surface)" opacity=".92"/>
    <path d="M6 38a14 14 0 0 1 28 0Z" fill="var(--surface)" opacity=".92"/>
  </svg>
</div>
css
.stage{width:clamp(64px,26vmin,110px);aspect-ratio:1;overflow:hidden;border-radius:50%}
.ic{width:100%;height:100%;display:block}
#bg{transition:fill .5s ease}
js
const bg = document.getElementById('bg');
const colors = ['var(--accent)', 'var(--accent-2)', 'var(--accent-3)'];
let i = 0;
setInterval(() => { i = (i + 1) % colors.length; bg.style.fill = colors[i]; }, 1400);

아바타 일러스트는 실제 사진 대신, 간단한 도형만으로 사람의 형태를 암시하는 그림이다. 프로필 사진을 아직 등록하지 않은 사용자에게 기본으로 보여주는 자리에서 가장 많이 쓴다 — 텅 빈 회색 원보다 부드럽고, 실제 인물 사진처럼 오해를 살 위험도 없다.

대부분 서비스는 이걸 자동 생성으로 처리한다. 사용자 아이디나 이름의 해시값을 색상 인덱스로 써서 배경색을 고르고, 머리·어깨 같은 최소한의 형태만 남긴 실루엣을 고정된 팔레트 안에서 조합한다. 같은 입력이면 항상 같은 아바타가 나와야 하므로(로그인할 때마다 다른 얼굴이 나오면 안 되니까), 무작위가 아니라 결정론적인 규칙으로 만든다.

디테일을 너무 붙이면 오히려 실제 사진처럼 보이려다 실패한 어색한 그림이 되기 쉽다. 그래서 얼굴 이목구비 없이 머리·어깨 실루엣 정도로만 멈추거나, 기하학적 패턴(스퀘어·트라이앵글 조합)으로 완전히 추상화하는 두 방향 중 하나를 선택하는 경우가 많다.

언제 쓰나

프로필 사진이 없는 사용자의 기본값으로 쓰세요. 같은 사용자에게는 항상 같은 아바타가 나오도록 아이디·이름 기반의 결정론적 규칙으로 생성하고, 이목구비를 그리려 하지 말고 실루엣이나 기하학적 패턴에서 멈추세요.