실시간 멀티플레이어 가위바위보 카드 게임

프로젝트 소개

가위바위보 카드 게임은 전통적인 가위바위보 게임에 카드 선택과 전략 요소를 결합한 실시간 멀티플레이어 게임입니다. Socket.io를 활용하여 두 명의 플레이어가 동시에 접속해 실시간으로 대전할 수 있으며, 각 플레이어는 게임 시작 시 여러 장의 카드 중 3장을 선택하여 상대와 3라운드에 걸쳐 승부를 겨룹니다.

단순한 가위바위보가 아닌, 어떤 카드를 선택하고 어떤 순서로 사용할지에 대한 전략이 필요한 게임입니다. 실시간 채팅 기능을 통해 상대방과 소통하며 게임을 즐길 수 있고, 모든 전적이 데이터베이스에 기록되어 승률과 게임 통계를 확인할 수 있습니다.

주요 기능

1. 실시간 매칭 및 대전 시스템

게임 로비에서 "게임 시작" 버튼을 누르면 자동으로 다른 플레이어와 매칭됩니다. Socket.io를 활용한 실시간 통신으로 두 명의 플레이어가 동시에 게임 룸에 입장하며, 한 명이라도 나가면 게임이 자동으로 종료됩니다.

대기 중인 플레이어 자동 매칭
실시간 연결 상태 감지
게임 룸 자동 생성 및 관리
플레이어 접속/퇴장 실시간 알림

2. 전략적 카드 선택 시스템

게임이 시작되면 각 플레이어는 화면에 배치된 여러 장의 카드(가위, 바위, 보) 중에서 자신이 사용할 3장의 카드를 선택합니다. 카드 선택 단계에서부터 전략이 시작되며, 상대방이 어떤 카드를 선택할지 예측하며 자신의 카드를 고르는 심리전이 펼쳐집니다.

다양한 가위/바위/보 카드 중 3장 선택
선택한 카드 실시간 표시 (1/3, 2/3, 3/3)
상대방 카드 선택 진행 상황 확인
카드 선택 완료 시 자동 게임 진행

3. 라운드별 승부 판정 시스템

3장의 카드를 모두 선택하면 본격적인 대전이 시작됩니다. 각 라운드마다 플레이어는 자신이 선택한 3장의 카드 중 하나를 골라 "레디" 버튼을 누릅니다. 두 플레이어 모두 준비가 완료되면 카드가 공개되고 승패가 판정됩니다. 3라운드 중 2라운드를 먼저 이기는 플레이어가 최종 승자가 됩니다.

3라운드 2선승제 게임 진행
각 라운드별 카드 선택 및 공개
실시간 승패 판정 및 점수 표시
라운드 결과 시각적 피드백

4. 실시간 채팅 기능

게임 진행 중 화면 우측에는 실시간 채팅 패널이 있어 상대방과 대화를 나눌 수 있습니다. 게임의 재미를 더하는 동시에 승부 후 인사를 나누거나 전략에 대해 이야기할 수 있는 소통 공간입니다.

게임 중 실시간 메시지 전송
플레이어별 메시지 구분 표시
채팅 내역 자동 스크롤
간단하고 직관적인 채팅 UI

5. 전적 및 통계 관리

모든 게임 결과는 데이터베이스에 자동으로 기록됩니다. 게임 로비에서는 자신의 전적을 확인할 수 있으며, 총 게임 수, 승률, 승리 횟수, 패배 횟수가 실시간으로 업데이트됩니다.

게임 결과 자동 저장
총 게임 수 및 승률 계산
승리/패배 통계 표시
개인별 전적 관리

기술 스택 및 구현

백엔드 구조

Node.js와 Express를 기반으로 하는 서버는 Socket.io를 통해 실시간 양방향 통신을 처리합니다. 게임 룸 관리, 플레이어 매칭, 카드 선택 및 승패 판정 로직이 서버에서 처리되며, MySQL 데이터베이스에 사용자 정보와 게임 전적이 저장됩니다.

Node.js + Express 서버 구축
Socket.io 실시간 통신
MySQL 사용자 인증 및 전적 저장
게임 룸 상태 관리

프론트엔드 구조

EJS 템플릿 엔진을 활용하여 동적인 화면을 렌더링하며, 클라이언트 측에서는 Socket.io 클라이언트로 서버와 실시간 통신합니다. CSS로 카드 애니메이션과 게임 UI를 구현했으며, JavaScript로 게임 로직과 사용자 인터랙션을 처리합니다.

EJS 템플릿 기반 화면 구성
Socket.io 클라이언트 실시간 통신
반응형 게임 UI 디자인
카드 선택 및 결과 애니메이션

개발 과정에서의 고민

실시간 동기화 문제 해결

두 명의 플레이어가 동시에 플레이하는 게임에서 가장 중요한 것은 실시간 동기화입니다. 카드 선택, 레디 상태, 라운드 진행 등 모든 이벤트가 정확한 타이밍에 두 클라이언트에 반영되어야 합니다. Socket.io의 이벤트 기반 통신을 활용하여 각 게임 상태 변화를 실시간으로 공유했습니다.

Socket.io 룸(room) 기능으로 게임별 독립적 통신
서버에서 게임 상태 중앙 관리
클라이언트 이벤트 리스너를 통한 실시간 UI 업데이트
네트워크 지연을 고려한 로딩 상태 표시

공정한 게임 진행을 위한 서버 검증

클라이언트 측에서만 승패를 판정하면 조작이 가능하기 때문에, 모든 게임 로직을 서버에서 검증하도록 설계했습니다. 카드 선택, 레디 상태, 승패 판정 등 모든 중요한 데이터는 서버에서 관리하고, 클라이언트는 결과를 수신하여 표시만 하도록 구현했습니다.

서버 측 게임 로직 검증
클라이언트는 입력 및 표시만 담당
승패 판정 알고리즘 서버 구현
부정 행위 방지 로직

연결 끊김 처리

실시간 게임에서는 플레이어의 갑작스러운 연결 끊김에 대한 대응이 필수입니다. Socket.io의 disconnect 이벤트를 활용하여 한 명이라도 나가면 게임을 자동으로 종료하고, 남은 플레이어에게 알림을 보내며 로비로 돌아갈 수 있도록 처리했습니다.

연결 끊김 감지 및 즉시 처리
게임 중단 시 상대방 알림
게임 룸 자동 정리
로비로 안전하게 복귀

프로젝트 의의

이 프로젝트는 WebSocket 기반 실시간 통신의 원리를 이해하고, 멀티플레이어 게임의 동기화 문제를 해결하는 경험을 제공했습니다. 단순한 가위바위보 게임이지만, 실시간 매칭, 게임 룸 관리, 상태 동기화, 채팅 등 실전 게임 서비스에 필요한 핵심 기능들을 모두 구현했습니다.

Socket.io를 활용한 실시간 웹 애플리케이션 개발, 게임 로직 설계, 사용자 경험 최적화 등 다양한 영역의 개발 역량을 향상시킬 수 있었으며, 향후 더 복잡한 멀티플레이어 게임이나 실시간 협업 도구 개발에도 적용할 수 있는 기술 기반을 마련했습니다.

실시간 멀티플레이어 게임이나 웹소켓 기반 실시간 서비스가 필요하시다면 언제든지 문의해주세요.