...
하지만 시스템디자이너인 우리들이 종종 듣는 말은 “잘 모르겠다”일 겁니다. 아니. 기획서에 필요한 요구사항을 다 언급하고 구체적으로 이 모든 구성요소들의 동작과 게임의 나머지 부분과 상호작용하는 방법을 언급했을 뿐 아니라 내가 보기에는 거의 이대로 만들어질 인터페이스 목업을 기획서에 포함했는데 어째서 이걸 보고 모르겠다고 이야기하는 걸까요. 내가 작성한 인터페이스 목업의 설득력이 떨어지기 때문입니다. 원인은 여러 가지가 있고 제가 본 몇 가지 이유를 적어봅니다.
...
아무리 목업이라고 하더라도 구성요소들은 실제 인터페이스 비율을 따라야 합니다. 종종 파워포인트로 단지 도형을 나열한 수준의 그림을 포함한 문서를 받을 때가 있습니다. 사실 신입 수준이라면, 또 그렇게 복잡하거나 지금까지 개발한 게임에 의존성이 적다면 그냥 넘어가기도 합니다만 그렇지 않을 때가 더 많습니다. 목업이 대강 그린 네모들의 집합 이상의 의미를 가지기 위한 첫번째 방법은 모든 구성요소가 실제 화면상의 비율과 일치해야 한다는 겁니다. 특히 모바일게임에서는 각 구성요소와 화면비율이 중요합니다. 목업 단계에서 이 구성요소들이 실제 디바이스에 표시될 때 너무 크거나 너무 작을 수 있는데 이를 미리 파악할 수 있어야 합니다. 또 완전히 바닥부터 개발하는게 아닌 이상 이미 개발된 게임의 화면 구성요소의 실제 크기와 비율이 같아야 합니다. 가령 GNB를 실제보다 훨씬 두껍거나 얇게 그리거나 내비게이션 버튼을 너무 얇게 작게 그린 문서를 만나곤 하는데 이건 이렇게 그렸을 때 문제를 지적하기에 앞서 일을 이렇게 하면 안됩니다. 기획서는 한편으로 디자이너가 이 주제를 대하는 자세를 보이는 방법이며 협업할 스탭들에게 인상을 만들어 전체적인 생산성에 영향을 끼치게 됩니다.
선과 면을 구분해 사용해야 합니다. 자주 만나는 실수는 모든 구성요소를 선만으로 표현하는 겁니다. GNB도 선으로 그린 네모, 씬 영역도 검은 선에 흰 배경인 네모, 탭, 리스트뷰, 그룹박스, 텍스트박스, 이미지, 버튼 그룹 등 모든 것을 흰 배경과 검은 선으로 구성된 네모만으로 그려놓습니다. 구성요소 각각을 그릴 때는 별 문제가 없습니다. 하지만 이들을 한 곳에 모아놓으면 무슨 미로처럼 보이며 이 구성요소간들이 어디서 어디까지 차지하는지, 어느 부분이 스크롤되고 버튼을 누르면 어디가 바뀌어야 하는지를 파악하기 어렵게 됩니다. 사실 인터페이스 구성요소 중에 선으로 이루어진 요소는 사실 없거나 거의 없습니다. 위에 짧게 나열한 버튼, 리스트박스, 패널 등은 모두 면입니다. 면은 선으로도 표현할 수 있지만 네모 안에 색상을 채워넣어 더 쉽게 인지하게 만들 수 있습니다. 특히 여러 면을 쌓아야 할 경우 각 면에 명도 변화를 주면 화면의 구성을 훨씬 쉽게 파악할 수 있습니다.
...