📱 서버 링크 > https://www.applegame.shop (운영 중단)

💭 기획 의도

혼자 하던 사과 게임을 “친구와 함께”하고 싶다는 마음에서 시작된 게임입니다.

우리 🍏사과 게임🍏 은 온라인에서 친구들끼리 방을 생성해서 1:1 로 게임을 진행할 수 있게 합니다.

혼자 하던 게임을 같이 진행해서 랭킹이 부여될 수 있고, 다른 사람들의 프로필도 확인 가능하고 나의 프로필도 꾸밀 수 있습니다. 🍏✨

💫 게임 설명

1. 게임 목표

제한 시간 1분 안에 사과에 적힌 숫자의 합이 10이 되도록 사과를 선택하여 점수를 얻는 게임입니다. 상대를 이겨 승리하고 랭킹을 높여보세요! 강한 상대를 이길 수록 랭킹이 크게 증가합니다!!

2. 플레이 방식

화면에 나타난 사과들을 마우스로 드래그하여 선택합니다. 선택한 사과의 합이 10이 되면 해당 사과들이 사라지며 점수를 획득합니다.

3. 진행 방식

1:1 실시간 대결로 진행됩니다. 제한 시간 1분 동안 상대방보다 더 높은 점수를 얻으면 승리하게 되고, 강한 상대를 이길 수록 랭킹이 많이 상승합니다.

4. 재미 요소

• 1분 제한 시간 ⏳
• 승패 효과 🎉
• 성공 시 소리 효과 🔈
• 상대방 드래그 실시간 확인 🤩
• 선택한 사과 사라짐❗

🍎 구성 화면

• Login
• Game Lobby
• Create Room
• View Ranking
• View Profile
• Edit Profile
• Game

🧑‍💼 로그인 화면

• Log in 버튼을 눌러서 Google 로그인 진행

---

🏛️ 게임 로비 화면

default.mp4

• 상대가 생성한 Room 확인(방 이름, 생성자, 참여자 수, Enter/Delete)
• 방 이름 검색 기능 & 방 목록 실시간 업데이트
• 현재 동시 접속자 수 확인 가능(실시간)
• 방 만들기 버튼을 통한 방 생성 & 빠른 참여 버튼을 통한 과정 생략
• 사과 게임 튜토리얼 확인
• View Ranking button 클릭 시 Top3 Players 확인
• View Profile button 클릭 시 나의 Profile 확인

---

🚪방 생성 화면

createRoom.mp4

• 로비에서 Create 버튼 클릭 시 이동
• Room name 입력하고 Create button 누름
• Create button 클릭 시 비밀번호 입력 모달 뜸
• 비밀번호 입력 모달에 비밀번호 입력 후 Create(비밀번호 설정을 원하지 않는다면 아무것도 입력 안 한 상태로 Create)
• Create 버튼 클릭했다면 대기 화면이 뜨며 상대를 기다림
• 상대가 들어온다면 게임 시작***!!***

---

🔄 대기 화면

-.Clipchamp.mp4

• 방을 만든 후 상대가 들어오기 전까지 대기(사과가 움직임)
• 상대가 내가 만든 방에 들어오면 게임 화면으로 자동 전환

---

🏆 랭킹 화면

ranking.mp4

• Ranking TOP3 Player를 볼 수 있는 화면
• 상단에 Lobby로 돌아가는 Back to Lobby button
• 상단에 나의 Profile을 볼 수 있는 View Profile button
• 랭킹은 서버 자체적으로 10분마다 업데이트

---

🙍 프로필 화면 + 프로필 편집

default.mp4

• 나의 프로필을 볼 수 있는 화면
• Edit Profile button을 통해 image와 username 변경
• 나의 모든 게임 전적 스크롤 해서 확인 가능(승패 여부, 게임 시간, 게임 상대 확인)
• Back to Lobby button을 통해 Lobby로 이동

---

🎲 게임 화면

• 게임 시작 시 3, 2, 1, Start!!
• 상단에 60초 시간 카운터 바(남은 시간에 따라 색 변경)
• End Game button 클릭 시 게임 종료
• 나와 상대의 프로필과 실시간 점수 확인 가능
• 내가 사과를 드래그 하는 곳에 초록 블록 생성
• 상대가 사과를 드래그 하는 곳에 빨간 커서와 블록 생성
• 사과를 드래그 해서 10 만들기에 성공했다면 효과음
• 승리 시 승리 배너+꽃가루+승리 BGM 🎇
• 패배 시 패배 배너+꽃가루+패배 BGM 😣

(현재 상대가 생성해 대기중인 방에 들어갔기 때문에 대기 없이 바로 게임 진행)

---

🪄 기능 구현

---

📌 게임 방 시스템(Redis)

• 게임 방은 일시적으로 수없이 써지고 지워지는 정보이기 때문에, Redis를 통해 구현했다.
• Hash를 통해 방 정보를 저장하고, Set을 통해 방의 종류와 유저의 상태를 저장한다.
• 일반 게임방과 빠른 게임방을 구분하여, 빠른 참여 기능도 구현했다.

📌 유저 정보 및 전적 관리(MySQL)

• 유저 정보와 전적 기록은 영구적으로 기록해야 하는 정보이기 때문에, MySQL을 통해 구현했다.
• Rankings 테이블은 서버에서 10분마다 업데이트한다. (Elo Rating System 사용)

📌 게임 구동(Socket.io & WebRTC)

• 실시간으로 서버와 정보를 주고 받기 위해 socket.io를 사용했다.
• 게임 참여, 맵 생성과 사과 제거까지의 모든 과정은 서버와의 소통 속에서 이루어진다.(치팅 방지)
• 유저 간의 마우스 포인터 공유는 WebRTC를 통한 P2P 통신 방식으로 구현했다.(서버 부하 줄이기)

📌 API 명세서(HTTP)

기능	method	URL	내용
구글 로그인	GET	/auth/*	구글 로그인 및 인증 관련 처리
프로필 조회	GET	/api/profile/get	유저 프로필 조회
유저 랭킹 조회	GET	/api/profile/get/ranking	유저 등수 조회
전체 랭킹 조회	GET	/api/ranking/get	서버 전체 랭킹 조회
전적 조회	GET	/api/users/me/history	사과 게임 전적 기록 조회
프로필 수정	POST	/api/profile/update	유저 닉네임 및 프로필 사진 변경

📌 서버 배포

• GCP(Google Cloud Platform)을 통해 서버를 열었다.
• Nginx를 통해 들어온 http 패킷을 node.js로 연결한다.
• 서버는 HTTPS 프로토콜을 사용한다.

🚀 기술 스택

📌 Front-end

• HTML, CSS, JavaScript

  웹 표준 기술인 HTML, CSS, JavaScript를 사용하여 '사과 게임'의 UI와 동적인 게임 화면을 구현합니다. 유저의 입력에 실시간으로 반응하고 직관적인 경험을 제공하는 데 중점을 두었습니다.

• Tailwind

  UI Framework 작업을 위한 유틸리티 기반의 프레임 워크 입니다. Tailwind 는 직접 클래스를 조합해 빠르게 UI를 구현할 수 있어, 일관된 디자인과 빠른 개발 속도를 위해 채택하였습니다.

📌 Back-end

• Node.js

  Node.js의 Express 프레임워크를 기반으로 API 서버를 구축했습니다. 비동기 I/O 모델의 장점을 활용하여 실시간 게임 로직 처리, 데이터베이스 연동 등 핵심적인 게임 로직을 효율적으로 수행합니다.

📌 Database

• Redis

  인메모리(In-Memory) 데이터 스토어인 Redis를 사용하여 실시간성이 가장 중요한 게임방 정보, 참여 유저 상태 등을 빠르 처리합니다. 휘발성 데이터를 빠르게 캐싱하여 DB 부하를 최소화하는 역할을 담당합니다.

• MySQL

  관계형 데이터베이스인 MySQL을 활용하여 회원 정보, 게임 전적, 계정 데이터 등 영구적으로 보관해야 할 데이터를 안정적으로 저장하고 관리합니다. 데이터 적합성을 보장합니다.

📌 Real-time Communication

• Socket.IO

  사용자와 서버, 그리고 사용자 간의 실시간 양방향 통신을 위해 Socket.IO 라이브러리를 사용합니다. WebRTC 연결을 위한 시그널링, 게임 내 이벤트 동기화 등 '사과 게임'의 핵심적인 실시간 기능을 구현하는 데 사용됩니다.

• WebRTC (Web Real-Time Communication)

  P2P(Peer-to-Peer) 통신을 기반으로 하여 서버를 거치지 않고 사용자 간에 직접 데이터를 교환함으로써 지연 시간을 최소화하는 데 특화되어 있습니다. 유저 간의 마우스 포인터 위치 교환을 위해 사용합니다.

📌 Infra & Deployment

• Google Cloud Platform (GCP)

  안정적이고 확장성 있는 서비스 운영을 위해 Google Cloud Platform(GCP)을 인프라로 사용합니다. Compute Engine(VM)을 통해 애플리케이션 서버를 배포하고, 필요에 따라 유연하게 서버 자원을 관리합니다.

• Nginx

  Node.js 서버의 안정성과 성능 향상을 위해 Nginx를 리버스 프록시(Reverse Proxy) 서버로 활용합니다. 이를 통해 정적 파일(HTML, CSS 등) 서빙, 로드 밸런싱, HTTPS(SSL) 적용 등의 작업을 처리하여 백엔드 서버가 비즈니스 로직에만 집중할 수 있도록 부하를 분산시킵니다.

📌 Authentication

• Google Login SDK

  사용자 편의성을 높이기 위해 Google Login SDK를 연동하여, 사용자들이 별도의 회원가입 절차 없이 기존 Google 계정으로 간편하고 안전하게 로그인할 수 있는 소셜 로그인 기능을 제공합니다.