[가마수트라] 모든 게임 개발자가 꼭 알아야하는 6가지 ui 디자인

모든 게임 개발자가 꼭 알아야하는 6가지 ui 디자인

translator. Rasill

*번역이 매끄럽지 않은 부분이 있을 수 있습니다. 

의미가 다르게 번역된 것은 제보 부탁바랍니다.

https://www.gamasutra.com/view/news/289637/6_examples_of_UI_design_that_every_game_developer_should_study.php

현대 게임 개발에서 인정을 덜 받지만 가장 중요한 것 중 하나인 HUD와 UI 디자인은 게이머가 어떻게 게임의 핵심 시스템에 접속하는지를 결정한다. UI는 캐릭터와 세계의 상태에 대한 필수적인 정보를 제공할 뿐만 아니라 게이머들의 행동을 조형하는 열쇠이다. 심각한 상처를 알리는 HP의 긴급함, 혹은 퀘스트 아이콘이 강조된 미니맵은 게이머가 게임과 어떻게 상호작용하는지, 어떤 게임 플레이 요소들이 우선순을 갖는지에 극적인 영향을 준다. 이를 알기 위해 우리는 게임에서 무엇이 최고의 디자인인지, 그들이 무엇을 잘 했는지에 대해 듣기 위해서, HUD와 UI 디자인 영역의 경험을 가진 개발자들에게 접근했다.

1) 클래시 로얄 - 표면을 스크롤로 움직이는 UI

클래시 로얄은 광범위하게 적용 가능한 디자인 강좌로 가득차 있다. 

이 게임의 매력 대부분은 단순한 전제에서 비롯되며 극도로 세련되고 정제된 패키지로 제공한다. 

(전제: 공격 유닛들을 사고 왕과 탑을 방어하는 대립 타워 디펜스)

DIFIT 스튜디오에서 UX 디렉터로 근무중인 Om Tandon이 '미드 코어 관중'들에게 어필하려 노력한 

다른 많은 핸드폰 게임과 같은 위험을 피한 것에 대해 크래시 로얄을 칭찬했다.

*미드 코어 관중 - 캐주얼과 하드코어 사이 어딘가에서 떨어져 나간 게이머

"만약 오늘날 대부분의 미드코어 모바일 게임들을 보면, 당신도 보다시피 홈 화면 접근 방식이 복붙이에요. 

보통 전투, 이벤트, 상점, 소셜 등의 여러 입구가 있는 로비 화면이나 기지로 되어있죠."

Tandon은 이 방식이 부조화스러운 마찰을 만든다고 말했다. 

서로 다른 아트와 배경을 가진 지역에서 지역으로 가기 위해 앞뒤로 움직이거나, 홈 화면으로 되돌아 가는 것들 말이다.

그리고 이것은 "더욱 많은 기능이 네이티브 대신 서버와의 통신이 동적으로 채워진 것처럼" 로딩 시간을 늘린다. 

클래시 로얄은 HUD와 멋진 UI로 이 문제를 해결했다. 

성가신 메뉴 깊숙히 각각의 레이어를 쑤셔 넣는 대신 표면으로 제어 가능한 HUD와, 

여러 탭을 분리된 메뉴로 취급하는 대신 스와이프해서 플레이할 수 있는 멋진 UI로 말이다.

Om​은 말한다. "각 주요 스크롤 영역 상단의 두번째 정보를 채움으로서 뎁스가 점점 더 줄어듭니다.

그리고 탭 스크롤 디자인은 즉시 각 섹션의 콘텐츠가 덧붙여짐으로서 보완됩니다. 못생긴 로딩 시간을 제거하구요."

*drill-down; 정보를 찾기 위해 텍스트나 아이콘 등을 클릭해 뚫고 들어가듯이 검색하는 것. drill-down​을 줄여준다 -> 뎁스를 줄인다고 표현했음

테이크 아웃! ​

클래시 로얄의 멋진 디자인으로부터 테이크아웃 해야할 핵심은 정보는 표면화 되어야 한다, 가능한 한 손쉽게 얻을 수 있어야 한다, 

엄청나게 많이 분리된 메뉴들 중 하나를 기다리는 것은 재미가 없다는 것이다.

2) 하프 라이프 2 - 역동적이고 청각적인 UI

 

"하프-라이프 2의 HUD 는 단순하며 깨끗하고, 전투 환경의 아름다움을 방해하지 않습니다. 저는 흔적의 경제성을 완전 사랑합니다."

밸브는 그들 게임의 전반적인 미학을 완성시키는 메마르고 멋진 HUD를 만들어온 역사가 있다. 하프라이프2는 그중 최고일 것이다.

번지의 리드 UI 디자이너 David Candland는 출시 즈음 한번도 시도되지 않았던 아이디어를 전문적으로 수행하기 위해 이것을 불러낸다.

"언제나 제일 좋아하는 HUD 중에 하나에요. 황색으로 구성된 단색 색조는 구별되는 룩을 가지고 있어요. 

이건 HUD를 게임의 독특한 정체성 일부로 굳어지게 하죠. 이건 단순하며 깨끗하고, 전투 환경의 아름다움을 방해하지 않아요. 

전 흔적의 경제성을 완전 사랑해요."

Candland는 하프라이프2의 HUD가 (수납된 무기처럼) 당장 필요하지 않은 요소들을 제거하는 방식을 강조한다.

"간결하게 즉시 제공되는 데이터 덩어리는 인식 부하를 아주 가볍게 만들었습니다. 그게 나타날때 애니메이션은 산뜻하고 빠르게 반응했죠. 

근데 HUD의 시각적인 부분이 중요한 만큼 청각 단서도 중요해요." 그가 덧붙인다.

"누가 이 소리들을 생각했을까요? 전투 중에 게이머는 좁은 시야를 갖는 경향이 있어요. 그리고 화면의 주변을 훨씬 덜 알아채죠.

청각 단서들은 분명하고 충분히 명확해요. 탄약을 주울 때, 환경적인 위험에 갇혔을 때, 혹은 가장 심한 전투 상황에서 생명을 보급할 때 쉽게 알려줍니다. 

문제 없는 HUD는 없지만, 하프라이프2의 HUD는 경제적임과 명확함의 훌륭한 예제에요. 그리고 내 작업에도 영향을 주고 있죠."

테이크 아웃! ​

하프라이프2는 우리에게 HUD들이 나중에 덧붙여지거나 불행히 게임 아트를 손상시킬 필요가 없다는 것을 보여줬다. 

대신 그들은 실제로 (여전히 아름다운 채로) 더해질 수 있다. 그들은 또한 정보를 전달하는데 있어 시각적 요소에 전적으로 의지할 필요가 없다.

3) 하스스톤 - 촉각적이고 확실한 UI

클래시 로얄처럼, 하스스톤은 단순하고 자주 사용되는 방법을 멋진 스타일로 뛰어나게 실행한 게임이다.

그 스타일의 큰 부분은 정보의 이해하기 쉬움, 즉 쉽게 이해가능한 형태로 중요 정보를 강조하고 필요할 때 드러내는 HUD에 대한 신뢰다.

유비소프트의 게임 디자이너인 Stanislav Costiuc는 성공의 주된 이유로 게임의 촉각적인 표현과 HUD의 읽기 쉬움을 지적한다.

"중요한 정보는 항상 명확하죠. 누가 공격하는지, 누가 치명적인 데미지를 입었는지, 누가 스팰 파워를 늘렸는지 같은 거요.

그리고 하스스톤이 게임의 모든 부분에서 각 클릭과 행동의 시각, 청각 피드백을 주는 방식은 뛰어나요.

카드들끼리의 싸움에서부터 메뉴에서 일어나는 모든 것들까지 말입니다.

모든 클릭이 만족스럽게 느껴져요. 화면에서 카드가 돌아다니는 단순한 행동 조차 말이죠."

테이크 아웃! ​

화면에 어수선하게 레이어를 덧붙이는 대신, 게임의 필수적인 부분처럼 느껴지는 방식으로 

HUD를 통합하는 것은 게이머가 플레이에 집중하게 한다.

 

4) 오버워치 - 작고 중심에 몰린 UI

 

 

여느 클래스 기반 다중 슈팅 게임 캐릭터처럼, 오버워치는 HUD를 각기 다른 캐릭터에 맞춰 바꾸는 도전에 직면했다.

메시브 엔터테이먼트의 시니어 UI 아티스트인 Oliver Janoschek는 특히 효과적인 HUD로 자리야를 선정했다. 

게이머에게 결정적인 정보를 주면서도 플레이를 유지시키기 때문이다.

"저는 게이머가 제일 집중하는 공간에 정보를 두고, 정보를 보기 위한 눈동자 움직임을 없애는 것을 지지해요.

자리야의 에너지 표시는 실제 십자선 표시 근처에 자연스럽게 있어요. 그래서 엄청 편하게 보고 알 수 있죠.

그 표시는 플레이를 방해하지 않을 정도로 미세하지만 항상 떠 있어서 다양한 상황들에 반응하기 쉽게 만들어요. 빠르게 진행되는 FPS의 결정적인 순간에서 말입니다."

테이크 아웃! ​

당신이 작은 영역에 정보를 더 담을 수 있고 여전히 가독성이 유지된다면, 더 좋다.

5) 어쌔신 크리드 - 적을 수록 좋은 UI

 

 

유비소프트의 게임 디자이너 Stanislav Costiuc에 따르면, 때때로 훌륭한 HUD를 창조하는 가장 우아한 해결은 모두 없애버리는 것이다. (그는 어쌔신 크리드에서 일하지 않는다)

"전 정말 첫번째 어쌔신 크리드를 말하고 싶어요. 그게 HUD로 뭘 했기 때문이 아니라 껐을 때 더 좋은 게임이어서요.

처음부터 HU​D가 없는 걸 염두에 두고 명확하게 디자인 됬어요. 그리고 그 경험은 완전 다르죠."

오픈월드에서의 암살과 거대하고 사랑스러운 랜더 환경을 가진 어쌔신 크리드같은 게임에서, HUD를 벗기는 것은 게임에 몰두하게 만든다.

가상현실을 플레이하고 있다는 사실이 떠오르지 않을 정도로 말이다. (혹은 어쌔신 크리드의 경우, 가상현실 속 가상현실)

중개자인 HUD 없이 행해지는 순수한 플레이는 게이머와 캐릭터를 더 직접적으로 연결하고, 캐릭터들을 더 사실적으로 느끼게 만든다.

"어쌔신 Bureau가 당신에게 유대인 지구 옆 시장에서 정보를 찾을 수 있다고 말하면, 당신은 아이콘 앞으로 바로 가지 않고 작은 미션을 할 거에요. 그거죠. 지붕 위로 올라가서 둘러본다음 거리 안 입구 위에 있는 데이빗의 별을 볼 거에요. 아! 저게 유대인 지구구나! 그리고 그곳에 도착했을 때 근처에 있는 시장을 찾을 거에요. 그런 다음 정보원을 찾기 위해 독수리의 시야를 쓰거나 서로에게 말을 거는 그늘진 사람들을 찾을 수 있구요.

혹은.. 아마도 예언자가 암살 대상에 대해 말하는 걸 들을 겁니다. 전체 조사 흐름은 과정으로 변해요. 도시를 배우고, 목표를 도달하는데 도움이 되는 패턴 속 시각이나 청각 불일치를 찾는 동안에요. 결과적으로 더 매력적이고 성취감 있는 경험이 되죠. 미니맵 위 아이콘에서 얻은 것 보다 말이에요. 그리고 또.. 환경, 미션, 대화에 특별한 접근을 요구하죠."

테이크 아웃! ​

때때로 강한 디자인 철학의 표시는 HUD 없이 얼마나 잘 플레이 할 수 있는가이다.

 

6) 데드 스페이스 - 통합적이고 매력적인 UI

"데드 스페이스는 슈팅과 생존 호러 장르가 섞여있어요. 그리고 게임 속 HUD는 호러의 측면에서 잘 작동하고 있죠."

 

 

어쌔신 크리드 같은 게임에게 통으로 HUD를 제거하는 것은 좋은 선택이지만, 게임 안에 HUD를 직접 세워 버리는 것도 다른 좋은 선택지다. 몇 가지 HUD를 거의 의무적으로 만드는 데드 스페이스같은 게임들에게 있어 이 방법은, 개발자가 기능을 희생하지 않고도 게이머의 집중을 유지시키게 한다. 에픽 게임즈의 시니어 디자이너인 Jim Brown은 데드 스페이스가 HUD가 게임 안 캐릭터와 실제 게이머 모두에게 작동할 수 있게 한 그 능력을 칭찬한다. 

"데드 스페이스는 창의적인 HUD를 위해서 자주 참고해요. 등에 HP를 표시하고, 머리 위의 지도는 프로젝션으로 표시됩니다. 바닥에 그려지고, 다음 목적지를 안내하죠. 모든 건 획기적인데다 HUD의 전통적인 개념을 완전히 뒤집었지만, 플레이에 준 훌륭한 영향이 간과되곤 합니다. 데드 스페이스는 슈팅과 생존 호러 장르가 섞여있어요. 그리고 게임 속 HUD는 호러라는 측면에서 굉장히 잘 기능하고 있죠. 플레이를 방해하는 2D 오버레이로 게이머를 끌어당기는 대신, 순간 순간에 집중하는 걸 도와줘요."

주의력 흩어짐은 개발자가 HUD/UI를 디자인할 때 맞딱트리는 큰 도전 과제 중 하나다. 

그러나 EA 레드후드 쇼어스는 독특한 방식으로 이를 마스터했다.

"옷에 달린 HP는 종종 게이머의 시각적인 초점이 됩니다. 그리고 어두운 방에서 유일하게 빛나는 것이 될 수 있죠. 스트레스를 받거나 탐구하는 도중에 느낄 긴장감, 전반적인 분위기에 도움을 줘요. 바닥에 투영된 선은 복잡한 레벨 사이로 게이머를 가이드하는 훌륭한 방법입니다. 또 그 선은 게이머를 늦추거나, 그들이 목표를 검토할 때 장소에 잡아두기도 하죠. 이건 게이머가 움직임을 멈춰야만 할 때 취약한 상태로 빠지고, 그로인해 플레이 도중 중요한 결정을 내리는 것을 의미합니다. 또다시 UI는 게임을 위한 긴장감 형성에 도움을 줌으로서 흥미로운 UI 이상이 되는거죠."

 

테이크 아웃! ​

데드 스페이스는 우리에게 가르쳐주었다. 다음 세대의 디자인이 다른 게임이 진부하고 두번째 쯤으로 취급하는 것들을 성공적으로 통합할 수 있다는 것을. 잘 했다! HUD는 HUD처럼 느껴지기를 멈추고 그저 게임 세계의 본질적인 일부로서 느껴진다.