핑퐁게임 서비스, 퐁퐁핑퐁🏓

퐁퐁핑퐁은 간편하게 접속하여 다양한 방식으로 즐길 수 있는 핑퐁게임 서비스입니다.
실시간 게임과 채팅 기능을 경험할 수 있습니다.

⚙️ 기술 스택

팀원 정보

👩‍💻 팀원 구성

기술적 도전

🌝 Front-End

웹 프론트엔드 개발에 대한 이해도를 높이고 기초부터 숙달하기 위하여 Vanilla JS과 CSS3을 사용했습니다.
페이지 로딩 시간을 줄여 사용자 경험을 향상시키고, 웹소켓을 사용하기 위하여 SPA (Single Page Application)를 구현했습니다.
모달의 작동 방식을 직접 파악하고 맞춤형 디자인으로 사용하기 위하여 외부 라이브러리에 의존하지 않고 모달 직접 설계 및 구현했습니다.
사용자 경험을 향상시키고 웹 애플리케이션의 보안을 강화하기 위하여 OAuth 2.0을 사용하여 간편 로그인 기능을 구현했습니다.
게임 플레이어 간의 실시간 동기화와 사용자의 사이트 접속 상태, 그리고 채팅을 위하여 웹소켓을 사용했습니다.
추가적인 보안 단계를 통해 사용자 계정을 보호하기 위하여 Google Authenticator 앱 연동을 통한 2차 인증을 구현했습니다.
물리 법칙을 기반으로 패들과 공의 움직임을 계산하여 핑퐁게임의 2p를 구현했습니다.
동적인 사용자 경험을 제공하기 위하여 무한 스크롤 기능을 구현했습니다.

🌚 Back-End

OAuth 2.0를 활용하여 로그인 기능을 구현하여 사용자의 편리하고 안전한 인증 절차를 제공했습니다.
refresh token을 사용하여 보안성을 강화하고 사용자 경험을 향상시켰습니다.
JWT 커스텀 인증 데코레이터를 구현하여, API 요청 시 사용자 인증 과정을 간소화하고 보안성 확보했습니다.
소켓 프로그래밍을 이용하여 실시간 채팅 및 알림 기능을 구현. 소켓 최초 연결 시 사용자 인증을 수행함으로써 채팅 시스템의 보안을 확보했습니다.
Nginx를 활용하여 HTTPS 프로토콜을 구성, 웹사이트와 사용자 간의 데이터 전송을 암호화하여 보안을 강화했습니다.
노말 모드 및 토너먼트 모드를 지원하는 WebSocket을 이용하여 실시간으로 친구를 초대하고 게임 매칭을 수행했습니다.
WebSocket을 활용한 실시간 데이터 교환으로 빠른 반응 속도 및 높은 동시성을 지원하는 게임 플레이 환경을 구현했습니다.
모든 서비스(프론트엔드, 백엔드, PostgreSQL, Redis, Nginx)를 Docker 컨테이너에서 관리 및 실행하여 빌드 과정을 통합하고 자동화했습니다.

서비스 기능

[ 로그인 화면 ]

[ 설정 화면 ]

[ 메인 화면 ]

사용자 정보:
- 사용자의 프로필 이미지, 닉네임, 게임 기록을 확인할 수 있으며, 친구 추가/차단, 게임 초대, 메세지 기능을 수행할 수 있습니다.
경기 전적:
- 사용자의 일반 경기 전적을 확인할 수 있습니다.
토너먼트 전적:
- 사용자의 토너먼트 경기 전적을 확인할 수 있습니다.