떡상하는 모바일 게임의
디자인 원칙 4가지!
국민 모바일 게임 UX/UI 설계 원칙 훑어보기
지난 6월, 게임 회사 면접장에서 탈탈 털리고 온 됴희..
면접 중 일반 앱 UI와 비교했을 때, 게임 앱 UI에서 더 중요하게 고려되어야 할 요소가 무엇인가에 대한 질문이 있었습니다. 일단은 게임 앱 내의 정보량이 훨씬 많기 때문에, 이를 가시적으로 배치하여 뉴비도 헷갈리지 않고 바로 플레이할 수 있도록 하는 것이 중요한 것 같다고 대답했으나.. 면접관들의 표정은 좋지 않더군요. 이건 게임이나 일반 앱이나 마찬가지로 필수적인 요소라서 그랬을까요?
이 부분에서 시원한 대답을 하지 못한 것 같아 아쉬움이 남아서 스스로 공부할 겸, 정보 공유도 할 겸 게임 UI에 대한 글을 써보려고 합니다. 국내 및 해외 아티클을 참고하여 모바일 게임 사례와 함께 구성해보았습니다!
목차
1. 선택의 과부하를 방지하는 디자인
2. 기다림을 즐겁게 만드는 디자인
3. 가로/세로 모드를 지원하는 반응형 디자인
4. 사용자에게 유연한 디자인
1. 선택의 과부하를 방지하는 디자인
선택과 집중이 필요해유골목식당에서 백종원이 식당 메뉴의 가짓수를 줄여 핵심 메뉴에 집중하라고 출연자들에게 조언했듯이, 선택지의 적절한 가짓수를 정하는 일은 설계의 기본 원칙이라고 할 수 있습니다. 미국의 심리학자인 쉬나 아이엔가(Sheena Iyengar) 교수는 '필요 이상으로 많은 선택지는 정신적인 소음으로 작용해 오히려 선택을 방해하며, 선택의 폭이 넓을수록 선택이 잘못되었을 때의 실망감을 피하기 위해 주저하게 된다'라고 말합니다. 심리학에서는 이를 '선택의 과부하(Choice overload)'라고 부릅니다.
으이씨 눈을 어디에 둬야 할지 모르겠다구!!!하지만 모바일 게임의 메인 페이지는 사용자가 게임을 실행했을 때 가장 처음 만나게 되는 공간이며, 게임 플레이 진행도나 재화 보유 상태, 이벤트 등의 전반적인 정보를 확인하고 관리할 수 있는 공간입니다. 때문에 게임 장르에 따라 적게는 10가지부터 20~30가지가 넘는 각종 버튼들을 한 화면에 배치할 수밖에 없습니다.
이처럼 선택지의 가짓수를 줄일 수 없다면, 어떻게 해야 선택의 과부하를 방지하도록 설계할 수 있을까요? 효율적인 배치를 위해, 아무리 제공해야 하는 메뉴가 많더라도 유사한 기능이나 중요도를 가진 메뉴끼리 충분한 간격을 두고 카테고라이징 하여 의미 덩어리(Chunk)를 만들면, 복잡한 메뉴들을 최대한 덜 복잡하게 보일 수 있습니다.
로드오브히어로즈의 메인 페이지 그룹핑 사례
메인 페이지 그룹핑의 나쁜 예좋은 예로 클로버 게임즈의 '로드오브히어로즈' 메인 페이지를 보면, 콘텐츠의 중요도나 기능의 유사성을 기준으로 메뉴를 그룹핑하여 제공함을 알 수 있습니다. 이렇게 메뉴를 명확하게 분류하여 유저에게 제공하면 유저는 각 메뉴를 기억하고 학습하는 것이 훨씬 편해집니다. 하지만 두 번째 예시처럼 하나의 그룹이 화면의 절반 이상을 차지하며 그룹 간의 간격이 좁고 그 경계가 모호하다면, 유저가 각 기능을 사용할 때마다 혼란과 시간 지연을 겪을 수 있겠죠?
2. 기다림을 즐겁게 만드는 디자인
무언가를 기다리는 일은 꽤 지루합니다. 굳이 거창하게 심리학 이론을 꺼내지 않아도 누구나 공감할 수 있는 이야기죠. 문제는 실생활의 서비스부터 모바일 게임과 앱의 서비스에서도 어쩔 수 없이 고객이 기다리는 상황이 생긴다는 데에 있습니다.
빨리요 빨리.. 현기증 나니까..모바일 게임에서도 유저가 지루하게 기다려야 하는 시간이 있습니다. 바로 리소스 패치 시간입니다. 게임 개발사에서는 네트워크 환경이 열악한 글로벌 유저의 참여를 고려해서라도 빌드 용량 최적화에 신경을 씁니다. 이 때문에 설치 이후 리소스 패치를 통해 추가 데이터를 다운로드하게 만드는 방식을 주로 활용하게 되죠. 때문에 유저는 수십에서 수천 MB의 추가 데이터를 다운로드하면서 짧게는 1분 이내, 네트워크 상황에 따라 길게는 5~10분이 넘는 시간 동안 기다려야 하는 경우가 종종 생깁니다. 최악의 경우 유저는 이 기다림의 시간을 참지 못하고 게임 설치를 포기하거나, 다음 기회에 게임을 즐기겠노라 생각하게 됩니다. 따라서 이러한 사용자의 이탈을 방지하기 위해서는 기다림을 즐겁게 만드는 디자인이 반드시 필요합니다.
쿠키런 : 오븐 브레이크의 리소스 패치 사례좋은 사례로, 데브시스터즈의 '쿠키런 : 오븐 브레이크'는 진행 중인 리소스 패치를 통해 어떤 콘텐츠나 신규 캐릭터를 즐길 수 있는지 일러스트레이션이나 영상을 통해 티징합니다. 이러한 방법을 통해 유저는 기다림의 목표나 진행도를 더 정확하게 알 수 있고, 심지어 기대감까지 느낄 수 있습니다.
가디언 테일즈의 리소스 다운로드 사례뿐만 아니라, 유저의 주의 환기까지 신경 쓰는 게임도 있습니다. 카카오 게임즈의 '가디언 테일즈'는 유저가 다운로드를 기다리는 동안 진행할 수 있는 튜토리얼을 제공하여 유저의 주의를 환기시킵니다. 유저는 지루하게 프로그레스 바가 채워지길 마냥 기다리는 것이 아니라, 아바타 설정 및 튜토리얼 플레이를 통해 짧게나마 즐거운 경험을 하게 됩니다. 관련하여 애플은 게임 최초 설치 이후에 별도의 리소스 패치가 필요할 때, 패치 다운로드는 게임 실행 시 백그라운드에서 진행이 되고 유저는 기다리지 않고 바로 게임 콘텐츠에 접근하는 방향을 권장하고 있다고 합니다.
3. 가로/세로 모드를 지원하는 반응형 디자인
여러분은 주로 언제 게임을 하시나요? 저는 주로 출퇴근 길 지하철 안에서 혹은 잠들기 전 여유 시간에 모바일 게임을 즐기곤 합니다. 출퇴근 길의 지하철은 대부분 만석이기 때문에 서서 손잡이를 잡은 채로 게임을 하려면 세로 모드의 인터페이스가 편안하고, 잠들기 전의 어두운 방에서 게임을 하려면 맵이 크게 확장되어 보이는 가로 모드가 편안한 것처럼 게임을 하는 다양한 상황에 따라 최적화되는 방향이 다를 텐데요.
양 손으로 게임하자니 불편하고 가만히 있자니 심심한 출근길..하지만 대부분의 모바일 게임이 가로 모드, 혹은 세로 모드의 한 가지 방향만 제공하는 것이 일반적이라 많은 불편함을 감수해야 했죠. 이런 분들을 위해 제가 최근 푹 빠져있는 모바일 게임 하나를 추천드리고자 합니다.(갑자기?)
바람의 나라 : 연의 가로/세로 모드 호환 사례넥슨의 '바람의 나라 : 연'은 한 손 플레이에 최적화된 세로 모드와, 더 넓게 즐길 수 있는 가로 모드 두 가지를 모두 제공하고 있습니다. 따라서, 스마트폰 자체의 기본 화면 방향 고정을 해제하면 유저가 회전하는 대로 모드가 전환되어 더욱 쾌적한 플레이를 즐길 수 있습니다. 저는 모바일 게임을 하면서 양방향 모드를 제공하는 인터페이스를 처음 봐서 굉장히 흥미로웠는데, 혹시 독자분들께서 알고 계신 다른 사례들도 있다면 댓글로 알려주세요!
4. 사용자에게 유연한 디자인
다양한 사용자층의 성향을 고려하기 위해선 보다 유연한 디자인을 해야 합니다. 한 유저가 A라는 task만 수행하고, 다른 유저는 또 다른 B라는 task만 사용한다는 걸 안다면, 디자이너는 각 그룹에 맞춰 시스템을 수정해야 합니다. 뿐만 아니라, 게임 특성상 조작 키의 편안한 방향을 느끼는 부분도 전부 다르고 왼손잡이 혹은 오른손잡이의 니즈도 고려해야 합니다. 때문에 디자이너들은 종합솔루션을 제공하기도 하지만, 플레이어 개개인이 UI를 커스터마이징 할 수 있는 환경도 만들어줘야 합니다. 즉, 사용성을 위해 유저에게 UI 수정 권한을 부여해 커스터마이징을 장려하는 것이죠.
카트라이더 러쉬 플러스의 사용자 UI 커스터마이징 사례좋은 사례로 넥슨의 '카트라이더 러쉬 플러스'에서는 사용자가 조작 버튼 위치를 자유롭게 설정할 수 있는 커스텀 모드를 제공합니다. 자주 사용하는 버튼을 원하는 위치로 끌어오기만 하면. 나만의 조작 설정이 완성되는 것이죠. 이를 통해 사용자는 자기만의 UI를 만들어 게임을 더 편리하고 간결하게 이용할 수 있습니다.
글을 마치며
이번 글을 쓰면서 게임 UI가 일반 앱 UI와 어떻게 다른지 확실히 이해할 수 있었습니다. 사용자의 몰입감을 높이면서도 각 게임의 특성을 잘 드러내는 디자인.. 역시 게임 설계는 굉장히 매력적인 일이라고 생각합니다. 좋은 디자인은 사용자를 지루하게 만들지 않죠. 단순히 UI를 활용하는 것을 넘어, 이를 즐길 수 있도록 만드는 것은 디자이너로서 꽤나 보람 있는 일이 아닐까요?
