아바타

컴포넌트

아바타

Avatar

아바타는 한 사용자나 항목을 대표하는 작은 이미지로, 프로필 사진처럼 누가 남긴 내용인지 한눈에 알려 줍니다.

A
B
C
+2
size52px
모양
표시

정의

아바타는 한 사용자나 항목을 대표하는 작은 이미지입니다. 프로필 사진이 가장 흔한 예이고, 목록이나 댓글, 채팅 화면에서 누가 남긴 내용인지 한눈에 알려 주는 역할을 합니다. 사진이 없거나 불러오지 못한 경우에는 이름의 첫 글자를 딴 이니셜이나 기본 사람 아이콘으로 대신 채워, 텅 빈 자리가 그대로 드러나 어색해지는 일을 막습니다. 모양은 보통 원형을 가장 많이 쓰는데, 부드럽고 얼굴을 담기에 자연스러워 사람을 나타내는 표시로 널리 자리 잡았습니다. 상황에 따라 모서리를 둥글린 사각형을 쓰기도 하고, 조직이나 팀 같은 대상에는 로고나 상징을 담아 사람과 구분하기도 합니다.

왜 중요한가

아바타가 중요한 이유는 사람을 이름이라는 글자보다 훨씬 빠르게 알아보게 해 주기 때문입니다. 우리는 얼굴이나 색이 있는 작은 그림을 텍스트보다 먼저 인식하기 때문에, 긴 목록에서도 아바타가 있으면 원하는 사람을 순식간에 찾아냅니다. 또 아바타는 딱딱한 화면에 사람의 온기를 불어넣어, 서비스가 실제 사람들이 쓰는 공간이라는 느낌을 줍니다. 특히 협업 도구나 소셜 서비스에서는 누가 참여하고 있는지, 지금 온라인인지 같은 정보를 작은 그림 하나로 압축해 전달하므로, 사용자가 관계와 맥락을 빠르게 이해하도록 돕는 작지만 밀도 높은 정보 단위가 됩니다. 그래서 아바타 하나만 잘 다뤄도 화면이 한결 친근하고 읽기 쉬워집니다.

흔한 실수

  • 이미지 로딩 실패를 대비하지 않는 경우입니다. 사진 주소가 깨지면 화면에 부서진 이미지 아이콘이나 텅 빈 사각형이 그대로 드러나, 공들여 만든 화면의 완성도가 한순간에 크게 떨어져 보이고 신뢰감도 함께 무너집니다.
  • 아바타를 너무 작게 만들어 얼굴이나 이니셜을 알아볼 수 없게 하는 경우입니다. 대표 이미지가 뭉개져 누구인지 식별이 안 되면 아바타를 넣은 의미 자체가 사라지고, 그저 자리만 차지하는 장식으로 남아 목록을 훑는 속도까지 떨어뜨립니다.
  • 크기가 제각각인 이미지를 그대로 얹어 아바타가 찌그러지는 경우입니다. 가로세로 비율이 다른 사진을 억지로 채우면 얼굴이 늘어나거나 눌려, 오히려 사람을 우스꽝스럽게 보이게 만들어 정성껏 올린 사진의 인상을 해칩니다.

실무 팁

  • 이미지가 없거나 로딩에 실패할 때 보여 줄 대체 표시를 항상 준비하세요. 이름 이니셜이나 기본 아이콘, 사람마다 다른 배경색을 함께 쓰면 빈자리 없이 자연스럽게 채워지고 서로 구분도 쉬워집니다.
  • 여러 명을 나열할 때는 아바타를 살짝 겹쳐 쌓고, 다 담기 어려우면 마지막에 플러스 N 형태로 나머지 인원을 요약하세요. 좁은 공간에서도 참여 규모가 한눈에 전해집니다.
  • 온라인 여부 같은 상태는 아바타 가장자리에 작은 링이나 점을 둘러 표현하세요. 본체를 가리지 않으면서 상태 정보를 자연스럽게 덧붙일 수 있고, 색만으로 뜻을 전하지 않도록 필요하면 짧은 설명을 함께 두는 편이 안전합니다.

관련 개념