잘 만든 캐쥬얼 UI 브롤스타즈

슈퍼셀의 브롤스타즈는 모바일 대전 슈팅 장르의 대표 게임이다. 벌써 출시한지 4년 정도 되었지만, 거의 플레이 하지 않았다.

타 유저와 실시간 전투를 하는 게임이 취향이 아니라 즐기기 어렵지만

위 화면은 메인 로비에서 우상단 메뉴를 꺼낸 상태이다.

버튼과 아이콘 모두 사선으로 기울어진 형태로 통일된 느낌을 주고 있다. 직선 형태보다 역동적인 느낌을 줄 수 있다.

또한 캐릭터 모델링처럼 검은색 외곽 라인을 모든 UI 요소에 공통적으로 사용하고 있다.

맨 상단의 검은색 라인 영역이 특이해보이기도 한다. 디자인적 통일감을 위해 넣은 부분일지.. 버튼 위에 블랙BG를 붙이는 부분이 있어서 아마도 그렇지 않을까 유추해보았다.

넓은 면적의 UI에서도 사선 포인트를 모두 유지하고 있다.

과감한 색상의 BG는 어떤 장식적인 요소 없이 깔끔하게 면적을 차지하고 있다.

사선 형태의 리소스는 사이즈 조절에 제한이 많기 때문에 심플한 색상 텍스쳐만 이용하여 기울기를 주고 패널을 구성한 것 같다. 이미지를 확대해보면 라인과 BG가 살짝 유격이 보이기도 한다.

한국어 현지화에서 아쉬운 부분은 역시 폰트 선택이다.

영문 버전으로 봤을 땐 조화로웠던 아이콘과 폰트가, 한국어 설정으로 변경해서 보면 퀄리티가 확 낮아진다. 숫자 폰트의 굵기와 한글 폰트의 굵기 차이가 너무 어색하다. 하단의 탭은 시인성이 떨어진다.

영문 버전과 비교해보면 확실히 다르게 느껴진다. 심플한 팝업 UI에서 특히 폰트가 얇아서 타이틀의 무게감을 주지 못하고 있다.

오리지널의 느낌을 살리지 못한 고딕체 선택이 아쉽다.

팝업 위치는 정 중앙이라고 느껴졌는데, 오른쪽의 큰 사이즈 팝업의 경우 팝업 뒤에 깔린 큰 카테고리 타이틀을 가리지 않도록 아래로 치우쳐져있다.

직관적이고 귀여운 아이콘 디자인. 전부 각도를 약간씩 틀어서 일관성 있어보인다.

불필요한 장식 요소가 없기 때문에 선택형 UI도 엄청 직관적이다.

화려한 효과가 없어도 간단하게 2D로 만들 수 있는 연출이다. 매 판마다 반복적으로 봐야 하는 연출이 과하면 유저에게 스트레스를 줄 수 있다.

위와 같이 카드가 뒤집히는 듯한 연출도 Scale을 이용해서 간단히 만들기 좋아보인다.

이 연출에서 센스가 돋보였던 부분은 오른쪽 상단에 있는 i 아이콘이 뒤집히면서 왼쪽 으로 옮겨져 확실히 '뒤집었다' 는 착시를 주는 부분이었다.

가벼운 UI에는 가벼운 연출로!

다음엔 브롤스타즈의 다른 부분을 주제로 포스팅 해볼 예정이다. :)