배지와 칩, 어떻게 구분할까요?
배지의 사용방법과 좋은 사례
배지의 구성
배지는 탐색 항목 및 아이콘에 대한 알림, 개수, 상태 정보를 표시하는 컴포넌트입니다. Material 3에서 정의하는 배지는 다음과 같이 구성됩니다.
❶ Small badge (소형 배지)
❷ Large badge container (대형 배지 컨테이너)
❸ Large badge label (대형 배지 레이블)
Uber의 Base에서는 소형 배지를 점 배지(Dot badge), 대형 배지를 알림 배지(Notification badge)라고 부르기도 합니다. 본 글에서는 배지와 칩의 차이점, 배지의 사용방법에 대해 알아보겠습니다.
배지와 칩의 차이점
배지(Badge)와 칩(Chip)은 둘 다 컨테이너, 텍스트 레이블, 아이콘으로 구성되어 유사해 보이기도 합니다. 일반적으로 배지와 칩의 차이점은 다음과 같습니다.
배지 (A)
숫자, 상태, 분류, 속성 등을 강조하는 데 사용
일반적으로 상호작용할 수 없음
다른 요소(아이콘, 버튼, 아바타 등)에 붙이거나 겹쳐서 사용 가능
칩 (B)
정보를 입력하거나 선택하고, 콘텐츠를 필터링하는 데 사용
분류, 선택, 삭제, 입력 등 상호작용 가능한 기능을 제공
다른 요소에 겹쳐서 사용하지 않음
상태나 알림을 안내할 때, 상태 정보를 사용자가 알고 있는 것이 좋을 때는 배지를 사용합니다. 필터링 옵션을 표시하거나 정보를 선택하는 데에는 칩이 더욱 적합합니다. 칩에 대한 자세한 내용은 아래 글에서 확인하실 수 있습니다.
배지의 다양한 형태
Material 3에서는 주로 탐색 항목에 한정된 배지를 정의하고 있으나, 다른 유형도 알아보겠습니다.
메일함 내의 새 메일 수를 알려주는 역할을 하는 배지입니다. 다른 요소에 붙어 사용되지 않았지만, 시각적으로 다른 요소와 충돌하지 않는 경우 떨어뜨려 사용할 수 있습니다.
왼쪽은 무료배송, 쿠폰 제공이라는 항목의 속성을 알려주는 배지입니다. 오른쪽은 보류 중이라는 항목의 상태를 알려주는 배지입니다. 칩으로 느껴질 수도 있으나 상호작용이 불가하고 항목의 속성이나 상태를 알려준다는 점에서 일반적으로는 배지로 분류합니다.
가이드마다 다른 배지의 형태
컴포넌트는 회사나 제품의 가이드마다 다른 기준과 정의를 가지고 있습니다. 아래 Uber의 경우 Material 3와 같이 숫자, 아이콘을 포함한 작은 형태의 컴포넌트를 배지로 정의한 반면, Adobe의 경우 분류된 정보를 표시하기 위한 컴포넌트를 배지로 정의하고 있습니다. (Adobe의 경우 칩과 유사하기도 합니다.)
Base (UBER) 숫자, 아이콘을 포함한 작은 형태의 컴포넌트를 배지로 정의
Spectrum (Adobe) 분류된 정보를 표시하기 위한 컴포넌트를 배지로 정의
결론적으로 가이드마다 배지의 형태는 다르게 정의될 수 있으나, 숫자 · 상태 · 속성을 표시하며 일반적으로는 상호작용할 수 없다는 점에서 칩(Chip)과 차이가 있습니다.
배지의 사용방법
배지 컴포넌트의 자세한 사용방법을 이어서 알아보도록 하겠습니다.
배지는 알림, 항목 수 등의 정보를 나타내는 데 사용됩니다. 일반적으로 다른 컴포넌트 내 아이콘 끝 가장자리에 배치됩니다.
소형 배지는 간단한 원으로 표현되며, 읽지 않은 알림을 나타내는 데 사용됩니다. 대형 배지는 항목 수 정보를 전달하는 레이블 텍스트를 포함합니다.
다른 컴포넌트와 함께 사용
배지는 내비게이션 바, 내비게이션 레일, 상단 앱 바, 탭 등의 컴포넌트에서 가장 일반적으로 사용됩니다. 본 개념이 헷갈리신다면 아래 글을 추천드립니다.
대형 배지는 항목 수나 상태를 표시합니다. 레이블 텍스트의 최대 문자 수는 4개이며, 더 많은 것을 나타내는 +도 포함됩니다.
시각적 충돌이 문제가 되지 않는 경우, 왼쪽 내비게이션 드로어와 같이 배지를 떨어뜨려 항목 수를 표시할 수 있습니다. 오른쪽 상단 앱 바와 같이 공간이 엄격히 제한된 경우에는, 화면 가장자리를 침범하지 않는 소형 배지를 사용합니다.
아이콘과 텍스트가 위와 같이 하나의 그룹으로 묶인 경우, 그룹의 끝부분에 배지를 배치하여 시각적 충돌을 피합니다. 배지가 후행 요소와 겹칠 가능성이 있는 경우, 대형 배지를 그룹의 끝에 배치하거나 소형 배지를 권장합니다.
배지의 좋은 사례
배지 컴포넌트의 사례 중 내비게이션 바 외의 사례를 선별해 보았으니, 참고하여 활용하면 좋겠습니다.
Uber대형 배지의 케이스로 새 메시지의 수(A), 카트에 담긴 물품의 수량(B), 필터가 적용된 개수(C), 사용자의 상태(D)를 표시하고 있습니다.
Uber소형 배지의 케이스로 새 서비스나 기능(A), 새 장소(B), 읽지 않은 항목(C), 아바타 상태(D)를 표시하고 있습니다.
Slack상단 캐러셀(Carousel) 아이콘 및 하단 프로필에는 소형 배지가, 리스트 우측에는 대형 배지가 사용되었습니다.
마치며
배지(Badge)는 숫자나 상태를 작은 공간에서도 효과적으로 전달합니다. 실시간으로 상태를 반영하는 경우가 많기 때문에, 업데이트된 정보를 즉시 제공하는데 유용합니다. 그러나 숫자의 의미가 명확하지 않다면 맥락이 불분명할 수 있으며, 너무 과할 시 시각적 피로감을 유발하고 사용자가 무시할 가능성이 높습니다.
앞서 확인한 사례와 같이 배지는 기준에 따라 칩(Chip)과 혼동될 수 있습니다. 하지만 다른 항목과 함께 붙어서 사용되는지, 숫자나 상태를 알려주는지, 상호작용 할 수 없는지를 확인한다면 쉽게 분류할 수 있습니다. 그럼에도 회사나 제품에 따라 컴포넌트의 기준은 다를 수 있다는 점을 염두에 두시면 도움이 될 것 같습니다.
배지에 대한 구체적인 지침은 아래 가이드에서 확인하실 수 있습니다. 여러 가이드에서 정의하는 배지의 기준을 확인해 보세요.
