From USOM

USOM

얼굴 달린 봉투 USOM. 수신 전용 메일 서비스 《USOM Mail》과 함께 사이트와 앱을 안내합니다. “빵 도둑처럼 귀엽게”라는 요청에서 태어났습니다. 일러스트와 구현 코드를 CC BY 4.0으로 공개합니다.

구조

봉투를 그대로 의인화했기에 부품은 기존의 플랫 일러스트 양식에서 빌려왔습니다. 토대는 고정하고, 팔·다리·표정만 바꿉니다. 움직임은 모두 CSS이며, prefers-reduced-motion일 때는 멈춥니다.

  • 둥근 패널봉투의 몸통. 모든 포즈에서 움직이지 않는 토대.
  • 플랩위 가장자리에서 안쪽으로 얇은 V자 하나. 접힌 자국.
  • 방패 배지보라색 방패와 체크. “수신을 확인했다”는 표시. 오른쪽 아래에 고정.
  • 이중 링배경의 실선＋점선 동심원. 기척만 내는 장식.
  • 팔·다리·표정유일한 가변 부품. 놓는 위치에 따라 자세와 표정을 바꿉니다.

포즈

놓는 위치에 따라 자세를 바꿉니다. 각각 실제로 쓰이는 모습으로.

walk히어로·푸터 전반터벅터벅 걷습니다. 몸이 흔들리고, 발목이 팔락팔락 움직입니다.
wave빈 받은편지함제자리에서 한 손을 흔듭니다. 흰 배경에서는 선화를 진한 색으로.
peek섹션 제목 옆등을 구부려 가장자리에서 아래를 엿봅니다. 작게 놓습니다.
lost404 페이지두 손을 들고 당황합니다. “?”도 흔들립니다.

사용 방법(라이선스)

크리에이티브 커먼즈 저작자표시 4.0 국제(CC BY 4.0). 크레딧을 적으면 개작도 상업적 이용도 자유입니다.

  • 복제·개작·재배포 가능(상업적 이용 포함)
  • 자세나 색을 바꿔 자신의 제품에 사용 가능
  • 크레딧 표기를 생략하는 것은 불가
  • USOM Mail이 추천하거나 제휴한다고 오인하게 하는 사용은 불가

크레딧 문구

USOM by USOM Mail — CC BY 4.0
https://creativecommons.org/licenses/by/4.0/

SVG

표준 자세(walk)의 SVG. --m-*를 원하는 색으로 바꾸세요.

usom.svg 다운로드