왜 내 목업은 설득력이 낮을까

시간이 지나다 보니 요즘에는 본업 이외에도 교육 업무를 할 일이 늘어났습니다. 여전히 제 코가 늘어져 있어 각을 잡고 따로 시간을 내서 교육할 시간을 마련하기는 쉽지 않지만 비교적 간단한 팁으로 개선할 수 있을 것 같아 보일 때 간단한 이야기를 짧게 하고 있습니다. 이러는 과정에서 개인적으로는 제가 별 생각 없이 수행하던 업무 스타일을 다시 한 번 정리할 기회를 얻고 있습니다. 표면상으로는 제가 함께 일하는 스탭들의 업무스타일에 조건하는 모양이지만 실상 제가 제 스스로의 스타일을 정의하는 과정입니다.

최근에 게임에 들어갈 시스템 하나를 시스템디자이너 한 분께 맡겨 진행하고 있었는데 초반 진행이 더뎌 보였습니다. 종종 이전에 만들어진 기반 없이 개발해야 하는 신규 시스템 개발을 진행할 때 기존 시스템에 의존성이 없다는 점이 때로는 장점이 되기도 하지만 이 상황에서는 주니어 디자이너가 감을 잡기 어려운 상황을 만들고 있었습니다. 정확히는 인터페이스 디자인을 제안하는 단계에서 리드그룹이 의사결정을 하게 만드는데 어려움을 겪고 있었는데 작업을 반복해도 리드그룹의 의사결정을 진행시키지 못하고 있었습니다.

일단 지금까지 정의한 요구사항과 논의에 사용된 목업을 인터페이스 디자이너들에게 브리핑하고 시안을 요청하고 그 사이에 인터페이스에 독립적으로 동작하는 시스템 설계를 진행하도록 가이드한 다음 왜 리드그룹이 이 상황에 의사결정을 미루는지를 설명했습니다. 원인은 여러 가지가 있었지만 이 상황에서 제가 주목한 것은 담당 시스템디자이너가 제안한 목업에 설득력이 부족했기 때문입니다.

인터페이스 목업은 게임 시스템을 개발하는데 훌륭한 의사소통 방법입니다. 인터페이스 디자이너나 프로그래머들도 글자와 표로 가득한 기획서에서 그림 부분, 특히 인터페이스 목업을 맨 먼저 보고 전체 동작을 이해하기 시작합니다. 문서의 나머지 부분은 일단 작업에 착수한 다음 자잘한 문제에 부딪치기 시작할 때 찾아보기 시작하고요. 여기에 가장 중요한 역할을 하는 그림이 바로 인터페이스 목업입니다. 화면의 구성요소와 이들의 동작이 바교적 간단한 그림에 설명되어 있고 특히 현대의 모바일 게임은 동작 대부분을 이 인터페이스 목업으로 설명할 수 있습니다. 인터페이스 목업은 기획서의 상당 부분을 대체할 수 있을 뿐 아니라 그 자체만으로도 낮은 비용으로 프로토타이핑을 대신할 수 있으며 의사결정 이전에 인터페이스 시안을 만들며 단위 시스템의 프로토타이핑 비용을 올리는 상황을 줄일 수 있습니다. 목업을 잘 그리면 설계도 의사결정도 시안개발도 더 빨리, 더 적당한 시점에 할 수 있게 됩니다.

하지만 시스템디자이너인 우리들이 종종 듣는 말은 “잘 모르겠다”일 겁니다. 아니. 기획서에 필요한 요구사항을 다 언급하고 구체적으로 이 모든 구성요소들의 동작과 게임의 나머지 부분과 상호작용하는 방법을 언급했을 뿐 아니라 내가 보기에는 거의 이대로 만들어질 인터페이스 목업을 기획서에 포함했는데 어째서 이걸 보고 모르겠다고 이야기하는 걸까요. 내가 작성한 인터페이스 목업의 설득력이 떨어지기 때문입니다. 원인은 여러 가지가 있고 제가 본 몇 가지 이유를 적어봅니다.

인터페이스 목업의 설득력이 떨어지는 이유.

구성요소 간의 비율이 안 맞는다.
선과 면을 구분 없이 사용한다.
실제 구성요소를 모두 포함하지 않는다.
구성요소를 그룹핑하지 않는다.
텍스트와 이미지가 안정감 있게 배치되어 있지 않다.

아무리 목업이라고 하더라도 구성요소들은 실제 인터페이스 비율을 따라야 합니다. 종종 파워포인트로 단지 도형을 나열한 수준의 그림을 포함한 문서를 받을 때가 있습니다. 사실 신입 수준이라면, 또 그렇게 복잡하거나 지금까지 개발한 게임에 의존성이 적다면 그냥 넘어가기도 합니다만 그렇지 않을 때가 더 많습니다. 목업이 대강 그린 네모들의 집합 이상의 의미를 가지기 위한 첫번째 방법은 모든 구성요소가 실제 화면상의 비율과 일치해야 한다는 겁니다. 특히 모바일게임에서는 각 구성요소와 화면비율이 중요합니다. 목업 단계에서 이 구성요소들이 실제 디바이스에 표시될 때 너무 크거나 너무 작을 수 있는데 이를 미리 파악할 수 있어야 합니다. 또 완전히 바닥부터 개발하는게 아닌 이상 이미 개발된 게임의 화면 구성요소의 실제 크기와 비율이 같아야 합니다. 가령 GNB를 실제보다 훨씬 두껍거나 얇게 그리거나 내비게이션 버튼을 너무 작게 그린 문서를 만나곤 하는데 이건 이렇게 그렸을 때 문제를 지적하기에 앞서 일을 이렇게 하면 안됩니다. 기획서는 한편으로 디자이너가 이 주제를 대하는 자세를 보이는 방법이며 협업할 스탭들에게 인상을 만들어 전체적인 생산성에 영향을 끼치게 됩니다.

선과 면을 구분해 사용해야 합니다. 자주 만나는 실수는 모든 구성요소를 선만으로 표현하는 겁니다. GNB도 선으로 그린 네모, 씬 영역도 검은 선에 흰 배경인 네모, 탭, 리스트뷰, 그룹박스, 텍스트박스, 이미지, 버튼 그룹 등 모든 것을 흰 배경과 검은 선으로 구성된 네모만으로 그려놓습니다. 구성요소 각각을 그릴 때는 별 문제가 없습니다. 하지만 이들을 한 곳에 모아놓으면 미로처럼 보이며 이 구성요소간들이 어디서 어디까지 차지하는지, 어느 부분이 스크롤되고 버튼을 누르면 어디가 바뀌어야 하는지를 파악하기 어렵게 됩니다. 사실 인터페이스 구성요소 중에 선으로 이루어진 요소는 사실 없거나 거의 없습니다. 위에 짧게 나열한 버튼, 리스트박스, 패널 등은 모두 면입니다. 면은 선으로도 표현할 수 있지만 네모 안에 색상을 채워넣어 더 쉽게 인지하게 만들 수 있습니다. 특히 여러 면을 쌓아야 할 경우 각 면에 명도 변화를 주면 화면의 구성을 훨씬 쉽게 파악할 수 있습니다.

실제 구성요소를 모두 포함해야 합니다. 이미 어느 정도 개발된 게임에 새로운 기능을 추가할 때 이미 이 기능은 게임의 다른 부분에 사용되고 있으니 생략할 때가 있는데 시간 상 어쩔 수 없는 경우를 제외하곤 좋은 습관이 아닙니다. 게임 전체의 인터페이스는 명시적이지 않더라도 어느 정도 규칙이 있습니다. 가령 비용 소모를 확정하는 팝업에 비용의 화폐단위가 하나라면 확인버튼 위에 화폐단위의 아이콘과 금액을 표시하고 화폐단위가 둘 이상이라면 확인버튼에는 텍스트만 나타나고 버튼 위쪽에 모든 화폐단위의 아이콘과 금액을 표시해야 한다든지 리스트뷰에 표시될 각 리스트아이템은 항상 왼편에 아이콘이 있고 오른쪽 위에 레이블, 오른쪽 아래에 이 리스트아이템에 대한 핵심정보를 표시하는 식입니다. 이런 디테일은 이미 게임 상에 통용되고 있으므로 생략할 수 있기는 합니다. 화폐단위가 하나일 때 확인 버튼에 굳이 화폐단위 표시를 그려넣지 않아도 기존 비용 버튼 위젯을 복제해서 만들 겁니다. 하지만 이런 디테일을 시스템디자이너가 먼저 챙기지 않으면 실제 구현 단계에서 문제가 더 자주 생길 겁니다. 디테일을 챙기는데 시간이 그리 더 오래 걸리지 않습니다. 실제 화면에 표시될 모든 구성요소를 정확히 표시해야 합니다.

인터페이스의 모든 구성요소는 한 계층구조 안에 표시됩니다. 언리얼에디터에서 복잡한 인터페이스 위젯을 열어보면 어느 인터페이스든 하나의 부모에서 시작해 트리 모양으로 자식 구성요소들이 계층을 이루고 있습니다. 씬 하위에 캔버스 패널이 있고 그 하위에 그룹이 있고 그 하위에 위젯 스위처와 캔버스패널과 이미지패널과 텍스트박스와 버튼과 이미지가 누군가에게 숨기고 싶은 파일을 보관한 깊고 싶은 폴더 구조마냥 하위로 나열됩니다. 그리고 이들은 이 구조에 따라 상위 구성요소를 제어하면 하위 구성요소가 함께 영향을 받습니다. 왼편의 리스트박스에서 리스트아이템을 터치하면 오른편의 패널 전체가 바뀌며 리스트아이템에 관한 정보를 표시합니다. 또 옵션 버튼을 터치하면 옵션 버튼 하단의 이미지가 바뀌며 변경한 옵션에 대한 정보를 표시합니다. 이렇게 계층으로 구성된 인터페이스 구성요소는 위에서 이야기한 면으로 표현할 수 있습니다. 인터페이스 목업을 만들 때 이들이 위젯 에디터에서 어떤 식으로 구성될지를 생각해보고 계층구조에 따라 레이어를 지킨 서로 다른 색상의 면으로 주의깊게 둘러싸 놓아야 합니다. 굳이 텍스트로 설명하지 않아도 인터페이스를 조작할 때 화면의 어느 부분이 변경될지, 어느 부분을 별도 위젯으로 분리해서 만들어야 할지 바로 알 수 있습니다.

마지막으로 각 면에 텍스트와 이미지를 올려놓을 때 디자인 상의 안정감을 고려해야 합니다. 간단합니다. 면 위에 텍스트나 이미지를 배치할 때는 배치한 나머지 공간이 최대한 서로 넓은 면으로 연결되어 있어야 합니다. 실제 면 위에 텍스트가 이대로 배치되지 않을 수도 있습니다. 하지만 면의 남은 공간이 최대한 넓게 연결되어 있으면 시각적으로 안정감을 주고 완성된 형태를 더 쉽게 상상할 수 있습니다. 면에 이미지를 넣을 때는 이미지에 배경이 없는 아이콘 형태라면 면의 중간에 있어도 괜찮지만 이미지의 배경이 있을 때는 이미지의 비율을 너무 많이 망가뜨리지 않는 범위 안에서 면에 이미지를 가득 채워 이미지 자체가 면이 되도록 해야 합니다. 배경이 있는 이미지를 아이콘인 것 마냥 면 위에 올려놓으면 이미지 자체를 새로운 면으로 인식해 인터페이스를 더 복잡하게 받아들일 뿐 아니라 목업 자체가 완성되지 않은 인상을 줍니다. 위에서 모든 구성요소의 비율을 정확하게 맞춰야 한다는 이야기를 했는데 이미지도 마찬가지입니다. 면 위의 어정쩡한 위치에 올려놓고 사람들이 이걸 보고 올바른 상상을 할 거라고 기대해선 안됩니다.

결론. 목업을 대충 그리지 마시오. 목업을 잘 그리면 “잘 모르겠으니 좀 더 진행해봅시다”같은 어정쩡한 진행을 줄일 수 있고 내 다음에 일할 스탭들의 실수를 줄일 수 있습니다. 끝.