WAG - Web Appends Game
두 번째 프로젝트 시작!
이제 막 1학기가 시작된 터라 정신없이 전공 수업을 들으러 다니고 있었다.
이번학기도 어림없이 동아리에서 프로젝트를 하나 진행해야 했고, 어떤 프로젝트를 해야할지 고민하고 있었다.
그러던 중 이전에 같이 프로젝트를 만들었던 친구가 이번학기 프로젝트도 같이 진행해보자고 제안하였고
어떤 프로젝트를 만들껀지 알려주기도 전에
바로 진행시켜!!
이번학기도 재밌게 프로젝트를 진행할것 같은 느낌이 들었다.
하지만 저번학기 프로젝트와는 조금 다른점이 있었다.
저번 프로젝트는 처음 동아리에 들어와 리엑트를 어떻게 쓰는건지도 모르는 상태에서(html, css만 할 줄 알았음ㅠ) 프로젝트에 투입되어 같은 프론트앤드를 개발하는 팀원, 거의 나에겐 사부님이었다,, 그분께 리엑트를 배우면서 프로젝트를 진행했었다.
정말 바빴지만 실력은 엄청 늘었었다.
대부분의 중요한 기능이나 UI는 사부님이 만들었고, 나는 조금 지엽적인 기능과 UI를 만들었었다.
하지만 이번에는 내가 프론트를 책임져야하는 위치에 놓여 있었다.
다행히 방학 때 부족했던 리엑트를 조금 채워놓아서 이론적인 부분은 할만했었다.
프론트 일정, 협업, 백엔드와의 소통, 배포, 약간의 멘토링,,, 이것들은 논외였다.
과연 내가 할 수 있을까?
라는 의구심이 들었지만 작년에 했던 프로젝트를 생각해보면 힘든만큼 성장했던게 보였기 때문에
이번에도 힘들지만 성장을 할 수 있는거겠지?
라는 생각으로 프로젝트를 진행시켰다.
어떤걸 만들어볼까?
사실 내가 참여되기 전에 어떤것을 만들지는 정해져 있었다.
혹시 양세찬 게임을 아는가?
나의 정답어는 머리위에 두어 그 정답어가 무엇인지 모른 채 상대방이 주는 정보로 그것을 알아 맞춰야 한다.
잘 모른다면 아래 런닝맨 유튜브를 본다면 어떤건지 알 수 있을것이다 ↓ ↓ ↓ ↓
양세찬 게임을 웹 기반으로 만들어보면 어떨까?
라는 생각을 했었다.
어떻게 만들어볼까?
먼저 메인 페이지와 게임 화면, 랭킹화면 등을 구상해보았다.
우린 최대한 단순하고 심플하게 게임을 구상하고자 하였다.
필요한 기능들을 심플하게 화면에 넣을려고 했었고, 게임 화면을 어떻게 배치할 것인지 고민을 했었다.
그리고 전자칠판으로 대략적인 순서도와 구조도를 그렸다.
첫주차는 구상과 일정 조율을 하는데 거의 다 썼던거 같다.
게임 순서는 이렇다.
- 유저가 방을 생성하거나 참가한다.
- 최대 6명 까지 참가할 수 있고, 방장이 게임 시작을 누르면 게임 대기방에 있던 유저들과 함께 게임이 시작된다
- 자기 차례일 때 나의 정답어에 대해서 실시간 채팅으로 물어본다
- 나의 차례일 때 : 나의 정답어에 대해 물어본다 >> 나머지 유저들을 그에 대해 대답
- 상대방 차례일 때 : 상대방이 물어보는 질문에 대답
- 3명이 정답어를 맞추면 게임이 종료된다.
- 소셜 로그인을 통해 게임 포인트를 누적, 서버 전체 순위를 확인할 수 있다.
순서도를 생각하면서
게임 로직을 프론트에서 어떻게 구현해야할까
걱정이 되었다. 실시간으로 채팅을 하면서 그 경우의 수에 맞게 UI를 변경해야 한다는 점이 어려울 것 같았다.
조금이라도 여유가 있을 때 실시간 채팅을 위한 소켓에 대해 공부를 해야겠다는 생각을 했다.
그리고 피그마로 메인 페이지를 만들어보았다.
실시간 채팅을 위한 소켓
우리 팀은 어떤 중요한 오류가 발생되었거나 개발이 중단되는 일이 생길때 마다 트러블슈팅을 기록했었다.
여러 일들이 있었고, 이 중에서 우리들을 가장 골치아프게 했던것은 다름아닌 소켓 활용이었다.
일단 소켓을 백엔드와 연동하는 첫 번째 단추부터 정말 어려웠었다.
구글링을 통해서 관련 코드들이 많았지만, 사람마다 코드들이 너무 달라서 차용해서 쓰는게 잘 안되었다.
정말 다행히도 우리 동아리에 소켓으로 실시간 채팅방을 만들어봤던 친구가 있어서 그 친구의 힘을 굉장히 많이 받았었다.
우리는 그를 은인이자 신이라고 불렀다,,
우리를 굉장히 골치아프게 했던 점은 소켓이 페이지가 전환되었을 때 소켓 연결이 끊긴다는 점이었다.
소켓이 끊기면 해당 소켓의 DB가 모두 날라가버려 게임이 진행될 수가 없었다.
그래서 프론트는 페이지 구상을 수정해야 했다.
원래 계흭은 게임 대기방과 게임 플레잉 방 페이지를 따로 만들려고 했었다.
하지만 앞에서 언급했듯이 페이지가 전환되면 소켓과 연결된 DB도 사라져 게임을 할 수 없었다.
그래서 게임 관련 로직들은 모두 한 페이지에서 시작되고 끝나도록 만들어야 했었다.
지금와서 찾아보니깐 소켓 연결이 끊기지 않는 방법이 있었다고는 하지만 그 당시에는 이 방법이 최선이었고, 결과적으로 꽤 잘 만들어졌었다.
덕분에 우리의 게임 페이지 코드는 1450줄 까지 적혀젔다.
다행히 실시간 채팅도 잘 되었고, 게임 로직도 차근차근 만들어갈 수 있었다.
우리 팀은 Stomp 프로토콜을 사용해 실시간 채팅 및 동적 UI을 만들었다.
프론트엔드에서 게임 로직을 만들어보자
자, 이제 게임 로직을 만들어야 한다.
사실 우리 프로젝트는 게임 로직 즉, 게임이 제대로 구동되지 못하면 아무 의미가 없는 프로젝트가 된다.
가장 중요한 기능이고, 가장 개발 기간이 많이 투자될 것임이 예상되었다.
따라서 게임 로직을 가장 먼저 개발하고, 부수적인 랭킹 기능이나 소셜 로그인 기능은 가장 마지막에 개발하도록 하였다.
그리고 이 판단은 신의 한 수가 되었다.
실제로 게임 로직은 "짠!! 완성" 이런 느낌으로 완성 되었다기 보단 "이제 더이상의 예외 처리는 없을거야." 라는 안도감과 약간의 의구심과 함께 점진적으로 완성되어갔다.
먼저 발생 될 경우의 수를 타이핑 한 후, 그 경우에서 필요한 소켓과 api 등을 명시하였다. 그런 후 개발에 착수하였다.
혼자 크롬, 크롬 시크릿, 엣지 등을 사용해가면서 로직들이 잘 구동되는지 무한 테스팅을 반복하였다.
소켓(실시간 통신)을 활용해 로직을 만들고, UI를 변경해줘야 하는 점은 생각보다 어려웠다.
어떤 경우는 리엑트가 소켓의 통신 속도를 따라가지 못해 어쩔 수 없이 딜레이를 줘야하는 경우도 있었다.
로직을 만드는 도중에 UI도 조금씩 수정하면서 진행하니 생각보다 시간이 오래 걸렸었다.
그리고 가끔씩 정말 깜짝 이벤트로 게임 구동이 되지않아 집 가는 길에 근처 벤치에서 노상 코딩을 하기도 했다.
상당히 당황스러웠던 적이 많았지만 이런 노상 코딩을 또 언제 해보겠냐면서 낭만을 충전하기도 했다.
그래도 천천히 꾸준히 개발 및 보완 되었었고 초기에 계흭했던 기능들이 추가되고 삭제되었다.
먼저 소셜 로그인 기능과 전체 순위 기능, 마이페이지 기능을 삭제하였다.
일단 해당 기능은 필수 기능이 아니다. 있으면 좋은거지 꼭 필요했던 기능은 아니었다. 그리고, 프로필 이미지나 닉네임 등을 인게임에서 쓸 수 있도록 만들려면 소켓 헤더에 프로필 정보 등을 넣어야 했는데 문제없이 잘 구동되고 있는 소켓을 다시 뜯어서 고치는 행위는 정말 치가 떨렸었다,,
결국 해당 기능은 리팩토링을 진행하면서 어떻게 할지 논의해보고자 하였다.
그리고 게임 카테고리 설정, 제한시간 설정, 배경음악 추가 등의 기능을 추가하였고, 덕분에 게임이 유저에게 더 친절해졌다는 생각이 들었다.
마지막으로 프론트 장인 우리 팀원들이 UI 퀄리티를 정말 실 서비스를 해도 될 만큼 끌어올려 줬다.
화이트모드/다크모드 전환 시 3초 정도의 딜레이를 주어 자연스럽게 색이 바뀌도록 만들고, 메인 페이지와 모달 UI 퀄리티를 높여주었다.
난 정말 넋을 놓고 구경만 하고있었던것 같다,,
최종 시연회
원래 동아리 프로젝트 최종 시연회는 발표로 진행되었다. 하지만 이번 학기에는 말 그대로 시연회를 주최하였다.
덕분에 우리는 유저가 시연회 부스에서 직접 게임을 해볼 수 있는 기회가 생기게 되었다.
우리 팀을 소개해줄 포스터도 만들었다. 실시간 채팅으로 게임이 진행되는 것과 게임 플레이 UI를 이용해 만들었다. 우리 팀원이 만들어준건데 정말 잘 만든것 같다. (팀원 이름은 비공개^^)
부스에는 포스터와 게임 영상이 틀어져있는 스탠바이미, 직접 게임에 참여할 수 있는 4대의 노트북을 배치하였다.
그리고 게임 참여자들에게 사탕도 나눠주었다. 사탕을 나눠주면서 게임 개선사항들을 물어보며 피드백을 동시에 할 수 있었고, 많은 정보들을 얻을 수 있었다.
시연회는 굉장히 성공적이었다. 일단 시연회와 게임을 직접 참여해볼 수 있다는 점이 맞아 떨어져 높은 참여도를 가질 수 있었고, 특히 스탠바이미가 큰 몫을 해줬던것 같다.
지금 이 글을 보고있는 여러분들도 한번 참여해보았으면 좋겠다.
양세찬 게임
양세찬 게임, 웹에서 빠르고 쉽게 즐기세요! 다양한 게임이 준비되어 있으며, 친구와 함께 즐기기 좋은 플랫폼입니다.
wwwag.co.kr
또한 구글 애널리틱스를 통해 유저들의 접속량을 볼 수 있었고, 통계치를 실시간으로 확인할 수 있었다.
유저수가 늘어날 때마다 기분이 좋았다.
가능하다면 광고 베너를 추가해 수익화 해보고 싶다는 생각도 들었었다.
프로젝트를 하면서
이 동아리에 들어오면서 하고싶었던 점은 프로젝트를 성공리에 끝마친 후 실 서비스화 시켜보는 것이었다. 이번 프로젝트를 통해서 그만큼의 퀄리티가 만들어져서 정말 뿌듯했고, 목표에 굉장히 근접했다고 생각한다.
그리고 실력적으로도 성장을 했다고 생각한다.
먼저 처음으로 실시간 통신을 해보았다. 소켓을 사용해보았고, 이를 활용하여 게임 로직을 만들었다.
실시간 통신을 기반으로 게임 로직을 만들다 보니 리엑트 실력이 정말 올라가진것 같다.
그리고 반응형도 이번엔 꽤 신경을 써가며 제작했었다.
유저가 pc버전 보다는 모바일 버전으로 접근을 더 쉽게 할 수 있기 때문에 모바일 UI을 신경써보며 만들었다.
리팩토링 때 적응형 UI를 만들어보자는 말이 나왔었다.
무엇보다 열정적인 팀원들과 함께 3개월간 프로젝트를 진행하였다는 점이 가장 좋았다.
열정적인 사람과 함께 대화를 하거나 같은 일을 하다보면 큰 힘을 받게 되는것 같다.
저렇게까지 노력 할 수 있는거구나
저렇게까지 진심일 수 있구나
라는 생각이 많이 들게 만들어준 팀원들과 함께 개발을 할 수 있어서 정말 좋았다.
나는 이번 프로젝트를 마지막으로 동아리 공식 프로젝트 활동은 그만두기로 하였다.
프론트엔드 관련 개발도 그만할 것 같다. 이에 관한 내용은 다른 글로 정리해보고자 한다.
마지막 프로젝트를 성공적으로 끝내 정말 뿌듯했다!!
