hallov012 / weseeplay

화상 게임 웹사이트(SSAFY 7기 공통 프로젝트)

목차

1. 서비스 소개

2. 기술 스택

3. 적용 게임 소개

4. 프로젝트 진행

1 서비스 소개

• 서비스 설명

• 개요

         

  • 서비스 명 : We See Play
  • 슬로건 : We See! We Play!
  • 한줄 소개: 비대면 환경에 익숙해진 현대인을 위한 웹 화상 게임 서비스
    
  
  

• 서비스 설명

  • 비대면 환경에서 화상 채팅과 게임을 한번에 진행할 수 있는 웹 화상 게임 서비스 라이어 게임
  • Call My Name 과 같은 심리 추리 게임을 문자, 음성 뿐만이 아닌 화상 정보들을 통해 같은 공간에서 플레이하는 것 같은 실감나는 경험을 제공
  • 평소 인터넷 게임에 익숙하지 않은 사람들도 쉽게 참여할 수 있는 서비스
    
  
  

• 타겟

  • 팀 프로젝트, 단체 활동을 시작한 사람들
  • 지역, COVID-19 등 여러 이유로 비대면 활동을 진행하는 사람들
  • 사람들과 얼굴을 보며 대화를 토대로 간단한 게임을 진행하고 싶은 사람들
    
  
  

• 기획 배경
  

장기화된 COVID-19의 영향으로 사람들은 점점 비대면 활동에 익숙해졌습니다. 단순히 지인들과의 관계뿐만 아니라 팀 프로젝트*,* 조별 활동 등 과업적인 부분들 또한 비대면으로 진행하는 것에 익숙해졌으며, 이러한 비대면 활동의 시간, 공간적 자유로움을 이용하기 위해 대면활동이 가능해진 상황에서도 비대면에 의존하는 경향이 이전보다 짙어졌습니다. 하지만 비대면 활동은 시간, 공간적 자유로움을 제공하나 사람들과의 유대감 향상 등 상호적인 관계를 형성하는 것에 어려움이 있으며 할 수 있는 활동의 범주에 제한이 있습니다.

​ 저희 WeSeePlay는 참여자 간의 의사소통을 베이스로 한 게임을 제공하여 비대면 환경에서 참여자 간의 관계 형성을 돕고, 비대면 환경의 활동 범주를 확장하여 대면 환경에서 느낄 수 있는 긍정적인 경험을 제공합니다.

• 기능 정의서
  

최대한 디테일하게 기능에 대한 조건을 작성하였습니다.

• Wire Frame
  

• 서비스 화면

시작 페이지

회원가입 페이지

카카오 로그인

Nickname 변경

User 탈퇴

Room 입장

Liar Game

Call My Name Game

2 기술 스택

• Openvidu
  

다양한 프레임워크에서 사용 가능하며 그에 따른 튜토리얼을 DOC에서 찾아 볼 수 있습니다. OpenVidu 공식 문서를 통해 간단하게 사용할 수 있으며, 해당 프로젝트에서는 component/RoomPage/VideoArea에서 확인 할 수있습니다.

WeSeePlay에서는 화상 통화를 구현하기 위하여 OpenVidu를 사용하였습니다. 또 WeSeePlay에서 제공하는 Liar Game, Call My Name 게임들은, OpenVidu의 Server-Side를 활용하여 구현하였습니다.

• Vue.js
  

  JavaScript 프레임 워크 중 Angular, React에 비해 가볍고 복잡도가 낮은 Vue3를 사용하였습니다.
  Vue2에서 활용하던 Option API 방식이 아닌 Composition Api로 script를 구성하여 가시성을 높였고, vuex를 통해 유저, 방 관련 state를 설정하여 유지 보수 및 관리에 효율성을 높였으며 API통신으로 Backend와 request와 response를 주고 받았습니다.
  웹 페이지를 기능 단위로 Component를 구분하고, style에 필요한 CSS 파일을 분리하여 전체적인 유지 보수의 용이함과 재사용성을 높였습니다.
  
  

• Spring Boot
  

Spring Boot를 사용했으며 DB는 MySQL, 연동엔 JPA를 사용했습니다.

또한 서버 배포를 위해 Certbot을 이용한 SSL인증서를 적용하여 https 프로토콜을 사용하도록 구현했습니다.

팀원 간 협의하여 Restful한 API를 설계하도록 고민하였고 Notion에 기록했습니다.

• 추가할 것들

• 추가할 것들

3 적용 게임 소개

• 라이어 게임
  
  

시스템에 의해 선정된 제시어를 한명만 제외하고 모든 참여자들에게 알려줍니다.

그 제외된 한명은 일명 '라이어'이며 라이어는 제시어를 본 것 처럼 연기를 해야합니다.

돌아가면서 제시어에 대한 설명을 하며 라이어를 찾는 게임입니다.

• Call My Name
  
  

런닝맨에서 양세찬 게임으로도 불리는 Call My Name 입니다.

모든 참가자들은 각각 특정 이름을 부여받지만 자신을 제외한 참가자들만 해당 이름을 확인 할 수 있습니다.

서로 질문을 하며 자신의 이름을 맞추는 방식입니다.

4 프로젝트 진행

데일리 스크럼을 진행하며 매번 회의를 Notion에 기록하고 Git Lab에 Git Flow 전략을 적용하여 코드를 관리하였으며 Jira를 이용하여 팀원들의 할 일과 일정을 조절하였습니다.

Notion

팀장님의 주도하에 Daily Scrum을 진행하였고 회의 내용을 비롯하여 API 설계, WireFrame, ERD 등 필요한 자료들을 한눈에 확인할 수 있도록 정리하였습니다.

깔끔하게 정리함으로써 지난 회의 내용이나 필요한 자료를 찾는 수고를 덜 수 있었고 원만한 협업의 원동력이 되었습니다.

Git Lab(Git Flow 전략)

여러 Git Branch 전략 중 Git Flow 전략을 적용했습니다.

주요 Branch는 Front, Back, Dev, Main 이렇게 4가지를 두고 특정 기능을 구현하는 Branch를 생성해서 각각 Front나 Back에 Merge Request를 생성하고 이를 검수하여 합치는 방식으로 진행했습니다.

Dev Branch에서 통합 테스트를 하고 Main Branch는 문제 없이 최종적으로 배포하는 Branch입니다.

Jira

매주 초에 회의를 통해 각자 일주일 동안 진행할 내용을 정하고 하루 Story Point 8을 기준으로 Backlog에 Issue를 생성하였습니다.

크게 Epic(기획, 개발, 학습 등)으로 분류했고 명명 규칙(FE : 개발 > ErrorPage > CSS 등)을 정하여 어떤 작업을 하는지 쉽게 이해할 수 있도록 했습니다.

처음 적용 하다보니 작업에 대한 시간을 정확하게 할당하지 못하여 미숙한 부분이 많았지만 Burndown Chart는 우하향 그래프를 그리고 있습니다.