게임 UI에서 프로토타이핑은 매우 중요한 과정입니다. 솔직히 말해서 80%는 프로토타이핑으로 완성된다고 해도 과언이 아닙니다.

프로토타이핑이란 프로그램을 사용해서 간단하게 게임의 흐름과 기능을 초기 단계에서 확인할 수 있는 상태로 만드는 것입니다. UI는 실제로 사용해보기 전에는 조작했을 때 느낌을 상상하기 어렵고 기능은 물론 디자인 측면에서도 손이 많이 가는 영역입니다.

따라서 바로 화면 디자인을 시작하기보다는 필요한 모든 화면과 기능을 먼저 파악하거나 전체 흐름을 감지하고 프로토타이핑을 통해 최종 게임 흐름의 이미지를 팀 전체에 통일해두는 것이 좋습니다. 이렇게 하면 이후 디자인에서 구현 과정까지 손이 덜 가고 품질을 높이는 데 집중할 수 있습니다. 프로토타이핑에는 특히 기획자의 협력이 반드시 필요합니다.

시행착오를 반복하면서 더욱 쉽게 사용할 수 있는 UI를 만들어보세요!

 

 

✔️도구 선택

먼저 프로토타이핑을 진행할 도구를 정합니다. 전용 프로그램을 사용해도 좋고 익숙한 기존 프로그램이나 실제 개발을 진행하는 게임 엔진에서 진행해도 상관없습니다. 중요한 것은 ‘이렇게 하고 싶다고 생각한 것을 즉시 만들어서 검토할 수 있는가?’라는 점입니다. UI 프로토타이핑 도구는 크게 두 가지 종류가 있습니다.

● 트랜지션 타입

● 인터랙션 타입

트랜지션 타입은 대략적인 조작 흐름이나 화면 전환을 확인하는 데 특화된 도구입니다. 어도비 XD나 Prott 같은 제품이 이에 해당합니다. 인터랙션 타입은 애니메이션 등을 포함한 세부적인 연출을 확인하는 데 특화된 도구입니다. 오리가미 스튜디오Origami Studio나 UXPin 같은 제품이 이에 해당합니다. 최근에는 두 타입의 장점을 모은 복합형 도구도 있으며, 프로젝트 특성에 맞춰 선택하면 좋을 것입니다.

도구를 고를 때는 시행착오를 빠르게 반복할 수 있는지도 중요한 포인트입니다. 특히 스마트폰용 게임 등은 권장 환경 단말기에서 ‘터치 조작을 쉽게 할 수 있는 레이아웃인가?’와 같은 점을 확인해야 합니다. 이런 프로젝트는 ‘PC의 프로토타이핑 도구에서 수정 → 스마트폰에서 실시간으로 확인’하는 작업이 가능한 도구를 선택하는 것을 권장합니다.

✅기획 요구사항 파악

기획이라고 하면 ‘기획 파트의 일이잖아요?’라고만 생각하고 있지는 않습니까? 프로토타이핑을 할 때는 기획 의도를 이해하고 요구사항을 정확히 파악하기 위해 반드시 UI 파트도 기획에 참여해야 합니다. 이 부분을 간과하면 나중에 UI를 재작업하는 뼈아픈 일이발생할 가능성이 높습니다. 기획 포인트는 크게 세 가지를 들 수 있습니다.

● 목적

● 기능 정의

● 표시할 요소

위 항목들에 관해 순서대로 살펴봅니다.

✔️ 목적

먼저 가장 중요한 것은 그 기획의 목적입니다. 게임 화면이나 게임 흐름, UI를 통해 달성하고 싶은 것, 고객에게 제공하고 싶은 것이 무엇인가를 생각해 말로 나타내봅니다.

단순히 기능을 제공하고 싶은지, 게임 실행 시 쾌적함을 향상하고 싶은지 혹은 감정의 동요를 일으키고 싶은지 등 기획에는 다양한 목적이 존재합니다. 이를 제대로 이해하지 못하면 UI 디자인을 할 때 잘못 접근하게 됩니다. 예를 들어 이벤트 장면에서 이용자를 세계관이나 시나리오에 몰입시키는 것이 목적임에도 불구하고 이를 방해하는 임팩트가 있는 텔롭 UI를 표시하는 등의 미스 매치가 발생합니다.

이를 방지하기 위해서라도 기획 구성원들과 목적과 의도를 충분히 논의하고 그에 따른 접근 방식을 제안할 수 있도록 노력해야 합니다.

✔️ 기능 정의

기획 목적을 확인했다면 다음으로 그 목적을 달성하기 위한 기능이 과하거나 부족함 없이 정의되어 있는가를 확인합니다. 예를 들어 소지 아이템 화면의 목적이 소유하고 있는 아이템을 사용하는 것이라면 다음과 같은 기능을 정의해야 합니다.

● 소지 아이템을 목록으로 표시하는 기능

● 사용할 아이템을 선택하는 기능

● 정말로 사용할지 확인하는 기능

● 사용한 결과를 표시하는 기능

이렇게 기능을 파악할 수 있다면 그에 필요한 UI도 자연스럽게 떠오릅니다. 소지 아이템을 목록으로 표시한다면 아이템 목록 화면이, 정말로 아이템을 사용할지 확인한다면 확인을 묻는 대화창이 필요합니다. 추가로 원하는 기능도 떠오를 것입니다. 예를 들어 아이템별 잔여 수량을 확인하는 기능이나 아이템을 정렬하는 기능이 있다면 더 쉽게 사용할 수 있지

않을까요? 자신이 이용자의 입장이 되어 기능 목록을 살펴보고 플레이하고 있는 상태를 상상해봅니다.

기능은 나중에 추가, 삭제를 반복하면 그와 연계된 UI에도 영향을 미치기 때문에 디자인이 어긋날 우려가 있습니다. 목적을 과하거나 부족하지 않게 충족시키기 위한 기능이 무엇인지 꼼꼼하게 검토하고 기획자, 디자이너, 엔지니어가 모두 한 뜻을 모으는 것이 중요합니다.

✔️ 표시할 요소

목적과 기능을 정리했다면 UI에 표시할 요소를 정합니다. 각각의 개수나 정보의 우선순위에 대해서도 기획자와 조율합니다. 예를 들어 다음과 같이 현재 상태를 나타내는 UI 구성요소를 살펴보겠습니다.

● 캐릭터 이미지

● 캐릭터 이름

● 캐릭터 레벨

● 최대/현재 체력

● 최대/현재 스킬 포인트

이렇게 먼저 텍스트 기반으로 간단하게 요소를 적어보는 것을 권장합니다. 처음부터 디자인 요소를 생각하면 단계가 뒤죽박죽되어 엉뚱한 방향으로 흘러갈 가능성이 있습니다.

요소를 다 적었다면 이제 각 요소의 수치를 확인합니다. 예를 들어 캐릭터 이름이 최대 몇글자인지, 체력의 최솟값과 최댓값은 몇인지, 체력 단위는 정수인지 소수인지, 레벨은 최대 자릿수에 맞춰서 0으로 표시할 것인지 생략할 것인지 등을 확인합니다. 디자인을 진행할 때 고려해야 할 점이 보일 것입니다.

또한 UI 요소의 우선순위도 조율해야 합니다. 이 UI 안에서 가장 우선순위가 높은 요소부터 낮은 요소를 순서대로 배열합니다. 요소에 따라 병렬로 다루어야 할 때는 같은 순위로 정렬해둡니다.

✔️ 기획 요구사항 문서 예시

지금까지 정리한 기획 요구사항을 문서로 정리합니다. 정식 문서는 기획 파트에서 작성할 것이므로 UI 담당 파트는 프로토타이핑에 필요한 항목을 메모해두는 정도면 됩니다.

 

✅ 게임 흐름

기획 요구사항을 파악했다면 다음으로 게임 흐름을 확인합니다. 각 흐름을 실제로 연결해보고 전체 그림을 시각화합니다. UI는 게임 전체에 걸쳐 일관된 흐름이 있어야 합니다. 다른 화면으로 이동했을 때 이전까지의 흐름을 무시한 디자인이면 이용자도 당황하게 됩니다. 또한 화면 단위로 디자인하다 보면 개발 후반부에 누락된 UI가 생기는 등의 문제가 발

생할 수도 있습니다. 먼저 전체 화면 수와 이동 포인트를 파악하고 게임 전체 사이클을 모든 팀에서 명확하게 확인하고 넘어가야 합니다.

 

진행 순서는 다음과 같습니다.

1. 대략적인 메인 화면을 도출한다.

2. 화면과 화면의 이동을 프로토타이핑 도구 등으로 연결한다.

3. 메인 흐름과 연결되면 위화감이 없는지 확인한다.

4. 파생되는 서브 화면을 도출한다.

5. 메인 화면과 서브 화면을 연결한다.

6. 각 흐름 간 이동에 위화감이 없는지 확인한다.

이 단계에서는 어디까지나 게임 사이클을 확인하는 것이 목적이므로 세세한 대화창 등은 나중에 진행해도 좋습니다. 또한 화면별 레이아웃에 너무 많은 시간을 할애하지 않도록 합니다(이후에 천천히 진행합니다).

흐름을 다 만들었다면 모든 팀원과 함께 검토합니다. 각 흐름마다 메모리 크기 등의 제약사항이 정해져 있는 경우가 많으므로 엔지니어는 기획자나 아티스트 그룹이 생각하는 흐름대로 실제 구현할 수 있는지 개발 초기 단계에서 미리 확인해두는 것이 중요합니다.

✔️ 인게임과 아웃게임

게임 흐름을 구분할 때 ‘인게임in-game’과 ‘아웃게임out-game’이라는 개념이 있습니다.

인게임이란 해당 게임에서 메인으로 진행하는 부분입니다.

● 액션 게임이라면, 각 스테이지를 플레이할 때

● 격투 게임이라면, 대전 상대와 전투를 할 때

● 카드 게임이라면, 카드를 이용한 전투를 할 때

반면 아웃게임이란 인게임을 제외한 나머지 부분을 나타냅니다. 다음과 같이 인게임을 위한준비 단계인 경우가 있지만 프로젝트에 따라 다르므로 미리 확인해둡니다.

● 액션 게임이라면, 플레이할 스테이지를 선택할 때

● 격투 게임이라면, 사용할 캐릭터나 장비를 선택할 때

● 카드 게임이라면, 카드 덱을 섞고 있을 때

이 개념을 기억해두면 팀에서 의사 소통이 쉽게 이루어지며 각 흐름마다 가장 적합한 담당자를 배정할 수 있습니다.

 

 

 

---

 

이 글은 『플레이어를 생각하는 게임 UI 디자인 노하우』에서 일부를 발췌하여 정리하였습니다. 

 

서비스·제품 UI와 게임 UI는 다릅니다. 서비스·제품 UI는 정보 전달, 상품 판매와 같은 목적을 갖지만 게임 UI는 플레이어가 세계관에 몰입하고 미션을 수행하며 쾌감을 느낄 수 있도록 디자인해야 합니다. 『플레이어를 생각하는 게임 UI 디자인 노하우』으로 전지적 플레이어 시점으로 게임 UI를 디자인하는 방법을 알아보세요. 반다이남코 현역 비주얼 디자이너가 경험한 게임 UI 디자인 노하우를 전수합니다.