Notification Badge
아이콘, 버튼, 메뉴 등 UI 요소에 표시되어 새로운 알림이나 읽지 않은 메시지 수를 나타내는 컴포넌트입니다.
컴포넌트 명세 (Component Specification)
Anatomy
notification
fileTypeIcon
기본 기능
사용자에게 새로운 업데이트, 읽지 않은 메시지, 또는 알림의 존재 여부를 시각적으로 전달하는 기능
시각 옵션
dot
icon
number
상태
default
none
내부 구성
icon
dot
text
사이즈 가이드 (Size Guide )
NotificationBadge의 사이즈는 type 속성에 따라 각각 다른 높이를 가집니다.
Dot: 12px. 공간을 최소한으로 차지하며 텍스트 옆에 자연스럽게 배치됩니다. Icon: 20px. 메뉴나 리스트 항목 우측에 고정된 크기로 들어갑니다. Number: 24px. 숫자의 자릿수에 따라 가로 폭(width)이 유연하게 늘어납니다.
분류 (Variant)
제공되는 정보의 성격에 따라 3가지 type으로 나뉩니다.
점 (Dot Variant)
간결한 도트 형태로, 텍스트 없이 변화만 표시합니다.
주로 List 컴포넌트에 사용되며, 알람의 존재 여부만 중요하게 전달합니다.
아이콘 (Icon Variant)
주로 새로운 메시지나 아직 확인하지 않은 알림과 같은
핵심 상태가 있을 때 표시합니다.
숫자 (Number Variant)
주로 Gnb, 헤더에서 사용자에게 직관적으로
보여주기 위해 사용됩니다.
사용 예시 (Use Case)
실제 서비스 화면에서 Notification Badge가 배치되고 활용되는 패턴입니다.
Dot Notification의 위치 (Dot Placement)
썸네일 이미지 위에 즐겨찾 아이콘 등 보조 UI 요소를 오버레이 형태로 띄워,
이미지와 관련된 부가적인 상태를 직관적으로 제공합니다.
Icon & Number의 위치 (Icon & Number Placement)
썸네일 이미지 위에 즐겨찾 아이콘 등 보조 UI 요소를 오버레이 형태로 띄워,
이미지와 관련된 부가적인 상태를 직관적으로 제공합니다.
Notification의 동작 (Dismiss Action)
사용자가 알림을 확인하거나 상호작용을 완료하면 Notification Badge는
즉시 사라져 시각적 피드백을 제공합니다.
마스터 컴포넌트 (Master Component)
Master Component입니다. 컴포넌트를 복사해 원하는 위치에서 Instance로 사용합니다.
