brunch

You can make anything
by writing

C.S.Lewis

by Bella Sujin May 10. 2022

상태 또는 속성을 표시하는 컴포넌트, Badge

잘 써먹기 위해 정리하는 UI 1편

UI/UX 디자이너는 디자인 요소를 창의적이고, 예쁘게 만들기 위해 끊임없이 고민한다. 그러나 이보다 앞서 더욱더 중요한 고민이 있다. 바로! 디자인 요소를 올바르게 구현하고 적합한 위치에 사용하는 것. 그러기 위해서는 디자인 요소로 무엇이 있는지, 각 요소들은 어떤 형태와 기능을 갖고 있는지 알아두는 것이 매우 중요하다. 덤으로 정확한 용어까지 함께 알아둔다면, 프로젝트 참여자 간의 원활한 의사소통을 기대할 수 있고, 혼돈의 상황을 미연에 방지할 수 있다.

그래서 나는, 내가 잘 써먹기 위해 UI 컴포넌트를 정리하려고 한다. 그 시작이 바로 Badge 컴포넌트다.

Badge는 '신분이나 직무, 명예 등을 나타내는 띠 또는 표시'를 말한다. 이 의미 그대로 Badge 컴포넌트도 이미지나 콘텐츠의 어떤 상태 또는 분류를 시각적으로 표시하는 디자인 요소이다. 이미지나 콘텐츠의 부가 정보를 나타내며, 주목도를 높이는 기능을 한다. Badge 컴포넌트는 단독으로 사용되기보다는 아이콘, 버튼, 리스트, 타이틀 등의 다른 컴포넌트 요소와 함께 사용되는 것이 보편적이다.

1. Badge 컴포넌트의 활용

Count Number

Status

Category

Brand & Service

(1) 숫자를 카운트하거나 총 수를 표시할 때 활용(Count Number)

숫자 배지(Counter Badge)는 우리가 사용하는 앱 아이콘이나 앱 내의 알림 서비스에서 쉽게 찾아볼 수 있다. 우리가 잘 알고 있는 예로 카카오톡이 있다. 카카오톡 앱 아이콘의 우측 모서리에 읽지 않은 톡의 개수를 알려주는 빨간색 원형의 숫자 요소를 생각하면 된다. 또한 숫자 배지는 알림뿐만 아니라 어떤 카테고리 내의 콘텐츠 총 수를 나타낼 때에도 활용된다.

(2) 상태를 표시할 때 활용(Status)

상태 배지(Status Badge)는 신규 콘텐츠임을 표시하는 NEW, 중요한 콘텐츠의 주목도를 높이는 HOT, 실시간 방송 중을 나타내는 LIVE와 같이 콘텐츠의 상태를 표기하기 위해 사용된다. 포털 서비스의 뉴스 기사나 OTT 서비스에서 많이 찾아볼 수 있다. 또한 이벤트 콘텐츠에서도 D-day, 진행중, 종료, 참여완료 등 상태 배지가 활용된다.

(3) 카테고리의 속성을 표시할 때 활용(Category)

카테고리의 속성을 표시하는 배지는 카테고리를 정렬하는 Filter UI와 함께 사용되어 콘텐츠가 속해 있는 카테고리의 속성을 나타낸다. 빠른 정보 습득과 주목도를 높이는 효과가 있다.

(4) 브랜드 및 서비스를 표시하는 로고/타이틀 배지(Brand & Service)

하나의 브랜드 안에는 여러 개의 서브 브랜드 또는 서비스가 있다. 해당 콘텐츠가 어떤 서비스에 포함되는지 표시하기 위해 서비스 로고/타이틀 배지를 사용하여 표시한다. 마트나 쇼핑 서비스에서 쉽게 찾아볼 수 있다. 예로 쿠팡이라는 하나의 브랜드 안에 로켓 배송, 와우 배송, 로켓 프레시 서비스가 있으며, 각 상품이 로켓 배송인지, 와우 배송인지, 로켓 프레시인지를 서비스 배지를 달아 표시한다. 이러한 서비스 로고/타이틀 배지는 브랜드의 로고 또는 서비스 타이틀을 그대로 사용하여 고객에게 일관된 브랜드 이미지를 전달하고, 서비스 인지도를 높여주고 있다.