Avatar
사용자의 프로필 이미지나 이니셜을 표시하여 서비스 내에서 사용자를 시각적으로 식별할 수 있도록 돕는 컴포넌트 입니다.
컴포넌트 명세 (Component Specification)
사이즈 가이드 (Size Guide )
Avatar의 사이즈는 화면 위계와 목적에 따라 S, M, L, XL로 총 4가지 사이즈로 제공됩니다.
컬러 베리언트 (Color Variant)
등록된 이미지가 없을 때 사용자의 이름(이니셜)이 표시되는 기본 타입입니다. 시각적인 구분을 위해 Orange, Cyan, LightBlue 총 3가지 바탕색(Color) 베리언트를 제공합니다.
타입 (Type)
사용자의 이미지 등록 여부에 따라 2가지 Type으로 나뉩니다.
사용 예시 (Use Case)
실제 서비스 화면에서 Avatar가 배치되고 활용되는 패턴입니다.
폴백 이미지 (Fallback image)
서버에서 이미지 콘텐츠를 불러올 수 없거나 사용자가 아직 프로필 사진을 등록하지 않은 경우, 이름 텍스트가 포함된 Fallback 이미지가 표시됩니다.
프로필 사진 변경 (Change Profile Photo)
'내 정보' 같은 프로필 수정 화면에서 XL(92px) 아바타에 적용합니다. 우측
하단에 카메라 아이콘을 활성화해 이미지를 바꿀 수 있음을 안내합니다.
선택된 인원 삭제 (Remove Selected User)
조직도나 수신자 목록에서 추가된 사람들을 가로로 나열할 때 사용합니다. 우측 상단에 삭제 아이콘을 활성화해 목록에서 즉시 제외할 수 있습니다.
마스터 컴포넌트 (Master Component)
Master Component입니다. 컴포넌트를 복사해 원하는 위치에서 Instance로 사용합니다.
