B대면 노래방 | 팀플 후기

개요

• 비대면으로 각자의 공간에서 여러 사람들과 노래방 시스템을 이용할 수 있는 서비스
• 팀원 5명이서 협업
• 온라인과 오프라인 병행. (오프라인이 주)

 

기간

• 2021.09.29 ~ 2019.12.12 (보고서 작성, 개발 등 모든 과정에 소요된 기간)

 

개발 환경

• 사용 언어: HTML, CSS, JavaScript(ES6+)
• 사용 소프트웨어: node.js module(socket.io, react), electron

 

주요 기능

• 로그인 (이모티콘과 닉네임 설정 후 로그인)
• 방 생성 (방제 입력 후 생성)
• 방 참가
• 노래 예약
• 음성 채팅
• 문자 채팅
• 방 퇴장

 

결과물

인트로, 로비, 룸 화면

B대면 노래방 시연 영상

 

 

후기

 팀플 시작 전, 가장 걱정되었던 부분은 팀원 간의 실력 차이가 크다는 점이었다. 팀원 5명 중 3명이 프로젝트 경험이 없어서 사용할 언어를 정하는 것부터 난관이었다. 멋사 활동을 통해 장고를 배웠으나 능한 수준은 아니라서 나도 자신 있게 장고를 이용해 웹 프로젝트를 하자. 라고 말하기가 어려웠다. 팀원들 중 가장 프로젝트 경험이 많고 개발을 오래 공부한 팀원이 일렉트론을 사용해서 데스크탑앱을 만드는 건 어떤지 제안했고, 여러가지 아이디어들 중에서 투표를 한 끝에 해당 아이디어가 채택되어 'B대면 노래방'이라는 프로젝트가 시작되었다. 다른 팀원들은 자바스크립트를 접해본 적도 없었고, 나 또한 멋사에서 세션으로 두 번 자바스크립트를 배운 것 빼고는 경험이 없었어서 걱정되었다. 팀장(공식적으로 팀장을 정한 건 아니지만 자동적으로 팀장 역할을 맡게 됨)분과 개발 시작 전에 개인적으로 연락하며 우리가 이 프로젝트를 제대로 완성할 수 있을지에 대한 얘기를 몇 번 했었는데 프로젝트 주제를 바꾸지는 못했고, 그냥 일단 해보자. 라고 결론이 났었다. 다음 프로젝트 부터는 팀의 실력을 객관적으로 판단하여 완성이 가능할 것으로 생각되는 주제를 선정해야 겠다. 이번 팀플에서는 이 부분이 가장 아쉬웠다.

 

 프로젝트는 크게 클라이언트단 작업을 먼저 끝내고 그 후에 서버에서 API를 받아와서 서버와의 연동이 필요한 부분을 작업하였다. 클라이언트단 작업은 그다지 어렵지 않아서 참고 자료들을 보면서 따라갈 수 있었다. 우선 인트로, 로비, 룸으로 파트를 나누어 디자인 작업을 시작하였다. 나는 로비 파트를 맡아서 로비 전반의 html, css를 구현하였다. 디자인 작업 후 부터는 자신이 맡은 파트를 혼자 구현하기엔 무리가 있어서 다같이 작업한 경우가 많았다. 이 과정에서 어려웠던 점은 아직 자바스크립트의 문법도 익숙치 않은 상태에서 리액트를 이용하여 개발을 하려니 머릿속에서 제대로 정리가 되지 않았던 것이었다. 기본적인 것들을 미리 공부를 하고 프로젝트를 시작했다면 클라이언트단 작업이 좀 더 수월했을테고, 그렇게 되면 서버단 공부를 할 시간과 체력이 더 많았을 텐데.. 8월에 리액트 공부 하려다가 결국 안 했던 것을 약간 후회했다.

 

 서버단 작업을 들어가면서 부터는 내 무능함으로 인해 많이 좌절했다. socket.io를 사용하는 개발을 시작했는데 소켓이야 말로 내가 정말 아무것도 모르는 부분이었다. 팀장님의 설명을 듣고 다른 팀원들과 같이 머리를 맞대며 소켓에 대해 이해를 하는 시간이 많았다. 구현 과정에 참여하기 보다는 완성된 코드를 이해하는 시간이 더 많아서 매 팀플마다 내 실력이 정말 하찮다는 것을 느꼈다. 최대한 팀에 폐가 되지 않도록 소켓 공식 홈페이지에 들어가 공부도 하고, 팀원분들과 코드 하나하나 뜯어보며 제대로 이해하려 노력했다. 완성된 코드를 보고 이해한 후에 비슷한 기능들은 기존 코드를 응용하여 구현을 해보기도 하였다. 그래도 실력이 많이 부족해서 팀장님 혼자 많이 고생하신 것 같아 항상 죄송한 마음을 지울 수 없었다. 이번 겨울에는 스프링을 공부할 예정이라, 자바스크립트를 공부할 기회가 생기면 기초부터 제대로 공부해서 소켓까지 다뤄야 겠다.

 

 처음 계획한 모든 기능들을 구현하지는 못했지만, 그래도 음성 채팅 같은 부분들은 구현이 되어서 기뻤고 신기했다. 프로젝트 기간이 조금만 더 넉넉했다면 예약한 노래의 음량을 조절하는 기능 정도는 구현할 수 있었을 것 같다. 그 부분만 완성되면 어느 정도 노래방 기능은 완성되었을 것이다. 그래도 음성 채팅이 된다는 것부터가 감격적이었어서 다른 부분은 많이 아쉽지는 않았다. ㅋㅋ

 

 단순히 개발만 하는 것이 아니라 주기적으로 계획서, 명세서를 썼어야 했는데 이 부분도 꽤나 어려웠다. 학기 후반에 가서야 깨달은 점은 소프트웨어 공학 수업이 개발보다는 보고서 작성이 더 중요한 수업이었다는 것이다. 대부분의 팀원들이 개발이 중요한 것이라고 생각하여 보고서 작성 시 어려운 부분이 생겨도 일단 못 먹어도 고. 라는 마음가짐으로 보고서를 완성하는데에 의의를 두었었다. 하지만 학기를 진행해보니 보고서를 좀 더 열심히 작성을 했어야 했다는 것을 깨달았다. 학점을 고려한다면 이 부분이 조금 아쉽다.

 

 이번 프로젝트 가장 좋았던 점은 git에 친숙해졌다는 점이다. 멋사 활동에서 깃을 배우긴 했는데 실제로 많이 사용하지 않다보니 다 까먹어서 깃에 대해 하나도 모르는 수준이었다. 팀플을 시작할 때 가장 걱정되는 게 깃이었는데 실제로 프로젝트를 진행하면서 계속 커밋하고 푸시하고 풀리퀘스트 요청하고 풀 해오고.. 이 과정을 한 달 넘게 반복했더니 자연스레 깃에 익숙해졌다. 프로젝트에서 사용한 방식만 익숙한 거라서 정확히 어떤 기능을 의미하는지는 자세히 알지 못한다. 이 부분은 이번 겨울에 짧게 깃 공부를 하면서 알아볼 예정이다. 프로젝트 초반에는 커밋할 줄 몰라서 쩔쩔매고 다른 팀원들에게 도움을 요청했었다. 후반에 가서는 'B대면 노래방' 팀플에서의 깃 협업은 물론, 다른 프로젝트에서 팀원에게 깃을 알려줄 정도가 되어 뿌듯했다.

 

 어쩌다보니 후기가 이렇게 길어졌다. 장기 팀플을 한 건 처음이라 미숙해서 팀원들에게 피해를 끼쳤을까 걱정이 된다. 대부분 오프라인으로 진행하여 다들 힘들었을 텐데 다같이 열심히 노력하는 분위기라 좋았다. ..자 후기는 여기서 이만 마쳐야 할 것 같다. 지금 끝내지 않으면 앞으로 쓸데없는 말로 세 문단은 더 쓸 것 같다. 한 학기 내내 우리 팀 수고했다!