Sonic UIv0.6.2

Illustration

빈 상태, 불러오기 실패, 에러 페이지에는 Sonic 캐릭터를 써요. 색 토큰 규칙 밖의 이미지 자산이라 이 세 곳에만 써요.

세트

배경이 투명해서 Light와 Dark에서 같은 그림을 써요.

  • emptyemptyEmptyState 기본
  • errorerrorErrorState 기본
  • error-404error-404ErrorPage 404
  • error-403error-403ErrorPage 403
  • error-500error-500ErrorPage 500
  • emptyemptyEmptyState 기본
  • errorerrorErrorState 기본
  • error-404error-404ErrorPage 404
  • error-403error-403ErrorPage 403
  • error-500error-500ErrorPage 500

크기

그림 비율은 그대로 두고 너비만 정해요. 이미지 파일은 표시 크기의 2배라 고해상도 화면에서도 선명해요.

  • 120 · empty, errorEmptyState, ErrorState 기본. 카드나 표 안의 빈 상태·에러
  • 320 · error-404, error-403, error-500ErrorPage. 화면 전체를 쓰는 에러 페이지

규칙

  • 세 곳에만 써요빈 상태, 불러오기 실패, 에러 페이지 말고는 쓰지 않아요. 캐릭터의 주황은 강조색이 아니라 그림의 일부라서, 버튼이나 배너에 가져오지 않아요.
  • 장식이라 alt=""무엇이 없는지, 무엇이 실패했는지는 제목과 설명이 전해요. 화면 낭독기에는 그림을 읽히지 않아요.
  • 좁은 곳은 아이콘Popover, Select 안처럼 공간이 작으면 EmptyState·ErrorState에 icon을 넘겨 아이콘으로 바꿔요.
  • 설정 없이 동작이미지는 sonic-ui 패키지에 webp 파일로 들어 있어요. Vite와 Next.js가 자산으로 알아서 처리해요.