게임 디자인하다 보면, 다른 분들은 어떻게 할까..하는 부분이 궁금할 때가 있더라고요. 큰 부분이야 가끔 포스트모템 등의 자료가 올라오기도 하지만, 자잘한 부분들은 사실 밖으로 나올 일이 별로 없어서 구경하기 쉽지 않죠. 그래서(?) 제가 하는 방식을 기록 삼아 올려봅니다.

저도 이게 옳다고 어디에서 배운 것도 아니고, 이렇게 저렇게 하다 보니 ‘지금 하는 분들과는 이렇게 하는 것이 가장 효율적이구나.’하는 방식으로 맞춘 거라서, 팀의 상황이나 구성원에 따라서 안 맞을 수도 있을 거에요. 제가 하는 방식이 올바른 답인지는 잘 모르겠고, 일단 지금 상황에서는 가장 효과적으로 작동한다…에 가깝습니다.

그럼, 제가 일하는 방식을, 작은 기능 하나를 게임에 어떻게 추가했는지를 통해 적어볼게요. ‘트레인시티 for Kakao 게임에서 카카오스토리로 뭔가를 포스팅하는 기능’을 만들기로 했는데요. 일정이 그리 넉넉하지는 않았는데, 결과적으로는 반나절 정도에 기획을 마쳤던 일이네요.

1. 문제 설정

전 사실 게임 디자이너로서 제 역할을 ‘문제를 푸는 사람’이라고 생각해요. 게임을 만들다 보면, 이런 저런 곳에서 ‘어, 이건 어떻게 해야하지?’라는 상황이 생기고, 그럼 전 그 문제를 푸는 거죠. 그러려면 문제를 풀 수 있게, 문제를 정확히 다듬는 게 필요하죠.

이 경우 제게 주어진 문제는 ‘트레인시티 게임에서 뭔가를 카카오스토리로 포스팅한다’였어요. 결국 ‘무엇’을 카카오스토리로 내보낼까 하는 게 가장 중요한 주제였죠. 몇 가지를 빠르게 생각해봤어요.

a. 친구를 추월한 것: 다른 아케이드 게임들에서는 1회 플레이가 끝난 다음, 친구를 앞선 것에 대해 올리게 하고 있었어요. 하지만, 우리 게임은 플레이가 계속 이어지고, 친구와 경쟁도 없기 때문에 이건 맞지 않겠더라고요.

b. 퀘스트 진행 정도: 그렇다면 게임을 얼마나 진행했는지 정도를 게시하는 것도 고려해볼 수 있겠더라고요. 우리 게임에서라면 각 퀘스트를 끝낼 때마다 해당 퀘스트에 대한 내용을 올려보게 할 수도 있었겠죠. 하지만, 이렇게 하려면 각 퀘스트마다 컷씬 같은 이미지들을 만들어야 하니, 아트 리소스가 너무 많이 들겠더라고요. 게다가 카카오스토리에 퀘스트 관련한 컷씬이 올라온다고 해서 다른 유저들이 게임에 대해 궁금해할 것 같지도 않았고요. 비효율적이라 이것도 통과.

c. 도시의 모습: 그렇다면 남는 선택지는 이거였어요. 도시 만드는 게임에서, 자기 도시의 모습을 친구한테 보여주는 것만큼 의미있는 일은 없을 테고, 플레이어의 도시를 캡처해서 올리는 것이니만큼 별도의 아트 리소스는 필요없겠죠. 플레이어의 친구들이 봤을 때 “어, 이 게임 뭐야? 재미있어 보이는데?”라는 반응도 이끌어내기에 가장 좋을 테고요.

이렇게 해서, 우선 문제를 설정했습니다. 제가 풀어야 할 문제는 ‘트레인시티에서 자기 도시의 모습을 캡처해서 카카오스토리로 포스팅하는 기능’이 되는 셈이죠.

2. 해법 고민: 기술 스펙 정의

다음으로 고민할 것은 문제에 대한 ‘해법’인데요. 먼저 고민할 것은 ‘어떻게 도시 모습을 찍게 할까’하는 기술적인 부분이었어요. 기획이 좋더라도 일정 내에 만들 수 없다면 의미 없으니까요.

자기 도시 모습을 올린다고 한다면, 플레이어로서는 도시를 어떤 크기로 어느 부분을 보여줄 지 제어하고 싶을 텐데, 그렇다면 이 캡처 기능에는 ‘화면 배율 조정’과 ‘화면 영역 조정’이 필요해집니다. 다음의 두 가지 방식이 가능했죠.

a. 플레이어 맘대로: 플레이어가 마음대로 카메라 찍듯이 줌인/줌아웃, 화면 이동하다가, 셔터 버튼을 누르면 해당 장면을 캡처.
b. 템플릿에서 선택: 세 단계의 줌 상태(근경, 중경, 원경)를 만들어, 객관식처럼 보여주고 셋 중 하나를 골라서 올리게 함.

이 단계에서 엔지니어 분들께 어떤 쪽이 좋은지, 또 가능한지 여쭤봤는데, ‘a여야 플레이어에게 의미있을 것이며, a로 만드는 것이 오히려 더 기존 로직을 많이 활용할 수 있다’는 답을 받았습니다.

자, 그럼 제 문제는 ‘트레인시티에서 자기 도시의 모습을 마치 카메라를 조작하듯 확대/축소/이동하다가 캡처해서 카카오스토리로 포스팅하는 기능’으로 좀 더 뚜렷해졌습니다.

3. 해법 고민: UI

다음 제 고민은 (넓은 의미에서) UI였어요. 이 기능의 플로우는 대략 (1) 플레이어가 사진찍겠다고 선택 → (2) 카메라를 조작 → (3) 카카오스토리에 올리기인데, 이 중 (1)을 플레이어가 어떻게 선택하게 만들지 고민이 되더라고요. 몇 가지 안을 생각해봤어요.

a. 항상 접근 가능한 ‘사진찍기 버튼’을 UI로 놓음: 가장 간단하고 눈에 띄게 만들겠지만 문제가 있었어요. 메인 UI에 항상 놓기에는 좀 부담스럽고, 마땅한 공간도 없고, 그 정도로 중요한 기능도 아니었어요. 그렇다고 한 뎁스 더 들어가서 접근하게 만들면, 찾기 어려워서 애써 만든 기능을 사람들이 써보지도 못하겠죠. 게다가 자기 도시를 늘 찍을 수 있다면, 별로 재미가 없을 것 같더라고요. 통과.

b. 건물을 눌러서 선택: 시티 빌더니까, 건물을 이용하는 것도 괜찮아보였어요. 예를 들어 ‘카메라 가게’를 누르면 캡처 기능이 시작하는 거죠. 의미도 있고 나름 재미도 있어보였지만, 건물은 플레이어가 삭제/추가할 수 있다는 게 문제였죠. 카메라 가게를 안 지은 사람들은 캡처 기능을 쓸 수 없을 테고, 카메라 가게를 여러 개 지은 사람은 어떻게 해야 할지 따로 정의해야 했고, 게다가 보통 상점과 다르게 기능해야 한다는 건데, 이 경우 플레이어에게 어떻게 알려줄 것인지 등등.. 문제가 너무 많았어요. 통과.

c. 특정 캐릭터를 눌러서 선택: 다음으로는 게임 속의 캐릭터를 이를 테면 카메라 말풍선을 띄운 사진사 캐릭터를 누르면 캡처 기능이 동작하면 어떨까 하는 생각을 했어요. 게임성을 해치지 않으면서 자연스럽게 진행할 수 있다는 생각이 들더라고요. 사진사 캐릭터가 늘 도시에 있다면 꽤 귀찮고 찍을 생각도 자주 안 들겠지만, 포켓몬스터 하트골드의 사진사 캐릭터(맵의 특정 장소에만 있어서, 돌아다니다 만날 수 있어요.)처럼 가끔 만날 수 있다면 오히려 그 기회가 재미있지 않을까 싶더라고요. 거기에 사진 찍는 비용도 조금 내게 하면, 좀 더 희소가치도 줄 수 있을 것 같았고요. 우리 게임에서는 여객 열차가 수시로 플레이어의 마을에 들르면서 캐릭터를 내리게 하니까, 그때 가끔 사진사가 내리면 전체적인 게임 분위기와도 잘 맞을 것 같았어요.

이제 제 문제는 ‘트레인시티에서 자신의 도시에 오는 여객 열차에서 가끔 내리는 사진가를 누르면 자기 도시의 모습을 마치 카메라를 조작하듯 확대/축소/이동하다가 캡처해서 카카오스토리로 포스팅하는 기능’이 되었습니다.

4. 플로우 디자인 공유

그럼, 여기까지 고민한 것을 실제 일을 할 엔지니어, 아트 팀 분들과 공유하고 피드백 받아서 실제 일이 되도록 만들 단계입니다. 글로도 써보고, 키노트 슬라이드로도 만들어보고 했지만, 가장 빠른 건 손으로 스토리 보드를 빠르게 그린 다음, 실제 하시는 분들과 말로 얘기를 하는 것이더라고요.

kakao01

예전에는 저 네모들을 따로 그리거나 프린트해서 쓰기도 했는데, 이런 스토리보드용 노트(무인양품에서 3천원에 팝니다.)가 있어서 유용하게 쓰고 있어요. 이걸 들고 엔지니어, 아트, 또는 사내의 다른 분들께 빠르게 설명합니다. “이러저러해서 캐릭터 쪽에 사진 기능을 붙이는 게 가장 좋을 것 같아요. 이렇게 여객 열차에서 사진사가 내려요. 되도록이면 아주 극초반 유저들은 말고, 게임 어느 정도 진행한 유저들부터 볼 수 있으면 좋겠어요. 그리고, 얘를 누르면 사진 찍겠냐는 팝업창이 나와요. 예스 눌렀는데 비용이 부족하면 이 창이 뜨고요. 비용이 충분하면 이렇게 카메라 UI가 뜨면서 플레이어가 확대/축소/이동할 수 있고, 셔터 버튼을 누를 수 있어요. 이때 게임 관련 UI들, 자원 UI나 버튼 같은 건 사라지고 카메라처럼 되는 거에요. 아참, 좀 더 아날로그 카메라 같으면 더 좋을 것 같아요. 사진 찍을 때는 ‘찰칵’ 소리도 나면 좋겠고요. 그리고 나면 사진사가 찍은 내용 그대로 올릴 지 물어보고요. 예스하면 카카오스토리 입력 화면으로 넘어가요. 이거 끝내고 나면 사진사는 빠이빠이하면서 사라지고요. 아참, 초반에 얘를 안 누르고 60초 정도 지나면 사라지기도 해요.”

그리곤 의견을 듣습니다. 전반적으로 좋다는 반응이었어요. 다만 사진 찍는 것에 굳이 비용을 붙일 필요가 있겠냐고 하시더라고요. 아무리 비용이 싸더라도 말이죠. 잠시 생각해봤는데, 그 얘기가 맞는 것 같더라고요. 그럼 비용 붙는 부분은 빼고 진행하기로 결정. 아직 문서는 없지만, 이 정도 공유된 것을 갖고, 엔지니어와 아트 팀 모두 관련 일을 시작하십니다.

5. 문서화

다음으로는 문서화를 시작합니다. 시간이 없더라도 어느 정도까지 안 해두면, 다른 분들이 작업할 때 참고할 자료가 없고, 저도 또 헷갈리고, 결국 시간이 더 들게 되더라고요. 저희는 파일 형태의 문서는 거의 안 쓰고 있어서요. 대략의 이미지와 설명 텍스트를 이슈 트래커나 이슈 트래커의 위키 쪽에 바로 올립니다.

위에서 연필로 빠르게 그렸던 스토리보드를 볼펜으로 다시 선정리하면서 그립니다. 비용 쪽은 쓰지 않기로 했으니까 빼놓고요. 그 다음 아이폰의 스캐너 앱으로 찍으면 이렇게 깔끔하게 나옵니다.

Image

그럼 이걸 키노트로 들고 가서, 단계별로 부연 설명을 넣는 등 좀 더 알아보기 쉽게 몇 가지 시각화 작업을 덧붙입니다.

그러고 있는데, 실제 작업을 하시던 아트 팀 분이 오셔서 의견을 주시네요. 카메라 UI에서 플레이어가 직접 조작해서 캡처한 것인데, 그걸 또 사진사가 ‘이게 맞니? 카카오 스토리에 올릴래, 아님 다시 찍을래?’라고 물어보는 건 좀 불필요한 것 같다는 말씀이셨어요. 그러게요. 제가 왜 플로우를 하나 더 만들었을까요. 그 플로우 하나 없애자고 아트 분께 말씀 드리고, 작업 중인 엔지니어 분께도 ‘그 플로우는 뺄게요.’라고 바로 말씀 드립니다.

그리고 진행 중이던 플로우 문서에서도 수정합니다. 그래서, 완성한 건 다음 이미지에요. (원래 4.5번 위치에 사진사가 한 번 더 물어보는 플로우를 넣고 문서를 만들고 있었는데, 해당 플로우를 빼기로 해서, 5, 6번이 삐뚤빼뚤하게 되어버렸네요.)

Image

블로그 폭에 맞추느라, 크기를 줄여서 글씨가 작게 보이네요. 실제 작업한 건 글씨 잘 알아볼 수 있을 정도로 커요.

제 일은 이 정도까지. 이후 아트 팀에서 사진사 캐릭터 시안이나, 실제 UI 소스에 대해서 제 의견을 물어보시면 말씀 드리고, 엔지니어 쪽에서 세부적인 것 물어보시면 답해드리고, 카메라 셔터 누를 때 효과음 사운드를 요청드리는 정도가 있긴 했지만, 위의 플로우 이미지를 만들고, 앞뒤 설명 좀 더 쓰는 걸로 제 일은 사실 끝이 났죠. 이날 좀 많이 바빴던 날이라, 일을 좀 서두르긴 했는데 아침에 ‘이런 기능이 필요하다. 구체적인 플로우가 빨리 필요하다.’를 들어서, 점심 시간 전까지 끝냈던 것 같아요.

6. 결과

아트는 이 날 오후 정도에 완료됐던 것 같고, 엔지니어링도 밑작업을 미리 좀 해두셔서 금방 했던 것 같아요. 빌드하고 QA하고 다른 기능들과 함께 나가느라, 라이브는 기획 후 열흘 정도 뒤에 반영됐던 기억이네요. 실제로 플레이어는 이렇게 보게 됩니다.

Image

왠지 공유하면 재미있을 것 같아 쓰기 시작했는데, 쓰고 나니 괜히 길기만 하고 별 내용 없는 건 아닌지 모르겠네요. 다른 분들이 어떻게 작업하시는 지 궁금하기도 하고요.

여기까지 읽어주셨으면, 게임에서 직접 확인해보셔야죠? 안드로이드 | iOS

사진사는 타워 1, 2개에서는 나타나지 않아요. 저레벨에서는 별로 자랑할 것도 없잖아요? 타워 3개까지 만드셔야 사진사를 볼 수 있답니다.

Advertisements