라이어 게임 : 비밀의 문

✋ 프로젝트 소개

예능으로만 보던 그 게임을 실시간으로 즐기는 온라인 게임입니다.

🔍 주요 기능

• 화상 실시간으로 상대방의 표정을 관찰하면서 라이어를 찾아내세요.
• 채팅 채팅으로 참가자들과 대화를 나누며 라이어를 찾아내세요.
• 투표 참가자들의 투표를 통해 라이어를 찾아내세요.

주요 기술

OpenVidu

• MCU 방식은 WebRTC를 사용하는 이유인 실시간성이 저해되고
  비디오, 오디오와 같은 미디어 자원을 사용하는 데에 있어 비용이 많이 든다는 단점이 있습니다.
  Mesh 방식은 클라이언트끼리 직접적으로 연결되어 클라이언트의 과부하가 급격하게 증가합니다.
  따라서, 다대다 WebRTC 연결방식 중 클라이언트의 부하가 적은 SFU 방식 선택하였고,
  SFU연결에 필요한 미디어 서버 구축에 필요한 리소스를 절약해주는 open-vidu 라이브러리 이용하였습니다.

SockJS/StompJS

• Websocket 으로 헤더 전송이 어려워 보안된 인증처리 구현이 어렵다. 반면 Stomp는 메세지 헤더를 통해
  인증 처리를 구현하기 용이하며, pub/sub 구조의 Websocket기반 프로토콜로 메세지 발행 시 엔드포인트를
  별도로 분리하여 관리하기 용이하여 선택하였다.

CI/CD

• 자동 배포 방식 중 ‘Amazon AWS S3/Git Action’과 ‘Amazon AWS Amplify’ 두 가지 방법을 고려하였고,
  Open-vidu의 경우 https 프로토콜 사용이 필수 적인데 ‘Amazon S3/Git Action’ 방식은 http 프로토콜 배포를
  지원하지 않아 ‘Amazon AWS Amplify’ 배포 방식을 사용하게 되었다.

🎮 인게임 대표 이미지

🛠️ 트러블슈팅

프론트엔드 트러블슈팅

OpenVidu

• ⛔️ 문제
  다른 브라우저에서 카메라를 사용 중인 경우 Open-vidu 서버에 접속에 실패하는데, 이 때 나타나는
  오류코드가 Open-vidu logger. 즉, 라이브러리 내에서 발생한 코드여서 분기점을 잡기가 어려웠습니다.
• ✅ 해결
  navigator.mediaDevices.getUserMedia 함수를 통해 내가 원하는 곳에 분기점을 추가로 잡을 수 있을
  것으로 판단했고 open-vidu 접속보다 보다 앞선 GameRoom useEffect에서 미리 분기점을 잡아 예외처리 했습니다.

백엔드 트러블슈팅

QueryDSL

• ⛔️ 문제
  쿼리문 작성 후 실행 시, Update문과 같은 bulk연산을 자주 실행할 때 정상적으로 영속성 컨텍스트에
  반영이 되지 않아 이전 데이터가 그대로 남아있는 상태로 보여지는 이슈가 잦았습니다..
• ✅ 해결
  이전에는 무조건 flush()와 같은 명령어를 무분별하게 사용하여 제대로 데이터가 반영이 되지 않았다면,
  이번에는 api가 정상적으로 실행이 되고 메소드 내부 마지막 부분에 기입하여 한번에 반영될 수 있도록 수정했습니다.

전체 트러블 슈팅 <노션 링크> ▶ https://www.notion.so/Trouble-shooting-ea14209f725342b68610b5c0fa77728a

🗂️ 기술스택

프론트엔드

백엔드

🏗️ 프로젝트 아키텍처

서비스 아키텍쳐 설명 <노션 링크> ▶ https://www.notion.so/Service-Architecture-a0a8b52c030641d59b1ad31fce0893a0

📆 프로젝트 기간

2022.11.04 ~ 2022.12.16
서비스 런칭 : 2022.12.08

🙋🏻‍♀️🙋🏻 프로젝트 멤버 (이름을 클릭하시면 깃허브로 이동할 수 있습니다.)

김민주 🌞	신혜정	정건희	진세훈 🌝	조혜수	박성빈
FRONT-END	FRONT-END	FRONT-END	BECK-END	BECK-END	DESIGN