[코타쿠] 어떻게 라스트 오브 어스의 UI를 잘 만들 수 있었는가

어떻게 라스트 오브 어스의 UI를 잘 만들 수 있었는가

by. Alexandria Neonakis

translator. Rasill

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

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

kotaku.com/how-we-made-the-last-of-uss-interface-work-so-well-1571841317

 

에디터 노트: 

다음 초대된 편집자는 너티독 ui 디자이너 알렉산드리아 네오나키스입니다. 

만약 비디오 게임 산업에서 프로로 일하거나 당신의 경험에 대해 쓰고싶다면 jason@kotaku.com에 연락해 주세요.

2012년 11월 내가 너티독에서 시작했을 때, 

스튜디오는 전문 ui 디자이너나 아티스트를 가져본 적이 없었다. 라스트 오브 어스의 개발이 8개월 남아있었고 ui 요소들이 이미 대충 나와있었으나 전반적 허드(head up display) 디자인은 없었고, 많은 것들이 결정되지 않았었다. 이것이 내 책임감이 되었다; 허드의 흐름과 메뉴 시스템들을 생각해내는 것, 실험, 반복, 실행을 위해 게임 디자이너들, 프로그래머들과 함께 일하는 것, 그리고 게임에 미학적으로 맞게 건설되었음을 확신하는 모든 것을 입히는 것.

이 프로젝트는 가장 확실한 타임라인을 가졌다는 점에서 많은 이유로 특별한 도전이었다. 라오어에 헌신하는 두 사람에게 8개월은 뼈대에서 마지막에 이르기까지, 모든 ui가 완성되기에 많은 시간이 아니었다. 라오어 메인 ui 프로그래머 Paul Burg와 나는 모든 요소 위에서 빠르게 디자인하고, 건설하고, 반복하면서 시스템을 찾기위해 일했다. 우리가 최선을 다해 찾은 공정(파이프라인)은 ux 설계서, 구현, 반복과 ui 스타일, 폴리싱(*퀄리티 올리기)이다.

오리지널 디자인

내가 디자인을 시작했을 때 있었던 무기 장전 ui는 라오어 E3 데모와 같았다. 

무기, 탄약, hp와 소모템들은 화면의 좌상단에 나타났다. D패드의 좌우로 모든 무기들을, 상하는 소모템들을 바꿀 수 있었다.

이 시스템은 (언챠티드처럼) 조엘이 새 무기를 집어들 때 현재 장착한 것을 떨어트릴 것 같았다. 이 시스템을 시험해보고 난 뒤, 게임 디자인 팀은 조엘이 그가 찾아낸 모든 무기를 갖고 있는 것이 더 합리적이라고 판단했다. 이것은 플레이어에게 어떤 상황에서건 최고라고 생각하는 무기를 고를 수 있게 함으로서, 플레이를 더 통제할 수 있을 것이다. 또한 이것은 무기 업그레이드 시스템의 실마리가 되었다. 우리는 이 업데이트된 디자인 요구에 기반하여 구현되어 있는 시스템의 대안을 디자인하기 시작했다.

UX 설계 (wireframes)

나는 포토샵에서 기초적인 ux 설계도를 만들었다. 설계도를 디자인할 때에는, ui 그래픽이 어떻게 보여야 할지 집중하는 것으로 괴롭지 않았다. 대신에, 나는 이것이 어떻게 느껴지고 기능하는지에 대해 집중했다. 만약 당신이 ux 설계가 맞다고 느껴진다면 이후 원할 때 이것을 꾸밀 수 있다.

당신이 보통 듣는 ui에 대한 주된 불평은 이것이 어떻게 생겼느냐 보다는, 화면에 너무 많은 것들을 집어넣었거나 혹은, 사용하기에 불편한(투박한) 것이다.

대다수 초기 목업들은 플레이어가 무기를 바꾸거나 업그레이드를 한번에 할 수 있는 메뉴 시스템이었다. 처음에 나는 이 시스템들이 한 화면에 나타날 수 있기를 바랐다. 왜냐하면 내 경우에 무기 업그레이드처럼 추가된 것이 자체 페이지를 갖게 되면, 정말 사용해야만 하는 상황이 오기 전까지 몰랐기 때문이다. 나는 많은 게임들에서 그 상황에 맞딱트리고, 백번쯤 죽은 뒤 생각한다. "내가 뭘 잘못하고 있지?". 그때 나는 인터넷에 가서야 무기를 업그레이드 하지 않았다는 것을 깨닫는다. 업그레이드 화면을 한번 보고 잊어버리기 때문에 일반적으로 벌어지는 일이었다.

그러나 시스템들을 한번에 묶는다는 생각은 내 머리속에 갇혔다. 말했다시피, 사람들은 지나치게 복잡한 ui화면을 좋아하지 않는다. 당신이 목업으로부터 알 수 있듯이, 한 화면에 아주 많은 정보들이 있었다. 그래서 우리는 첫 구현을 위해 시스템들을 분리했다.

구현 (implementation)

다양한 포토샵 목업 작업 앞뒤로 몇주가 지나고, 우리는 다음의 구현을 시도했다:

d패드의 좌우는 플레이어가 장착해놓은 총들을 바꿀 수 있다. 이것은 화면의 밑에서 hp 동그라미와 함께 나타난다.

(상단 무기 카데고리 선택한 후 원형 슬롯에서 원하는 무기로 선택)

플레이어는 무기 슬롯 메뉴 내 이 원형 슬롯에서 원하는 총을 선택할 수 있다. 무기 슬롯은 제조, 수집, 업그레이드와 함께 선택 메뉴의 일부이다.

우리는 총들을 "교체하는 것"과 그것을 만드는 것이 똑같게 느껴지기 원했기 때문에 이곳에 두었다. 현실 세계에서는 사람이 그들이 필요한 것을 얻기 위해 그들의 가방을 벗어야만 한다. 전투 상황에서 이것은 높은 긴장감을 유발할 것이다. 그 긴장감은 우리가 게임을 그럴듯하게 만들려고 목표한 것이다.

그 메뉴에서 d패드의 좌우는 당신이 바꾸길 원하는 슬롯을 선택한다. 그리고 당신은 장착하고 싶은 총을 보기 위해 왼쪽 아날로그 스틱을 이용해야 한다. 안쪽 링은 모든 권총을, 바깥 링은 장총을 보여준다. 그리고 당신이 D페드로 선택한 슬롯은 강조(하이라이트)표시된다.

업그레이드는 탭 다음이다.

반복(Iteration)

 

그 버전을 조금 테스트 해보고 나서 우리는 목차를 바꿨다. 안-바깥 링은 투박하고 느리게 느껴졌다. 그런 것은 우리가 지양했다. 이 버전에선 업그레이드를 다시 무기 전환과 같은 메뉴로 되돌린 것을 볼 수 있다. 세모를 누르면 무기를 업그레이드 하기 위한 서브 메뉴가 나온다. 그러나 이 아이디어도 폐기했다.

이 시스템에서 주된 문제는 당신이 무기를 바꾸기를 원하는 어떤 순간이든 적들의 시야에서 안전하게 사라지는 것이다. 그리고 이런 행동은 세계에 항상 있어왔다. (had all the time in the world to perform these actions) 그러나 테스트에서 전투 중에 총을 바꾸는 것은 더 자주 일어난다는 것이 빠르게 확실해졌다. 예를 들어 당신이 클리커들로 가득채워진 미친 상황에 직면했을 때, 당신은 모든 당신의 총알을 사용하고 빠르게 메뉴로 들어가 총을 바꾼 뒤 빠져나와야 할 것이다.

그것을 위해서 메뉴 선택에 실제로 가야하는 것은 정말 무겁다. 정말 가끔만 순조롭고, 플레이를 좌절스럽게 할 것이다. 불편하게 느껴지고 (또다시) 아주 투박하게 느껴졌다. 이것은 전혀 현실에 있을 듯한 감각이 아니었다. 이 시스템에서의 느낄 좌절감은 이야기로부터 주어진 어느 현실의 그럴듯함보다 컸다.

가끔, 몰입하게 만드는 것을 위해서, 당신은 현실적이거나 그럴듯하게 느껴지게 만드는 것과 직관에 어긋나는 선택을 해야한다. 플레이하는 중에 한번 혹은 두번, 우리가 의도했거나 총을 바꾸는 것이 놀랍다고 느끼며 작동을 하는 것 같다. 그러나 대부분의 시간동안 이것은 그저 형편없이 디자인된 것이었다.

ui를 디자인할 때, 만약 처음 몇 번 동안만 멋졌다면 그건 항상 좋은 것이 아니다. ui 전반은 이후 백번 더 멋지게 느껴져야 한다. 사실, 실제로 익숙해지면 더 낫다고 느껴지고 당신은 ui 모두에 대한 인식을 잃어버리기 시작할 것이다. 만약 이게 투박하거나, 짜증나거나 좌절스럽게 느껴진다면 잘못된 해결방법이다. 디자이너로서 그것이 발생하면, 당신은 다시 모든 것을 시작해야 한다. 어떤 경우에는, 당신은 당신이 강하게 맞다고 느꼈던 아이디어를 버려야만 한다. 나는 업그레이드와 무기 장착이 함께 묶여야 한다는 것에 대해 요지부동이었지만, 테스트와 반복은 내가 틀렸다는 것을 증명했다.

마지막 디자인과 그래픽 입히기 (Final Design and Skinning)

마지막 디자인은 업그레이드를 무기장착으로부터 완벽히 분리하는 것이었다. 그러나 나는 둘을 함께 두는 것이 게임의 인상에 대한 (how it felt to play the game) 타협을 의미한다면, 의미가 없었기 때문에 괜찮았다. 일단 우리는 업그레이드를 빼내고 무기장착을 단순한 좌, 우 버튼과 x버튼(장착)으로 만들었다. 그리고 난 다음 우리는 업그레이드로 무엇을 해야하는지에 대한 문제에 맞딱트렸다.

처음에, 업그레이드는 선택한 메뉴에만 머물렀다. 그들은 그들 자신의 화면에 있었다. 그리고 당신이 무언가 업그레이드를 하기에 충분한 파츠들을 가질 때 상단의 아이콘 옆에 작은 느낌표 표시가 뜨게 된다.

문제는 이것이 이중이라는 것이다. 첫째, 이건 업그레이드 메뉴가 화면에서 숨겨져 있음으로서, 자주 사용하라는 안내가 표시되지 않는(you're not being prompted) 처음의 문제를 해결할 수 없었다. 둘째, 더 크고 좋은 업그레이드를 위해 파츠를 저장하는 대신 처음 보이는 업그레이드를 그냥 해버릴 수 있었다. 자주 테스터들은 필요한 부품이 적은 몇개의 총들만 업그레이드했다.

...그래서 더 반복했다!

 

게임 디자이너들은 업그레이드 벤치 형태에서 두 문제들의 해결책을 찾아냈다.(업그레이드를 유도하고, 다양한 업그레이드를 할 수 있게 하는) 

이 벤치는 당신이 무기를 업그레이드할 수 있는 특정 지점이다. 플레이어는 파츠들을 모을 수 있고 무엇을 얻었는지 알 수 있지만, 벤치에 도달하기 전까지는 얼마나 가졌는지 혹은 그 파츠들로 무엇을 할 수 있는지 모른다.

벤치에서는 플레이어들은 그들의 모든 옵션을 살피고, 새 벤치에 도달할 때까지 계획을 세우고, 업그레이드를 실험할 수 있다. 이것은 좀 더 다양한 플레이 스타일을 이끌어냈다. 사람들은 가장 싼 업그레이드를 하지 않고, 가장 즐겨 사용하는 무기를 업그레이드했다. 극소수의 사람들만 벤치를 지나쳤다; 많은 사람들은 실제로 시간을 들여 시스템을 사용했다. 두 문제는 해결됬고 모두 행복해졌다.

기술적 이슈들(The Technical Issues)

기술적 설계는 그 스스로가 도전이었다. TLOU(The Last Of Us) 안의 모든 ui는 스크립트를 통해 통제되었다. 우리에게는 스케일폼, 유니티나 UDK와 같은, 아티스트가 참여할 수 있는 비주얼 시스템이 없었기 때문에, 에셋들을 시각적으로 배치한 다음 프로그래머나 스크립터에게 전달했다.

나는 별개의 요소들을 시스템에서 분리하고, 그것을 내부 텍스쳐 툴에 집어넣었다. 그리고 그것을 큰 통합 마야 hud 파일에 넣었다. 그 후에 폴이 모든것을 세팅하고, 나에게 스크립트 파일의 갈고리를 주었다. 나는 스크립트 파일에서 X와 Y 좌표를 바꿔서 화면의 요소들을 옮길 수 있었다. 일단 모든 것이 세팅되고 난 후, 나는 텍스쳐 툴이나 마야 파일 안에서 간단히 그것을 바꾸거나 경로를 바꿔서 에셋들을 교체할 수 있었다.

움직이는 이동은 모두 하드코딩되었다. 나는 어떻게 움직이는지를 플래시 목업으로 전달하거나, 근접하게 될 때까지 Paul이나 다른 프로그래머들에게 말했다. 이런 제약 때문에 좋고 부드러운 이동은 어려웠다. 특히 프로젝트의 완성을 목전에 남겨놓았을 때 더했다.

이것은 지루하고 그 당시엔 아주 좌절스러웠지만, 우리가 무엇인가를 디자인하는 것에 대해 창의적이어야 한다는 것을 의미했다. 이 한계는 우리의 hud 요소가 아주 단순해지는 결과를 낳았다. 우리는 화면에 아무것도 없이 떠날 수 있을 때, 요소를 사용하는 것을 완전히 피했다. 그리고 우리가 의식적으로 가능한 한 모든 것들을 단순하게 유지하려 노력했다.

ui는 최고를 위해 잘 작동했다. 솔직히 말하면 아무도 ui를 좋아하지 않았기 때문에, 우리는 아마도 우리의 입맛대로 동작하는, 아주 미니멀한 ui로 끝냈다.

ui 디자이너들은 이것을 사랑한다; 당신이 당신이 봤던 앱 안에서 ui가 얼마나 부드럽고 매끄러운지에 대해 사랑스럽게 이야기할 때, 세상의 나머지는 당신을 이상하게 볼 것이다.

(모뉴먼트 벨리.. 그 ui는 완벽합니다, 게임도 완벽하고.. 모두 모뉴먼트 벨리를 플레이하세요! 이건 완벽해요.)

개요와 다음 정보 (Overview and Next Gen)

저것은 내가 시작부터 완성까지 했던 ui 중 하나의 개요다. 우리는 주로 모든 다른 요소들도 같은 시스템을 사용했다.: 설계, 구현, 실험, 반복과 그래픽 입히기.

프로그래밍이 한 요소를 실행하기 위해 진행되는 동안, 나는 다른 주제로 옮기거나 테스트 결과에 근거하여 새로운 설계를 논의하거나, 혹은 그들이 이미 한번 구현한 것을 옮겼다. 우리는 빠르고 효과적으로 모든 ui 요소와 게임의 메뉴에 이 시스템을 모두 사용할 수 있었다.

차세대 콘솔로 발전해나가면서, 우리는 아직도 라스트 오브 어스의 마지막 달들 동안 건설한 이 공정을 이용한다. 우리는 더 많이 반복하고 새로운 것을 시도하고 더 나은 툴을 시험해야 한다. 그러나 빠른 프로토타이핑을 위한 기본 공정은 우리에게 유용하다. 우리는 전체 개발 사이클을 통해 공정을 개선해 나갈 것이다.(we'll improve on that with a full development cycle,) 그건 우리가 게임의 컨셉을 밀어붙일 수 있게 돕고, 플레이어들에게 필요한 정보를 잘 전달할 수 있는지 실험하게 할 것이다.

*pipeline(공정); 효율적인 ui 진행 과정

*element(요소)는 피쳐와 동일한 개념인 듯함

*implement는 클라이언트 구현

-

알렉산드리아 네오나키스는 너티독의 ui 디자이너입니다. 트위터의 @beavs에서 그녀를 찾을 수 있습니다.