Bubble

버블은 서비스 설명이나 기능 안내 등 정보를 전달하는 요소로, 알림, 사용자 상호작용을 나타낼 때 사용됩니다. 알림 배지, 프로필 사진의 원형 테두리, 대화형 요소의 강조 표시 등 다양한 방식으로 활용됩니다.

Anatomy

Anatomy

  • Container
  • Caret tip
  • Text area

Spec

  • Size

    Size

    컨테이너 상하 여백은 8 / 좌우 여백은 12로 고정합니다. 텍스트 영역은 기본 좌측 정렬이며, 길이에 따라 가변됩니다.

  • Text

    Text

    텍스트 영역은 가변 영역으로, 중앙 정렬을 기본으로 합니다 font-text-m-500을 사용합니다.

  • Alignment

    Alignment

    설명이 필요한 버튼의 위치에 맞게 Caret tip을 설정하여 배치합니다.

  • Placement

    Placement

    트리거 항목의 상하 위치에 8의 간격을 두고 배치합니다.

Usage

Don’t

Don’t

버블 내 아이콘 삽입이나 중첩된 컨테이너 사용은 지양합니다. 이는 주의를 분산시켜 사용자가 혼란을 겪을 수 있습니다.

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