게임의 UI를 만들 때 고려하는 것들
UI는 사용자와 대화를 나누는 언어다
UI는 User Interface의 약자다. 말 그대로, 유저가 게임과 소통하는 창구이면서 언어라고 할 수 있다. 그 언어가 어려우면 상대방은 소통하기를 꺼려한다. 그리고, 게임을 이탈하기도 한다. 2021년에 어떤 게임에 관심이 생겨서 플레이를 했던 적이 있다. 2020년에 크게 흥행했던 게임이고, 2021년에는 마니아들만 남아있는 게임이었는데, 게임을 처음 실행해보고 나서 깜짝 놀랐다. 유명세에 비해서 UI 디자인이 너무 부족해 보였던 것이다. 색감과 배치에도 문제가 보였고, 텍스트에도 같은 말이 중복되는 경우가 있었다.
가끔 게임의 메인 콘텐츠에는 굉장히 신경을 쓰면서 UI에는 크게 신경 쓰지 않는 것 같은 게임을 보게 된다. 많은 게임들이 다른 게임의 좋은 UI를 벤치마킹해서 사용하고 있고, UI는 편의성과 관련이 깊기 때문에 그런 벤치마킹은 좋은 일이라고 생각한다. 하지만, 디자인까지 똑같이 할 수는 없고, 배치나 구조도 게임에 따라 조금씩은 조정이 필요하다. 그런데, UI에 대해 깊은 고민이 없이 디자인이나 조정이 이루어지면, 분명 비슷한 UI지만 퀄리티나 편의성이 크게 차이 나게 된다.
그렇다면 UI를 만들 때 구체적으로 어떤 것들을 고려하면 좋을까?
위치와 크기
위치와 크기는 가장 기본이 되는 사항일 것 같다. 이것을 결정하지 않고서는 UI를 넣을 수 없으니 말이다. 만약, 만들고 있는 게임이 이미 크게 성공한 타사 게임과 비슷한 게임이라면, 타사 게임의 UI를 벤치마킹해야 한다. 왜냐하면, 플레이어들은 이미 그 게임의 UI에 익숙해져 있기 때문이다. UI는 차별화가 필요한 요소가 아니다. 편의성이 중요한 요소다. 따라서, 플레이어들에게 익숙한 것을 지켜주는 것이 좋다.
만약, 특별히 대세라고 할 만한 게임이 없으면 개척자가 되어 UI를 설계해야 한다. 이때, 크기는 일단 구분이 충분히 될만한 정도는 되어야 할 것이다. 혹시 화면을 가리면서 나타나는 UI라면 크게 구성해도 괜찮을 것이다. 반면, 게임 진행 화면 등 중요한 정보와 같이 노출되는 UI라면 다른 정보가 충분히 보일 수 있도록 크기를 잡아야 한다.
모바일 게임의 경우에는 손가락의 움직임을 고려해 위치를 잡아야 한다. 화면을 터치하는 손이 가급적 화면을 가리지 않도록 하는 게 좋다. 자주 터치하는 UI를 손가락에서 가까운 곳에 배치해 주면 좋을 것이다. 특히, 한 손으로 플레이할 수 있도록 만들고자 할 경우에는, 터치 영역을 더 세심하게 잡아주어야 한다. 경우에 따라서는 시선의 움직임을 고려하는 것이 필요할 때도 있다. 실시간 전투 게임에서, 플레이어가 자주 봐야 하는 정보가 사방에 흩어져 있으면 다소 불편할 수 있다.
디자인
보통 디자인은 일단 예쁘고 봐야 하는 것이지만, UI는 예외다. 게임 화면이 매우 알록달록하고 화려하기 때문에, UI가 화려하면 게임 화면에 묻혀서 잘 안 보일 수 있다. 그렇다고 너무 단순하면 게임 전체의 품질이 떨어져 보이기 때문에, 화려하지 않으면서도 고급스럽게 보일 필요가 있다.
버튼을 디자인할 때 의사결정이 필요한 것 중 하나가 텍스트의 존재 여부이다. 버튼 아래쪽에 '퀘스트' 같은 텍스트를 넣으면 편의성이 크게 증가한다. 다만, 화면에 뿌려지는 버튼이 여러 개 일 때는 전체 화면이 번잡해 보일 수도 있다. 게다가, 텍스트를 넣으면 해외 시장에 진출할 때 그 나라의 언어 버전도 만들어야 한다. 그나마 텍스트가 '문자열'로 되어 있으면 현지 언어화가 편한데, 이미지의 일부로 들어가 있으면 이미지 자체를 하나 더 만들어야 한다.
UI에 반짝이는 연출 같은 것을 넣어서 품질을 올릴 수 있는데, 연출은 리소스를 많이 소모하는 편이라서, 가용 리소스가 충분한 상황일 때만 연출을 고려해야 한다. 캐릭터가 돌아다니는 게임 화면은 내용이 계속 바뀌지만, 그 주변의 UI는 같은 이미지가 계속 노출된다. 그래서, 오래 보고 있어도 피로하지 않게, 혹은 신경 쓰이지 않게 하는 것도 같이 고려해주면 좋다.
일관성
일관성은 UI에 있어 꽤 중요한 요소다. 예를 들어, '확인'/'취소' 버튼이 팝업 아래에 들어간다고 생각해보자. 게임에서 발생하는 팝업이 여러 가지가 있는데, 모든 팝업에서 확인 버튼은 왼쪽에, 취소 버튼은 오른쪽에 있다면, 어느 정도 플레이를 진행한 플레이어는 텍스트를 읽지 않고도 확인 버튼의 위치를 알 수 있을 것이다. 이런 부분은 플레이어의 편의성을 꽤 증대시켜 준다. 버튼을 잘못 누르는 사고도 많이 줄여준다.
색상으로도 일관성을 줄 수 있다. 예를 들어, 경고성 팝업은 붉은 배경을 쓰고, 정보성 팝업은 파란 배경, 무언가 획득했을 때는 노란 배경을 쓴다면, 팝업이 뜨는 순간 매우 빨리 어떤 종류의 팝업인지 인지할 수 있게 된다. 사람이 무언가를 시각적으로 인식할 때, 가장 먼저 색상으로 인식하기 때문에 이것도 꽤 유용하다.
이 외에, 목록이 동작하는 방식이라던가, 텍스트를 입력하는 방식 등, 일관성을 만들어 줄 수 있는 부분은 최대한 만들어 주는 것이 좋다. 그러면, 플레이어가 UI를 잘못 사용하는 일이 줄어들고, 새로운 UI를 만났을 때 쉽게 적응하게 되며, 게임 자체를 덜 복잡하게 느끼게 된다.
뎁스
공식적으로 사용되는 용어가 따로 있는지 모르겠다. 나는 현장에서 주로 '뎁스'라는 말을 사용했다. 버튼을 누르면 새로운 화면이나 팝업이 발생하고, 그 안에 있는 버튼을 또 누르면 다른 화면이나 팝업이 발생하는데, 게임의 기본 위치에서부터 몇 번이나 터치를 해야 원하는 정보에 도달할 수 있는가를 나타낸다.
기본 화면에서 '설정' 버튼을 누르고, 설정 팝업에서 다시 '사운드' 버튼을 눌러 나온 사운드 팝업에서 볼륨을 켜고 끌 수 있다면 그 기능은 뎁스 2에 있는 것이다. 반면 기본 화면에서 바로 볼륨을 켜고 끌 수 있다면 뎁스 0에 있다고 할 수 있다.
이것도 UI를 만들 때 고민을 많이 하는 부분이다. 어떤 게임은 기본 화면에 UI 구성요소를 많이 배치하여 플레이어가 여러 번 터치하지 않아도 되게 하고, 어떤 게임은 게임 화면을 가리지 않게 하려고 기본 화면에는 적은 수만 배치하고, 필요한 것이 있으면 팝업 같은 것을 불러와서 동작하게 한다.
이것은 게임에 따라 달라지기 때문에 정답은 없다. 개인적으로 자주 터치해야 하는 것이 아니라면 가급적 한 뎁스 안에 넣어서 게임 화면에 보이는 UI를 최소화하는 편이다.
확인 단계
어떤 버튼을 눌렀을 때, 계속 진행할지 한번 더 묻는 팝업이 뜨는 경우가 있다. 예를 들어, 캐릭터를 삭제하는 버튼을 누르면 보통, 진짜로 삭제할 것인지 한번 더 묻는 팝업이 뜰 것이다. 플레이어가 잘못 눌러도 상관없는 버튼에는 이런 확인이 필요하지 않다. 하지만, 잘못 누르면 안 되는 버튼에는 가급적 확인 과정을 추가해 주는 것이 좋다.
버튼에 텍스트를 넣을지 말지 결정할 때에도 이 부분을 같이 고려한다. 잘못 눌러도 되는 버튼에는 텍스트가 없어도 크게 상관이 없다. 하지만, 잘못 누르면 안 되는 버튼에는 텍스트를 넣어주는 것이 좋을 것이다.
이것은 버튼의 중요성과는 다른 얘기다. 중요한 버튼이지만 잘못 눌러도 되는 버튼이 있다. 상점으로 가는 버튼은 중요한 버튼이지만, 잘못 눌러서 상점 화면으로 이동했으면 다시 원래 화면으로 되돌아가면 그만이다. 다만, 상점으로 이동하면 안 되는 상황인데, 그렇다고 버튼을 비활성화시킬 수도 없다면, 확인 과정을 추가하는 등의 작업이 필요할 수도 있을 것이다.
고민이 많이 필요한 영역
내가 UI 전문가는 아니기 때문에, 그냥 생각나는 대로 적어봤다. 사실 진짜 UI 전문가들이 써놓은 좋은 글들이 많기 때문에, 그런 글들을 꼭 찾아서 읽어보기를 권한다. 특히, 기획자, 프로젝트 매니저, 프로젝트 리더는 UI에 대해 UI 디자이너만큼의 식견을 키워야 한다.
게임 아트의 여러 영역 중, 유독 UI에 대해서는 참견하고 싶어 하는 사람이 많다. 캐릭터나 배경 같은 것에 대해서는 아티스트의 작업물에 별다른 얘기가 없는 사람들도 UI에 대해서는 많은 말을 쏟아내는 경우들이 있다. 그것이 꼭 나쁜 것은 아니지만, 적어도 충분한 식견을 쌓고, 납득할 수 있는 근거와 함께 대화를 나누었으면 한다.
게임을 다 만들어 놓고도 마지막까지 고민을 계속하는 부분이 UI다. 플레이어의 편의성과 깊은 연관이 있기 때문에 더 그럴 것이다. 그래서, 출시 직전까지 고생을 많이 하는 사람들이 UI 디자이너다. 하지만, UI의 품질이 게임에 대한 플레이어의 평가에 큰 영향을 미치는 만큼, 조금이라도 더 좋은 UI에 대한 고민은 게을리할 수 없을 것이다.
1. 위치와 크기
기본적으로, 대세 게임이 있으면 벤치마킹을 하자. 플레이어가 익숙한 부분은 지켜주어야 한다.
모바일 게임에서는 손가락이 화면을 많이 가리지 않게 배치해야 한다.
화면이 넓은 PC나 콘솔 게임에서는 시선의 움직임도 신경 써야 할 수 있다.
2. 디자인
게임 화면과 잘 구분되면서 품질도 좋아 보이게 해야 한다.
버튼의 경우 텍스트를 넣을지 넣지 않을지 결정할 필요가 있다.
연출은 디바이스의 성능을 고려해야 하고, 많이 보게 되는 UI는 피로감을 주지 않는 것도 필요하다.
3. 일관성
확인/취소 같은 선택 버튼의 위치를 일관되게 유지하면 플레이어의 실수를 줄일 수 있다.
팝업의 색깔이나, 목록의 동작 방식 등이 일관되어 있으면 플레이어가 게임에 더 쉽게 적응한다.
전반적으로 UI가 일관성을 갖지 못하면 게임이 더 복잡하게 느껴진다.
4. 뎁스
UI 구성요소를 게임 실행 시 보게 되는 첫 화면에 많이 배치할지, 한 단계 숨겨놓을지도 중요하다.
정답은 없지만, 정책은 정해놓고 작업을 진행하는 것이 좋다.
5. 확인 단계
잘못 누르면 안 되는 버튼에는 확인 과정이 필요하다.
버튼의 중요성과는 다른 얘기다. 플레이어에게 발생하는 피해의 정도에 따라 구분하면 된다.
