#
서비스 기획
2022-12-21

상태, 속성을 표시하는 뱃지(Badge)에 대해서

뱃지의 사전적 의미는 '신분이나 직무, 명예 등을 나타내는 띠 또는 표시'를 말합니다. 이 의미 그대로

UI에서 쓰는 뱃지도 이미지나 콘텐츠의 어떤 상태 또는 분류를 시각적으로 표시하는 요소라고 할 수 있습니다.

이미지나 콘텐츠의 부가 정보를 나타내며, 주목도를 높이는 기능을 합니다.

뱃지는 단독으로 사용되기보다는 아이콘, 버튼, 리스트, 타이틀 등의 다른 컴포넌트 요소와 함께 사용됩니다.

뱃지 컴포넌트

  1. 숫자를 표시할때 사용(Count Number)

숫자 뱃지는 흔히 많이 볼 수 있는 앱 서비스나 알림에서 쉽게 찾아볼 수 있습니다. 잘알고 있는 예로 들면

카카오톡이나 유튜브가 있습니다. 오른쪽 우측 모서리에 읽지 않은 알림의 개수를 알려주는 빨간 원형의 숫자를

생각하면 됩니다.

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

상태를 표시할 때 사용하는 뱃지는 신규 콘텐츠라는 것을 알려주는 NEW, 실시간 방송 중을 나타내는 LIVE,

주목도를 높이는 HOT과 같이 콘텐츠의 상태를 나타내기 위해서 사용되어집니다. 뉴스 포털 서비스나 OTT서비스

에서 많이 찾아볼 수 있습니다.

3. 카테고리 속성을 표시할 때 (Category)

카테고리 속성을 표시할 때 사용하는 뱃지는 카테고리 필터와 같이 사용되며 속해 있는 카테고리 속성을 나타

냅니다. 빠른 정보 습득과 주목도를 높이는 효과가 있습니다.

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

브랜드 하나 안에는 여러개의 서비스나 서브 브랜드가 존재합니다. 해당 콘텐츠가 어떤 서비스에 포함되는지 표시

하기 위해서 서비스의 로고 / 타이틀 뱃지를 사용하여 표시합니다.

쿠팡을 예로들면 가장 이해가 쉬울 텐데요. 쿠팡은 하나의 브랜드 안에 로켓 배송, 와우 배송, 로켓 프레시 서비스가

있으며 각각 뱃지를 달아서 표시합니다.

로고, 타이틀 뱃지는 브랜드의 로고 또는 서비스 타이틀을 그대로 사용해 고객에게 일관된 브랜드 이미지를

전달하고, 서비스 인지도를 높여줍니다.

유익했다면! 이어서 읽어보기:)
Figma 유용 팁

Figma 사용 팁에 대해 알아볼까요?

롯데 메타버스 출시?

CES 2023에서 롯데가 서울 여의도 면적의 25배에 달하는 메타버스를 올해 선보인다고 발표했습니다

데이터를 다루는 서비스 기획 시 고려할 점

데이터를 다루는 서비스 기획 시에 고려할 점은 무엇일까요?

지금 바로 밸류랩스와
성공적인 협력을 시작해보세요.
Subscribe to our newsletter.
Thank you! Your submission has been received!
Oops!! Something went wrong while submitting the form.