01 / 10
실시간 멀티플레이어 웹 파티 게임 플랫폼
3가지 게임 Socket.io 실시간 통신 AI 연동 설치·로그인 프리
202251002  ·  권다원
프로젝트 소개
"설치와 로그인 없이,
링크 하나로
여러 파티 게임을 바로."
별도의 프로그램 설치나 복잡한 가입 절차 없이,
웹 브라우저 접속만으로 즐기는 실시간 멀티플레이 플랫폼.
01
왜 만들었나?
설치·로그인 장벽 없이 링크 하나로 바로 모여 즐길 수 있는 웹 파티 게임의 높은 수요에서 착안.
02
어떻게 동작하나?
방장이 방을 파고 링크를 공유하면 즉시 동시 입장. Socket.io 양방향 통신으로 모든 플레이 상태 동기화.
03
AI를 도입한 이유?
고정된 단어 풀의 한계를 깨고, 유저가 입력한 주제에 맞춰 Gemini API가 매판 무한한 단어를 생성.
기술 스택

사용 기술 & 아키텍처 구성

Node.js + Express
Backend
서버 사이드 런타임 및 REST API 라우팅 · 게임 방 메모리 객체 집중 관리
Socket.io
Realtime
WebSocket 기반 양방향 실시간 통신 · 턴 교체, 투표, 폭탄 카운트다운 즉시 동기화
HTML / CSS / JS
Frontend
외부 무거운 프레임워크 없는 순수 Vanilla JS · 모든 UI와 인터랙션 직접 구현
Google Gemini API
AI Engine
자연어 주제 기반 25칸 빙고 단어 자동 생성 · DB 캐싱 전략으로 비용과 지연시간 극복
MySQL
Database
생성된 AI 주제 및 단어 영구 캐싱 · 게임 카테고리 마스터 데이터 저장
1인 풀스택 설계
Solo Dev
기획부터 백엔드, 프론트엔드, AI 연동, DB 최적화 및 배포 전 과정 단독 완수
게임 01
테마 빙고
AI가 생성한 단어로 채우는 실시간 턴제 5×5 빙고
2~8인 턴제 AI 연동
AI 주제 단어 자동 완성 및 프리셋 제공
실시간 순차 턴 동기화 + 제한시간 타이머
역전용 특수 스킬 이벤트 4종
빙고 줄 완성 스탬프 및 실시간 현황 공유
차원 뒤틀림
25칸 배치 전체 셔플
유령의 장난
호명 단어 2개 삭제·잠금
시간 왜곡
한 턴에 단어 2개 연속 호명
블랙홀
타깃 지목 상대 턴 강제 스킵
빙고 게임플레이
실시간 5×5 단어 호명 및 빙고 완성 스탬프 동기화
핵심 설계: Gemini AI 실시간 단어 생성 & MySQL 영구 캐싱으로 API 비용 0원 방어  |  30초 쿨타임 어뷰징 차단  |  목표 줄 수(3~5줄) 커스텀
게임 02
라이어 게임
제시어를 모르는 라이어를 찾아내는 실시간 심리 추리 게임
3~8인 라운드제 역전 추리
비공개 역할 배정 (3D 카드 플립 연출)
힌트 발언 ➡️ 지목 투표 ➡️ 쇼다운 3단계 진행
라이어 검거 시 최후의 역전 추리 훔쳐보기 기능
목표 승수 및 다양한 카테고리 커스텀
실시간 쇼다운
최다 득표자 지목 화살표 및 투표 현황 즉각 시각화
역전 추리 훔쳐보기
라이어의 입력 과정을 전원이 실시간 타이핑으로 관전
라이어 게임플레이
실시간 지목 투표 및 최후의 역전 추리 쇼다운
핵심 설계: 실시간 투표 배지 및 화살표 쇼다운 시각화  |  final guess typing 이벤트로 라이어의 실시간 타이핑 훔쳐보기 구현
게임 03
주제 폭탄 돌리기
카테고리 단어를 입력해 폭탄을 넘기는 타이머 기반 스피드 게임
2~8인 목숨제
랜덤 폭탄 모드 & 전략 지목 모드 지원
상대방 직접 클릭 지목 및 타겟 락온 애니메이션
타이머 공개 / 블라인드(시한폭탄) 옵션
하트 차감 시스템 및 최후 1인 생존 배틀
전략 타겟 락온
상대를 직접 클릭해 폭탄을 넘기는 락온 연출
하트 서바이벌
서버 정밀 타이머 동기화 및 폭발 시 하트 차감 배틀
폭탄 전략 모드
제한시간 시한폭탄 & 상대방 타겟 지목 배틀
핵심 설계: 서버 중심의 정밀 타이머 동기화  |  이미 사용된 단어 서버 검증으로 부정행위 원천 차단
핵심기술 — UX 01
다크 / 라이트 테마
눈의 피로를 덜고 몰입감을 높이는 반응형 듀얼 테마 시스템
원클릭 전환 설정 자동 기억 눈부심 방지
토글 버튼으로 원클릭 즉시 전환
새로고침하거나 다시 접속해도 쓰던 테마 그대로 기억
로비부터 대기실, 게임판, 채팅창까지 모든 화면의 색감 통일
어두운 밤이나 밝은 낮 언제든 눈이 편안한 색상 조합 제공
화면 깜빡임 차단
테마를 바꿀 때 화면이 번지거나 튀는 어색한 잔상 완전 제거
설정 자동 저장
별도 로그인 없이도 사용자가 쓰던 테마 환경을 자동 보존
테마 전환 시연
원클릭 테마 즉시 전환 및 다크/라이트 듀얼 시스템
핵심 설계: 깜빡임 없는 원클릭 테마 전환  |  로그인 없이도 이전 설정 자동 유지
핵심기술 — UX 02
방 입장 로딩 연출
화면 깜빡임 없는 매끄러운 화면 전환과 실시간 접속 안내
깜빡임 차단 3단계 진행 안내 부드러운 화면 전환
덜 만들어진 빈 화면이 노출되지 않도록 전체 화면을 깔끔하게 가려줌
[서버 연결 중 ➡️ 방 환경 설정 ➡️ 입장 완료] 순서대로 진행 상황 표시
로고가 숨쉬듯 부드럽게 빛나는 애니메이션으로 기다리는 지루함 해소
입장 준비가 끝나면 부드러운 전환 효과와 함께 대기실 화면으로 자연스럽게 연결
접속 상태 자동 감지
서버 연결 과정에 맞춰 안내 문구가 실시간으로 자연스럽게 변경
자연스러운 화면 연결
로딩이 끝난 후 화면이 튀지 않고 대기실 화면으로 매끄럽게 흡수
로딩 연출 시연
부드러운 로고 빛 애니메이션 & 3단계 접속 진행 상황 실시간 안내
핵심 설계: 미완성 화면 노출 완벽 차단  |  단계별 접속 안내와 매끄러운 화면 전환
개발 과정

도전 과제 & 해결 방법

실시간 멀티플레이 환경에서 직면한 4가지 핵심 난제 극복기

동시에 버튼을 눌렀을 때 판정이 꼬이는 현상
여러 플레이어가 0.1초 차이로 동시에 행동할 때, 누가 먼저인지 꼬이거나 결과가 달라지는 문제
해결 방법
모든 게임 판정을 중앙 서버의 하나의 기준으로 공정하게 처리하고, 모든 유저에게 동일한 결과를 실시간 전달
AI 단어 생성 대기 시간과 호출 비용 문제
인공지능에게 새 단어를 받아올 때 1~3초가 걸려 게임 진행 흐름이 끊기고 비용이 계속 발생하는 문제
해결 방법
한 번 만들어진 단어는 데이터베이스에 영구 저장해 다음엔 0초 만에 즉시 꺼내 쓰고, 연속 요청 방지 장치 구축
실수로 새로고침(F5)을 눌렀을 때 방이 터지는 현상
게임 도중 실수로 새로고침을 누르면 다른 사람으로 인식되어 강제로 쫓겨나거나 방이 깨지는 문제
해결 방법
브라우저에 고유 열쇠(ID)를 발급하여, 새로고침을 해도 원래 하던 게임 자리와 방장 권한을 100% 자동 복구
다크 / 라이트 모드 전환 시 화면 번쩍임
화면 모드를 바꿀 때 일부 색상이 늦게 따라와 화면이 어색하게 번쩍이고 눈이 피로한 잔상 발생
해결 방법
모든 화면 요소의 색상이 지연 없이 찰나에 한 번에 바뀌도록 설계하여, 잔상 없는 눈이 편안한 즉시 전환 구현
PickPlay
실시간 멀티플레이어 웹 파티 게임 플랫폼
3
개의 게임
25+
소켓 이벤트
4
빙고 특수 스킬
1인
기획 · 풀스택 개발
Q & A