Badge로 불리는 컴포넌트는 두 가지 유형으로 구분된다.
Status Badge (상태 배지)
Status Badge는 인터페이스 내 항목의 상태나 조건을 시각적으로 표현한다. 사용자가 요소의 현재 상태를 빠르게 인식할 수 있도록 돕는다.
주요 특징:
- 프로세스 진행 상태나 조건을 표시
- 특정 의미를 가진 semantic color 사용 (success, error, warning, info)
- 다양한 강조 수준(high, medium, low)으로 긴급성 전달
- 주로 아이콘과 짧은 텍스트 레이블 포함
Notification Badge (알림 배지)
Notification Badge는 사용자에게 새로운 정보나 업데이트를 알리는 요소로, 주로 아이콘이나 버튼 위에 작은 표시로 나타난다.
주요 특징:
- 새로운 정보나 업데이트에 주의를 끌기 위해 사용
- 주로 헤더의 아이콘 버튼 위에 표시
- 숫자형(개수 표시) 또는 비숫자형(dot indicator) 가능
디자인 시스템과 제품 언어
두 Badge 유형은 동일한 이름을 사용하지만 목적과 형태에 큰 차이가 있어 디자인 시스템 구축 시 혼란을 줄 수 있다. 이러한 혼동을 피하기 위해 두 유형을 명확히 구분하거나, 제품 특성에 맞게 한 유형만 선택적으로 사용하는 것이 효과적이다.
Badge의 선택과 활용 방식은 제품이 사용자와 소통하는 방식을 보여주는 제품 언어(Product Language)의 일부다. 정보 중심 제품은 Status Badge를, 상호작용 중심 제품은 Notification Badge를 강조할 수 있다. 이처럼 컴포넌트 선택은 단순한 디자인 결정이 아닌, 제품의 가치와 철학을 반영하는 언어적 요소다.