Dynamic Puzzle with Web Camera

재미있는 다섯 가지 아이템을 활용하여 상대방보다 먼저 상대 얼굴을 맞춰야 하는 실시간 1대1 퍼즐 게임 (Web-RTC 활용)

프로젝트 기간

(2023.02.02 ~ 2023.03.11)
[0주차] flutter, golang 학습하다가 프로젝트 엎기 (1.26 ~ 2.01)
[1주차] 아이디어 내고 엎고 반복하기, 프로토타입 만들기
[2주차] 확장성 있는 개발을 위해 기반 라이브러리 교체 작업 (Konva->react-spring)
[3주차] 아이템 2개 추가
[4주차] 아이템 3개 추가, 게임 로직 정교화
[5주차] 게임 시간 관련 이벤트 정교화, 프레임 최적화 및 디버깅

서비스 소개

기획 배경 서로 얼굴을 보다보면 웃음을 통해 분위기를 Up 할 수 있다!
서비스 특징
1. 웹카메라를 사용한 퍼즐 게임
2. 실시간 1:1 멀티플레이
3. 재미있는 아이템들
URL
시연 영상
포스터

아키텍처 & 기술스택

백엔드 : next.js (API 및 웹서버 역할)
프론트엔드 : react.js, next.js, react spring, redux, recoil, type script, Tensor flow
인프라: Amazon EC2, Github actions, Socket.io
협업 툴 : slack, github, notion

주요 기술 스택

React.js
팀원 모두 프론트앤드 학습한 경험이 적어 그나마 익숙한 javscript를 사용하는 언어 중 레퍼런스가 가장 많은 react.js 언어를 채택하여 빠르게 프로토 타입을 개발하여 가능성 부터 확인하고자함.
Type Script
JavaScript에 Type을 명시하여 안정성을 향상
next.js
Hot Module Replacement(HMR)을 지원하여 개발 중 변경한 코드를 실시간으로 확인할 수 있고, Type Script를 지원하여 코드 유지보수와 디버깅이 안정적임. 추가로, API 라우팅 기능을 제공하여 간단한 API 서버를 사용하기에 가장 적절하였음.

프로젝트 진행

어떤 어려움이 있있는지?
- 상태 관리
- peer to peer 통신의 이벤트 타이밍 처리
- 레퍼런스가 풍부하지 않은 라이브러리
어떤 문제를 해결했는지?
- 프레임 저하 해결
- 이벤트 순서 처리 해결
- 공유자원 관리
- 최적화

프로젝트 결과

메인화면

메인화면 페이지로 BGM을 ON/OFF 할 수 있는 버튼이 왼쪽 하단에 있으며, 퍼즐 조각을 우측 하단에 놓으면 대기방이 보여지는 화면으로 이동한다.
대기방 화면

대기방에서는 아이템 설명 버튼을 클릭하여 5가지 게임 아이템에 대해 확인할 수 있으며, 만들어진 방을 클릭하여 참여 하거나, 방 만들기 버튼을 통해 게임 방을 생성 할 수 있다.
아이템 설명 모달

Dynamic Puzzle에서 각 판당 1번씩 사용 할 수 있는 5가지 아이템에 대해 설명을 볼 수 있다.
게임화면

위 화면은 상대방이 입장하기를 기다리는 화면이다.

위 화면은 상대방이 입장하고 게임에 필요한 정보(얼굴인식 모델 Load, Twirl Item 초기 연산 수행) 등을 수행하는 화면이다.

위 화면은 각 화면에 대한 설명과 준비 버튼을 위한 화면이다.

위 화면은 실제 게임 플레이 화면이다. 게임 플레이어는 상대방보다 먼저 상대방의 얼굴을 맞춰야 하며, 5가지 아이템을 통해 상대방을 방해 할 수 있다.