도구

게임 전체에 걸친 목업을 작성해야 했습니다. 모바일게임은 UI가 아주 많이 필요해 목업을 많이 그려야 합니다. 평소 개발에는 UI 대부분을 관통하는 규칙을 정한 다음 이에 맞춰 마일스톤 기간마다 구현할 기능 목업을 별도로 그리곤 했습니다. 이번에는 게임 전체 목업을 한번에 그려내야 했습니다. 목업 각각의 섬세함과 그들이 함께 게임에서 동작할 때 여러 UI를 관통하는 동작이 얼마나 유연하게 동작하는지보다 각 화면에 필요한 기능과 그들 사이의 연결을 검증해야 했습니다. 말이 길었지만 결국 짧은 시간 안에 아주 많은 목업 화면을 그려내야 하는 상황이었다는 이야기입니다.

작업을 위해 두 가지 요구사항을 정의했습니다. 게임 전체를 목업으로 그려내려면 게임 전체 기능을 파악하고 있어야 합니다. 스폰서가 요구한 기능 대부분은 이미 다른 게임을 통해 공개된 기능과 큰 차이가 없었으므로 요구사항이 분명하지 않거나 저를 포함한 작업자들이 이를 충분히 파악하지 못하더라도 큰 지장이 없었습니다. 문제상황과 만날 때 기능을 정의하면 됐습니다. 다른 요구사항 하나는 올바른 도구입니다. 많은 그림을 그려내야 하는데 이 그림의 특징은 재사용된 컴포넌트가 많음과 동시에 그림을 이루는 각 컴포넌트가 현재 기능의 상태에 따라 조금씩 다른 모양이라는 점입니다. 이를 전통적인 드로잉 도구를 사용해 그리면 같은 부분을 서로 다른 여러 가지 상태로 그려내야 했습니다.

앞쪽 요구사항은 걱정거리가 아니었습니다. 모르면 그때그때 찾아보고 정의하면 됐습니다. 충분히 결정되지 않았다면 바로 뒤를 돌아보고 이야기하면 됩니다. 그림을 그리는데 필요한 시스템과 주요 결정사항은 신경 쓰이지 않았습니다. 다만 도구에는 문제가 있었습니다. 여느 회사들은 게임디자이너가 출근하면 덜렁 마이크로소프트 오피스만 설치해줍니다. 마치 이 도구만으로 업무를 진행할 수 있을 거라고 믿은 듯 합니다. 착각의 순간은 이내 지나가고 형상관리도구부터 시작해서 온갖 유틸리티가 필요해집니다. 게임디자이너에게 값비싼 어도비 포토샵을 설치해줘야 하는 이유를 공포 장르에 신파를 더한 단편소설로 기안서를 채우기도 하고 파워포인트와 비지오의 용도를 구분하지 못하는 기안반려에 눈물없이는 읽기 힘든 메일을 작성하기도 했습니다. 문제였습니다. 이 설득을 팀 내부를 향해 해야 했기 때문입니다.

짧은 기간 안에 많은 UI 목업을 서로 다른 사람들이 나눠 그려내야 했고 우리가 가진 그림 그릴 도구라곤 파워포인트, 비지오 스탠다드와 그림판 뿐이었습니다. 사실은 이전부터 회사에 발사믹 와이어프레임을 한 카피 요청해서 받아 사용하고 있었는데 이번에는 다른 스탭들에게 업무를 분배하면서 스탭들이 자신에게 익숙한 도구 - 파워포인트 - 를 사용하도록 놔두기에는 그 낮은 생산성을 방치할 시간이 부족했습니다. 일단 필요한 수량만큼 기안을 올려놓고 평가판을 설치한 다음 설명을 시작했습니다.

이번에는 상황이 이렇게 됐으니 UI 목업을 작성하는데 집중한 전용 소프트웨어를 사용하기 시작할 것이고 적어도 이번 업무에는 파워포인트와 비지오는 사용 금지라고요. 몇몇 질문을 받았는데 질문에는 파워포인트나 비지오가 있는데 왜 또 다른 드로잉 소프트웨어를 사용해야 하느냐는 내용도 있었습니다. 이 두 가지 도구 모두 그림을 그릴 수는 있습니다만 UI를 여러 장 반복해서 그려내는데는 문제가 많았습니다. 먼저 파워포인트는 UI 컴포넌트를 다운로드받아 사용할 수는 있지만 게임 UI가 요구하는 컴포넌트와 주로 윈도우 OS를 기준으로 그려진 컴포넌트는 생김새가 미묘하게 달랐습니다. 많이 고쳐 써야 했는데 파워포인트는 기존 컴포넌트를 수정하기 쉽지 않았습니다. 드로잉의 자유도는 비교적 높은 편이지만 이들을 변경되는 UI에 맞춰 그룹핑하고 상태에 따라 변경될 부분만 분리해 색상이나 형태를 변경시켜 재사용하기는 어려웠습니다. 특히 한번 작성한 드로잉을 수정하려면 드로잉의 전체 구조를 파악하고 여러 겹으로 쌓인 구조를 파악한 다음 수정할 조각을 찾아내야 했는데 애초에 파워포인트는 그러라고 만든 도구가 아니었습니다. 작업 공간은 좁고 여러 겹으로 쌓인 조각들을 관리할 인터페이스를 제공하지도 않았습니다.

이 설명을 위해 언리얼에디터의 UI 위젯의 계층구조 뷰를 예로 들었습니다. 정면에서 볼 때 복잡한 인터페이스라도 수정할 조각은 계층구조 뷰에서 찾아낼 수 있습니다. 하지만 파워포인트에서 복잡한 인터페이스를 이루는 조각 하나를 찾아내려면 시간이 많이 필요했습니다. 비지오는 그나마 나았습니다. 비지오는 상위 트림으로 갈수록 드로잉 템플릿을 더 많이 제공하는데 소프트웨어 개발로 분류된 템플릿에는 UI 제작 템플릿도 있었습니다. 다만 회사에서 받은 버전은 스탠다드 버전이었고 여기에는 인터페이스 템플릿이 없었습니다. 기존에 인터페이스 템플릿으로 작성한 문서를 수정할 수는 있었지만 각 조각의 상태를 변경할 수는 없었고 무엇보다 이런 사용은 라이선스 위반일 가능성이 있었습니다. 발사믹 와이어프레임은 언리얼에디터처럼 계층구조를 제공하지는 않지만 사용자가 논리적인 구조 단위로 신경써서 그룹핑하지 않아도 이미 목업을 작성하는데 사용한 컴포넌트가 한 덩어리로 만들어져 있어 계층구조가 극도로 단순합니다.

상황을 설명한 끝에 새 도구를 사용하기 시작했고 다행히도 새 도구에 빠르게 적응했습니다. 이번에 사용한 발사믹 와이어프레임은 사실 제가 지난 프로젝트 몇 개에 사용하고 있어 이번 문제를 잘 해결할 수 있을 거라고 예상했습니다. 이 도구의 특징은 드로잉 도구 치고는 자유도가 낮은 데 있습니다. 하다못해 드로잉을 회전시킬 수 조차 없어 가로선과 세로선을 그릴 때 서로 다른 템플릿을 사용해야 합니다. 대신 자유 컴포넌트에 상태를 설정함에 따라 컴포넌트의 외형을상황에 맞게 바로 바꿀 수 있습니다. 가령 파워포인트나 비지오에서 요즘 모바일 게임에 죽도록 많이 사용하는 탭 인터페이스를 그린 다음 서로 다른 탭이 하이라이트 된 상태를 만들어내려면 상당히 복잡하고 관리하기도 어렵지만 이 도구에서는 드랍다운박스에서 하이라이트할 탭 이름만 선택하면 상태가 바뀌고 더이상 신경쓸 일이 없었습니다.

그림을 그리는 기능만 놓고 생각하면 분명 이전에 오랫동안 사용해왔던 파워포인트와 새로운 도구 사이에 별 차이를 못 느낄 수 있습니다. 하지만 상황과 목적에 최적화된 도구는 생산성을 올리는데 도움을 줍니다. 하이라이트 된 탭을 그리느라 시간을 쓰는 대신 탭 자체를 넣은 시안과 뺀 시안 양쪽 모두를 만들어 이미 공유하고 이미 협의를 끝낼 수 있습니다. 회사는 이런 도구를 직접 알아보고 제공해주지는 않기 때문에 각자가 상황마다 더 적당한 도구가 있는지 찾아보고 실험해보고 업무에 적용해본 다음 회사에 적극적으로 요구해야 합니다.