버튼의 위치를 통일하지 않은 이유는? - 오늘도 우라라 UX 디자인 분석

사람이 핸드폰을 손으로 든 채로 화면과 상호작용을 할 때, 화면의 아래쪽은 손가락 접근이 쉬운 반면, 화면의 위쪽은 손가락 접근이 어려워 불편함을 줍니다. 이 영역을 Thumb zone (엄지 영역)이라고 합니다. 손가락이 화면 위를 움직였을 때 편한 영역과 동선을 고려하면, 버튼과 같은 인터렉션 요소를 화면 속 어디에 배치하는 것이 좋을지 해답을 찾을 수 있습니다.
 
 

왼쪽 아래에 위치한 닫기 버튼 - <AFK 아레나>, <오늘도 우라라>, <디스라이트>

이러한 사용 편의성을 반영하여, 게임에서 닫기(뒤로 가기) 버튼은 화면의 아래쪽에 위치하는 경향성을 보이고 있습니다. <AFK 아레나>, <디스라이트>, <탕탕특공대> 등 여러 게임에서 찾아볼 수 있지요.
 

---

서비스가 일관된 디자인 시스템을 가지는 것은 중요합니다. 버튼의 위치 역시 디자인 시스템이 약속하는 하나의 규칙인데요, 동일한 기능을 가졌음에도 버튼의 위치가 통일되지 않는다면, 사용자는 매번 달라지는 버튼의 위치를 찾아 화면 속을 헤매게 되고, 정보 탐색에 시간을 더 쏟으며 불편함을 느끼게 됩니다.
 
 

왼쪽 아래에 배치한 닫기 버튼의 일관된 디자인 시스템 - 오늘도 우라라

오늘 소개할 사례의 게임 <오늘도 우라라> 또한 일관된 화면 레이아웃 규칙을 가지고 있습니다. 이 게임 역시 사용자의 손이 기기의 아래쪽에 머무르며 보다 쉽게 버튼에 인터렉션을 할 수 있도록 닫기(뒤로 가기) 버튼을 화면의 왼쪽 아래에 통일하여 배치했습니다.
그런데, 이 규칙에서 벗어난 화면 하나가 눈에 띕니다.
 

왜 이곳에서만 닫기 버튼이 위에 있을까요? - 오늘도 우라라

닫기 버튼이 화면 아래가 아닌, 왼쪽 위 구석진 자리에 있습니다. 왜 게임에서 사용하고 있는 일관된 디자인 시스템을 따르지 않고, 닫기 버튼을 화면 위쪽이라는 접근이 불편한 자리에 배치하였을까요? 힌트는 아래에 있는 시작 버튼에 있습니다. 시작 버튼은 이 화면 속에서 디자이너가 의도한 가장 중요한 주인공입니다.
 
 

게임으로 진입하는 플로우 - 오늘도 우라라

이 화면은, 사용자가 게임을 실행 후 인게임으로 진입하는 과정 중에 하나입니다. 게임에 입장하는 플로우 안에서, 닫기 버튼은 게임 진입이라는 목적을 방해하는 방해꾼이죠. 때문에 닫기 버튼을 아래에 있는 게임 시작 버튼 근처에 두지 않고, 정보들과 멀리 떨어져서 시선이 잘 닿지 않는 위쪽으로 올렸습니다. 거기에다가 게임 속 평균적인 닫기 버튼의 크기보다도 더 작게, 눈에 덜 띄는 디자인으로 시각적인 힘을 빼주었네요.
이 결과로 '게임으로 입장해 줘', '뒤로 나가면 안 돼!' 라고 외치는 듯한 화면 디자인이 되었습니다. 닫기 버튼의 위치를 왼쪽 하단으로 통일한다는 규칙보다, 사용자를 게임 플레이까지 데려가겠다는 목적을 우선시한 결과이지요.
디자이너가 의도한 대로, 많은 사용자가 이곳에서 이탈을 고려하기보다는 화면의 아래에서 크게 강조하고 있는 게임 시작 버튼을 누를 것 같습니다.

---

서비스 전체가 일관된 디자인 시스템을 가지는 것도 중요하지만, 우리가 디자인을 하는 궁극적인 목적을 잊지 말아야 합니다. 게임 진입 시에는 이탈을 막기 위한 목적을, 상점에서는 상품 구입을 유도하기 위한 목적과 같이, 디자인할 대상이 달성해야 하는 목적이 무엇인지를 고민하세요.
개별 목적과 서비스 전체의 커다란 통일성 사이에서 가치를 저울질하며 배분하고, 디자인 시스템을 크게 해치지 않는 선에서 예외 상황을 허용해 보세요. 분명한 목적과 이유가 있는 디자인은 더욱 큰 힘을 가지게 될 것입니다.

 

---

 
👇 일관된 디자인 시스템을 벗어난 또 다른 사례! 버튼의 위치를 통일하지 않은 이유는?

사용성을 높이는 모바일 게임 UI 설계하기 - 테일드 데몬 슬레이어

---

게임 UX/UI 디자이너 & 그래픽 디자이너.

서비스와 사용자를 잇는 가장 좋은 방법을 고민하고 만듭니다.

 

👉 Linkedin - https://www.linkedin.com/in/sun-a-baek/

✉️ E-Mail - prettygoodsun@naver.com