[리뷰] 2020 KUCC 게임잼 후기 - 개발

처음에는 행사 진행만 할 계획이었는데, 팀 랜덤 매칭을 신청한 인원들의 팀원 수를 맞추기 위해 개발에도 참여하게 되었다. 우리 박진용 팀은 수홍선배랑 하민선배, 나 이렇게 셋으로 이루어졌는데, 수홍선배는 원래 밤샘 참여는 안 하기로 했고 나는 진행 때문에 계획이나 사전 준비를 할 수 없는 상황이었다. 그래서 당일날 만나자마자 어떤 게임을 어떻게 만들지 정해야 했다.

 

기획 |

나는 프론트엔드 개발을 하고, 팀원들이 백엔드 개발을 해서 온라인 웹 게임을 만들기로 했다. 사전 계획이 없었는데도 갖고 있는 기술 스택들이 맞아서 다행히 다들 기여할 수 있게 됐다. 기획한 게임은 온라인 단어 마피아 게임이었다.

하민선배가 그린 기획 그림.

처음에는 어몽어스 이야기가 나왔다가, 플레이어들의 움직임을 만들기 어려울 것 같아서 '마피아'라는 큰 틀만 잡고 단어 마피아로 가닥을 잡았다.

프론트엔드는 나 혼자서 리액트로 개발했고, 백엔드는 다른 팀원들이 파이썬 장고로 개발했다. 기획이 크고 개발 시간이 짧은 만큼 우선은 버그가 있더라도 완성해서 결과물을 내는 것을 목표로 했고, 사소한 부분에 매달리지 않도록 주의했다. 특히 나는 평소에 프론트엔드 개발을 할 때 사소한 부분(border-radius를 1.5rem으로 둘지, 1.4rem으로 둘지 같은)에 신경을 많이 쓰는 편이었는데, 이번 프로젝트에서는 큰 틀부터 작업하려고 노력했다.

개발 |

결과적으로는 원래 밤샘 계획이 없었던 수홍선배도 집에 못가고 밤새서 팀원 모두 미친듯이 코드만 쳐야 했다 ㅋㅋ😲 기획이 생각보다 너무 컸는데다가, 내 노트북의 사양 때문에 백엔드를 내 노트북에서 돌릴 수가 없어서 서버를 따로 배포하느라 개발 중반부까지 프론트엔드랑 백엔드를 연결을 못하고 진행했기 때문에 조금 불안했다. 백엔드 서버에 요청하는 코드를 써야 하는데, 실제로 요청을 못 보내서 그냥 api 설명 보고 우다다다 미리 작성해두었다. 다행히 서버가 임시로 배포가 되고, 디버깅을 하면서 감을 잡은 이후로는 작업이 쭉쭉 진행되었다.

대기 방장이 게임을 시작하기 전 대기 상태 설명 시민 팀: 등장한 제시어를 10자 이내로 설명하기 마피아: 다른 시민들의 설명을 보고 눈치껏 제시어를 유추해 10자 이내로 설명하기 투표 가장 마피아같은 사람을 투표한 후 최다 득표자 사망 → 마피아 사망시 시민 팀 승리 추측 마피아가 살아남았다면 마피아가 제시어를 맞힘 → 정답일 시 마피아 승리, 오답일 시 다음 라운드로

게임 구조는 이렇게 4개의 사이클로 이루어졌는데, 각각의 경우는 서버에서 처리하고 나는 방의 상태를 폴링으로 3초마다 서버에 요청해 받아와야 했다.

필요한 화면 구성은 크게 플레이어들의 아바타와 말풍선이 표시되는 화면 / 채팅창 / 룰 가이드 화면 이렇게 세 부분이었다. 요청이 많아서, graphql같은 언어를 사용했으면 각 컴포넌트들에서 요청을 보내더라도 부담이 덜했을텐데 axios로 모든 데이터를 한번에 받아왔기 때문에 컴포넌트들을 분리하되 최대한 부모 컴포넌트에서만 요청을 보내고 정보를 props로 아래 컴포넌트들에 전달하도록 했다. 플레이어들이 표시되는 화면을 좌측 상단에 두고 그 밑에는 룰 가이드 화면, 오른쪽에는 채팅창을 두었다. 채팅 기능도 구현을 하려고 했는데, 우선순위를 뒤에 두었고 시간이 너무 부족해서 결국 구현을 할 수 없었다. 차선책으로 상용 온라인 채팅 서비스를 붙이자는 의견이 나왔는데, 그마저도 시간이 촉박해 실제 게임 부분을 구현하는 데에 집중해야해서 하지 못했다. (이 부분은 게임잼이 끝나고 난 후에 더 개발해볼 생각이다.)

대기

대기 상태일 때는 폴링으로 현재 방 상태를 서버에서 계속 받아오며 플레이어들의 입장 상태를 업데이트해주었다. 가이드 화면에는 방장일 경우 게임 시작 버튼을, 방장이 아닐 경우 대기 안내 메세지가 뜨게 했다.

플레이어 캐릭터는 입장 순서에 따라 고정되게 했고, 아바타 이미지는 r-4bb1t.github.io/mini-me/ 프로젝트에서 랜덤으로 만들어서 가져왔다.

설명

설명 상태에서는, 서버에서 정해주는 설명 순서에 따라 제시어 입력 팝업을 띄우게 했다.

 

마피아의 경우에는 제시어를 알려주지 않는다. 입력된 제시어 설명은 플레이어 밑에 말풍선처럼 뜨게 했다.

투표

각 플레이어들이 가장 마피아같은 사람에게 투표를 하면, 서버에서 최다 득표자를 사망처리한다. 이 때 자꾸 마지막 인덱스의 플레이어가 사망하는 버그가 있었는데, 서버에서 사망처리를 할 때 해당 플레이어의 인덱스가 맨 뒤로 가서 생긴 문제였다. 서버에서 입장 순으로 플레이어들을 정렬해주자 문제가 해결되었다. 이 버그 때문에 정상적인 게임 플레이가 불가능했는데, 다행히 최종 시연 직전에 정렬로 해결했다.

 

라운드가 넘어가면 말풍선 위치가 하나씩 밀리고, 죽은 플레이어 밑에도 말풍선이 뜨는 버그가 있었다. 말풍선 위치가 밀리는 이유는 서버에서 각 라운드가 끝날때 설명하는 사람을 넘겨주지 않아서였고, 각 설명들을 플레이어별로 받아오는 게 아니라 한번에 받아와서 표시하다 보니 죽은 플레이어 밑에도 말풍선이 뜨는 것이었다. 이유는 알았지만 최종 시연 시간 직전에 발견해서 이 버그들은 시연 때까지 해결하지 못했다. 

메인

메인 페이지는 개발 시간을 줄이기 위해 최대한 간단하게 만들었다. 닉네임과 방 코드 입력란이 있고, 방 생성을 하면 유저가 방장이 되고, 서버에서 방 코드를 만들어준다. 방장이 아닌 경우 방장의 방 코드를 입력해 입장하면 된다.

 

생각보다 완성도있게 만들어져서 너무 맘에 들었다. 게임 제목은 원래 가제 '박진용 게임'이었는데 마피아 게임이니까 마피아 박진용으로 바꿨다.

 

결과 |

개발하는 우리 팀 (왼쪽 세명) / 마피아 박진용 최종 시연

하민선배 / 나 / 수홍선배

투표 결과 '주제 적합성' 항목에서 1위를 해 함께상을 수상하게 되었다🎉🎊🎆

아무래도 참가팀 중 유일하게 온라인으로 여러 명이 함께 참여할 수 있는 게임이었던 점이 가장 컸던 것 같다. 팀에 백엔드 개발자가 둘이어서 온라인 게임 개발이 가능했다. (나 혼자였으면 생각도 ❌) 랜덤 팀 매칭에 기술 스택도 당일날 맞추어 보았는데도 좋은 결과물이 나와서 참 만족스럽다. 팀원들 다 각자 맡은 일들 너무 뚝딱뚝딱 잘 했다. 나는 웹으로 게임은 거의 처음 만들어보는데다 백엔드랑 실시간으로 연결이 많이 필요한 작업에서 이렇게 협업을 많이 해본것도 처음인데, 어려웠지만 정말 재밌었고 생각보다 결과물이 완성도있게 만들어져서 너무 맘에 들었다. 우리가 봐도 하루만에 솔직히 정말 잘 만들었다😎. 우리 팀 최고!

 

마피아 박진용은 현재 kucc.github.io/RDTeam/에 배포되어 있다.