게임 UI·UX 디자인: 좋은 화면은 왜 눈에 띄지 않을까
HUD의 종류, 데드 스페이스의 몸에 붙은 체력 표시, 레드 데드 리뎀션 2의 상황형 HUD, 피츠의 법칙과 모바일 터치 설계까지. 게임 UI·UX의 기본 원리를 사례와 함께 정리합니다.
게임 리뷰에서 UI가 칭찬받는 일은 드뭅니다. 반대로 불편한 UI는 금방 욕을 먹습니다. "메뉴가 너무 깊다", "버튼이 손가락에 가려진다", "체력이 얼마나 남았는지 모르겠다" 같은 불만은 게임 자체의 재미와 상관없이 플레이어를 지치게 만듭니다. 잘 만든 UI는 공기처럼 눈에 띄지 않고, 잘못 만든 UI만 눈에 띕니다.
이 글에서는 게임의 UI(사용자 인터페이스)와 UX(사용자 경험)가 무엇이 다른지에서 출발해, 화면에 정보를 띄우는 여러 방식, 실제 게임들의 선택, 그리고 모바일 게임을 만드는 작은 스튜디오로서 저희가 지키는 원칙을 정리합니다.
UI와 UX는 어떻게 다른가
두 단어는 자주 함께 쓰이지만 가리키는 범위가 다릅니다.
- UI(User Interface)는 플레이어가 보고 만지는 것입니다. 체력 바, 미니맵, 메뉴 버튼, 인벤토리 창, 글꼴과 아이콘이 여기에 속합니다.
- UX(User Experience)는 그 모든 것을 거치며 플레이어가 겪는 경험 전체입니다. 게임을 켜고 첫 판을 시작하기까지 몇 번 눌러야 하는지, 원하는 아이템을 찾기까지 얼마나 헤매는지, 실수로 잘못 눌렀을 때 되돌릴 수 있는지가 UX의 문제입니다.
예쁜 버튼(UI)을 만들어도 그 버튼이 메뉴 네 단계 아래에 숨어 있다면 UX는 나쁩니다. 반대로 투박한 화면이라도 필요한 정보가 필요한 순간에 보인다면 UX는 좋을 수 있습니다. 게임 UI·UX 디자인은 결국 "플레이어가 지금 알아야 할 것을, 가장 적은 방해로 전달하는 일"이라고 요약할 수 있습니다.
HUD: 화면 위의 계기판
게임 화면 위에 겹쳐 보이는 정보 표시를 HUD(헤드업 디스플레이)라고 부릅니다. 비행기 조종석 앞 유리에 정보를 띄우는 장치에서 따온 이름입니다. HUD에 흔히 들어가는 요소는 다음과 같습니다.
| 요소 | 역할 | 대표적인 형태 |
|---|---|---|
| 체력·목숨 | 지금 얼마나 위험한가 | 체력 바, 하트, 숫자 |
| 무기·탄약 | 지금 무엇을 할 수 있는가 | 탄창 수, 무기 아이콘 |
| 진행 상황 | 얼마나 왔는가 | 점수, 돈, 랩 수, 레벨 |
| 미니맵·나침반 | 어디로 가야 하는가 | 레이더, 목표 화살표 |
| 상황 정보 | 지금만 필요한 것 | "A - 문 열기" 같은 안내 |
| 조준점 | 어디를 겨누는가 | 십자선, 커서 |
같은 정보도 표현 방법은 여러 가지입니다. 체력은 철권이나 스트리트 파이터처럼 줄어드는 막대로 보여 줄 수도 있고, 젤다의 전설처럼 하트 개수로 보여 줄 수도 있습니다. 기어스 오브 워는 체력을 늘 표시하지 않고, 다쳤을 때 화면에 붉은 톱니 문양이 떠오르며 피해가 클수록 더 진해지는 방식을 썼습니다.
화면 밖이 아니라 세계 안에: 디제틱 UI
HUD 대부분은 '비(非)디제틱'입니다. 즉 게임 세계 안의 인물은 볼 수 없고 플레이어만 보는 정보입니다. 이와 달리 정보를 게임 세계 안의 사물로 녹여 넣는 방식을 '디제틱(diegetic) UI'라고 합니다.
가장 자주 인용되는 사례가 데드 스페이스(2008)입니다. 주인공 아이작의 체력은 그의 우주복 등줄기를 따라 빛나는 막대로 표시되고, 탄약 수는 무기를 들어 올릴 때 총 위에 나타납니다. 지도, 인벤토리, 상점, 영상 통화까지 모두 게임 속 홀로그램으로 표시됩니다. 메뉴를 열어도 게임 속 시간이 멈추지 않기 때문에, 괴물이 나오는 우주선 안에서 가방을 뒤지는 순간에도 긴장이 풀리지 않습니다. 출시 당시 비평가들은 일반적인 HUD가 전혀 없다는 점을 긍정적으로 평가했습니다.
디제틱 UI는 몰입감을 높이지만 만능은 아닙니다. 데드 스페이스는 3인칭 시점이라 주인공의 등이 늘 화면에 보이기 때문에 이 방식이 통했습니다. 1인칭 게임에서 같은 방법을 쓰면 정보를 보기 위해 고개를 돌려야 하는 불편이 생길 수 있습니다. 바이오하자드 2처럼 다리를 절거나 숨을 몰아쉬는 캐릭터의 모습으로 부상을 알리는 방법도 있지만, 정확한 수치를 알기 어렵다는 단점이 있습니다.
극단적인 예로 이코(ICO)는 HUD를 아예 두지 않고 환경과 소리로만 정보를 전달합니다. 차분한 분위기의 게임에서는 화면을 비우는 것 자체가 디자인이 됩니다.
필요할 때만 나타나는 정보
요즘 많이 쓰이는 방식은 '상황형(동적) HUD'입니다. 늘 모든 정보를 띄우지 않고, 지금 필요한 것만 보여 줍니다.
레드 데드 리뎀션 2에서는 말을 타고 돌아다닐 때 미니맵과 말의 체력 정도만 보이다가, 전투가 시작되면 탄약, 주인공의 체력과 기력, 특수 능력 게이지, 말의 상태가 함께 나타납니다. 화면이 깨끗하면 풍경을 즐기기 좋고, 위급할 때는 필요한 정보가 모두 모입니다.
선택권을 플레이어에게 넘기는 게임도 있습니다. 호라이즌 제로 던은 HUD 요소 하나하나를 '항상 표시', '필요할 때만', '표시 안 함' 중에서 고를 수 있게 했고, 월드 오브 워크래프트는 스크립트로 인터페이스를 크게 고칠 수 있을 정도로 사용자 수정을 폭넓게 허용합니다.
여기서 얻을 수 있는 원칙은 간단합니다. 모든 정보가 늘 중요하지는 않다는 것, 그리고 무엇이 중요한지는 상황과 플레이어에 따라 다르다는 것입니다.
손과 눈의 법칙: 조작이 편해야 UX가 좋다
UX에서 자주 인용되는 법칙 중에 피츠의 법칙(Fitts's law)이 있습니다. 심리학자 폴 피츠가 1954년 논문에서 제안한 것으로, 목표를 가리키는 데 걸리는 시간은 목표까지의 거리와 목표의 크기에 따라 정해진다는 내용입니다. 쉽게 말해 멀고 작은 버튼은 누르기 어렵고, 가깝고 큰 버튼은 누르기 쉽습니다.
당연해 보이지만 모바일 게임에서는 이 법칙을 어기는 화면이 자주 나옵니다. 저희가 화면을 만들 때 확인하는 항목은 이렇습니다.
- 자주 누르는 버튼은 엄지가 닿는 곳에. 휴대폰을 두 손으로 쥐면 화면 아래쪽 양 옆이 가장 편합니다.
- 위험한 버튼은 멀리, 그리고 확인을 한 번 더. '구매'와 '닫기'가 붙어 있으면 실수가 생깁니다.
- 손가락이 가리는 곳에 중요한 정보를 두지 않기. 터치하는 손가락 바로 위의 숫자는 보이지 않습니다.
- 눌렀다는 반응을 즉시 주기. 버튼이 살짝 눌리거나 소리가 나야 플레이어가 두 번 누르지 않습니다.
조작 설계가 경험 전체를 바꾼 사례도 있습니다. 데드 스페이스 개발 중에는 빠르게 뒤돌아보는 기능이 여러 번 추가되었다가 빠졌는데, 남은 버튼에 이 기능을 넣자 테스트 플레이어들이 위험한 순간에 실수로 뒤돌아서는 일이 생겼기 때문이라고 합니다. 좋은 기능도 잘못된 자리에 있으면 방해가 됩니다.
읽히는 화면을 위한 기본기
화려한 효과보다 먼저 챙겨야 하는 기본기가 있습니다.
- 위계(hierarchy): 가장 중요한 정보가 가장 먼저 눈에 들어와야 합니다. 크기, 색, 위치로 순서를 정합니다.
- 일관성: 같은 색은 같은 뜻이어야 합니다. 빨간색이 어떤 곳에서는 위험, 다른 곳에서는 할인이라면 플레이어가 헷갈립니다.
- 대비와 가독성: 밝은 배경 위의 흰 글씨, 너무 작은 글자는 피합니다. 작은 휴대폰 화면에서 직접 확인해 보는 것이 가장 정확합니다.
- 색에만 의존하지 않기: 색을 구분하기 어려운 플레이어도 있으므로, 색과 함께 모양이나 아이콘으로도 구분되게 만듭니다.
- 피드백: 무엇을 했는지, 그 결과가 무엇인지 즉시 보여 줍니다. 점수가 오르면 숫자가 튀어 오르고, 피해를 입으면 화면 가장자리가 붉어지는 식입니다.
정보가 곧 게임이 될 때
어떤 정보를 보여 주느냐는 게임의 성격 자체를 바꾸기도 합니다. 저희의 리코샷(RICOSHOT)은 공을 치기 전에 벽에 튕겨 갈 예상 궤적을 화면에 보여 줍니다. 이 선 하나 때문에 게임은 감으로 치는 골프가 아니라 각도를 계산하는 퍼즐이 됩니다. 반대로 이 정보를 숨겼다면 같은 레벨도 전혀 다른 게임이 되었을 것입니다. UI를 설계할 때 "무엇을 보여 줄까"는 "어떤 게임을 만들까"와 같은 질문인 셈입니다.
마치며
좋은 게임 UI·UX를 판단하는 가장 좋은 방법은 처음 하는 사람에게 게임을 건네고 아무 말도 하지 않는 것입니다. 어디서 손가락이 멈칫하는지, 무엇을 찾느라 화면을 두리번거리는지를 보면 고칠 곳이 보입니다. 플레이어가 화면을 의식하지 않고 게임에만 집중할 수 있다면, 그 UI는 제 역할을 다한 것입니다.
