심층 분석: 비스티볼의 UI에서 명확하고 일관된 시각적 언어 개발하기

UI는 게임의 기본 시스템을 체계적으로 시각적으로 표현한 것입니다. 다음은 기존 아트 디렉션을 지원하면서 빠르게 구현할 수 있는 간단한 접근 방식입니다.

관련 분야: 아트, 게임 기획, 프로그래밍
작성자: Gregory Lobanov, Blogger

 

클레이 퍼블리싱 이미지 제공.

이번 편에서는 원더송의 개발자 그렉 로바노프가 출시 예정인 게임 비스티볼의 UI에서 명확하고 간결한 시각 언어를 형성한 기본 기술과 디자인 원칙에 대해 설명합니다.

저는 게임 디렉터로 일하면서 대담한 스타일과 창의적인 UI로 유명한 인디 게임 몇 개를 만들었는데, 그중에는 Chicory가 있습니다: 컬러풀 테일, 원더송, 그리고 곧 출시될 비스티볼을 만들었습니다. 저는 소규모 팀으로 일하며 게임의 모든 UI를 직접 제작합니다. 이 일을 매우 좋아하게 되었고, 제가 개발한 몇 가지 접근 방식에 대한 기본 원칙을 공유하고자 합니다. 이러한 기법은 시각 디자인과 기술의 경계를 넘나드는데, 이는 제가 가진 기술이기 때문에 가능한 한 빨리 만족스러운 결과물을 만들기 위해 고안된 것이 대부분입니다. UI/UX를 전문으로 하는 분이라면 저의 저급한 접근 방식에 불쾌감을 느끼실 수도 있습니다! 하지만 용서해 주시고 여전히 친구로 지낼 수 있기를 바랍니다.

반응형

유용한 팁 한 가지

저는 새로운 프로젝트를 시작할 때 가장 먼저 아트 디렉션을 정하고, 아트 디렉션에 따라 자연스럽게 UI의 모양도 결정합니다. 게임이 어떻게 보일지 대략적인 윤곽이 잡히면 보통 몇 가지 헬퍼 함수/셰이더를 프로그래밍하여 특정 효과나 모양을 최대한 쉽게 어디에나 넣을 수 있도록 합니다. 그 후 몇 년 동안은 그 작은 헬퍼 함수를 모든 곳에... 항상... 모든 것에 사용합니다.

이것이 비스티볼의 전체 비법이지만, 실제로 비스티볼을 사용해 볼 수 있습니다.

 

비스티볼의 평행 사변형과 패턴

비스티볼의 인벤토리 이미지. Greg Lobanov/Klei Publishing 이미지 제공.

비스티볼 UI의 핵심 테마는 모두 평행 사변형인데, 가장 스포티한 모양이기 때문입니다. (ESPN에서 만든 것 같습니다). 이 게임은 UI와 숫자, 목록이 많은 RPG이기 때문에 직사각형 안에 텍스트를 넣는 가장 지루하고 단순한 레이아웃 스타일을 살짝 변형한 이 기본 스타일이 잘 어울립니다. 약간의 비뚤어짐과 위아래로 일직선이 아닌 비스듬히 배열하면 게임이 훨씬 더 스타일리시하게 느껴집니다. 업계에서는 이를 “아트 디렉션”이라고 부릅니다.

또 다른 주요 반복되는 시각적 모티브는 주변으로 스크롤되는 반복되는 도형 패턴(점, 선, 다이아몬드)입니다. 이미지 및 캡션은 Greg Lobanov/Klei Publishing 제공.

이 모든 것은 아주 간단한 한 줄 함수로 지원되었으며, 저는 이 함수를 아무 생각 없이 모든 곳에서 사용했습니다.

draw_pgram(x1,y1,x2,y2)은 제가 처음 작성한 함수입니다. 이 함수는 지정된 경계 내에 평행사변형을 그리기만 하면 됩니다. 기울기 각도는 기본적으로 변경하지 않은 범용 매크로/글로벌 숫자에 의해 결정됩니다.

또 다른 셰이더는 shader_set_scrollpattern(그래픽 에셋, 색상)이었습니다. 저는 입력 텍스처(예: 스크롤링 도트 패턴)를 가져와서 그 후에 렌더링되는 모든 것에 오버레이하는 셰이더를 만들었는데, 텍스처 위치가 시간에 따라 천천히 스크롤됩니다. 예를 들어 이 셰이더에 도트 패턴과 노란색을 사용하도록 설정한 다음 분홍색 평행 사변형을 렌더링하면 결과는 노란색 점들이 스크롤되는 분홍색 평행 사변형이 됩니다.

그게 전부입니다. 비스티볼의 전체 UI 스타일은 이와 같은 기본적인 한 줄 함수를 기반으로 만들어졌습니다. 모든 것에 이러한 시각적 모티프를 사용하다 보니 필요한 정보를 전달하는 데 어려움을 겪기도 했습니다. 하지만 인내심을 갖고 제가 설정한 경계를 허물지 않고 모든 것이 작동하도록 만들었습니다. 개발자에게는 일종의 게으름으로 보일 수 있지만, 플레이어에게는 매우 명확하고 일관된 시각적 스타일을 가진 게임이라고 생각합니다.

728x90

게으른 트윈

제 대학교 교수님인 저비스 톰슨의 공로를 인정해야 할 것 같습니다. 저는 하루에 너무 많이 사용하다 보니 가끔은 이 방법이 모든 사람에게 상식이 아닐 수도 있다는 사실을(?) 잊어버릴 때가 있습니다. 이 방법은 기본적으로 가능한 한 적은 코드라인과 상태를 사용하여 화면에서 물건이 기분 좋게 움직이도록 하는 두뇌를 요하는 방법입니다. 이것이 바로 그것입니다:

위치 += (TargetPosition - 위치) * 속도;

여기서 Position은 UI 요소의 현재 위치(각도, 스케일, 불투명도 또는 실제로는 어떤 변수든 될 수 있습니다)입니다.

TargetPosition은 해당 요소가 최종적으로 놓일 위치입니다.

속도는 0 이상 1 미만의 값입니다. 제가 가장 좋아하는 속도는 0.3이지만 여러분도 더 마음에 드는 값을 찾을 수 있을 것입니다!

Greg Lobanov/Klei Publishing 이미지 제공.

이 간단한 종류의 코드는 메뉴를 열고 닫을 때 움직이는 요소의 스케일과 위치 등 게임 내 수많은 작은 UI 애니메이션을 구동하는 원동력입니다. 어디에나 쉽게 추가할 수 있고 항상 더 멋지게 보이므로 저나 저비스처럼 해킹을 좋아하는 사람이라면 익혀두면 좋은 습관입니다.

색인 팔레트

저는 UI뿐만 아니라 가능한 모든 곳에서 이 기법을 사용합니다. 하지만 기본적으로 색상의 작은 목록을 정의한 다음 모든 UI 요소는 색인별로 미리 정의된 색상 중 하나를 참조하여 해당 색상을 얻습니다(예: 색상 1, 색상 2, 색상 3...). 각 에셋의 색상을 정의하거나 색상이 이미 지정된 이미지 에셋을 사용하는 대신 이렇게 하면 색상을 매우 쉽게 조정할 수 있고 모든 시각적 요소가 조화를 이룰 수 있기 때문에 이 방법을 사용합니다.

또한 색상 목록을 쉽게 교체하여 모든 메뉴에서 작동하는 플레이어를 위한 시각적 테마 옵션을 만들 수 있습니다. 이미지와 캡션은 Greg Lobanov/Klei Publishing 제공.

UI는 핵심 게임플레이를 지원해야 합니다

제가 무슨 현자라도 된 것처럼 UI 디자인에 대해 더 짜증스럽고 철학적인 생각을 하게 되는 부분이 바로 이 부분입니다.

UI는 플레이어가 게임의 영혼을 들여다볼 수 있는 창이라는 점을 인식하는 것이 정말 중요하다고 생각합니다. 플레이어에게 보여주거나 보여주지 않는 것이 플레이어의 세계관을 완전히 정의합니다. 따라서 플레이어의 주의를 어디에 집중시키고, 특정 정보를 찾기 위해 어디를 바라보길 원하는지 생각하면서 UI를 과도하게 사용하거나 부족하게 사용하는 것에 주의해야 합니다. 과한 UI의 대표적인 예는 게임 내 맵이 게임 월드 자체보다 탐색하기 쉬워서 플레이어가 UI만 탐색하고 멋진 환경 등은 모두 무시하게 되는 경우입니다.

Greg Lobanov/Klei Publishing 이미지 제공.

(제 생각에) UI 남용을 피한 구체적인 사례를 하나 소개하겠습니다. 원더송에는 플레이어가 방문할 수 있는 여러 섬이 있는 섹션이 있는데, 각 섬에는 큰 퍼즐/퀘스트의 일부가 포함되어 있어 플레이어는 섬 사이를 이동해야 합니다. 일반적으로 이 게임은 횡스크롤 방식이기 때문에 섬을 탐색하는 초기 계획은 플레이어가 섬 사이를 빠르게 이동할 수 있는 일종의 퀵 메뉴를 추가하는 것이었습니다.

하지만 막상 구현할 때가 되자 메뉴 아이디어는 원더송과 같은 오버더톱 어드벤처에 어울리지 않는 지루한 아이디어였습니다. 결국 저는 게임에서 볼 수 없었던 특별한 화면을 추가했는데, 이 화면에서는 노래를 부르며 해적선을 조종하는 방식이었죠. 버튼을 누르면 섬의 지도를 빠르게 불러올 수 있지만(게으른 10대라서...), 지도를 보면서 이동할 수는 없으므로 경로를 계획한 다음 노래를 부르며 이동하도록 유도합니다. (또한 캐릭터의 엄지 손가락 아래에 비밀 보너스 섬을 숨겼습니다). 기계적으로 보면 매우 얕고 이동 시간이 많이 추가되는 것은 분명합니다. 하지만 여전히 게임에서 가장 인기 있는 부분 중 하나이며 플레이어들이 자주 언급하는 부분이기도 한데, 이는 부분적으로는 예상을 깨는 방식 때문이라고 생각합니다.

여기서 교훈은 모든 빠른 이동 메뉴를 음악이 흐르는 해적선으로 대체해야 한다는 것이 아니라, 게임 요소에 대한 접근 방식을 고려하고 다른 인터페이스를 언제 어떻게 사용할지 의도적으로 고려하는 것이 중요하다는 것입니다. 빠른 이동 메뉴는 편리하지만 플레이어가 보다 실용적인 방식으로 세계를 바라보도록 유도하고, A 지점에서 B 지점으로 이동하는 단순한 즐거움을 빼앗아 가므로 많은 게임에 적합하지만 모든 게임에 적용되지는 않습니다.

핵심 게임플레이가 UI를 지원합니다

자, 마지막으로 제가 거만하게 말씀드리겠습니다.

UI는 플레이어가 게임의 영혼을 들여다볼 수 있는 창이라고 말씀드렸죠? 개발자에게도 마찬가지입니다. 여러분이 만들고 있는 게임의 혼란스럽고 어두운 내면을 체계적으로 시각적으로 표현하는 것이죠. 그리고 게임에 문제가 생기면 그 문제가 UI에서 먼저 드러나는 경우가 있습니다. 따라서 게임의 기본 시스템을 UI를 지원하는 방식으로 설계하는 것이 도움이 될 수 있습니다(!).

이 아이디어는 인투 더 브리치의 디자인 포스트모템에서 정말 잘 구체화되었으며, 모든 디자이너가 배울 수 있는 부분이라고 생각합니다.

비스티볼을 디자인하는 동안 이 아이디어는 수없이 많이 떠올랐고, 전술이나 RPG 스타일의 게임을 개발해본 디자이너라면 누구나 공감할 수 있을 것입니다. UI의 명확성을 높이기 위해 한 동작에 적용할 수 있는 상태 효과의 개수 등 디자인에 여러 가지 제한을 두었습니다. 가끔 새로운 플레이나 새로운 비스티 게임 메커니즘에 대한 좋은 아이디어가 떠올랐지만, 플레이어에게 쉽게 설명할 방법이 없다는 것을 깨닫고 기획 단계에서 버리는 경우도 있습니다. 분명히 말씀드리지만, 그렇다고 해서 게임 디자인의 품질이 떨어지지는 않습니다. 아이디어가 너무 복잡해서 UI를 통해 전달하기 어렵다는 것은 본질적으로 혼란스럽고 불필요하다는 뜻이죠! UI는 항상 그 실현을 위한 첫 번째 단서일 뿐입니다.

여러 면에서 UI 디자인은 곧 게임 디자인이기도 합니다. 역할이 세분화되어 있는 대규모 팀에서도 원활한 커뮤니케이션을 장려하고 UI 디자이너가 더 광범위한 디자인 결정에 목소리를 낼 수 있도록 하라고 권하고 싶습니다.

읽어주셔서 감사드리며, 멋진 비디오 게임을 만들어 보시기 바랍니다!

---

* 원문:

Deep Dive: Developing a clear and consistent visual language in the UI of Beastieball

 

* 게임 사이트:

Save 10% on Beastieball on Steam