사용자 인터페이스 (UI)는 예술적인 시각 디자인과 의사소통 중심의 정보 디자인을 결합하여 플레이어가 상호작용하는 메뉴, 상점 레이아웃, 헤드업 디스플레이(HUD) 및 기타 인터페이스를 생성합니다. 사용자 경험 (UX)은 플레이어가 게임과 상호작용하는 방식, 선택을 알리는 방법 및 하나의 선택에서 다음 선택으로 이동하는 방법과 관련이 있습니다. UI와 UX는 종종 협력하여 작동하지만, UX는 UI의 시각적 및 정보 디자인보다는 상호작용성과 플레이어 경험에 더 중요한 초점을 맞추고 있습니다.
UI
UI는 플레이어가 결정을 내리고 게임을 탐색할 수 있도록 허용하는 중요한 정보인 히트 포인트, 퀘스트 목표 및 가격을 공유합니다. 이는 종종 게임이 플레이어와 소통하는 주된 방법이기 때문에 UI는 플레이어의 경험에 있어 매우 중요합니다. 잘못 설계된 UI는 플레이어를 혼란스럽고 좌절하게 만들 수 있으며, 이는 낮은 유지율로 이어질 수 있습니다. 반면, 훌륭하게 설계된 UI는 참여와 수익화에 기여할 수 있습니다. 효과적으로 설계된 UI는 다음과 같은 원칙을 따릅니다:
- 우선순위
- 주의
- 시각적 언어
- 관습
- 일관성
우선순위
가장 중요한 정보를 먼저 공유하는 것을 _정보의 계층 구조_라고 합니다. 이는 플레이어가 제한된 정보 세트를 기반으로 즉각적으로 결정을 내려야 하는 게임에서 특히 중요합니다. UI의 우선순위를 정할 때는 플레이어의 경험에 필수적이거나 가장 관련성이 높은 것이 무엇인지 파악하고 이를 접근 가능하고 쉽게 찾을 수 있도록 해야 합니다. 다음의 질문들을 고려하세요:
- 플레이어는 지금 이 순간 무엇을 하고 있나요?
- 그들이 알아야 하거나 접근해야 할 가장 중요한 것은 무엇인가요?
- 그들이 내려야 할 선택은 무엇인가요?
- 그 선택을 위해 필요한 정보는 무엇인가요?
- 그들이 그 선택에 얼마나 자주 참여할 것인가요?
중요한 정보와 기능은 플레이어가 맡고 있는 역할, 3D 세계 내 위치 및 소지하고 있는 아이템과 같은 요인에 따라 달라집니다. UI는 상황에 맞게 중요하지 않은 요소를 교체하여 상황적 정보만을 표시할 수 있도록 설계될 수 있습니다. 이는 플레이어가 필요로 하는 것을 항상 제공하되, 필요 없는 것에 대한 혼란을 줄이는 것을 보장합니다.
예시
관련 없는 요소는 혼란과 방해를 초래할 수 있습니다. Spellbound RPG는 특히 모바일 인터페이스에서 중요한 깔끔하고 미니멀한 UI를 가지고 있습니다. 작은 화면은 과도한 버튼, 화면 및 텍스트로 쉽게 압도당할 수 있습니다.
Super Striker League에서는 플레이어의 상호작용이 공을 소유하고 있는지 여부에 따라 달라집니다. 공이 없을 때, 플레이어는 다시 제어권을 되찾기 위해 스프린트와 태클을 사용할 수 있습니다. 공을 소유하게 되면 버튼은 딕과 패스로 전환되어 플레이어가 상대를 피하고 공을 패스할 수 있도록 합니다. 이러한 버튼 전환을 통해 UI는 상황에 맞게 유용함을 유지하며 불필요한 산만함을 피합니다.
The Survival Game에서는 플레이어가 자신의 건강과 배고픔 상태를 인식하고, 지도, 인벤토리 및 도구에 빠르게 접근할 수 있어야 합니다. 이 정보는 플레이어가 결정을 내리고 생존을 위한 행동의 우선순위를 정하는 데 도움이 됩니다. 이러한 정보나 도구를 찾기 어렵거나 누락된다면 생존이 더욱 어려워지고 불필요한 좌절로 이어질 수 있습니다.
주의
미니멀하고 우선순위가 정해진 상황적 UI임에도 불구하고, 플레이어는 여전히 필요한 것을 찾는 데 도움이 필요할 수 있습니다. UI 디자이너는 플레이어의 주의를 끌고 안내하기 위해 여러 시각적 도구를 사용할 수 있습니다. 예시로는:
- 색상: 밝은 색상은 흐릿한 색상보다 더 많은 주의를 끌 수 있습니다. 중요한 텍스트, 버튼 및 기타 요소에 생생한 색조를 사용하고, 덜 중요한 요소에는 차분한 색상을 사용하세요. 이러한 대비는 가시성을 높이고 방해를 줄입니다.
- 크기: 더 큰 요소는 더 작은 요소보다 눈에 띄고 중요하다고 인식됩니다.
- 공간: 충분한 음의 공간이나 패딩으로 둘러싸인 요소는 시선을 끌 수 있습니다.
- 근접성: 그룹화된 요소는 연결성을 암시합니다. 관련 기능과 아이템을 서로 가까이 배치하면 플레이어가 그 연관성을 이해하고 쉽게 찾을 수 있습니다.
- 움직임: 애니메이션 요소는 주의를 끌 수 있습니다. 작은 움직임조차도 정적인 요소 중에서 눈에 띄게 만들 수 있습니다. 파티클 효과, 흔들리는 버튼 및 애니메이션 화살표는 종종 안내를 위해 튜토리얼에서 사용됩니다.
이러한 도구의 사용은 적절하게 조절해야 합니다. 지나치게 밝고 움직이는 요소의 사용은 플레이어를 압도하고 혼란시킬 수 있습니다.
예시
Jailbreak의 시즌 패스 UI에서는 시즌 패스 전용 아이콘 아래에 황금 노란색 스트라이프가 놓여져 있어 프리미엄 보상에 주목하게 하고 무료 보상과 시각적으로 구별되게 합니다.
Dragon Adventures에서는 크기를 늘리고 더 많은 패딩으로 구분하여 가장 가치 있는 동전 묶음에 시각적 우선순위를 부여하고 있습니다.
Tower Defense Simulator에서는 크기와 근접성을 모두 사용하여 일일 타워 스킨을 일일 상자와 시각적으로 그룹화하고 구분하고 있습니다.
시각적 언어
가장 중요한 요소에 플레이어의 주의를 이끌어내는 것 외에도, UI 디자이너는 플레이어가 보고 있는 것을 이해할 수 있도록 돕는 시각적 언어를 개발합니다. 시각적 언어는 요소의 목적, 상태, 연관성 및 관련성에 대한 정보를 한눈에 제공하는 신중하고 일관된 디자인 선택의 집합입니다. 이 언어는 형상, 색상 및 스타일과 같은 도구로 구성됩니다. 시각적 언어의 사용 예시는 다음과 같습니다:
아이콘
아이콘은 의미와 연관성을 전달하는 시각적 정체성을 사용할 수 있습니다. 예를 들어, 특정 통계와 관련된 아이콘은 공통의 색상 팔레트와 유사한 형상을 공유하여 플레이어가 그것의 기능을 인식하고 이해하는 데 도움이 됩니다.
버튼
플레이어 입력의 일반적인 형태인 버튼은 쉽게 식별 가능해야 합니다. 버튼을 텍스트나 아이콘 주변의 색상으로 감싸면 배경과 구별되어 상호작용할 수 있는 요소로 보이게 됩니다. 하이라이트나 그림자를 추가하면 3D 깊이를 제안하여 촉각적 매력을 높일 수 있습니다.
텍스트
중요한 고레벨 정보를 포함하는 헤더와 타이틀은 본문 텍스트보다 크고 두꺼워야 합니다. 높은 가독성을 가지며 표시될 배경색과 잘 대비되는 색상을 고려해야 합니다. 색상 및 굵게 쓰기와 같은 스타일 선택은 인게임 아이템, 통계 또는 능력과 같은 중요한 정보를 강조할 수 있습니다. 글꼴을 선택할 때는 항상 가독성을 우선시해야 합니다.
시각적 언어가 설계된 후에는 _스타일 가이드_에 문서화될 수 있으며, 팀의 모든 사람이 게임 전반에 걸쳐 언어를 일관되게 적용하는 데 도움을 주는 규칙과 예시의 집합입니다.
관습
관습은 여러 게임에서 공통적으로 적용되는 디자인 선택입니다. 몇 가지 예시를 들면:
- 눌렀을 때 대화상자를 닫는 버튼에 있는 X 기호
- 현재 사용할 수 없는 버튼에 적용되는 회색
- 플레이어가 아직 얻거나 잠금 해제하지 않은 버튼 또는 기능 위에 놓여 있는 자물쇠 아이콘
이러한 관습은 널리 사용되므로 플레이어는 일반적으로 잘 알고 있습니다. 이러한 친숙함을 활용하면 인터페이스를 더 직관적으로 만들고 게임별 지침의 필요성을 줄일 수 있습니다. 목표 장르 내에서 게임을 플레이하면 플레이어가 인식할 수 있는 관습을 식별하는 데 도움이 될 수 있습니다. UI 디자이너는 고유한 접근 방식을 선택하여 게임에 더 잘 맞출 수 있지만, 이러한 관습을 아는 것은 의사결정 과정에 도움을 줍니다.
일관성
UI 디자이너가 내리는 모든 결정은 게임 전반에 걸쳐 일관되게 적용되어야 합니다. 일관성은 플레이어가 게임을 보다 효율적으로 탐색하도록 돕고 혼란과 좌절을 예방합니다.
게임에서 UI 일관성의 몇 가지 예시는 다음과 같습니다:
- "health" 통계는 모든 텍스트, 관련 아이콘 및 건강 바에서 초록색으로 표시됩니다.
- NPC 대화가 게임 내 아이템을 언급할 때마다 그것은 굵게 강조됩니다.
- 닫기 버튼은 항상 네모, 빨간색이며 흰색 X가 포함되어 있으며 대화 상자의 오른쪽 상단에만 나타납니다.
- 플레이어가 상점에서 아이템을 구입할 여유가 없을 때 가격은 빨간색으로 표시됩니다.
이러한 선택은 의도적인 것으로, 플레이어의 이해와 탐색을 용이하게 하는 것을 목표로 합니다. 일관되게 적용함으로써, 플레이어는 관련 요소를 연관 지을 수 있고, 중요한 아이템을 식별하며, 근육 기억을 개발하고, 신속하게 정보에 기반한 결정을 내리며, 게임에 더 많은 시간 동안 몰입할 수 있습니다.
UX
UX 디자인은 플레이어가 게임과 상호작용하는 방식, 선택을 알리는 방법 및 하나의 선택에서 다음 선택으로 이동하는 방법과 관련이 있습니다. 비록 UX가 사용자 인터페이스(UI)와 긴밀히 작업하지만, UI의 시각적 및 정보 디자인보다도 상호작용성과 플레이어 경험에 더 집중합니다.
플레이어 이해하기
UX 디자이너의 주요 목표는 직관적이고 방해가 없으며 사용하기 편리한 상호작용과 흐름을 만드는 것입니다. 이 과정은 플레이어 자체, 즉 게임의 의도된 청중을 이해하는 것에서 시작됩니다. 게임의 플레이어를 식별할 때 다음을 고려하세요:
인구 통계: 인구 통계는 플레이어 그룹에 대한 일반화된 정보를 드러내어 디자인 선택에 도움을 줍니다. 예를 들어, 어린 플레이어는 일반적으로 개인 컴퓨터보다 모바일 또는 태블릿에서 게임을 할 가능성이 더 높기 때문에, 해당 청중을 대상으로 하는 게임은 모바일 사용자 경험을 설계하고 다듬는 것을 우선시하는 경우가 많습니다.
경험 수준: 개발자는 게임 경험이 적은 플레이어, 경험이 상당히 많은 플레이어 또는 그 중간에 해당하는 플레이어를 대상으로 설계할 수 있습니다. 아이템을 툴바에 장착하기 위해 숫자 키를 누르는 것과 같은 경험이 많은 플레이어에게 익숙한 상호작용은 경험이 적은 플레이어에게는 명확하지 않을 수 있으며, 추가적인 메시지나 교육이 필요할 수 있습니다.
장르 친숙도: 일반적인 경험 수준과 유사하게 장르 친숙도는 특정 유형의 게임에 대한 플레이어의 경험 수준을 반영합니다. 역할 놀이, 서바이벌 호러 및 1인칭 슈터처럼 Roblox에서 인기 있는 장르에 포함되는 게임들은 많은 잠재적인 플레이어가 이전에 유사한 장르를 경험했을 가능성이 높습니다. 다른 장르의 게임에서는 경험이 많은 플레이어가 적을 수 있지만, 이러한 경험 간격은 튜토리얼 및 사용 가능성을 통해 극복할 수 있습니다.
게임 스타일: 플레이어는 경쟁, 업적 수집부터 탐험 및 협력에 이르기까지 특정 유형의 플레이를 선호하는 경우가 많습니다. 이러한 선호는 플레이어가 선호하는 게임 메커니즘에 반영될 뿐만 아니라 UX 결정에 영향을 미칩니다. 디자이너는 어떤 상호작용에 우선순위를 둘 것인지, 어떤 것을 다듬을 것인지, 어떤 것을 플레이어에게 보여줄 것인지를 고려합니다. 그들은 또한 플레이어가 이러한 상호작용에 참여할 때 가질 마음가짐과 이를 통해 불러일으킬 감정도 고려합니다.
이러한 요소를 고려한 후, 목표 플레이어 그룹(또는 그룹)을 선택하고 그들과 접촉하여, 함께 게임을 하며 그들의 목표와 선호도를 배우는 등 그들을 더 잘 이해하여 디자인 선택에 도움을 줄 수 있습니다.
상호작용 설계
_상호작용_은 플레이어가 게임에서 자신의 선택을 경험하고 소통할 수 있는 기능입니다. UX 디자이너는 이러한 상호작용이 직관적이어야 하며 가능한 한 적은 설명이 필요하도록 만들고자 합니다. 이를 위해 그들은 다음을 활용합니다:
- 관습
- 은유
- 피드백
관습
_관습_은 플레이어가 다른 게임에서 이미 익숙할 수 있는 UX 디자인 및 원칙입니다.
관습의 예시에는 다음이 포함됩니다:
- 플레이어에게 물체가 상호작용 가능하다는 것을 신호하기 위해 세게 가까이 다가가야 나타나는 "E" 근접 프롬프트.
- 플레이어의 아바타가 장애물 아래로 몸을 숙이거나 좁은 공간에 맞는 수 있도록 만든 "C" 키.
- 툴바에서 아이템을 아바타의 손으로 착용하도록 하는 숫자 키.
- 바닥의 원에 들어가서 경기를 대기하는 방법.
관습은 특정 구현 또는 디자인 선택이 사용의 용이성으로 인해 인기를 끌 때 확립됩니다. 예를 들어, "C"는 "crouch"라는 단어의 첫 글자이므로 기억하기 쉽고, WASD와 가까운 키에 위치해 있어 쉽게 내리거나 피하려는 경우에 동시에 사용하기에도 이상적입니다.
은유
_은유_는 추상 개념을 보다 친근한 개념과 연결하여 이해의 지름길을 만듭니다. 예를 들어, _Spellbound Wizard RPG_에서는 마법 주문을 시전하는 행위를 카드 덱에서 카드를 뽑는 것으로 수행합니다. 덱 기반 UI/UX는 마법을 시전하는 추상적인 행위를 쉽게 관련이 있고 더 빨리 이해할 수 있는 것으로 구체화합니다.
피드백
게임에서 플레이어에게의 소통은 _피드백_이라고 합니다. 피드백은 플레이어가 자신이 수행한 행동을 이해하는 데 도움을 줍니다. 이는 게임의 기능을 이해하는 데 기여하고, 기능을 사용하는 데 더 만족감을 느끼게 할 수 있는 추가적인 마감재를 제공합니다. 피드백의 몇 가지 예시는 다음과 같습니다:
- 적이 플레이어의 무기로부터 피해를 입었다는 것을 나타내기 위해 "타격" 반응 애니메이션을 재생하는 적
- 마우스 오버, 눌림 및 해제(선택됨) 상태를 나타내기 위해 색상이 변하는 버튼
- 플레이어가 구매를 완료했을 때 들리는 "찰싹!" 소리
- 플레이어가 퀘스트 목표를 완료할 때 진행률 표시줄이 채워지는 것
피드백이 부족하거나 충분하지 않으면 플레이어는 자신이 이룬 것이 무엇인지, 효과가 좋았는지 나빴는지, 또는 사용 중인 기능이 정상적으로 작동하고 있는지 이해하지 못할 수 있습니다.
흐름 설계
목표를 완료하기 위해서는 여러 상호작용이 필요합니다. UX 디자이너는 플레이어가 하나의 행동이나 UI 화면 또는 선택에서 다음으로 이동하는 방식을 고민하며, 이 길이 논리적이고 편리하도록 합니다.
예를 들어, Berry Avenue RP에서 아바타에 아이템을 장착하려면 플레이어는:
- 아바타 버튼을 찾고 탭합니다.
- 아이템 카테고리(얼굴, 머리, 목 등)를 선택합니다.
- 관심 있는 아이템을 찾기 위해 스크롤합니다.
- 아이템을 탭하여 자신의 아바타에 장착합니다.
- 아바타 커스터마이즈를 종료하기 위해 완료 버튼을 찾고 탭합니다.
이 단계들을 간단하게 이루어진 아바타 커스터마이즈 흐름을 나타냅니다. 이 흐름은 간단하고 직관적이며, 아이템을 장착하는 데 필요한 최소한의 단계만을 포함합니다. 플레이어가 해야 할 행동이 많지 않거나 무엇을 해야 할지에 대해 과도하게 고민할 필요가 없기 때문에, 이 흐름은 _마찰_이 적은 설계를 제공합니다. 마찰은 목표에 도달하기 위해 필요한 노력의 측정을 의미합니다.
효율적이고 마찰이 적은 흐름을 설계하기 위해서는 사용 사례를 신중하게 고려해야 합니다. 이러한 사용 사례는 아바타를 신속하게 수정하고자 하는 것과 같은 플레이어 목표로 표현될 수 있습니다:
- 아바타를 빠르게 수정할 수 있기를 원하는 것
- 수정 중 아이템을 쉽게 찾기
- 선택하기 전에 아이템 미리보기
- 선택 후 아이템을 쉽게 제거하기
이러한 목표는 기능의 UI 및 UX 설계를 안내합니다:
- 플레이어는 HUD의 눈에 잘 띄는 버튼을 통해 아바타 커스터마이징 기능에 접근하며, 즉시 아이템을 아바타에 장착하기 시작할 수 있습니다.
- 탭은 아이템을 편리한 카테고리로 정렬하고, 검색 필드는 플레이어가 직접 아이템을 검색할 수 있게 합니다.
- 아이템은 아바타에 즉시 미리보기로 표시됩니다.
- 플레이어는 다시 탭하여 아이템을 선택 해제하거나 장착된 아이템 목록에서 아이템을 탭하여 쉽게 제거할 수 있습니다.
디자이너는 그런 다음 UI를 배치하고 플레이어가 아바타 수정 목표를 완료하기 위해 취할 단계를 계획합니다. 이 과정은 UI를 탐색하는 동안 플레이어 동작을 시각적으로 묘사하는 _흐름 차트_의 사용으로 지원될 수 있습니다. 이 다이어그램은 간과된 단계, 단계가 불분명하거나 불편한 고통 지점, 과도한 마찰을 식별하는 데 도움이 될 수 있습니다.
