The Power of Video Game HUDs

〈더 라스트 오브 어스〉의 완성까지 겨우 8개월을 남기고서야

너티독은 사용자 인터페이스 작업을 시작했습니다.

디자이너 알렉산드리아 네오나키는
"UI 요소 중 일부는 이미 대강 있었지만,

헤드 업 디스플레이의 전체적인 디자인은
아직 정해지지 않았으며

아직 많은 부분이 결정되지 않았었다"라고 합니다.

저는 이것이 UI가 게임 개발에서 저평가된다는 것을
보여주는 사례라고 생각합니다.

막바지에 내던져진 성가신 것인 셈이죠.

그러나 저는 UI가 저평가되어서는 안 된다고 생각합니다.

게임의 외양과 작동, 느낌에
엄청난 영향을 미칠 수 있기 때문이죠.

그래서 이번 게임 메이커즈 툴킷에서는
UI와 게임 디자인의 교차점을 살펴보고

체력 막대와 스태미너 미터 등이
플레이 방식을 어떻게 바꾸는지 알아보겠습니다.

UI는 여러 다양한 것들을 포함합니다.

온라인 로비, 소지품 화면,

대화 선택지, 제작 메뉴, 상점 페이지 등이죠.

하지만 이번 영상에서는 그 중에서도
헤드 업 디스플레이(HUD)를 살펴보겠습니다.

여러분이 게임을 하는 동안 화면 위에 놓이는 것들이죠.

가장 먼저 HUD의 목적이 무엇이며

플레이어에게 어떤 이점을 제공하는지 살펴볼까요?

이 질문에 답하기 위해 HUD를 두 종류로 나눠 보겠습니다.

"게이지"와 "프리뷰"라고 부를까요?

게이지는 HUD라고 할 때 일반적으로 떠오르는 것입니다.

이것은 일반적으로는 보이지 않을 정보를
플레이어에게 표시해 줍니다.

가령 캐릭터의 체력은
일반적으로 프로그램에 숨겨진 숫자이지만

체력 표시줄은 이를 플레이어에게 보여줄 수 있습니다.

AI의 행동은 시각적 보조 없이 이해하기 힘듭니다.

시야 원뿔, 이동 범위 및 공격 표시기와 같은 것들 말이죠.

카메라의 한계로 화면에 표시되지 않을 수 있는
중요한 정보를

표시기나 미니맵으로 강조할 수 있습니다.

게이지는 플레이어가 게임 세계의 현재 또는 미래 상태를
이해할 수 있게 도와줍니다.

이를 통해 의도를 갖고 계획과 행동을 할 수 있습니다.

중독성있는 덱 빌더
〈슬레이 더 스파이어〉의 사례를 살펴봅시다.

게임 개발 초기에는 적들이 어떤 행동을 할지
어떤 표시도 없었죠.

그래서 플레이어들은 매 턴마다 막을지 공격할지 잘 몰랐고,

거의 아무렇게 플레이하게 되었습니다.

이 문제를 해결하기 위해 개발사 Mega Crit는

적이 다음에 무엇을 할 것인지를 보여주는
표시기를 추가했습니다.

이제 플레이어는 손패를 어떻게 사용할지
더 현명한 결정을 내릴 수 있으며

만족스러운 시너지 전략을 꾸릴 수 있게 되었습니다.

이것이 게이지입니다.

반면에 프리뷰는 버튼을 누르거나 행동을 하면
어떤 일이 생길지 보여줍니다.

가장 간단한 형태는
상황에 맞는 행동을 표시하는 팝업 버튼입니다.

Y를 눌러 문을 열고

X를 눌러 차량에 탑승하고

E를 눌러 공동묘지로 이동합니다.

네?

어...

그러나 프리뷰는
수류탄의 궤적을 보여주는 호일 수도 있습니다.

밧줄을 사용할 수 있는 범위 안에 있는지 알려주기도 하고,

어떤 적을 목표로 삼고 있는지 보여주기도 하고,

또는 〈XCOM〉에서 유닛이 어디로 달려갈지 정확히 보여주는
이 줄같은 것일 수도 있죠.

프리뷰는 플레이어가 행동하기 전에
그 결과에 대해 미리 알려주는 것입니다.

이를 통해 플레이어는 무턱대고 행동하는 대신
확신을 갖고 움직일 수 있습니다.

이 사례를 알아보기 위해 〈셔블 나이트〉를 살펴보죠.

세 번째 DLC 캠페인에서 "스펙터 나이트"는
대시 슬래시 이동을 사용하여

특정 물체를 베고 반대쪽으로 날아갑니다.

처음에 Yacht Club Games는 캐릭터 포즈의 단순한 변화로
이 상호 작용을 강조했지만

그 포즈로는 이 행동을 언제 어디서 발동할 수 있는지

행동이 끝나면 스펙터 나이트가 어디에 위치하게 되는지
잘 묘사하지 못했습니다.

결국 개발팀은 물체에 가까워질 때 나타나는
간단한 표시기를 만들었습니다.

이는 버튼을 눌렀을 때
대시 슬래시가 발동한다는 것을 명확히 알려주고

버튼을 눌렀을 때 어디로 이동할지 정확히 보여줍니다.

이 표시선이 "대시 슬래시를 이해하기 쉽도록
우리가 만든 가장 중요한 변화"라고 개발자는 말합니다.

결국 게이지와 프리뷰는
플레이어에게 정보를 제공하는 편리한 도구입니다.

게임의 현재 상태나 가까운 미래를 살필 수 있고,

이를 통해 플레이어는 자신감을 갖고 편안히 상호작용하며
구체적이고 의미있는 계획을 세울 수 있습니다.

하지만 여기에 문제가 있습니다.

게임 뒤편엔 수백 개의 변수들이 오고가는데

UI에는 이들 중 어떤 변수든 표시될 수 있습니다.

그리고 그 어떤 행동이든 모두
프리뷰의 대상이 될 수 있습니다.

그렇다면 왜 게임은 모든 정보를 보여주지 않을까요?

이런 정보를 플레이어에게 공개할 때의 이점이 있듯

일부 정보를 숨기는 것에도 이점이 있습니다.

UI를 지도하는 경험적이고 심리적인 근간인
UX 디자인에 대해 살펴보신다면

"인지 부하"라는 단어에 가닿게 됩니다.

인간의 뇌가 작업 기억에서
너무 많은 정보를 다루기 힘들어한다는 것이죠.

따라서 화면에 쓸모없는 정보가 많으면
게임을 해석하는 것이 더 힘들어집니다.

시선 추적 기술을 통해

사람의 눈이 이런 정보들을 머릿속에 담기 위해
화면 주위를 얼마나 살펴보는지 볼 수 있죠.

따라서 관련없거나 반복되는 것들,
장식들을 치워 UI를 줄이면

인지 부하를 줄일 수 있습니다.

하지만 꼭 줄이는 것만 답은 아닙니다.

사실 UI는 인지 부하를 줄여줄 수도 있습니다.

얼마나 많은 총알을 쏘았는지 기억해야한다면,

정신없이 쏘다가 내가 6발을 쐈는지 5발을 쐈는지
모를 수도 있죠.

이럴 때는 탄약 카운터가 더 효율적입니다.

그래서 화면에 있는 정보가 유의미하고 이해하기 쉽도록
레이아웃을 잘 만드는 것이 더 중요합니다.

이를 달성하는 한 가지 방법은
시각적 위계를 고려하는 것입니다.

글꼴 두께, 색상, 크기, 위치 및 동작을 활용해

일부 요소를 다른 요소보다 더 돋보이게 만드는 거죠.

화면의 모든 요소가 다 똑같이 강조된다면

어디에 집중해야 할 지 알기 힘들겠죠.

반대로 강조된 것이 전혀 없다면
역시 중요한 정보를 알 수 없을 것입니다.

예를 들어 《히트맨》의 침입 팝업은 어떨까요.

정말 유용한 경고지만,
〈히트맨(2016)〉에서는 보지 못하셨을 수도 있습니다.

화면 구석 미니맵 하단에 나타나는 단순한 표시거든요.

〈히트맨 2〉에서는 개선되어서 노란 표시가 되었고,

주의를 끌기 위해 맵 전체가 깜박입니다.

〈히트맨 3〉에서는 명료한 소리 단서로 뒷받침되어
훨씬 더 좋아졌습니다.

오디오 플레어

시각적 위계에 대한 생각을 돕기 위해

디자이너 자크 게이지는 "세 단계 읽기"의 원칙을 도입합니다.

바로 가장 중요한 것부터 덜 중요한 것까지 차례대로 나가는
세 단계의 시각적 정보죠.

자크는 자신의 게임인 〈SpellTower〉를 통해 설명합니다.

첫 번째 읽기는 주요 게임 요소로,
이 게임에선 단어를 구성하는 데 쓰는 글자입니다.

두 번째 읽기는 게임플레이에 필수적인 중대한 규칙들,

즉 게임 오버가 될 수 있는 열,
한 줄을 지워주는 파란색 보너스 글자 등이죠.

그리고 세 번째 읽기는 상황별 규칙과 같은
더 작고 사소한 것들,

가령 더 긴 단어에만 쓰일 수 있는 이 타일과 같은 것들입니다.

개발자는 중요도에 따라 정보의 순서를 매기고,

가장 유의미한 것들이 돋보이도록 디자인할 수 있겠지요.

그리고 게임은 항상 변화하기 때문에,
정보들이 시시때때로 다른 읽기 순위로 옮겨갈 수 있습니다.

자크는 〈하스스톤〉이 "첫 번째 읽기에서 주의를 끈 것들이

두세 번째 읽기로 다시 사라지기를 끊임없이 반복"하는
게임이라 지적합니다.

인지 부하를 줄이는 또다른 방법은
이런 질문들을 던지는 겁니다.

"이런 UI 요소들이 항상 다 나타나야 할까?"

가령 《캐슬배니아》 1편에서는 어째서인지
전체 레벨에 걸쳐 보스의 체력을 볼 수 있습니다.

요즘에는 전투를 시작할 때 나타나지요.

그러나 이 원칙을 거의 모든 UI 요소로 확장할 수 있습니다.

〈고스트 오브 쓰시마〉에서는
검을 뽑을 때만 체력 표시줄을 볼 수 있습니다.

이는 체력이 전투할 때만 유의미하지,
일반적으로 섬을 탐험할 때는 의미가 없기 때문입니다.

물론 HUD를 제거하는 또다른 이유는,

(갈수록 이 이유가 더 각광받기도 하지요)

바로 화면 전달 때문입니다.

게임을 더욱 영화같고 몰입감있게 만들고

지루한 2D 자원으로
멋진 3D 화면을 망치고 싶지 않은 욕구입니다.

하지만 UI는 지루할 수밖에 없다고 생각하는 분은

분명 〈페르소나 5〉를 안 해보셨겠죠.

♫ 〈페르소나 5〉의 음악 ♫

자, 이건 단지 모든 HUD를 삭제하면 되는 게 아닙니다.

가독성이나 이해력을 희생해야 하는 문제도 아니죠.

그보다는 이 정보를 어떻게 전달할지를
영리하게 결정하는 문제입니다.

앞서와 같이 개발자는 정보를 숨겨놓고
필요한 경우에만 표시할 수도 있습니다.

그러나 또 다른 해결책은
HUD 요소를 게임 내에 만드는 것입니다.

이것은 UI가 실제로
게임 세계에 물리적으로 존재하는 경우입니다.

가장 잘 알려진 예시는 물론 〈데드 스페이스〉이죠.

이 생존 공포 게임의 몰입감을 높이기 위해

비서럴 게임즈는 HUD를 제거하고
동일한 정보를 게임 세계 자체에 넣었습니다.

아이작의 체력 막대와 정지능력 미터는
수트의 파이프와 게이지에 내장되어 있죠.

각 무기의 탄약 수는 총 자체에 표시됩니다.

소지품 창 같은 것조차도
게임 세계 속에서 홀로그램으로 전사됩니다.

다른 게임에서도 이것의 효과적인 예를 볼 수 있습니다.

〈메트로이드 프라임〉에서 HUD는
다른 슈팅 게임들처럼 작동하지만

사무스의 헬멧 바이저에 장착되어
실감나게 지직대고 김이 서리게 만들어서

플레이어의 실재감과
캐릭터와의 연결감을 증대시킵니다.

그러나 이것이 단지 스타일과
전시에만 관련있는 건 아닙니다.

이 정보를 내부화하는 것은
흥미로운 게임 플레이 결과를 만들기도 합니다.

〈에일리언 아이솔레이션〉에서 플레이어는
움직임을 추적하는 장비를 들고 있을 수 있죠.

《콜 오브 듀티》의 미니맵과도 닯았지만,

물리적 도구이기 때문에

이 정보를 보고 있을 건지,

아니면 무기를 들지 선택해야 합니다.

둘 다 가질 수는 없죠.

내부 HUD는 더이상 보통의 체력 막대나
탄약 카운터를 의미할 필요가 없고

게임 세계에서 영리한 방식으로 재현됩니다.

아이디어를 좀 더 확장하면,

보통은 UI라고 간주되지 않는 요소들로
같은 정보를 표현할 수 있기 때문입니다.

가령 〈Wreckfest〉에서 차가 얼마나 파손되었는지 알기 위해
체력 막대가 필요하진 않습니다.

차 그 자체로 알아볼 수 있죠.

〈젤다의 전설: 야생의 숨결〉에서

링크의 체온을 알려주는 표시기가 과연 필요할까요?

〈슈퍼 마리오 브라더스〉까지 거슬러 올라가면,

마리오의 체력은 스프라이트 크기로 표현되었죠.

좋아요, 그래서 HUD를 지우는 또 다른 이유는

의도적으로 게임의 가독성을 떨어 뜨리는 것입니다.

〈더 라스트 오브 어스: 파트 2〉에서
처음으로 만나는 인간 적들은

자신들의 의도와 계획을 말로 내뱉기 때문에

적들의 생각에 대한 아이디어를 제공하고

그들을 이길 수 있는 계획을 짤 수 있게 합니다.

그러나 나중에는 새로운 적들을 만나게 되는데요,

이들은 거슬리게 높은 휘파람으로만 신호를 주고받습니다.

휘파람

화살 충격
엘리의 소리

이 휘파람은 의도적으로
플레이어가 읽어낼 수 없도록 만들어졌습니다.

저는 이 적들이 훨씬 더 위협적이고
맞서기 어렵다는 것을 알게 되었습니다.

그 정보가 부족했기 때문입니다.

더 나아가서 플레이어가 가진 정보의 양은

플레이어의 행동을 완전히 바꿀 것입니다.

틴더에서 영감을 얻은 관리 게임 〈Reigns〉의 개발자는
개발 도중에 이런 점을 깨달았습니다.

원래 게임은 모든 능력치가 명확한 수치로 표기되었고

선택이 수치를 어떻게 바꾸는지도 나타났습니다.

그러나 테스트에서 플레이어들은
이러한 수치를 최적화하는 데 집중하느라

대부분의 텍스트를 무시했습니다.

UI를 모호한 게이지로 바꾸고 나서야

플레이어들이 다시 이야기를 읽고,
분석 대신 감정에 기반해 행동했습니다.

저는 이것이
개발자가 꼭 HUD를 완전히 제거할 필요는 없지만

적어도 HUD의 정밀도를 고려해야 한다는 걸
보여준다고 생각합니다.

체력이 정확한 숫자나 막대,

혹은 화면 중앙의 희미한 빨강 무늬 중
뭘로 나타나야 할까요?

이것은 플레이어가
이 정보로 뭘 할지에 달려 있습니다.

정확한 차이를 계산해야 하나요,

아니면 뒤로 물러나 엄폐물을 찾으라는 경고만 하면 되나요?

제가 말씀드렸던 프리뷰 요소들에 대해서는, 음,

정보가 더 멀리, 자세히 주어질수록
플레이어가 더 구체적인 계획을 세울 수 있습니다.

〈마크 오브 더 닌자〉는 이 램프에 칼을 던지면
어떤 일이 일어날지 정확히 보여줍니다.

그러나 정보의 미래성을 줄이거나
정보를 모호하고 부정확하게 만들면

플레이어는 게임의 작동 방식을 익히고
내면화하도록 강제합니다.

잠깐 〈페글〉을 살펴볼까요.

기본적으로 샷 표시기는 공이 어디로 갈지
첫째 타격까지만 보여줍니다.

즉 그 다음 튕기는 궤적을 머리로 계산하는 건
여러분에게 달려 있죠.

바로 학습 곡선의 일부이죠.

물론 그 프리뷰를 더 미래까지
내다볼 수 있게 만드는 파워업이 있지만,

그건 곧 이 정보가
얼마나 강력할 수 있는지 보여줄 따름입니다.

또, 〈페글〉의 게임 플레이에 대한
특허가 있다는 것을 알고 계셨나요?

현재 저희 채널의 주제거든요.

UI는 매우 강력하기 때문에
난이도나 어시스트 모드 등에 엮일 수 있습니다.

레이싱 게임들은 쉬운 난이도에서
최적 레이싱 라인을 표시해주곤 하지만,

더 높은 난이도에서는 꺼지도록 만듭니다.

UI는 다른 게임 플레이 요소들처럼
모드 변경이나 모험 도중에

게임의 난이도를 바꾸는 데 사용할 수 있습니다.

저는 이 모든 것이 UI가 게임에 강력한 영향을 준다는 걸
보여준다고 생각합니다.

그리고 효과적으로 사용된다면
UI는 게임 디자인의 목표를 지원하고 발전시킬 수 있습니다.

하지만 ... 그 반대는 어떨까요?

UI에 영향을 미치는 게임 디자인이 아니라
게임 디자인에 영향을 미치는 UI 말이죠.

마지막 사례 연구를 위해 결정론적 명작 전술 게임
〈인투 더 브리치〉를 살펴봅시다.

이 게임은 작고 좁은 격자에다
모든 적들이 동시에 뭘 하려는지 보여주죠.

그렇게 적들이 뭘 꾸미고 있는지를 완전히 표현한
복잡한 화살표와 아이콘들이 나타납니다.

그러나 개발사 서브셋 게임즈는

이 시스템이 작동하려면 특정 적과 무기를
게임에서 빼야 한다는 걸 깨달았습니다.

표시하기 너무 어려웠기 때문이었습니다.

인과관계가 길게 이어지는 무기,
광범위한 지역에 가해지는 적의 공격 같은 것들이었죠.

공동 디자이너 저스틴 마는 "게임 디자인 원칙으로서,

명료함을 위해 멋진 아이디어라도
기꺼이 희생할 것"이라고 말합니다.

〈인투 더 브리치〉만 그랬던 것이 아닙니다.

〈하스스톤〉에서 한 번에 7개의 하수인만 부릴 수 있는 건

화면에 그만큼만 들어갔기 때문입니다.

또 어떤 영웅의 능력들은
UI를 통해 보여주기엔 너무 복잡해서 바뀌었죠.

궁극적으로 플레이어에게 명확히 전달될 수 없다면

좋은 게임 메커니즘이 아닐지도 모르기에
더 간단해져야 합니다.

UI는 망가진 게임 메카닉을 고쳐주는 반창고가 아닙니다.

그렇기 때문에 HUD를
다른 모든 것과 함께 디자인해야 합니다.

나중에 따로 해선 안 되죠.

게임 개발의 다른 모든 것들처럼

UI는 자의적으로, 또는 "다른 게임들이 이렇게 하니까"
만들어져서는 안 됩니다.

명료한 생각과 의도로 만들어야 합니다.

아래 댓글에 멋진 UI가 있다고 생각하는 게임을 알려주세요.

인디 게임 추천 시간입니다!

이 게임은 〈Room to Grow〉입니다.

식물을 목표에 갖다놓기 위해 선인장을 키우는
격자 기반 퍼즐 게임이죠.

뾰족한 몸을 움직이려고 벽을 밀면
게임이 금방 복잡해집니다.

또 갈수록 더 많은 메커니즘이 더해집니다.

사려깊게 만들어진 이 작은 게임에는
많은 매력과 살짝 악랄한 메타-레벨 도전들이 있습니다.

현재 스팀에 출시되어 있습니다.