[아카이브] UX를 향상시키는 게임 UI 디자인 팁

[Zerasion 4]

안녕하세요, Zerasion 입니다.
얼마 전 가마수트라에 올라온 UI/UX 관련 포스팅을 번역해보았습니다.
원문은 아래 링크에서 확인해주세요!

원문 링크: http://gamasutra.com/blogs/BrianOppenlander/20151223/262574/Game_UI_design.php

( Zerasion: 글에서 사용된 Iterate를 모두 “반복 작업”으로 번역해두었습니다. 적당한 다른 표현이 있다면 대체하겠습니다.)

----------

멋진 디자인은 중요하지만 사용자의 기대가 더 높았던 적은 없습니다. 만족도와 매출 증가를 이끌어낼 사용성을 높이기 위해서는 지금부터 이야기 할 UI 디자인 팁을 활용하세요. 이 팁들은 일반적으로 여느 전자 제품들에도 충분히 적용할 수 있습니다.

 

빨리 낚아채기

플레이어를 몰입시킬 시간은 매우 적습니다. 플레이어의 주의를 끌어 멋진 게임 속으로 재빨리 낚아채세요. 여러분의 게임은 이상적으로 그 즉시 시작되거나 한 발짝 멀어질 것입니다. 주목은 황금 같은 가치가 있으니 낭비하지 마세요!

 

가볍게 유지하기
 

UI에 뭔가를 추가할 때는 가벼움과 심플함을 유지하는데 매우 엄격해야 합니다. 각각의 추가 요소는 시각적인 잡음을 늘리고 이는 다시 사용자에게 인식의 부하를 더합니다. 목표는 플레이어가 게임을 좀 더 즐기게 하는 것이지 UI의 늪을 헤쳐나가게 하는 것이 아닙니다.

만약 게임의 스토리가 무거운 게 아니라면, 대다수는 읽지 않을 거라는 걸 염두 하세요. 게임은 플레이어가 어떻게 플레이 하는 지 이해하는데 매뉴얼이 필요하게 하면 안됩니다. 다국어 지원까지 생각하면 글자를 최소한으로 유지하는 게 가장 좋습니다.

 

 

튜토리얼 구워내기
 

학습을 게임 안에 구워내 게임을 가능한 자연스럽게 느껴지도록 만드는 데 노력하세요. iOS 게임인 Furdemption의 튜토리얼은 오직 첫 번째 레벨에서 아래 그림처럼 플레이어가 스와이프로 어떻게 움직이는지를 보여주는 것 밖에 없습니다. 학습을 위한 엄청난 종류의 매커닉들이 생겨난 이래로, 레벨 디자인은 플레이를 통해 플레이어를 가르치고 있습니다.

 

악랄하지 않게 가이드 하기
 

디자인은 윤리적으로 사용하면 사용자를 가이드 하는 강력한 도구입니다.

잘못된 버튼을 누르도록 함정에 빠져본 적은 다들 있을 텐데요, 이런 것들은 근본적으로 신뢰를 잃게 합니다. 플레이어를 존중함으로써 플레이어에게 존중 받고 신뢰를 얻으세요. IAP를 결제하거나 광고를 누르도록 플레이어를 유도하지 마세요. 단기적으로는 소득이 있을 지도 모르지만, 장기적으로는 더 많은 것들을 잃게 됩니다.

 

UI 요소의 테마 잡기
 

테마는 매우 중요합니다. 게임의 느낌과 일관되지 않은 테마의 UI는 혼란을 줍니다. 가능한 한 많은 경험에 플레이어를 몰두시키세요. 여기 좋은 예제가 있습니다. 바로 슈퍼마리오의 레벨 선택 화면입니다.

 

컨텐츠에 집중하기
 

플레이어는 UI 앞에 앉는 걸 원하지 않습니다. 그보다는 게임의 노른자 부위와 상호작용하는 걸 원합니다. 플레이어 앞에 UI 요소들을 밀어 넣는 매 순간마다 플레이 경험이 아닌 지루한 UI와 마주하게 만들어 플레이어를 잃어갈 뿐입니다.

 

변화에 적응하기
 

끔찍한 UI를 가진 게임을 보는 것보다 나쁜 건 없으며 이는 게임의 경험을 손상시킵니다. 이런 일들은 인터랙션 디자인이 다른 더 중요한 일들에 밀려 뒷자리로 밀려날 때 자주 벌어집니다. 게임에 눈에 띄는 변화가 찾아왔을 때, UI 디자인에 갱신이 필요해질 거라는 걸 파악해야 합니다.

 

스케치 & 와이어프레임
 

이건 정말 중요합니다. 스케치는 시간을 절약해줍니다. 자신의 디자인이 스케치 됐을 때 색이나 버튼 같은 요소들에 신경 쓰지 않아도 되기 때문에 더 쉽게 검토할 수 있습니다. 시작할 때부터 튼튼한 기반을 구축하고 싶다면, 스케치가 자연스럽게 잡음들을 걸러줍니다.

만약 여러분의 디자인이 한치의 오점도 없이 완벽하길 바란다면, 코드를 시작하기 전에 디자인을 목업(mock up) 하세요. 와이어프레임 상태에서 반복 작업 하는 쪽이 코드를 반복 작업하는 것보다 훨씬 빠릅니다. 저는 Sketch를 추천합니다. 기본 형태부터 더 높은 성능의 작업까지 가능합니다.

 

체계 규정하기
 

위의 굵은 제목은 자연스럽게 먼저 읽히는데, 그건 굵은 글씨가 주의를 끌기 때문입니다. 여러분은 여러 요소들이 서로 경쟁하는 모습을 바라지 않을 겁니다. 사용자의 눈이 어떤 순서로 어떤 것들을 볼 지 잘 가이드해주는 멋진 흐름을 바라죠.

 

익숙함 발휘하기
 

우리 게임은 여러분이 게임보이를 쥐는 것과 같은 방식으로 가장 잘 플레이 됐습니다. 게임을 테스트할 때, 우리는 “one tap 문화”를 느꼈습니다. 대부분의 사람들은 단순한 탭 제스쳐를 이해합니다. 더 복잡한 제스쳐 종류를 사용하기 시작하면, 혼란 때문에 사용자를 잃기 시작합니다.

대부분의 사람들이 학습된 습성을 즉시 따라갈 수 있도록 복잡한 고급 제스쳐를 최소한으로 사용하세요. iPhone에서 뒤로 돌아가는 버튼의 익숙한 위치는 어디인가요? 그렇죠, 좌측 상단입니다. 이미 학습된 문법을 어지럽히지 마세요. 그건 좌절감을 줍니다.

 

영감 얻기
 

다른 사람이 하는 일에서 영감을 얻는 것은 손해 볼 일이 없습니다. 잘 디자인 됐다고 느껴지는 종류의 App들은 어떤 것들이 있나요? 만약 그것들이 당신의 경험에 어떤 감을 줬다면, 무엇을 했고 무엇을 모사 했는지에 집중하세요. pttrns 나 gameinspiration 에서 UI 디자인 패턴을 찾아보세요.

 

하드웨어와 OS 이해하기
 

사용자가 iPad를 잡고 있을 때 아래 쪽 코너의 버튼은 감춰질 수 있습니다. iOS에서 화면 모서리를 스와이프하면 의도치 않게 컨트롤 센터나 알림판을 작동시킬 수 있습니다. 우리가 저지른 단 하나의 실수였던 화면 아래 쪽 코너에 일시 정지 버튼을 배치한 것은 플레이어들이 플레이 도중에 원치 않게 버튼을 누르도록 만들었습니다.

 

사용자 테스팅
 

사용자가 우리 게임을 테스트하는 걸 지켜보지 않으면, 우리가 저지른 실수들을 절대 알아차리지 못할 겁니다. 사용자는 매우 빠르게 스스로를 탓합니다. 보통 실제로는 나쁜 디자인 때문이었다 하더라도요. 게임을 자주 테스트하고, 테스터들에게 AppStore에서 다운로드 한 게임처럼 플레이 해달라고 부탁하세요. 비효율적이거나 우물쭈물 망설이는 것들이 있는 지 가까이에서 살펴보고 사용성 이슈를 정제하기 위해 반복 작업하세요.

 

흐름 유지하기
 

흐름의 상태를 유지시켜 플레이어가 게임을 더 오래 즐길 수 있게 만드세요. 거슬리는 UI 요소로 좋은 흐름의 상태가 방해 받는 걸 원치는 않을 겁니다. 그 열쇠는 바로 좌절과 지루함 사이의 꿀지점을 유지하는 것입니다. 이에 대한 더 자세한 내용은 제 다른 글 “게임의 흐름 디자인하기”를 확인해주세요.

 

일관성 만들기
 

이 부분은 이것만으로도 하나의 글을 따로 쓸 수 있을 만큼 매우 큰 부분입니다. 스타일, 네비게이션, 버튼 사이즈 등에서 일관성을 가지세요. 이 부분은 위에서 다뤘던 익숙함 부분과 묶여있습니다. 디자인 패턴과 색상 패턴을 만들고 여기에 붙이세요.

 

피드백 하기
 

내가 뭘 샀던가? 내가 뭘 했던가? 무슨 일이 벌어진 거지? 올바른 피드백을 제공함으로써 이 같은 질문이나 혼란들을 피할 수 있습니다. 때로는 많은 피드백이 필요하지 않기도 합니다. 우리가 업그레이드에서 그저 줄에 색상을 채워 넣기만 한 것처럼요. Yukon Warrior의 이 UI에서, 플레이어는 뭔가를 샀는지, 특정 업그레이드를 최고 단계로 만들려면 얼마나 남았는지 등을 알 수 있습니다. 이는 약간의 색상과 애니메이션을 사용하는 것만으로도 달성할 수 있었습니다. 업그레이드를 구매할 때, 푸른색 막대가 왼쪽부터 차오르는 것으로 말이죠.

 

미리 계획하기
 

만약 당신이 나중에 다른 기능이 추가될 거라는 걸 이미 알고 있다면, 이를 미리 대비해야 합니다. 사람은 자연스레 변화를 거부합니다. Facebook의 디자인 변화에 얼마나 많은 사람들이 흥분했는지를 기억하세요.

여기 블리자드가 하스스톤에서 했던 흥미로운 부분에 주목하세요. 선술집 난투 기능이 들어가기 전에, 빈 공간을 미리 준비해 두었습니다!