팀원과 사용하던 구글 드라이브 공유 폴더를 열어봤더니 처음 작성한 기획서의 날짜가 2020년 12월 17일, 약 4개월간의 프로젝트가 끝났습니다 👏

생일 날짜에 맞춰 배포하지 못한 창피함이 너무 커서 후기를 쓰지 않으려고 했지만... 그래도 처음 진행한 프로젝트인 데다 게임에 실현하지 못했던 것도 많아서 기록용이라고 생각하고 조금 길게(?) 써봤습니다.

게임 스포일러가 매우 많습니다.

생각버튼 스튜디오

생각버튼 스튜디오 로고 스케치 by 티라노 / 생각버튼 스튜디오 픽셀 로고 by 윤

지금까지 여러 덕질을 해왔지만 ‘나도 무언가를 만들어서 다른 분들이랑 공유하고 싶다!’는 생각이 든 곳은 여기가 처음이에요. 하지만 내가 그림을 그리던 사람도 아니고, 색감 같은 거 잘 몰라서 보정도 못 하고, 영상 편집 감각도 없는 사람이라 뭘 할 수 있을지 생각해봤는데 코딩밖에 안 떠올라서 그럼 게임을 만들어볼까? 하고 시작한 게 여기까지 왔네요. (사실 게임 처음 만들어봐요)

트위터 계정 이름에 '스튜디오'라는 단어를 붙이긴 했지만 사실 저희 팀 크기에는 상당히 부담스러운 단어이긴 했어요. 학교를 다니면서 많은 프로젝트를 진행하긴 했지만, 과제가 아닌 팀 프로젝트는 처음이고 이 게임을 만들 때 유니티라는 프로그램을 사용했는데 학교에서 주로 배우던 Java가 아닌 C#으로 작성하느라 독학하는 동시에 개발했습니다. 코드 한 줄 쓰고, 테스트 돌리고, 버그가 뜨고, 좌절하고, 수정하고의 반복이었어요… ㅎ 지금 다시 생각해보니까 진짜 대담했네요.

게임 개발 과정

기획, 의상 투표

팀원과 게임을 만들기로 이야기한 후 처음 작성한 기획서를 열어보니까 게임 구조부터 정했던 기록이 있네요. (학기마다 팀플하면서 어플리케이션 개발 기획서를 수도 없이 써봤지만, 기획서를 쓰는일이 원래 이렇게 즐거운 일이었나? 싶었던 기억이 있네요 🤭)

2D 쯔꾸르 풍으로 만들기로 정한 후로는 곡 선정을 했습니다. 유키스 앨범 타이틀곡들을 쭉 나열했을 때 16곡이었는데 16개의 스테이지를 만드는 건 불가능한 일이라고 생각했어요. 각 곡마다 게임에 사용할만한 컨셉이 뚜렷한지를 판단해서 어리지 않아, 만만하니, 0330, 네버랜드, 스탠딩 스틸, 놀이터, 스토커. 이렇게 총 7곡을 선정했습니다.

저는 sprite, 픽셀 이미지 제작을 맡고 팀원은 bgm 제작을 맡아 각자 작업을 시작하면서 의상투표 준비를 했습니다. 스테이지마다 곡에 맞춰서 활동 당시 무대의상으로 바뀌면 좋겠다고 생각했는데 한 곡마다 무대의상이 여러 벌이기도 하고 키스미 분들이 게임 제작에 참여해주시면 좋겠다는 마음에서 준비했습니다. 그래서 트위터 계정을 만들고, 투표 진행을 1월 10일부터 13일까지 3일 동안 받았었죠. 아직도 기억나요 첫 트윗을 쓰고 리트윗 버튼을 누를 때 얼마나 떨렸는지… 진짜로 손이 벌벌벌 떨리고 심장이 박박박...

의상투표 결과를 보고 놀랐던 건 제가 좋아하는 의상들이 투표 결과가 놀이터를 제외하고는 다 다르더라고요. 심지어 0330 가요대제전 의상은 투표 리스트에 넣을 생각도 없었는데 팀원이 그거 꼭 넣어야 한다고 해서 넣었고, 네버랜드 류크옷은 '설마 이게 되겠어?' 하고 넣어놨는데 그 두 개가 압도적인 득표수로 1위를 한 걸 보고 투표 받길 잘했다고 생각했어요. 다시 한번 의상투표 참여해주셨던 분들께 감사의 말씀 드립니다.

(그리고 하나 아쉬웠던게 있다면 개인적으로 만들고 싶었던 무대 의상은 도라도라, 스탑걸, 끼부리지 마 였어요.)

이 프로젝트를 하게 되면서 픽셀도 처음 찍어 본 거라 캐릭터를 어떻게 만들어야 할지 고민을 많이 했어요. 구글에 pixel character 검색해서 나오는 자료들도 많이 보고, 픽셀 게임 플레이 영상들도 계속 찾아봤어요. 처음에는 이동 애니메이션을 크게 넣고 싶어서 몸이 긴 캐릭터로 생각했는데 픽셀로 찍어보니 귀엽지 않더라구요. 그래서 2등신 캐릭터로 만들기로 생각하고 머리의 형태, 측면 몸체를 계속 수정하면서 지금과 같은 모습이 되었습니다. 머리의 형태나 각도가 정면, 후면, 측면으로 전환될 때 어색함이 느껴지는 아쉬움이 있지만 그래도 귀엽게는 나온 것 같아 다행이에요. 작업 쉬는시간에 심심해서 만들어본 캐릭터도 있어요. 보고 가세요. (제가 주황색 비니를 썼던 라방을 너무 좋아해서..)

곡마다 의상이 정해진 후로는 무대 영상을 옆에 틀어두고 정면, 측면, 후면 모습을 초 단위로 끊어 보면서 캐릭터 sprite를 제작했습니다. 사실 모든 게임 개발 과정중에 캐릭터 만드는 일이 제일 힘들었어요. 헤어 스타일을 닮게 만드는 것도 어려웠고 색을 잘 선택했는지도 판단이 되질 않아서 이런걸 역량 부족이라고 하는구나 싶었어요...

게임 타이틀 화면을 만들 때 이것저것 시도해보기도 했어요. 구름 안에 손으로 쓴 글씨는 귀엽지만, 허술한 느낌을 지울 수 없었고, 피피티를 통해 글씨에 그라데이션을 넣은 건 배경과 어울리지 않더라구요. 그래서 둥근모 폰트로 쓴 글씨를 큰 화면에 띄워두고 약간의 수정을 거쳐서 지금과 같은 모습이 되었습니다. 조금 허전한가 싶어서 구름 말풍선과 수면 모자를 씌워보기도 했지만, 글씨만 있는게 제일 깔끔하다고 생각했어요.

Unity, Piskel, Tiled

앞에 언급된 것과 같이 이 게임은 유니티를 통해 만들어졌습니다. 작업 순서를 간단하게 정리해보자면

• 각 스테이지, 맵마다 Scene을 만들고
• Tiled 프로그램을 이용해서 만든 맵 이미지를 Scene에 올린 후
• 캐릭터 sprite 이미지를 가지고 와서 칸 수에 맞게 자른 뒤 Animation을 추가해 움직이는 모션을 만들고
• 맵 위에 Box Collider 2D 를 올려서 이벤트가 뜨게 할 위치를 지정 후
• 각 게임 오브젝트에 맞는 스크립트를 작성해서 연결합니다.

(프로젝트 코딩 내내 나의 모습, 그리고 만들어낸 프로그램)

제가 작성했던 스크립트를 간단하게 정리해보자면

• PlayerManager.cs : 캐릭터의 움직임을 관리하는 스크립트.
• CameraManager.cs : 카메라의 움직임을 관리하는 스크립트. (네버랜드, 스탠딩스틸, 엔딩)
• DialogueManager.cs : 대화창 이벤트를 위한 스크립트.
• NumberSystem.cs : 숫자 퍼즐 이벤트를 위한 스크립트.
• TransferMap.cs : 씬 이동을 위한 스크립트.
• FadeManager.cs : 페이드 인, 아웃을 관리하는 스크립트.
• Event Scripts : 각 씬에서 이벤트 발동을 위한 스크립트들. 씬 넘버와 이벤트 이름에 따라 이름을 구분함. (ex. Event00Bed, Event01Memo...)

지금 세어보니 팀원과 제가 작성한 스크립트 파일이 총 62개네요. 이렇게까지 많이 작성할 필요가 없었는데... 만약 다른 개발자분들이 저희가 한 작업을 보면 초짜 티가 팍팍 날 코드지만 맞춰야 하는 데드라인이 있어서 일단 완성이라도 하자 하는 마음으로 하드 코드 했습니다 😢 (근데 일주일이나 늦었…)

모든 픽셀 이미지는 piskel 이라는 프로그램을 이용해 제작했습니다. 필요한 소품들을 piskel 프로그램으로 만들어 수정 가능한 piskel 파일과 맵 제작을 위한 PNG 파일로 저장합니다. Tiled 프로그램을 통해 벽지, 바닥, 소품 png 파일들을 불러온 후 배치해서 맵 이미지를 제작하고 유니티로 내보냅니다.

이 Tiled 프로그램이 유용했던 점은 레이어 설정이 가능하다는 점입니다. 캐릭터가 사물 아래쪽에 있을 땐 캐릭터 레이어가 사물보다 위에 있고, 캐릭터가 사물 위쪽에 있을 땐 캐릭터 레이어가 사물보다 아래에 있어서 가려지게 보여야 하잖아요. 이걸 Character, Object, AboveObject라는 레이어를 이용해서 구현했습니다. AboveObject > Character > Object 순으로 되어있어서 Character가 AboveObject를 지나갈 땐 아래로, Object를 지나갈 땐 위로 보일 수 있는데요. 위에 스토커 맵을 예시로 들자면 거울이 차지하고 있는 2x3칸에서 위쪽 2x1칸은 AboveObject, 아래 2x2 칸은 Object 레이어입니다. 한 사물에 레이어를 두 개나 써야 해서 상당히 노가다인 작업이었는데 이게 가장 힘들었던 맵은 스탠딩 스틸 미로였습니다..... 작업 중에 레이어를 착각하고 맵을 만들어서 잘못했다는걸 깨닫고 거의 울면서 다 지운 뒤 처음부터 다시 만든 적도 있어요 ㅋㅋㅋㅋㅋ....

↑ MapObject 레이어를 끈 Stage05-1

↑ MapAboveObject 레이어를 끈 Stage05-1

배경, 소품 레이어 뿐만 아니라 캐릭터의 이동을 제한하는 레이어(MapBorder, NoPassing)도 Tiled를 통해 설정했습니다. Tiled 짱.

그리고 이 모든 과정은 유튜브 케이디 님의 영상을 보면서 진행했습니다. 정말 감사드립니다.

비하인드

방

게임 만들기 기획했을 때부터 너무 만들고 싶었고 가장 먼저 만든 맵이었습니다. 마찬가지로 별나시와 무지개 바지를 입은 이 캐릭터가 제일 먼저 만든 sprite였어요. 제가 만들어놓고 너무 귀여워서 배포 당일까지 매일 스포하고 싶었어요. (팀원이 말리지 않았다면 올렸을지도 몰라요...) 숨은 디테일은 움직일 때 마다 팔랑거리는 부스스한 머리입니다. 그리고 이 맵에도 대화 이벤트가 있어요 🤭

어리지 않아

어리지 않아 의상은 투표를 받지 않고 바로 제작했습니다. 단순한 농구복이어서 만들기도 쉽고 뮤비에도 입고 나왔던 옷이라서 고민 없이 선택했어요. 문제는 헤어였는데 흑발이라서 머릿결을 보여주기 위해 명암을 쓰기도 애매했고 세팅된 머리를 픽셀로 어떻게 표현을 해야 할지 정말 어려웠어요. 초반에 제작한 sprite라서 나중에 더 손보고 싶어졌던 여러모로 아쉬웠습니다.

만만하니

매우 마음에 들게 만들어진 맵이에요. 일단 만만하니 활동 당시 특유의 헤어스타일을 잘 표현했다고 생각하고 맵 디자인도 뮤비의 분위기와 비슷하게 만들어졌다고 생각합니다. 개인적으로는 오른쪽 위에 번쩍이는 전광판이 분위기를 잘 잡아주는 것 같아요.

아쉬운 게 있다면 원래 금고 이벤트의 기획은 이랬습니다.

금고에 비밀번호를 입력(방향키사용) → 여우인형 획득 → 인벤토리에 들어가서 여우 인형에 ‘뽀뽀하기’를 선택 [여우같은 여우인형에 뽀뽀를 했다. 여우가튼 gril, 어~^^ ][문이 열리는 소리가 들렸다.] → 열려진 차고 문을 통해 다음 맵으로 이동

인벤토리를 구현하지 못해서 포기했습니다... 눈물..

(그리고 다들 아셨겠지만, 금고 비밀번호는 만만하니 발매일이에요. 벽에 붙어있는 mini 03도 미니앨범 3집이라는 뜻)

아 그리고 만만하니 캐릭터만 스모키 화장이 되어있어요. 화장이라고 해봤자 눈꼬리 아래에 픽셀 하나를 더 칠한 것뿐이지만요.

0330

제일 만들기 어려운 sprite였어요. 일단 의상부터 반짝이 조끼를 어떤 색으로 해야 할지 고민이었고 헤어는 진짜 답이 안 나와서 의상을 완성한 후에도 몇 주간 손을 대지 못했던 기억이 있네요.

맵 디자인은 팀원이 만들어준 스케치를 토대로 만들었습니다. 이 맵을 제작할 때 유난히 소품들의 사이즈가 안 맞아서 다 다시 제작했던 기억이 있네요. ㅠㅜ

많은 분이 보고 웃어주셨던 계단에 갇힌 주먹밥, 이 맵을 제작할 때 스트레스를 많이 받았는데 주먹밥을 그릴 때만은 즐거웠어요.

또 전화기 이벤트의 내용은 사실 기획서에 없었습니다. 다양한 소품들로 채우고 싶었던 맵이라서 뮤비에 나오는 전화기를 일단 만들어놨는데 어떤 문장을 띄우면 좋을지는 코딩을 할 때까지 고민했어요. 이번 활동 중에 '10년 전 본인에게 해주고 싶은 말' 질문을 받고 답한 걸 보면서 마침 0330이 십 년 전 활동 곡이니까 비록 게임이지만 이 전화기를 통해 전해주면 어떨까 싶어서 넣었습니다.

네버랜드

맵 디자인에 공을 정말 많이 들인 맵입니다. 스토리도 그렇고요. 그만큼 지금과 같은 맵의 모습이 나오기까지 다른 곡보다 회의를 많이 했던 맵입니다. (기획당시에는 맵 배경이 야외가 아닌 실내였어요) 가사에서 아이디어를 따와서 지금과 같은 모습이 되었네요. 은하수 위쪽으로는 물고기자리가 반짝이고 있어요.

의상투표 결과를 보고, 제일 만들기 어려울 줄 알았지만 의외로 가장 만들기 쉬웠던 의상이에요. 깃털이 그려 넣으니까 ‘이 의상은 네버랜드 류크다!’ 라는 느낌이 강렬해서 좋았네요. (TMI 하나 하자면 각 캐릭터 sprite를 만들 때 그 의상을 입은 무대 영상을 계속 옆에 틀어두고 제작하거든요. 이 네버랜드 류크의상을 입었을 때의 피부가 다른 때와는 다르게 태닝한 것 같이 구릿빛이길래 다른 캐릭터보다 팔의 피부색을 어둡게 만들었습니다.)

그리고 흑마법사님을 만들 때 팀원이랑 같이 실시간으로 화면공유 하면서 작업했는데 픽셀 하나하나 찍을 때마다 너무 닮게 만들어서 계속 웃으며 작업했어요. ㅋㅋㅋ

스탠딩 스틸

네버랜드가 맵 디자인에 가장 공을 들였다면 스탠딩 스틸은 스토커와 함께 맵 스토리에 정말 많은 공을 들였어요. 일단 ‘끝이 없는 미로에~ 끝이 나길 기다려’ 가사에서 아이디어를 얻어서 끝이 없는 미로를 만들고, 가사에 나온 kerosene과 뮤비에 나온 불타는 장미를 써서 탈출할 수 있게 만들었어요.

처음은 미로 곳곳에 나뭇가지들이 있고 그 가지들을 모아서 횃불을 만드는 것이었는데 맵 제작을 하면서 큰 나무 하나를 두는 것으로 수정했어요.

이 맵은 한번 수정되었는데 미로의 느낌을 살리기가 어려워서 처음에는 ‘일단 완성이라도 하는 게 중요하다’라는 생각으로 벽을 생략하고 대충 만들었더니 정말 별로였어요. 하루를 통째로 바쳐서 8가지의 벽 형태 이미지와 레이어 설정 노가다를 한 후 지금과 같은 미로가 되었습니다. 그래도 아쉬운게 있다면 맵 주변에 더 많은 소품을 넣었으면 어땠을까 하는 생각이 드네요.

그리고 스탠딩 스틸 의상!! 핫터뷰에서 가장 마음에 들었던 의상으로 이 의상을 언급해서 정말 놀랐었어요. 😭

놀이터

의상 투표를 하셨던 분들은 아시겠지만 원래 놀이터가 게임 맵 리스트에 있었습니다. 근데 맵 구상도가 다른 스테이지에 비해 많이 부실했어요. 얼마나 부실했는지 궁금하실까 봐 회의록 일부를 공유합니다..

그네 [삐걱하며 그네만 춤춘다]
아이스크림 가판대 [아이스크림 가게다. 딸기맛, 초코맛 바닐라맛 아이스크림이 있다. 무슨 맛을 고를까?]
손수건 [누군가가 떨어뜨린 것 같다]
정글짐 [정글짐이 녹슬었다. 점점 삐걱삐걱 녹슬어]
시소 [삐걱하며 시소만 춤춘다. 삐걱삐걱삐걱삐걱 난나]
목마 [삐걱하며 목마만 춤춘다. 점점 삐걱삐걱 흔들려]

진짜 무슨 정신으로 회의했었는지 기억도 안 나고 😂 스탠딩 스틸과 스토커 사이에 있는 맵 치고는 탈출하는 방법이 너무 간단했고 (바닐라 아이스크림을 고르면 탈출이었어요) 더 발전시킬 시간도 부족해서 빠지게 되었습니다.

스토커

배포 전날까지 코딩하고 있었던 맵입니다. 심지어 기획 당시에 구상했던 대로 구현할 수 없어서 스토리를 급하게 바꾸었어요.

원래대로라면 이 맵에 들어왔을 때 인벤토리에 목걸이가 생겨있고, 거울을 확인하면 목걸이를 벗는 게 아니라 그저 '못 보던 목걸이가 목에 걸려있다.' 는 대화만 뜨게 할 예정이었습니다. 이 대화 이벤트가 힌트가 되어 인벤토리에 들어가서 목걸이를 버리면 그림자가 나타나는데 그림자도 지금과 같은 모습이 아니었어요. 지금의 그림자는 방안을 혼자 자유롭게 돌아다니지만, 기획 당시에는 캐릭터를 따라다니게 할 생각이었습니다. 캐릭터를 따라다니는 그림자를 창으로 들어오는 달빛으로 유도해서 사라지게 하는 게 원래의 스토리였습니다.

인벤토리를 만들지 못했던 것도 있지만 캐릭터가 움직일 때마다 바로 뒤에서 따라다니게 만드는 것도 구현하기 쉽지 않아서 지금과 같은 모습이 되었습니다.

급하게 만드느라 색감이나 디테일이 아쉬운 맵인데 커튼을 걷고 들어오는 달빛 하나 마음에 들어요.

엔딩

엔딩을 어떻게 만들면 좋을지 고민을 정말 많이 했습니다. 실제로 생일 메세지를 보여주는 방법 수정만 5번 정도 거쳤어요. 그만큼 게임을 해 주신 분들이 좋아해 주신 것 같아 다행이라고 생각합니다. 캐릭터가 직접 돌아다니면서 메시지를 확인하는 모습이 정말 사랑에 둘러싸여 보여서 테스트하면서도 뿌듯했어요.

생일 당일에 공개했어야 했는데 예상보다 너무 오래 걸려서 일주일이나 늦게 배포하게 되었지만, 덕분에(?) 생일 라이브 방송 때의 의상으로 만들 수 있었어요. 급하게 만드느라 헤어는 별나시 캐릭터에서 색상만 변경한 거라 삽살이로 나왔는데 근데.. 탈색 머리가 픽셀로 찍기 너무 어렵더라고요…

고치지 못한 버그 / 아쉬운 점

텍스트, 숫자 퍼즐

게임을 하면서 느끼셨을지 모르겠는데 대화 이벤트가 시작할 때 랜덤하게 첫 문장이 뜨지 않는 버그가 있어요. 이게 숫자 퍼즐에서 입력값을 받지 않고 그대로 이벤트가 끝나버리는 것까지 연결되었더라고요. 첫 문장을 읽지 않더라도 게임 플레이에 지장이 없게 만들긴 했지만 숫자 퍼즐에서 눈에 띄게 나타난 버그라서 꼭 고치고 배포하고 싶었어요.

그런데 보통 run time 에러가 있으면 어느 정도 규칙적으로 나타나서 그 규칙을 해석하고 고치면 되는데 이 버그는 규칙 없이 랜덤으로 발생해서 아직도 이유를 모르겠어요.

끼임 문제

모든 이미지는 48픽셀을 기준으로 제작되었고 tiled 프로그램을 이용할 때 48픽셀 크기에 맞추어서 계산을 통해 빈 곳 없이 만들어도 꼭 끼이더라고요. 자체 테스트하면서 맵 끼임 문제를 다 잡았다고 생각했는데 스토커에 아직 남아있을 줄을 몰랐어요… 다시 플레이하기까지 오래 걸리는 곳인데 끼임 있다고 들었을 때 너무 죄송했습니다…

페이드인아웃

게임에서는 맵에서 탈출할 때 페이드 인 되고 새로운 맵으로 이동할때는 페이드 아웃 없이 나타나잖아요. 이거 오류입니다. 원래 페이드 아웃까지 구현이 되어야 했는데 버그에요… 근데 다음 맵이 페이드 없이 나타나는게 원래 꿈에서도 일관성 없게 장소가 변경되는 느낌이 나서 괜찮았던 것 같아요…

('이거 버그죠? / 아뇨, 기획 의도' 라는 프로그래머 밈이 있는데 이 상황에 딱 맞더라구요 😅)

위치 지정

이미지를 제작할 땐 분명 모두 48픽셀에 맞추어서 만들었어도 유니티에서는 캐릭터, 배경, 소품의 위치를 맞추기 어렵더라고요. 캐릭터와 소품의 사이 간격이 일관적이지 않아서 너무 슬퍼요.

다른 효과음

발걸음 소리나 텍스트 읽는 소리, 금고가 열리는 소리 같은 효과음을 넣지 못해서 아쉽습니다.

인벤토리

원래는 인벤토리를 만들 생각이었습니다. 시간관계상 생략하게 되었어요.

최적화

코딩을 모두 끝내고, 테스트도 끝나고, 배포용 프로그램을 빌드하고, 설치 파일을 만들고, 모든 게 다 순조롭다고 생각했어요. 그런데 빌드 설정이 x84_64로, 64bit 운영체제인 윈도우에서만 실행 가능하다는 것을 나중에 알게 되었습니다. 그래서 설정을 바꾸고 새로 빌드해봤는데 Command창만 뜨고 게임이 실행되지 않더라고요😢 최적화는 정말 어려운 일이라는 것을 다시 깨닫는 순간이었어요. 진심으로 세상 모든 게임, 프로그램 개발자님들 존경합니다.

개발하는 중에 있었던 버그들입니다. 텍스트 오류, 그림자 사이즈 오류, 레이어 순서 오류....

후기

중요한 회의가 있거나 개발을 할 때면 팀원과 행아웃/구글 밋을 통해 영상통화를 했는데 게임 배포 당일 아침에 사용 가능 시간(24시간) 초과로 자동으로 꺼진 화면을 보고 엄청 웃었던 게 떠오르네요.

사실 지난 4개월간 정말 힘들었거든요. 하지만 그 힘들었던 모든 게 상관없을 정도로 좋아해 주셔서 기뻐요. 게임을 만들어 주어서 감사하다는 말을 많이 들었는데 저야말로 플레이해 주셔서 정말 감사드립니다.

조금이라도 지치면 힘들다는 말 쉽게 했는데, 그럴 때마다 응원해주시던 분들 모두 감사합니다. 덕분에 포기하지 않고 완성할 수 있었어요. 이젠 울지 않아요!

함께한 팀원, 네가 없었으면 게임을 만들 생각조차 하지 못 했을 거야. 너와 함께 덕질하는 매 순간이 즐겁고 행복하다. 고마워.

그리고 이 게임의 주인공, 수현. 사랑해요.