이전 포스트에서 이어서

전체적인 스토리라인과 기능을 전부 구상했으므로, 이제 실제 레이아웃과 기획을 구체화할 차례이다.

이전에 구상한 스토리라인 및 프로세스들은 머리속에만 있는 추상적인 계획이기 때문에, 실제 앱에서 어떻게 보일지를 직접 레이아웃을 그리다보면 생각보다 복잡하게 느껴지는 부분이나 애매한 영역들이 보이기 시작하고 이를 기반으로 그림을 그리다보면 방향성이 명확해진다.

피그마로 레이아웃 잡기

우선 나는 피그마를 활용하여 레이아웃을 잡기 시작했다.

메인 게임 레이아웃

가장 먼저 구상한 것은 실제 게임의 플레이화면이었다. 결국 내가 머리속에 구상하고 글로 정리한 것이 실제 화면속에서 어떻게 구현될지는 상상하는것과 이것을 실제 레이아웃으로 보는 것은 천지차이였다.

레이아웃을 그리기 시작하며 느낀 첫번재 문제점은, ‘움직임’을 캐릭터의 움직임과 1:1로 치환하기에는 어려움이 있다는 것이다. 예를 들어 주인공이 글을 쓰며 연필을 움직이는 화면을 구현한다고 하면, 나는 ‘소리’를 시각화해 표현하고자 했는데 화면의 대부분을 종이와 연필이 차지하게 될 것이다. 그리고 시점도 책상을 바라보고 있을 것이다. 이 때 다른 학생이 대화하는 소리를 어떻게 시각화할 수 있을까? 그리고 거기서 방해받는 것을 어떻게 게임에서 구현할 수 있을까?

고민의 고민을 거듭한 결과, 나는 게임의 플레이 방법을 ‘미로찾기’ 형식으로 바꾸게 되었다.

아래는 피그마로 만든 게임의 레이아웃이다.

기본적인 레이아웃은 상단 / 중앙 / 하단으로 나뉜다.

상단: 미션 레이아웃

상단은 미션 레이아웃이다. 이곳에는 내가 방문 혹은 해야할 각 미션들이 표시된다.

각 미션들은 이미지로 된 아이콘이다. 아래 미로에서 내 캐릭터가 그 아이콘을 터치하면 해당 미션이 클리어 되고 다음 미션이 활성화된다.

중앙: 미로찾기 화면

중앙은 메인 게임 화면으로 미로찾기 구조이다.

이 때 카메라는 왼쪽에서 오른쪽으로 정속으로 움직이기 때문에, 나는 캐릭터가 화면 바깥으로 밀려나지 않게 계속하여 캐릭터를 움직어야 한다. 만일 캐릭터가 화면 바깥으로 밀려나거나 / 벽을 터치하면 게임은 실패한다.

화면에는 미션 아이콘들이 위치마다 표시되어있고, 나는 캐릭터를 움직여 해당 미션 아이콘을 밟도록 해야한다. 이 때 미션 아이콘 말고도 다른 아이콘들도 있기 때문에, 미션 아이콘과 헷갈리지 않고 순서에 맞게 올바른 아이콘을 밟도록 해야한다.

메인 미로의 바깥쪽 영역에는 장애물들이 있다. 각 장애물들은 소리를 내는 요소들이다. 스테이지1의 길거리에서는 강아지 소리, 차량 소리, 공사장 소리 등이 있다. 소리에서는 음파가 나오고, 내 캐릭터가 그 소리 근처를 지나가면 거리에 따라서 소리가 크게 들리며 지나간다. 마찬가지로 거리에 따라 캐릭터의 스트레스 지수가 누적된다.

스트레스 지수는 수치로 표시되지 않고, 화면의 일렁임으로 표시된다. 스트레스가 쌓일수록 화면이 더 많이 일렁이게 된다. 미로 뿐만 아니라 화면 전체가 일렁이게 되어, 미션도 잘 보이지 않고 카메라나 하단의 손 일러스트도 일렁이게 표시된다.

하단: 특수 기능

좌측 하단에는 카메라 혹은 캐릭터 그림이 표시된다. 만일 카메라로 표시된 경우에는 직접 내가 입을 벌리는 행동이나 귀를 막는 행동을 카메라가 인식해 게임에 영향을 준다. 카메라를 쓸 수 없는 상황에서는 터치로 플레이할 수 있도록 하였고, 이 경우에는 캐릭터 그림이 나타나 내가 캐릭터의 입 혹은 귀를 터치해 상호작용할 수 있다.

입을 벌리는 경우에는 캐릭터가 ‘아’소리를 내게 되고, 스트레스 지수가 20% 감소한다.

스테이지 1의 경우 캐릭터는 노이즈 캔슬링 헤드폰을 착용하고 있지만, 교실에서는 노이즈 캔슬링 헤드폰이 없다. 이 때 양 손으로 귀를 막는 동작을 하면 소음이 0이 되고, 시간도 멈추게 된다. 따라서 스트레스 지수가 0으로 감소되고 캐릭터를 진정시키고 다시 출발할 수 있다.

하단의 손가락은 캐릭터가 숫자를 셀 수 있게 하는 기능이다. 왼쪽 손부터 엄지 → 새끼손가락까지 순서대로 / 그리고 이후 오른쪽 손의 엄지 → 새끼손가락을 순서대로 터치하면 캐릭터가 손가락을 순서대로 굽히며 one two three four five six seven eight nine ten 하며 숫자를 센다. 이 행동은 걸으면서도 할 수 있고, 이 행위를 하는 동안 스트레스 수치가 증가하지 않는다. 하지만 숫자를 틀리게 되면 스트레스 수치가 반대로 점핑하게 된다.

메인 게임 프로세스 설계

이 때 모든 플레이 방법과 특수 기능을 한번에 소개하게 되면 플레이어가 혼란을 겪을 수 있다.

따라서 나는 온보딩 화면의 느낌으로, 각 단계에 따라 기능이 한개씩 추가되고, 어떤 안내가 나와야할지를 피그마로 전체 프로세스를 보드로 만들었다.

다음으로는 메인 기능에 따라 게임 시작 전 도입부 화면을 설계했다.

여기서는 Apple의 HIG와 Accessability 를 고려한 설계가 필요했다. 예를 들어 특수한 상황에 있거나, 장애가 있는 사람의 경우 얼굴 인식 기능으로 게임을 할 수 없을 것이다. 따라서 게임의 시작 전 유저의 환경을 물어보고, 직접 얼굴을 활용해 게임을 조작할지 혹은 캐릭터를 터치해 편리한 진행을 할지를 선택할 수 있도록 만들었다.

그리고 카메라를 선택하였을 경우 유저의 카메라 활용 동의를 받게 되는 케이스, 활용 동의를 ‘거부’를 눌렀을 경우 나오는 안내화면까지도 디자인하였다.

About 페이지

마지막으로 실제 정보를 전달하는 About 페이지를 만들었다.

About 페이지에서는 좌측을 통해 각 챕터들을 빠르게 접근하고 우측 화면에서 쉬운 정보를 전달할 수 있는 기초적인 레이아웃으로 디자인하였다.

디자인 컨셉 구상하기

이제 모든 기능과 레이아웃을 구상하였으니 실제 디자인을 어떻게 할지를 정할 차례이다.

이번 앱을 만들면서 디자인에 있어 가장 중요한 조건은 크게 세가지이다.

1. 내가 직접 그리거나 / 만들거나 / AI를 통해 그릴 수 있어야 한다.
2. 어린 아이들 / 플레이어들에게 불쾌감을 주면 안된다.
3. 게임의 컨셉과 플레이 방식과 잘 어우러져야 한다.

가장 먼저 실제로 내가 그럴 듯 하게 구현할 수 있는지가 제일 중요하다.

역시 시작은 레퍼런스이다. 나는 가장 먼저 Behance, Dribble, Google에 game / indie game을 검색했다.

우선 behance와 google에서는 유의미한 결과를 볼 수 있었지만, dribble에는 대체로 UI/UX와 관련된 검색결과가 더 많았다. 나는 behance와 google의 이미지들을 보며 내가 구현할 수 있으면서도, 게임과 어울릴만한 디자인 컨셉이 무엇이 있을지 살펴보았다.

레퍼런스를 찾아보던 중 한가지 의문이 생겼다. 내 게임에서 스테이지1의 경우 캐릭터가 직접 움직이는 컨셉이기 때문에 걷는다라는 한가지 행위로 이동을 표현할 수 있다. 하지만 스테이지2의 경우 체육관에서 교실로 간 후 교실에서 사물함에서 물건을 꺼내 다양한 활동을 하게 된다. 따라서 이 때 움직임은 활동 → 활동으로 여러가지 활동을 한다는 것을 추상적으로 나타낸 개념이지, 실제로 캐릭터가 움직이는 것이 아니다. 따라서 이 때 미로에서 캐릭터가 한 활동에서 다음 활동으로 넘어갈 때 걷는 모션을 쓴다는 것이 이상하게 다가왔다.

이 지점에서 스테이지2의 캐릭터를 어떻게 보여주고 표현해야할지에 대한 고민했고 결과적으로 그 캐릭터가 행동한 움직임을 모션으로 행동을 하고있다 로 표현하고자 했다. (말로 설명하기는 어렵지만, 추후 개발 과정에서 확인할 수 있다)

앱 디자인 컨셉은 스케치 디자인으로 정하였다.

기본적인 스케치 컨셉은 파블로 피카소의 Le Chien 작품의 느낌과 비슷할 듯 하다.

스케치 디자인으로 정한 이유가 몇가지 있는데 가장 큰 이유는 현실적으로 가장 만들기 쉬운 유형 중 하나라고 생각되어서이다. 물론, 스케치로 대상을 잘 표현하는 것도 엄청난 난이도가 있겠지만 상대적으로 다른 디자인들에 비해서는 구현의 방법으로만 보았을 때 난이도가 적다 느껴졌다.

특히, 나는 작품에서 캐릭터가 입을 움직이거나 귀를 막는 등의 행동을 해야하는데, 이 때 스케치 컨셉이라면 바탕, 입, 손을 각각 그려서 합쳐도 디자인적으로 완성도가 있을거라 느껴졌다.

또한, 화면에서 여러 요소들이 표시되고, 마지막에 스트레스 정도에 따라 화면이 일렁이는 효과를 주어야 하는데 디자인 컨셉이 복잡할 경우 화면이 더 복잡해질 것 같다 생각했다.

마지막으로, 화면에서 극적인 표현을 위해 소리가 나오는 곳을 붉은 색으로 표시하고, 그곳에서 음파가 나오는 연출을 해야하는데 스케치 컨셉이 가장 잘 어울릴 것이라 판단했다. 같은 방법으로 캐릭터, 따라가는 선, 미션 등을 각각 다른 색으로 연출할 수 있을 것이다.

이제 전반적인 디자인 컨셉과 게임 프로세스까지 구현했으므로 다음은 실제 앱 프로토타입을 제작해볼 차례이다.