"말은 필요 없다. 마음으로 통하라."
전 세계적으로 사랑받는 눈치 협동 보드게임 **The Mind (더 마인드)**를 웹 브라우저에서 최대 6인 멀티플레이어로 완벽하게 즐길 수 있도록 구현한 풀스택 애플리케이션입니다.
본 프로젝트는 미학적인 포커 Felt 스타일 테이블 디자인, 실시간 소켓 통신, 그리고 외부 리소스 다운로드 없이 브라우저 단에서 즉석 신디사이징 연주를 펼치는 자립형 Web Audio 사운드 엔진이 탑재된 프리미엄 웹앱입니다.
- 실시간 방 동기화: 4자리 영숫자 방 코드 생성 및 입장 시스템. 방장 위임 및 연결 복구 자동 제어.
- 공식 룰셋 완벽 이식: 인원수별 목숨, 표창 개수, 최대 레벨 및 특정 레벨 통과 시 지급되는 공식 보너스 메커니즘을 완벽 탑재했습니다.
- 무음원 신디사이징 BGM: 단 하나의 MP3 파일도 내려받지 않고 Web Audio API의 오실레이터, 게인 노드, 필터 조작만으로 현장에서 합성 연주하는 발랄한 둠칫둠칫 비트 음악 루프를 구동합니다.
- 풍부한 효과음: 카드 딸깍 소리, 실수 경고음, 상승 아르페지오 레벨 클리어음, 팡파르 승리음, 하향 게임오버 사운드, 귀여운 이모지 팝업 소리까지 전부 실시간 합성으로 작동합니다.
- 극적 긴장감 연출: 카드를 모두 털어 레벨을 클리어하거나, 목숨이 다해 게임오버가 될 때 최종 결과 모달을 즉시 띄우지 않고 3초 동안 웅장한 중앙 슬라이딩 배너 연출을 보여주어 심장이 쫄깃해지는 쾌감과 탄식을 선사합니다.
- 오작동 방지: 3초 연출 딜레이 동안 사용자가 카드를 클릭하거나 표창 투표가 오작동하지 않도록 견고한 소켓 입력 락(
Lock)이 안전하게 동기화됩니다.
- 정확한 역적 박제: 카드 오름차순 실수를 저질러 마지막 생명을 앗아간 플레이어(Culprit)의 닉네임을 정확히 수집합니다.
- 위트 넘치는 10종 랜덤 멘트: 패배 모달 하단에 해당 트롤러의 닉네임을 포함한 저격 멘트 10종 중 하나를 무작위로 출력하여 유쾌한 피드백을 전달합니다. (예:
🔥 "닉네임"님은 완전 머저리 그 자체네요~ 저였으면 손절했을듯?,🔥 "닉네임" 또 너냐?)
- 스마트 터널링:
host.bat클릭 단 한 번만으로 로컬 Express 서버와 Cloudflare 터널(cloudflared) 프로세스를 동시에 비동기로 안전 가동합니다. - 원스톱 헬퍼: 터널링 완성을 백그라운드에서 실시간으로 감지하여 외부 공유 도메인(
https://*.trycloudflare.com)이 찍히는 즉시:- 콘솔에 예쁜 박스 아트로 배포 주소를 공지합니다.
- 윈도우 클립보드로 해당 주소를 자동 복사하여 즉시
Ctrl + V로 전달하게 합니다. - 기본 웹 브라우저로 해당 배포 사이트를 자동으로 기동하여 즉각적인 플레이 준비를 끝마칩니다.
- 좌석 연동 플로팅: 자신의 좌석 아바타 위치에서 이모지가 위로 두둥실 떠오르는 매끄러운 2D CSS 애니메이션을 제공합니다.
- 신규 이모지 테마: 기존 세트에 더해 유저 요청으로
🤏,🤚,🖕,🍌,😐이모티콘을 대대적으로 긴급 충원했으며, 클릭 발송과 동시에 이모티콘 트레이 칸이 자동으로 조용히 닫히도록 마찰 없는(frictionless) UX를 구현했습니다.
- Backend: Node.js, Express, Socket.io
- Frontend: HTML5, Vanilla CSS3 (Custom Variables, CSS Animations), Vanilla JavaScript
- Audio Engine: HTML5 Web Audio API (Synthesizing & Scheduling)
- Dev/Ops & Testing: Cloudflared, Socket.io-client (E2E Test & Bots Scenario Simulation)
- 아래의 [Deploy to Render] 버튼을 클릭합니다.
- Render.com 회원가입/로그인 완료 시 빌드 및 배포 절차가 완전 자동으로 전개됩니다.
- 배포 성공 후 생성되는 고정 주소(예:
https://the-mind-xxxx.onrender.com)를 친구들에게 공유하여 24시간 언제든 똑같은 주소로 플레이하세요!
- 프로젝트 폴더 루트에 있는
host.bat파일을 더블클릭하여 실행합니다. - 의존성과 터널 런타임이 자동으로 준비된 뒤 터널 주소가 터미널에 공지됩니다.
- 자동으로 클립보드에 복사된 주소를 친구들에게 보내주고, 자동 기동된 웹 브라우저에서 바로 마인드 플레이를 즐기세요!
- 필요한 패키지를 설치합니다.
npm install
- 게임 서버를 시작합니다.
npm start
- 브라우저에서
http://localhost:3000으로 접속합니다.
본 프로젝트는 게임 규칙 변경 시 발생할 수 있는 잠재적 결함을 미리 방지하기 위해 가상 소켓 클라이언트를 이용한 완전 자동 E2E 시나리오 테스트 스위트를 탑재하고 있습니다.
- 테스트 내용: 3인 가상 플레이어 매칭, 중복 닉네임 방지, 비방장 시작 예외 처리, 무결점 플레이 승리 시나리오, 2인 표창 전역 최저 1장 소모 메커니즘, 실수 생명 차감 검증 등.
- 실행 명령:
node test-sim.js
본 프로젝트는 교육적 및 엔터테인먼트 목적의 오픈소스 프로젝트입니다. 자유롭게 수정, 배포 및 협력 보드게임 플레이에 활용해 주세요! 🧠 서로의 마음에 주파수를 맞추어 12레벨 정복에 성공하길 기원합니다!