Tech
TDS에는 왜 바텀 내비게이션 시스템을 사용했을까?
2023. 08. 16
인게임 UI를 디자인하다 보면 ‘모바일 환경에서 어떻게 게임을 편하게 즐길 수 있도록 설계하지?’라는 고민을 하곤 해요. 테일드 데몬 슬레이어(Tailed Damon Slayer, 이하 TDS)의 UI 디자인을 맡으면서도 같은 고민을 했는데요. 저는 편리한 사용자 경험을 위해 ‘바텀 내비게이션 시스템’을 채택했어요. 왜 이런 선택을 하고 어떻게 실무에 적용했는지 사례와 함께 소개할게요!
왜 모바일에서 바텀 내비게이션 시스템이 중요할까?
바텀 내비게이션 시스템(Bottom Navigation System, 이하 BNS) 또는 바텀 내비게이션바는 주요 콘텐츠에 접근하는 버튼들을 하단 탭 바에 위치시키는 걸 말해요.
바텀 내비게이션바 (Google Material Design, 2023)
모바일에서 BNS를 선택하는 이유는 모바일 사용자 경험의 특성을 반영해야 하기 때문이에요. 모바일 환경에서는 손과 손가락을 이용해 조작하면서 2가지 문제점이 발생해요. 먼저 정보 획득 가능성이 줄어들어요. 손가락이 화면 위로 올라가면, 화면 속 정보들을 가리기 때문이죠. 그리고 사용성이 불편해요. 주요 버튼이 화면 상단에 위치하면 손가락이 도달하기 멀어 편의성이 떨어져요.
하단부터 전개하는 TDS의 3단 탭 시스템
TDS에서도 ‘정보 획득 가능성’과 ‘편리한 사용성’을 위해서 BNS를 선택했어요. 특히 TDS의 탭 버튼은 화면 아래에서 1차 탭 - 2차 탭 - 3차 탭 순으로 전개하도록 구성했어요. 그리고 눈으로만 보는 정보는 화면 위, 손으로 상호작용하는 탭 버튼들은 화면 아래에 배치했는데요. 2가지 이유가 있어요.
TDS의 3단 탭 시스템
첫 번째, 사용자가 눈과 손을 움직이기 편해요. 화면 하단 BNS에 주요 콘텐츠로 접근할 수 있는 버튼들을 모이도록 구성하면, 사용자는 1차탭에서 2차, 3차로 이동할 때 멀리 갈 이유가 사라지죠.
TDS의 바텀 내비게이션 시스템
두 번째, 사용자가 편하게 정보를 획득할 수 있어요. 보통 사용자는 탭을 선택한 뒤 그 탭에 속한 하위 정보를 확인해요. 그런데 탭 버튼이 정보보다 상단에 자리한다면, 사용자는 정보를 확인하기 위해 손을 치워야 하는 불필요한 동작을 해야 하죠. 반면, TDS에서는 그럴 이유가 없어요.
TDS의 바텀 내비게이션 시스템
화면 중앙에서 아래로 내려온 TDS 팝업
기존 모바일 게임의 팝업은 화면 정중앙에 위치하지만, TDS의 팝업은 화면 하단에 있어요. 3단 탭 시스템과 같은 이유로 사용자들이 버튼에 더 쉽게 접근할 수 있도록 도운 디자인이에요.
화면 하단에 위치한 TDS 팝업창
닫기 버튼도 TDS에서는 하단 탭에
TDS에서는 사용자가 선택한 하단 탭 영역을 닫기 버튼으로 바꿔 표시해요. 선택 중인 탭이 사용자가 어디에 위치하고 있는지 ‘시각적 내비게이션’ 역할을 하는 일반적인 하단 탭과 달라요. 오히려 보통의 하단 탭에서는 사용자가 현재 선택하고 있는 탭은 더 이상 선택할 수 없도록 하는데도 말이죠. 왜 TDS에서는 닫기 버튼으로 노출되도록 설계했을까요?
저는 사용자의 위치를 알려주는 것이 중요도가 낮다고 판단했어요. 사용자는 이미 자신이 어느 탭에 들어왔는지 알고 있고, 혹여 잊었다고 해도 팝업에서 하위 정보들을 통해 자신의 위치를 확인할 수 있어요. 그래서 중요도가 낮은 ‘위치 정보’보다는 닫기 기능을 버튼에 넣어 사용성을 강화하는 선택을 했어요.
닫기 버튼으로 표기되는 TDS의 하단 탭
하단에 닫기 버튼이 노출되면서, 사용자의 편의성도 개선됐어요. 대체로 닫기 버튼은 왼쪽 상단에 위치시키지만, TDS에서는 화면 아래에 있으니 팝업을 닫기 위해 화면 상단까지 손가락을 뻗지 않아도 되거든요.
화면 하단에 위치한 TDS의 닫기 버튼
