이 글은 프론트엔드에 관한 글이 아닐 수 있으며 다소의 오타쿠 문화가 첨가 되어 있습니다. 만약 이러한 글이 취향이 맞지 않으시다면 제 블로그에 다른 좋은 글들도 많으니 한번 쯤 읽고 가주시면 감사하겠습니다.
요즘 프론트엔드가 재밌지가 않아요
최근에 굉장히 새롭고 재밌는 경험을 하게 되어 이 경험을 공유하고자 합니다.
대충 요약하면 요즘 동기부여 안된다는 글
제 링크드인 에서도 한 번 언급했던 내용이긴 합니다만, 저는 요즘 프론트엔드 개발이 재미가 없습니다. 막 하기 싫고 그런건 아닌데, 그냥 예전처럼 재밌다는 기분이 별로 들지가 않습니다.
이 상태가 계속 이어지게 되면 결국에는 번아웃으로 이어지게 될 것이고 최악의 상황에는 제 개발자 커리어에도 지장이 갈 수 있기 때문에 이 분위기를 환기 해 줄 필요가 있다 생각 되었습니다.
시선을 돌려보자
근데 솔직히 프론트엔드 개발에 대한 흥미가 떨어진 이 상황이 따지고 보면 그리 이상한 일은 아닐 겁니다. 아무리 재미있는 게임이여도 10년 넘게 그것만 하고 있다보면 질릴 텐데 개발이라고 다르진 않을 것 같거든요.
게임이 재미가 없을 때는 다른 게임을 찾아서 나서 듯이, 프론트엔드 개발 말고 평소에 배워보고 싶었던 것을 배우면 어떨까 싶었습니다.
그러던 도중 눈에 들어오던게 ‘게임’이었습니다.
원래 제가 개발자를 희망하게 되었던 계기도 다름 아닌 게임이라 다시 초심으로 돌아가 보는 것이 어떨까 생각하게 되었습니다.
초등학생 때 한참 활동 했었던 플래시 게임 커뮤니티. 지금은 접속할 수 없다.
뭘 만들면 좋을까
언제나 고민 되는 주제입니다.
새로운 프로그래밍 언어와 제작 프로세스를 배우기 위해서는 실제로 만들어 보는게 최고라는게 제 생각인데, 항상 뭔가를 만들려고 보면 뭘 만들지 생각이 안난다는게 가장 큰 문제거든요.
그래서 게임을 만들고 싶다는 생각만 가득 품은 채 실제 행동으로 옮기는 데는 조금 시간이 걸렸습니다.
계기는 예상치 못한 곳에서 찾아온다
게임을 만들어 보자는 원대한 계획은 제 마음 속에서만 머무른 채 시간만 계속 지날 무렵, 저는 훈련소 시절 친구를 만나기 위해 ‘서울 코믹월드’ 에 방문하게 되었습니다.
이 친구는 서브컬처 업계에서 일을 하고 있기 때문에 본인이 제작한 굿즈 판매 등을 하기 위해 주기적으로 이런 행사에 나온다고 합니다.
이 친구도 볼 겸, 운영하는 부스도 구경할 겸 일산 킨텍스로 향하게 되었습니다.
계획대로 친구도 만나고 부스 구경도 끝난 무렵에 다른 부스들은 어떤 것을 팔고 있나 구경을 하기 시작했습니다.
여러 부스가 있었지만 제 눈길을 사로 잡았던 부스는 따로 있었는데, 그 부스는 굿즈를 파는 일반적인 부스였으나 다른 부스와 차별 점을 두기 위해 자체 제작한 게임을 홍보 수단으로 사용하고 있던 것입니다.
물론 게임 아이디어는 어딘가에서 봤던 게임을 그대로 제작한 듯 했지만 부스 홍보 수단의 게임 이라는 참신한 아이디어는 제 창작욕에 불을 지피기 충분했습니다.
“고작 그게 뭐라고 그렇게 까지?” 싶으실 수 있는데 제 생각이 행동으로 쉽사리 나오지 못하는 이유는 크게 두 가지입니다.
- 이걸 어디부터 시작해야 하지?
- 이걸 해서 얻는게 뭐지?
위와 같은 고민들이 해결되지 못하기 때문에 쉽사리 행동으로 옮겨지질 못하고 있었습니다.
그런데 명확한 목적이 생긴다면 이야기는 달라집니다.
명확한 목적은 작업의 범위와 동기를 부여해주고 제가 다른 짓을 못하게 붙잡아 두는 좋은 수단이기 때문입니다.
분명 가볍게 시작하려 했는데
하지만 첫 작품부터 성대할 수는 없는 법이기에 가볍게 마음을 먹고 작업에 착수하고자 친구에게 문자를 날렸습니다.
저는 그저 일러스트레이터인 친구한테 부탁하면 여태까지 그린 그림이 많을테니 그 중에서 몇 개 정도 따줄 수 있지 않을까 하는 마음에 가볍게 물어봤습니다.
그러자 이 친구는 아예 처음부터 다시 그려줌과 동시에 게임에 등장하는 굿즈를 실물로 제작해서 판매 하자는 원대한 계획까지 제안 하게 되고 제 초기 생각과는 다르게 굉장한 스케일로 커지고 있었습니다.
까짓거 함 해보죠 뭐
게임 주제 정하기
여차저차 해서 초기 계획과는 다르게 너무나 원대해진 계획을 통해 만들고자 정해진 게임은 위 채팅에서도 보실 수 있듯이 ‘수박 게임’의 레플리카 였습니다.
유튜브 알고리즘을 지배했었던 수박 게임
이 게임을 지정한 데에는 나름의 이유가 있습니다.
- 퍼즐 게임의 특성 상 App-Like 게임으로 제작하기 쉽고
- 게임 규칙이 단순해서 추가적인 이해나 설명이 필요하지 않으며
- 게임 제작에 익숙치 않은 제가 제작할 수 있을법한 제작 난이도가 그리 높지 않은 게임이기 때문입니다.
플랫폼 정하기
행사를 둘러보는 사람들이 타겟이므로 부스 앞에서 QR코드로 인식하여 플레이 할 수 있도록 모바일 대상 플레이어로 한정하여 제작했습니다.
배포 인프라 정하기
이 부분에서 고민을 조금 많이 했습니다.
서울 코믹월드 특성 상 2차 창작 굿즈가 대세이기 때문에 저희가 제작할 게임도 2차 창작물이기 때문입니다.
구글 플레이스토어는 2차 창작 앱도 여러번 보았기 때문에 이 부분에서 문제가 그다지 되지 않으리라 예상 되었지만 문제는 아이폰 사용자들을 위한 앱을 어떻게 배포하느냐 였습니다.
App Store는 구글 플레이스토어와 다르게 2차 창작물이 배포 되기 어려운 환경일 뿐더러 일정 수준 이상의 퀄리티가 보장 되지 않으면 배포 단계에서부터 문제가 생깁니다.
그렇다고 행사장에서 플레이 하고자 마음 먹은 아이폰 유저를 내칠 수도 없는 노릇 이기에 최종적으로 결정한 플랫폼은 웹이 되었습니다.
Unity 기반으로 제작 된 게임은 WebGL 기반의 빌드를 매우 간단하게 할 수 있기도 하구요.
또한 웹 플랫폼 특성상 Provider의 심사와 같은 제약이 없기 때문에 지금 같은 상황에 최적의 플랫폼이라 판단했습니다.
레벨 디자인
레벨 디자인은 초기 12레벨까지 구현하려고 했습니다. 워낙 하고 싶은 것도 많았고 난이도가 제법 있어야 클리어 했을 때의 성취감이 있을 것이라는 판단이었어요.
하지만 다시 우리의 유저를 생각했을 때 12레벨은 현실적으로 무리가 있다고 판단 되었습니다.
보상을 얻기 위한 허들이 너무 높으면 안됐고, 이전에도 말씀 드렸듯이 부스를 탐방해야 하는 행사 특성 상 한 곳에서 시간을 오래 투자하기란 힘들기 때문이었어요.
최종적으로는 9레벨로 축약하여 게임에 반영하였고 이 판단은 행사장에서 빛을 발하게 되었습니다.
Scene 설계
Scene은 Unity에서 게임을 구성하는 여러 페이지를 나타냅니다.
게임을 계획했던 초기에는 홈 화면, 게임 화면, 결과 화면 총 3가지로 구성을 하고자 했으나 주어진 시간이 그렇게 많지 않았기에 홈 화면과 게임 화면 두가지로 구성하고 나머지는 Dialog로 풀어내게 되었습니다.
그렇게 제작 된 홈 스크린과 게임 스크린
화면 비율 설정과 반응형 UI 구성
게임을 플레이 할 유저층이 모바일 유저이기에 화면 비율은 9:16 으로 구성하였습니다. 세로 화면으로 플레이 하는 모바일 게임은 일반 데스크탑 모니터 비율의 반대를 갖기에 실제 게임 개발 당시에도 게임 스크린 기준점을 1080 x 1920으로 설정하고 작업했습니다.
반응형 UI는 웹과 다르게 게임에서는 신경 써야 할 부분이 매우 많다고 느꼈습니다.
Button UI를 코드로 구성하여 런타임에 계산하는 웹과는 다르게 이미지를 활용하여 구성해야 했기 때문에 비율을 신경써야 해서 크기와 레이아웃 배치에 보다 공을 많이 들였습니다.
그리고 각각의 요소들이 배치 되는 기준점 (Anchor)을 직접 조정하여 캔버스에 배치해야 여러 사이즈에서 각각의 요소들이 제 위치에 배치 되기 때문에 이 개념을 이해하느라 시간을 다소 할애했습니다. 이제 와서 생각해보니까 CSS의 Left, Top으로 배치하는 Absolute 요소의 개념과 크게 차이가 없었던 부분이네요.
그 외에도 수많은 배경지식을 학습하고 이해 하느라 삽질을 좀 많이 했습니다.
-
width: 100%과 비슷한 포지션을 갖는 Stretch - Canvas를 렌더링 하는 기준을 설정하는 Render Mode 설정 방법
- 게임 영역 바깥에 오브젝트가 탈출하게 되면 잔상이 남는 이슈
위와 같은 이슈들을 해결 하다보니 확실히 새로운 영역으로의 도전은 쉽지가 않다는 생각이 들었습니다.
행사 당일
행사장 도착 후 준비
부스 참가자 입구로 들어가는 날이 다 오네
자차로 50분을 내달려 일산 킨텍스에 도착했습니다.
비가 내린 날인데도 불구하고 입구부터 다양한(?) 목적으로 방문하신 분들이 행사장 입구에서부터 모여계셨는데 이 분들이 서계신 줄이 아니라 부스 참가자 입구로 들어서면서 영문 모를 승리감이 느껴졌습니다.
테마파크에서 패스트 패스 구입하신 분들이 이런 기분이셨을까요
제 친구는 저보다 한 시간 일찍 행사장으로 출발하여 부스 설치를 마무리한 시점이었습니다.
물론 제 친구에게 얹혀서 참가하는 입장이긴 하지만 나름 공동 참가자인데 부스 설치를 같이 진행하지 못한 부분에서 조금 미안하다는 생각이 들었습니다.
먼저 와서 자리 깔고있는 내 친구
E열에 배치 된 부스에 도착하고나니 친구가 오밤중에 프린트한 게임 웹사이트 접속용 QR코드 종이가 눈에 띄었습니다.
이번 부스를 오픈하는데 도움을 준 다른 분들과도 인사를 나누고 났는데도 손님들이 오시려면 아직 시간이 남았기에 다른 부스의 오픈 과정을 구경했습니다.
행사 시작
실제로 행사가 시작되고 나니 수많은 사람들이 부스 앞을 지나다니는 모습을 보게 되었습니다.
인기 작가의 부스에는 줄을 관리 해주는 인원이 따로 챙겨야 할 정도로 줄이 길게 서기도 하고, 어떤 작가 분은 팬이 직접 방문하여 인사를 나누고 악수도 하는 모습을 보고 있으니 제가 몰랐던 업계의 일면을 보는 것 같아 굉장히 신기했습니다.
제 친구도 나름 이런 부분에서 팬층이 꽤 있는지 ‘커뮤니티 보고 왔어요’ 라는 인삿말과 함께 음료와 빵을 건네주는 분들이 꽤나 많이 방문하더라구요.
실제 유저를 만나다
부스에 방문하는 방문객 분들 중 예상보다 많은 분들께서 게임 플레이에 참여해주셨습니다.
그 중에서 가장 기억에 남으시는 분은 휴가를 받고 행사장에 오신 현역 군인 분이셨는데요. 게임에 나름 열심히 도전 해주셨지만 생각보다 긴 플레이타임에 결국 최종 퍼즐까지 완성하시진 못하시고 돌아가시는 모습을 보았습니다.
최대한 플레이타임을 짧게 가져간다고 노력했는데 현장은 그보다 더욱 촉박했다는 것을 간과했습니다.
그럼에도 불구하고 끝까지 현장에서 플레이 해주신 분들이 인증을 해주셔서 더욱 감사함을 느끼게 된 하루였습니다.
클리어 인증을 해주신 분들이 굉장히 많았다
눈 앞에서 받은 이슈 리포팅
현업에서 나름 오래 있으면서 마이너한 이슈에 대한 리포팅은 VOC를 통해 많이 받아봤고 이에 대해 익숙해졌다고 생각했는데 실제 유저가 눈 앞에서 이슈 리포팅을 하는건 완전 색다른 경험이었습니다.
특정 기종에서 접속하면 시작 버튼이 가로로 쭉 늘어져 보인다던가, 오브젝트가 화면 바깥으로 나가는 등의 이슈가 제보 되었을 때에는 진심으로 어딘가에 숨고 싶다는 생각이 들 정도로 부끄러웠거든요.
현장에서 이슈 핫픽스 하고있는 개발자
현장에서 버그가 발생하면 바로 대응하기 위해 현장에 직접 노트북을 들고 간 보람이 있는 하루였습니다 😢
후기
여러모로 부끄러운 상황도 많이 있었지만 진심으로 색다르고 재미있는 경험이였다고 생각하고 다음번에도 참가하고 싶다는 생각이 들정도로 뜻 깊었습니다.
새로운 기술을 배우는건 익숙한 기술을 사용하는 것 보다 많이 더디고 힘든 과정이라고 생각합니다.
그런 과정을 딛고 게임을 만들고 사람들이 눈 앞에서 즐겨주시는 모습을 보니까 이런게 바로 창작자의 동력이 아닌가 다시금 느끼게 된 순간이였습니다.
위에서 만든 게임은 비록 저의 수 십 시간이 들어간 수익 0원의 게임이지만 이 날의 경험을 토대로 언젠가는 저만의 게임을 만들어서 수익도 내보고 싶습니다.