모바일 게임 속 배지의 디자인 사례 - 브롤스타즈, 쿠키런 킹덤, 탕탕특공대

빨간색 배지 - 배틀그라운드 (Battlegrounds)

버튼의 오른쪽 상단에 위치하는 빨간색 점을 배지(Badge)라고 합니다. 배지는 사용자에게 새로운 정보가 있음을 알려줍니다. 정보의 수량을 나타내는 숫자를 함께 노출하거나, 단순한 점만으로 표현하기도 합니다.

 

이 기본적인 문법에서 나아가 더욱 세분화한 배지로 세밀한 정보를 전달하는 게임이 있습니다. 브롤스타즈, 쿠키런 킹덤, 탕탕특공대의 사례를 통해 다양한 배지 디자인을 알아보겠습니다.

---

브롤스타즈

브롤스타즈의 로비 (Brawl stars)

<브롤스타즈>의 배지는 빨간색과 초록색, 두 가지 색으로 구분하여 사용합니다. 이는 전작 <클래시 로얄>에서 사용했던 문법과 유사합니다.

 

1. 초록 배지는 중요도가 낮은 정보에 사용하고 있습니다. 업그레이드가 가능한 브롤러의 수를 나타내거나, 뉴스 혹은 친구 요청과 같이 즉시 확인하지 않아도 게임 플레이에 무방한 정보에 사용합니다. 빨간색보다 덜 공격적인 색이며, 사용자에게 심리적인 부담을 덜 줍니다. 

 

브롤스타즈 (Brawl stars)

초록 배지를 따라가면 도달하는 곳은 초록색 버튼입니다. 브롤스타즈는 초록색을 긍정적인 결과를 유발하는 액션 버튼에 사용하고 있습니다. 초록색 버튼을 누르면 보상을 받거나, 업그레이드를 하거나, 새로운 친구를 추가하게 되죠. 이러한 긍정적인 액션으로 도착할 수 있도록 유도하는 것이 초록색 배지입니다. 배지와 버튼에 동일한 색을 사용하여, 배지를 보고 따라온 사용자가 최종 목적지인 버튼까지 잘 도달할 수 있도록 시각적으로 연결하고 있습니다.

 

 

브롤 패스 - 브롤스타즈 (Brawl stars)

2. 빨간 배지는 초록 배지보다 더욱 중요하고, 강조할 정보에 쓰입니다. 핵심 BM 요소인 브롤패스의 보상 수령 여부를 알려주거나, 상점과 브롤러 메뉴에 새로운 것이 추가되었을 때 사용합니다. 사용처와 빈도가 초록 배지보다 드물고, 빨간색이 가진 특성으로 인해 생겼을 때 주목성이 높습니다.

 

배지 사이의 위계

빨간 배지는 초록 배지보다 더 상위의 위계를 가집니다. 종종 두 배지의 노출 조건을 모두 달성하는 경우가 있습니다. 이 땐 두 배지를 함께 노출하지 않고, 빨간 배지를 먼저 노출합니다. 이후 빨간 배지의 노출 조건이 사라지고 나면 초록 배지를 노출합니다.

---

쿠키런 킹덤

쿠키런 킹덤 (Cookierun kingdom)

<쿠키런 킹덤>의 배지는 4가지로 나뉩니다. 모두 빨간색으로 통일되어 있으며, 배지 속 아이콘 그래픽으로 각각 다른 상태를 전달하고 있습니다. 사용자는 배지의 디자인을 보고 버튼을 누르기 전에 어떠한 정보가 기다리고 있을지 예측 할 수 있습니다. 동그란 점 형태를 사용하는 다른 게임과 달리 말풍선 모양의 꼬리를 달고 있는 것이 특징입니다.

 

 

1. 느낌표 아이콘 배지. 새로운 킹덤 패스 시즌 시작, 미완료 던전 등의 컨텐츠, 레벨업이 가능한 쿠키와 보물 탭 등 여러 장소에서 보편적으로 사용합니다.

2. 체크 아이콘 배지. 게임에서 진행하고 있던 상황이 완료되었을 때 사용합니다. '곰 젤리 열차'와 '설탕 노움 연구소' 등 컨텐츠의 진행도 타이머, '매일 무료 선물 뽑기'와 같이 시간과 연관을 가집니다. 보상을 받으면 사라집니다.

3. 숫자 배지. 이 배지는 '보상'과 관련이 있으며, 숫자는 받을 수 있는 보상의 수량을 나타냅니다. 보상을 받아야 사라집니다.

4. 단순한 점 배지. 상점에서 신규 상품 위에 붙는 이 배지는 상품 내용을 확인하는 것만으로도 사라집니다. 앞의 배지들에 비하면 정보의 중요도가 낮으며, 시각적으로도 가장 단순한 디자인입니다.

---

탕탕특공대

<탕탕특공대>의 배지는 3가지로 나뉩니다. 아이콘으로 서로 다른 상태를 나타내어, 유저의 행동을 유도하고 있습니다. 앞에서 본 브롤스타즈, 쿠키런 킹덤의 배지와 다른 점은 배지를 따라간 최종 목적지 버튼 위에도 배지를 노출한다는 것입니다. 이로써 채도 높은 현란한 화면 속에서 쉽게 버튼을 찾아 길을 잃지 않도록 해줍니다.

 

탕탕특공대 (Survivor.io)

1. 느낌표 배지. 게임 여러 곳에서 가장 자주 보이며, 알람을 전달하는 기본 배지로 사용하고 있습니다. 상점과 순찰, 퀘스트에서 보상이 있는 곳의 위치를 안내하며, 새로운 이벤트와 장비의 합성 가능 여부 등에서 사용합니다. 다른 배지보다 상대적으로 중요도가 높지 않고, 플레이어가 당장 확인하지 않고 마음 내킬 때 접근해도 무방한 정보라는 공통점이 있습니다.

 

2. 옷 모양 아이콘의 배지. 내가 착용하고 있는 장비보다 더 좋은 장비를 착용할 수 있는 특정 조건이 달성되었을 때 노출합니다. 이 배지는 다른 배지보다 상위의 위계를 가집니다. 

 

탕탕특공대 (Survivor.io)

3. 화살표 아이콘 배지. 위로 향하는 화살표가 상승의 이미지를 전달하며, 게임에서 레벨 업 등을 통해 직접적으로 능력치를 상승할 수 있는 곳에서 사용합니다.

 

배지 사이의 위계

장비 메뉴에서 세 배지의 노출 조건을 모두 달성하는 경우가 있습니다. 이 땐 옷 아이콘 배지 - 화살표 배지 - 느낌표 배지 순으로 노출합니다.

 

---

시시각각으로 상태가 변화하는 게임 속에는 많은 배지가 동시에 노출됩니다. 사용자는 자신이 받게 될 알림의 쓰임새를 명확히 알 수 있을 때 알림에 더욱 관대해지며, 더 알림을 받으려는 경향이 있습니다. 빨간 점이라는 기본 디자인에서 더 나아가서, 다양한 상태를 분류한 배지 디자인을 잘 활용한다면, 사용자가 다음 상황을 더욱 정확하게 예측하도록 하고, 그에 대한 기대감을 상승시켜 사용자의 다음 행동을 더욱 유도할 수 있을 것입니다.

 

 

---

👇브롤 스타즈의 UX 디자인과 인터페이스

브롤스타즈의 성공 요인 - UX 디자인과 인터페이스 (번역)