PickPlay
실시간 멀티플레이어 웹 파티 게임 플랫폼
3가지 게임 실시간 멀티플레이 AI 연동
202251002 권다원
프로젝트 개요
"설치 없이, 링크 하나로
친구들과 바로 게임을."
  • 01. 왜 만들었나?
    갈틱폰이나 끄투처럼 설치 없이 웹 브라우저로 가볍고 간편하게 즐길 수 있는 킬링타임용 멀티플레이 파티 게임을 의도했습니다.
  • 02. 어떻게 동작하나?
    방장이 게임방을 생성한 뒤 링크를 공유하면 다른 플레이어들이 동시 입장합니다. 중앙 서버에서 실시간 소켓으로 모든 상태를 동기화합니다.
  • 03. AI가 들어간 이유?
    주제 단어 풀을 사람이 매번 직접 기획해 입력하는 한계를 극복하고자 Gemini API를 연동하여, 어떤 주제든 수십 개의 정제된 단어를 실시간 자동 생성합니다.
기술 스택

사용 기술

Node.js + Express
서버 사이드 런타임 & REST API
Socket.io
WebSocket 기반 실시간 양방향 통신
HTML / CSS / JS
Vanilla 프론트엔드, 프레임워크 없음
Google Gemini API
AI 단어 생성 (빙고 주제 단어 자동 생성)
MariaDB
AI 생성 주제 DB 캐싱으로 API 비용 절감
1인 풀스택
기획 · 서버 · 클라이언트 · AI 연동 모두 직접 구현
게임 01

빙고 게임

AI가 만든 단어로 채우는 실시간 턴제 빙고

  • AI 주제 단어 자동 생성
    Gemini API가 주제에 맞는 단어 생성 후 5×5 빙고판 자동 배치
  • 실시간 순차 턴제 & 타이머
    순서대로 단어를 선택하고 즉시 동기화, 시간 초과 시 다음 턴 자동 이동
  • 역전용 특수 이벤트 4종 (액티브 스킬)
    빙고 1줄 완성 시마다 게이지 충전 및 직접 시전, 판세를 흔드는 변수 제공
  • 시각적 효과 및 타격감
    줄 완성 스탬프 애니메이션 및 내 차례 초록 네온 강조 연출
핵심: DB 캐싱으로 이미 생성한 주제는 API 비용 없이 즉시 재사용  |  30초 쿨타임으로 API 남용 이중 방어
게임 01 — 이벤트 01

차원 뒤틀림 (Dimension Distortion)

빙고판 전체의 판도를 순식간에 뒤엎는 차원 이동 현상

  • 전체 빙고 칸 무작위 셔플
    25개 칸의 단어 배치 위치를 전부 섞어 기존에 세워둔 빌드를 강제 재조정
  • 체크 강제 무효화
    기존에 이미 체크되었던 칸 중 무작위 1~2개의 체크를 해제하여 흐름 지연
  • 역전 찬스 제공
    상대방의 완성 직전 라인을 분쇄하고 자신에게 유리한 위치 선점 기회 부여
event_distortion.gif
🌀 🎥 event_distortion.gif (녹화된 플레이어 작동 GIF를 넣으면 활성화됩니다)
게임 01 — 이벤트 02

시간 왜곡 (Time Warp)

자신의 차례를 미세하게 쪼개어 단어를 연속으로 선택하는 전략적 시간 가속

  • 시간 왜곡 연속 선택
    내 차례에 단어 1개 선택 후 턴이 넘어가지 않고 연속으로 1개 더 선택 가능
  • 속전속결 라인 점령
    동시에 가로/세로 핵심 요충지 두 칸을 점령하여 적극적인 1줄 빙고 완성 유도
  • 제한 시간의 압박
    시간 왜곡 상태에서도 턴 타이머는 1회 제한을 그대로 공유하여 극적인 결정 유도
event_time_warp.gif
🎥 event_time_warp.gif (녹화된 플레이어 작동 GIF를 넣으면 활성화됩니다)
게임 01 — 이벤트 03

유령의 장난 (Ghost Mischief)

상대방의 중요 요충지 선택을 막아버리는 일시적 차단

  • 선택 불가능 잠금 칸 생성
    상대 플레이어들의 빙고판 무작위 칸에 유령 잠금을 걸어 선택 불가능화
  • 인위적 길목 우회 유도
    상대가 당장 눌러야 하는 빙고 완성 지점을 방해하여 타 경로를 강제함
  • 턴 시간 낭비 유도
    상대방의 줄 완성을 지연시키는 사이 내가 먼저 줄을 완성할 기회 확보
event_ghost.gif
👻 🎥 event_ghost.gif (녹화된 플레이어 작동 GIF를 넣으면 활성화됩니다)
게임 01 — 이벤트 04

블랙홀 (Black Hole)

지목한 상대방의 다음 차례(턴)를 강제로 건너뛰게 만드는 전략적 방해 이벤트

  • 지정 타깃 다음 턴 강제 스킵
    발동자가 직접 지목한 상대 플레이어의 다음 차례(턴)를 통째로 1회 무효화
  • 직접 지정 저격 방식 도입
    기존의 랜덤 선택(자신 포함) 방식을 탈피하여, 자신을 제외한 특정 라이벌을 지명 타깃팅
  • 실시간 타깃 선택 팝업
    발동 시 15초 제한 시간의 보라색 테마 선택 UI 노출, 타임아웃 시 자동 무작위 스킵 처리
event_black_hole.gif
🕳️ 🎥 event_black_hole.gif (녹화된 플레이어 작동 GIF를 넣으면 활성화됩니다)
게임 02 — 설명

라이어 게임 소개 및 규칙

스파이(라이어)와 시민들 간의 고도의 심리전 및 추리 게임

역할과 제시어 분배

게임이 시작되면 모든 플레이어에게 역할이 무작위 분배됩니다. 시민은 카테고리와 제시어를 확인하지만, 라이어는 카테고리만 제공받고 구체적인 제시어는 알 수 없습니다.

정체 은폐와 단서 추론

플레이어들은 번갈아 가며 제시어에 대한 힌트를 설명합니다. 라이어는 자신의 정체를 숨기며 시민들의 단서를 취합해 제시어를 신속하게 추론해야 합니다.

검거 투표와 역전 기회

설명이 완료되면 모든 유저가 라이어 지목 투표를 수행합니다. 라이어가 검거되어도 마지막 제시어 맞추기에 성공하면 라이어가 최종 역전 승리를 쟁취합니다.

LiarRules.gif
🎥 LiarRules.gif (녹화된 라이어 게임 규칙 설명 GIF를 넣으면 활성화됩니다)
게임 02

라이어 게임

제시어를 모르는 스파이를 찾아내는 소셜 추리 게임

게임 흐름도
1. 정체 확인
나만 볼 수 있는 3D 플립 역할 카드
2. 힌트 설명
카드의 제시어를 눈치껏 설명
3. 라이어 추리
라이어로 의심되는 플레이어 지목 클릭
추리 성공 ↙ ↘ 추리 실패
Success Path
4. 최후 변론
실시간 타이핑 중계
5. 결과 발표
역전승 또는 시민승
Failure Path
5. 결과 발표
오검거로 인한
라이어의 완벽 승리
LiarGameplay.gif
🎥 LiarGameplay.gif (녹화된 라이어 게임 작동 GIF를 넣으면 활성화됩니다)
게임 02 — 주요 특징

라이어 게임 주요 특징

실시간 소켓 통신과 3D 그래픽 기술을 활용한 디테일한 연출

3D 카드 플립 역할 확인

본인의 카드를 클릭하여 180도 회전하는 3D 입체 카드 인터랙션으로 자신의 역할(시민/라이어)과 카테고리 제시어를 은밀하게 확인합니다.

실시간 타이핑 동기화

지목된 라이어가 최후 변론이나 역전 정답을 입력할 때, 자음과 모음 하나까지 다른 모든 플레이어 화면에 실시간 문자 낙하 애니메이션과 함께 라이브 중계됩니다.

몰입감 극대화 레이아웃

오른쪽 채팅 사이드바를 완전히 제거하고 플레이어 카드 바로 위로 피어오르는 머리 위 말풍선 톡으로 소통 방식을 전환하여 게임 진행 몰입도를 극한으로 끌어올렸습니다.

LiarFeatures.gif
🎥 LiarFeatures.gif (녹화된 라이어 게임 추가 작동 GIF를 넣으면 활성화됩니다)
게임 03

폭탄 돌리기

주제에 맞는 단어를 빠르게 연상하고 다음 주자에게 폭탄을 넘기는 순발력 게임

제한 시간의 압박

주어진 글자로 시작하는 올바른 주제 단어 입력 즉시 턴이 넘어가며 폭탄 오브젝트가 다음 플레이어에게 이동합니다.

서바이벌 탈락 방식

째깍거리는 시간이 만료되어 폭탄이 폭발하는 순간 턴을 소유한 플레이어는 하트 라이프를 한 칸 잃게 됩니다.

점진적 속도 상승

라운드가 진행되고 생존자가 압축될수록 폭탄의 턴별 만료 속도가 급격하게 줄어들어 말초적인 긴장감을 극대화합니다.

BombGameplay.gif
🎥 BombGameplay.gif (녹화된 폭탄 돌리기 게임 작동 GIF를 넣으면 활성화됩니다)
게임 03 — 서브 모드

폭탄 돌리기 서브 모드 및 전략

플레이어 성향에 따른 일반 모드와 고도화된 전략 모드의 대치

일반 모드

단어 입력 시 다음 턴의 주자가 무작위로 선택되어 넘어갑니다. 예측 불허한 흐름을 통해 캐주얼한 예능성과 파티 게임 특유의 억까 재미를 선사합니다.

전략 모드 및 원클릭 지목

클릭 한 번으로 원하는 생존 대상을 저격 지목하여 폭탄을 패스합니다. 매 턴 지목 자동 초기화 및 체크 토글 해제를 결합해 정교한 눈치싸움을 유도합니다.

예측 불가한 과열 타이밍

폭탄의 속도가 빨라지며 과열(빨간색 변환)되는 임계치 초를 매 라운드 무작위 생성합니다. 뻔한 흐름을 타파하고 고유의 쫄깃한 긴장도를 높였습니다.

BombTactical.gif
🎥 BombTactical.gif (녹화된 폭탄 돌리기 전략 모드 GIF를 넣으면 활성화됩니다)
핵심 기술 01

AI 단어 생성 흐름

Google Gemini API를 활용한 무제한 주제 단어 자동 생성

주제 입력
예: "리그 오브 레전드"
입력 검증
자음 단독 / 어뷰징 차단
DB 캐시 확인
기존 주제면 즉시 반환
Gemini API 호출
단어 30~50개 생성
DB 저장
다음 사용 시 무료 재사용
빙고판 배치
5×5 랜덤 배열 완성
어뷰징 방지: 동일 방/유저 30초 쿨타임을 서버+클라이언트 이중 적용
비용 최적화: 같은 주제는 DB에서 꺼내 API 호출 없이 즉시 게임 시작
핵심 기술 02

실시간 멀티플레이 구조

Socket.io WebSocket으로 모든 플레이어 상태를 실시간 동기화

👥
클라이언트 (플레이어들)
브라우저에서 게임 화면
이벤트 emit → 서버로 전송
Socket.io
WebSocket
🖥️
서버 (Node.js)
게임 상태 관리
모든 클라이언트에 broadcast

주요 소켓 이벤트

turn update word called bingo completed player joined game start confirm result liar vote char drop bomb pass player eliminated
개발 도전 과제

개발 도전 과제 & 해결

AI 어뷰징 방지
문제: 사용자가 "ㅋ" 같은 자음 입력 시 Gemini가 그대로 단어를 생성해버림. 연속 클릭 시 API 할당량 고갈.
클라이언트 자음 정규식 차단 + 서버 30초 쿨타임 이중 방어 + DB 캐싱으로 재요청 방지
게임 재시작 타이밍 동기화
문제: 결과창을 확인 중인 유저가 있는데 방장이 게임을 재시작하면 해당 유저가 게임에 참여 불가.
서버에서 confirmedResult 상태 관리, 모든 유저가 확인 완료해야 방장이 재시작 가능하도록 제어
실시간 타이핑 동기화
문제: 최후 변론 타이핑을 실시간으로 보여주려면 글자 입력마다 전체 DOM을 재렌더하면 성능 저하.
글자 추가 시 span만 추가하는 방식으로 DOM 재렌더 없이 최적화, 글자 낙하 애니메이션도 구현
쿨타임 시스템 설계
문제: 게임 중 대기방 이탈 후 재입장 시 쿨타임 UI가 초기화되어 우회 가능.
서버 인메모리에 쿨타임 상태 보관, 재입장해도 남은 시간을 그대로 이어받아 적용
Demonstration

종합 시연 영상

마무리 및 계획

완성도 & 앞으로

3
게임 수록
1인
풀스택 개발
실시간
멀티플레이

📋 추후 개선 계획

🎮 추가 파티게임 콘텐츠 확장 🎯 플레이 데이터 기반 밸런스 개선
감사합니다