레벨 업: 게임 UI 가이드(인포그래픽 포함)

60년 전 뉴욕 주 업튼에 있는 브룩헤이븐 국립 연구소에서 공개 모임을 가졌습니다. 연구실을 견학한 방문객들은 두 사람을 위한 테니스 라는 게임인 인터랙티브 전시를 관람했습니다. 설정은 간단했습니다. 5인치 아날로그 디스플레이와 2개의 컨트롤러에 각각 하나의 노브와 하나의 버튼이 있습니다. 세계 최초의 비디오 게임이 탄생했지만, 2년 만에 전시회가 문을 닫았습니다.

12년이 흐르고 Andy Capp's Tavern이라는 바에 섬뜩할 정도로 유사한 아케이드 게임이 나타났습니다. 게임 이름은? 퐁 . 그 메이커? 아타리. 하룻밤 사이에 비디오 게임의 급성장하는 세계가 변모했습니다. 참신함이 산업이 되었습니다.

Pong 이후로 비디오 게임 그래픽의 복잡성은 기하급수적으로 발전했습니다. 우리는 상상할 수 있는 모든 군대에서 외계 곤충, 엘프 모험, 군인을 만났습니다. 우리는 버섯 왕국, 권투 링, 적대적인 풍경의 팽창하는 우주에 용감하게 맞서왔습니다. 괴상한 캐릭터와 불가능한 줄거리를 떠올리는 것도 재미있지만, 비디오 게임을 플레이할 가치가 있는 디자인 요소인 UI 구성 요소에 대해서도 논의할 가치가 있습니다.

웹사이트나 모바일 앱과 마찬가지로 비디오 게임에는 플레이어가 탐색하고 정보를 찾고 목표를 달성하는 데 도움이 되는 공통 UI 구성 요소가 있습니다. 시작 화면에서 코인 카운터에 이르기까지 비디오 게임 UI 구성 요소는 플레이 가능성(플레이어의 즐거움 및 엔터테인먼트 경험)의 중요한 측면입니다. 이러한 구성 요소가 게임 경험에 미치는 영향을 이해하려면 비디오 게임 디자인에 필수적인 두 가지 개념인 내러티브 와 네 번째 벽 을 빠르게 해결해야 합니다.

이야기

내러티브는 비디오 게임이 전하는 이야기입니다.

네 번째 벽

네 번째 벽은 게임 플레이어와 게임이 진행되는 공간 사이의 가상 장벽입니다.

내러티브와 제4의 벽은 게임에 통합된 모든 UI 구성요소에 대해 반드시 물어봐야 하는 두 가지 질문을 제공합니다.

1. 구성 요소가 게임 스토리에 존재합니까?
2. 구성 요소가 게임 공간에 존재합니까?

이 두 가지 질문에서 비디오 게임 UI 구성 요소의 네 가지 클래스가 나타납니다. 다이어트; 공간적; 그리고 메타.

비다이제틱

• 구성 요소가 게임 스토리에 존재합니까? 아니요
• 구성 요소가 게임 공간에 존재합니까? 아니요

Non-diegetic UI 구성 요소는 게임의 스토리와 공간 외부에 있습니다. 플레이어의 아바타를 포함한 게임의 어떤 캐릭터도 구성 요소의 존재를 인식하지 못합니다. 비-디에제틱 구성요소의 디자인, 배치 및 컨텍스트가 가장 중요합니다.

빠르게 진행되는 게임에서 비-디에제틱 요소는 플레이어의 몰입감을 방해할 수 있습니다. 그러나 전략이 많은 게임에서는 플레이어에게 리소스와 작업에 대한 보다 미묘한 평가를 제공할 수 있습니다.

Non-Diegetic 구성 요소는 일반적으로 비디오 게임에서 통계 측정기로 나타납니다. 그들은 플레이어가 게임 플레이 중에 축적하고 소비하는 포인트, 시간, 피해 및 다양한 리소스를 추적합니다.

디에제틱

• 구성 요소가 게임 스토리에 존재합니까? 네
• 구성 요소가 게임 공간에 존재합니까? 네

Diegetic UI 구성 요소는 게임의 스토리와 공간에 모두 존재하며 게임 내의 캐릭터는 구성 요소를 인식합니다. 게임 스토리와 공간 내에 존재하더라도 제대로 고려되지 않은 디에제틱 구성 요소는 여전히 플레이어를 산만하게 하거나 좌절시킬 수 있습니다.

규모는 디에제틱 구성요소를 까다롭게 만듭니다. 예를 들어, 차량 대시보드에 있는 게임 내 속도계는 플레이어가 명확하게 보기에는 너무 작을 수 있습니다. 일부 게임에서는 지도와 같은 휴대용 디에제틱 구성 요소를 2D 전체 화면 보기로 전환하여 비-디에제틱으로 만들 수 있습니다.

공간

• 구성 요소가 게임 스토리에 존재합니까? 아니요
• 구성 요소가 게임 공간에 존재합니까? 네

공간 UI 구성 요소는 게임 공간에서 찾을 수 있지만 게임 내 캐릭터는 이를 볼 수 없습니다. 공간 구성 요소는 종종 시각적 보조 장치로 작동하여 플레이어가 개체를 선택하거나 중요한 랜드마크를 지적하도록 돕습니다.

텍스트 레이블은 공간 UI 구성 요소의 고전적인 예입니다. 판타지 및 어드벤처 게임에서 플레이어는 생김새가 낯설지 않은 중요한 물건을 만날 수 있습니다. 텍스트 레이블은 모호성을 빠르게 제거하고 플레이어가 게임 경험에 몰입할 수 있도록 합니다.

메타

• 구성 요소가 게임 스토리에 존재합니까? 네
• 구성 요소가 게임 공간에 존재합니까? 아니요

메타 UI 구성 요소는 게임 스토리에 존재하지만 게임 공간에는 존재하지 않습니다. 플레이어의 아바타는 메타 구성 요소를 인식하거나 인식하지 못할 수 있습니다. 전통적으로 메타 구성요소는 플레이어의 아바타에 대한 손상을 나타내는 데 사용되었습니다.

메타 구성 요소는 게임의 2D 평면에 천천히 쌓이는 먼지 층과 같이 매우 미묘할 수 있지만 게임 경험에서 두드러지게 나타날 수도 있습니다. 액션 및 어드벤처 게임에서 전체 시야가 때때로 흔들리거나 흐릿하거나 변색되어 플레이어가 피해를 입었음을 보여줍니다.

비디오 게임 UI 구성 요소를 분류하는 것이 항상 적절하지 않은 것은 아닙니다. 생명 측정기는 한 게임에서는 디에제틱이지만 다른 게임에서는 비-디에제틱일 수 있습니다. 게임의 내러티브와 플레이어와 네 번째 벽의 관계에 따라 구성 요소가 클래스 간의 경계를 흐리게 할 수 있습니다. 마찬가지로 게임의 아트 방향에 따라 구성 요소에 무한한 범위의 비주얼 스타일과 구성을 적용할 수 있습니다.

Toptal Design 블로그에 대한 추가 정보:

• 어두운 UI. 좋은 것과 나쁜 것. 해야 할 일과 하지 말아야 할 일.
• 디자인 기초 – 시각적 계층 구조 가이드(인포그래픽 포함)
• 증강 현실 vs. 가상 현실 vs. 혼합 현실 – 입문 가이드
• VR/AR 디자인으로의 도약
• 게이미피케이션 디자인에 대한 실용적인 접근