Badge

뱃지는 상품에 대한 안내와 상품 상태를 간결하게 나타내는 UI입니다. 색상이나 형태를 통해 시각적 계층을 제공하며, 사용자가 빠르게 정보를 인식할 수 있도록 돕습니다.

Anatomy

Anatomy

  • Container
  • Text label
  • Padding

Type

Type

    상황에 따라 Basic, Intermediate, Special의 세 가지 타입을 제공합니다.
  • Basic : 웰컴을 포함한 상품의 상태에서 사용하며, 상품 타이틀이나 목록과 함께 노출 시 사용합니다.
  • Intermediate : 주문 결제 관련한 상품의 상태 또는 상품군 구분에서 사용하며 사용합니다.
  • Special : 앞의 두 타입과 가이드를 분리하여 사용하며, 상품 또는 콘텐츠의 노출에서 사용합니다. ex) 베스트셀러, 순위, 광고 등

Spec

  • Size

    Size

    컨테이너와 텍스트 레이블의 좌우 여백은 Basic은 4, Intermediate는 6으로 고정합니다. 가로 값은 짝수로 설정되도록 합니다. 높이는 22로 고정하여 사용합니다.

  • Spacing

    Spacing

    좌측 정렬을 기본으로 합니다. 두 개 이상의 뱃지를 사용해야 할 경우 가로 세로 간격은 Padding 4로 사용합니다.

  • Color

    Color

    정의된 컬러의 뱃지를 사용합니다. 뱃지 타입 이외의 케이스는 지양하며, 정해진 보조 색상으로 UI 요소에 사용됩니다.

Usage

Do

Do

긴 단어 또는 문장이 아닌 간결하고 짧은 단어를 사용합니다.

Don’t

Don’t

높이 값이 다른 뱃지를 같은 레벨에서 사용하지 않도록 주의합니다.

© KYOBO BOOK CENTRE교보문고 바로가기