초고
최종 발표가 끝난 지 벌써 5일이 지났다. 푹 쉬고 본가로 돌아갈 준비를 하다가 이제서야 최종 발표 후기를 작성해본다.
기획 확정
우리팀은 기획을 정말 매 주마다 갈아엎었다. AI 기반 소비자 여론 분석 플랫폼, 글로벌 둥실둥실 돛단배, 숏츠리스트 플랫폼, AI 동영상 자동 편집 플랫폼.. 매 주마다 기획안을 발표하고 코치님들에게 까이고를 반복하다가 폴리싱 기간을 3주 앞두고 더 이상 미룰 수 없다 생각하신 코치님이 아이디어를 하나 던져주셨다. 코치님의 의견을 바탕으로 "Hand Detection 기반의 대전 게임"으로 방향성을 잡았다.
여기서부터는 게임에 대한 기획이 문제가 되었다. 게임을 기획하는 데는 특히 "재미"라는 요소가 중요시되었는데 아무래도 "재미"는 개인의 주관의 영역이다보니 피드백을 주시는 코치님들의 의견도 꽤나 상이했다. 그래서 게임 기획도 갈피를 잡지 못하고 2번이나 기획을 엎게 되어버렸다.
ClimbUp
처음에 기획했던 것은 Hand Detection(손)으로 게임을 조작한다는 컨셉에 맞춰 등산 게임을 기획했었다. 3D로 만들기에는 시간이 부족할거라 생각해 정말 단순하게 2D 맵 상에서 캐릭터를 조작할 수 있도록 구현하였다. 웹 상에서 게임을 만들기 위해 Phaser3라는 라이브러리를 사용하였다. 사용하기 어려운 툴은 아니었지만 처음 쓰는 것이다보니 게임을 만드는 것만도 오래 걸렸고, Hand Detection은 집어넣지 못한 채로 기획 발표를 진행했다. 코치님들에게 받은 피드백은 다음과 같다.
- UX를 잘 짜봐라.
- 등반 모션으로 오르는 것이 뭐가 재밌는건지 잘 모르겠다.
- 1기 때처럼 모션인식해서 게임하는건 거의 같지만, 컨셉이 다르면 또다른 재미를 줄 수 있다.
- 게임으로서 어떤 것이 더 재밌을지 잘 생각해봐라.
손들어(Tetris)
등산이 재미없게 보인다고 생각했고 뭔가 좀 더 전통성 있으면서 누구나 알고있는 게임으로 방향을 바꾸었다. 그것이 Tetris이다. 이번 기획은 말 그대로 테트리스인데 Hand Detection으로 조작한다. 손을 왼쪽으로 저으면 왼쪽 1칸, 오른쪽으로 저으면 오른쪽 1칸, 위로 저으면 회전, 아래로 저으면 가속. 싱글 테트리스 자체는 문제 없이 구현하였다. 그러나 모션 인식이 들어가면서 손을 인식하는 매 밀리세컨드마다 React State가 변경되면서 렌더링이 발생하게 되었다. 이는 블록 겹침 문제, 블록 충돌 시 게임 터짐의 문제로 이어졌다. React.js를 처음 사용하면서 최적화도 하지 못하고 마구잡이로 구현하다보니 발생한 문제였다. 이번에도 게임을 만드는 데에 시간을 많이 썼고, 에러를 잡지 못한 채로 발표를 진행했다.
- 기술적 뾰족함에 대해 "애매한 것 같다"는 답변.
- 어떻게 확장할 수 있을지가 주요 관건.
- 테트리스를 손으로 조작해야할 이유가 있나?
HandsUp
테트리스 렌더링 문제로 에러가 계속 터졌고 거기다가 코치님들의 반응도 미묘했어서 결국 또 게임 기획을 엎게되었다. 영감을 얻기 위해 Agar.io, 뱀서라이크, 끄투, Snake.io와 같은 여러 웹 게임도 참고해봤다. 그러나 최종 발표를 2주 앞두고 부족한 개발 기간 내에 처음 보는 게임을 구현할 수 있을지 알 수 없었다. 우리팀의 프론트엔드는 나 하나 뿐이라서 너무 스케일이 큰 프로젝트는 불가능했다. 결국 다시 한번 코치님의 의견을 받아 "동작 따라하기 게임"으로 기획을 최종 확정을 냈다.
게임 규칙
4x4 의 테이블에서 유저들은 Hand Detectiond으로 테이블의 칸을 하나씩 칠 수 있다. 상대방의 턴이 되면 상대방은 앞 사람이 쳤던 칸의 순서를 그대로 따라친 후 한 칸을 더 치면서 기억해야 할 칸의 수를 늘린다. 이렇게 상대방과 턴을 주고받으면서 누군가가 잘못된 칸을 친다면 해당 유저가 패배하고 게임은 종료된다. 쳐야하는 칸의 순서를 최대한 오래 기억하고 있어야 하는 게임이다.
폴리싱
테트리스에서 게임 최적화 이슈를 느끼고 React.js에 대해 깊게 공부해볼 필요성을 느꼈다. 시간이 부족하지만 Udemy의 리액트 강의를 사서 1.5배속으로 필요한 부분 만을 골라서 들었다. 다행히 게임 개발은 6시간 만에 완료되었다.
"Hand Detection의 어떤 모션으로 화면을 터치할지"도 주요 관건이었다. 단순히 손이 화면과 가까워진 순간을 인식하기에는 손의 어느 지점을 인식할지, 손이 대각선으로 움직이면서 칠 때의 인식 오류 등의 문제가 있었다. 손가락을 한 군데에 모으는 것으로 화면을 터치하도록 한 것은 반응성은 좋았지만 코치님들에게서 "화면 터치는 말 그대로 화면을 치는듯한 모션이면 직관적일 것 같다."라는 피드백을 받았다. 최종적으로 "검지 손가락을 뒤에서 앞으로 치는 모션"으로 화면 터치를 구현하게 되었다. 검지 손가락을 뒤에서 앞으로 꺽는 각도는 여러 시행착오를 겪으면서 15도의 최적의 각도를 찾아냈다. 각도가 너무 작으면 손을 움직이는 것만으로도 모션을 인식해버려서 인식 오류가 빈번해졌다. 각도가 너무 크면은 인식 오류는 없지만 손목을 많이 꺽어야해서 사용자에게 무리를 준다.
상대방과 턴을 주고받으면서 실시간 게임 근황을 주고받기 위해 Socket.io를 사용했다. 내가 클릭한 블록을 Socket.io로 상대방에게 보내고 턴이 바뀌거나 게임 시작/종료일 때도 주고받는다. 소켓 통신을 사용해서 원활한 실시간 대전 게임을 구현할 수 있었다.
최종 발표 일주일 전부터는 게임 개발보다는 UI/UX 적인 부분에 집중했다. 단순하게 블록을 터치하는 것보다는 신나는 효과음이 나오면 좋을 것 같다 생각했고, 이 생각이 이어져 "런치패드"에 도달했다. 런치패드는 테이블의 칸마다 서로 다른 음악을 내장하고 있고 적절한 비트에 블록에 치는 것으로 음악을 재생할 수 있다. 여러 음악을 조합하는 것으로 더 멋진 음악을 만들어낼 수 있는 런치패드를 컨셉으로 게임을 폴리싱하기로 했다.
발표 준비
최종 발표 3일 전까지 팀장인 내가 발표도 진행할 생각이었다. 그러나 당장 개발하기에도 부족한 시간에 발표까지 맡아서 하니 개발은 개발대로 못하고, 발표도 무진장 못했다. 결국 팀원에게 발표를 맡기고 나는 개발에만 몰입했다.
발표를 어떤 식으로 할지도 고민거리였는데, 단순히 설명식으로 하기보다는 상황극을 섞어서 보는 사람들도 재밌게 연출하는 것이 권장되었다. 우리도 상황극을 할까 싶었는데, 팀원분이 갑자기 "게임대회"를 하자는 말을 시작으로 여러 이야기를 하게됐다. 최종 발표에서 "진짜로 게임 대회를 열어서 1등에게 상품을 주자"와 "상황극 형식으로 게임 대회를 하자"로 나뉘었는데 아직 버그도 다 잡지 못한 상태에서 게임 대회를 열었다가 터지면 매우 곤란하니까 그래도 안전한 상황극 형식으로 가게 되었다. 최종 발표 이틀 전에 간신히 발표 컨셉을 잡을 수 있었고, 결국 우리 팀은 최종 발표 당일 새벽 5시까지 발표 연습을 할 수 밖에 없었다.
최종 발표 당일
이틀밤을 새고 하루 전날 뽑은 포스터를 챙긴 뒤, 다같이 크래프톤 사옥으로 출발했다. 최종 발표는 크래프톤 사옥에서 협력사 관계자들 앞에서 진행된다. 너무 피곤해서 긴장은 안 되었다. 그러나 리허설에서 문제가 터졌다. 리허설 도중 게임 화면에서 보여야 하는 웹캠이 중지되고 게임이 멈춰버렸다. 다급히 에러가 터진 부분을 체크하고 코드를 수정했지만 또 터졌다. 본 발표까지 몇 시간 남지 않은 상황에서 계속 에러가 터져버리니, 코치님들은 최악의 상황일 때는 미리 찍어둔 동영상을 재생하라고 하셨다. 그러나 한 달을 넘게 준비한 프로젝트에서 동영상 발표로 대충 때우는 짓은 죽어도 하기 싫었다. 콘솔 로그를 계속해서 찍으면서 에러가 터진 부분을 확인했고 결국 고치는데에 성공했다. 손가락에 이미지를 입히면서 손가락 좌표값 변수에 undefined 체크를 해주지 않아서 생긴 문제였다.
크래프톤 사옥
최종 발표는 역삼역 센터필드 35층의 크래프톤 사옥에서 진행된다.
최종 발표
최종 발표는 나름 재밌게 한 것 같다. 게임 시연 상황극 후 외부 유저를 불러서 1대1 배틀. 중간에 다른 에러로 게임이 멈추긴 했었지만 애드리브로 잘 넘겼다. 정말 조마조마했다.
발표 이후 포스터 세션에서는 우리 프로젝트를 재밌게 보신 여러 협력사 관계자분들과 크래프톤 정글 교육생들에게 질문을 받고 대답하는 시간을 가졌다. 생각보다 관심 있게 봐주신 분들이 많아서 놀랐다. 주로 물어보신 것들은 "화면 터치를 어떻게 구현했냐"였다.
이후
발표를 마치고 복귀하자마자 잠들었다. 오후 7시부터 오전 3시까지 기절했다. 그 다음날부터는 이력서를 쓰기 위한 원티드 프리온보딩과 코딩 테스트 준비, 면접 준비를 하며 시간을 보냈다.
5주가 넘는 기간 동안 준비한 프로젝트를 완전히 성공적으로 보여주지 못한 것은 아쉽지만, 망친 것은 아니라서 나름 만족하고 있다. 최종 발표는 끝났지만 이번 프로젝트를 개인적으로 조금 더 디벨롭시켜보고 싶은 욕심이 있다. 기획만 빨리 잡았어도 넉넉한 개발 기간 속에서 조금 더 완성도 있는 결과물을 보여줄 수 있었을텐데.. 아쉽다.
HandsUp github: 깃허브
'프로젝트 > 나만무' 카테고리의 다른 글
[나만무] mediapipe 에러 해결 (0) | 2023.08.08 |
---|---|
[나만무] 프론트엔드 CI/CD 적용 (0) | 2023.08.08 |
[나만무] 프론트엔드 S3 배포 (0) | 2023.08.08 |
[나만무] 2차 발표 후기 (0) | 2023.07.27 |
[나만무] 프론트도 어렵다 (0) | 2023.07.24 |