인터랙티브 리듬 응원 게임 쉐낏투유

🎯 프로젝트 기획 의도 및 목표

"그대에게"라는 노래에서 느껴지는 젊음, 열정, 그리고 단합을 테마로 잡아 모두가 같이 한마음 한뜻으로 응원을 즐길 수 있는 서비스를 목표로 진행하였습니다.

본 프로젝트는 단순한 게임을 넘어, 사용자들이 노래의 리듬에 맞춰 스마트폰을 흔들며 마치 콘서트 현장에서 다 같이 응원하는 듯한 몰입감 높은 경험을 제공하는 것을 목표로 합니다. 개인의 적극적인 참여가 팀 전체의 결과로 이어지는 협력적 게임 구조를 통해, "함께"라는 가치를 물리적인 행동으로 구체화하고, 팀 간의 경쟁을 통해 재미와 참여를 극대화하고자 합니다.

✨ 핵심 기능 설명

1. 로그인 없는 간편 접속 및 팀 선택

   • 복잡한 설치 과정 없이, 링크를 공유하는 것만으로 웹 기반 게임 앱에 즉시 접속할 수 있습니다.

2. 모션 인식 기반의 리듬 액션

   • 스마트폰의 가속도계 및 자이로스코프 센서를 활용하여 사용자의 '흔들기' 동작을 실시간으로 감지합니다.
   • 진동을 사용하여 더 실감나는 리듬 액션을 즐길 수 있습니다.
   • 노래 "그대에게"의 비트와 사용자의 흔들기 동작 타이밍을 비교 분석하여 정확도(Perfect, Good, Miss 등)를 판정하고, 이에 따라 점수를 환산합니다.

3. 팀 대항 실시간 점수 시스템

   • 개인이 획득한 점수는 실시간으로 소속 팀의 총점에 합산됩니다.
   • 게임이 진행되는 동안 또는 종료 후, 팀별 순위 및 점수를 확인할 수 있어 경쟁의 재미를 더합니다.

4. 대형 스크린 (공용 화면): * 노래의 진행 상황과 핵심 비트를 시각적으로 안내하는 '리듬 가이드라인'을 표시합니다. * 팀별 점수를 합산하여 결과 페이지에 보여주어 재미와 적당한 경쟁을 유도합니다. * "그대에게" 노래가 배경음악으로 재생됩니다.

💻 주요 사용 기술

• 프론트엔드 (클라이언트): (웹 기반 애플리케이션)

  • Device Motion API (가속도계, 자이로스코프 센서 데이터 접근)
  • Vibrate API를 사용한 햅틱 기능

  Category	Technologies
  Frontend Framework	React 19
  Build Tool	Vite
  Language	TypeScript
  Routing	@tanstack/react-router
  State Management	Zustand
  Data Fetching	@tanstack/react-query, ky
  Styling	Tailwind CSS
  UI Components	shadcn
  Code Quality	Biome
  Package Manager	Yarn
  Git Hooks	Husky, lint-staged
  Deploy	Vercel

• 백엔드 (서버): Python (FastAPI), Poetry, SSE

  • API 서버 (게임 정보, 비트 데이터 제공, 게임 시작/종료 관리, 점수 집계 및 결과 반환)

• 데이터 저장: 인메모리 데이터 구조 활용 (핵커톤 기간 내 빠른 프로토타이핑을 위함)

🚀 사용 방법

1. 어드민 (게임 진행자):

   • 어드민 페이지에 접속하여 게임 시작을 위한 기본 정보(beat_list, song_length)를 확인합니다.
   • "시작" 버튼을 클릭하여 모든 클라이언트에게 게임 시작 시간(game_start_at)을 동기화하고 노래 재생을 시작합니다.
   • 게임 종료 후, 어드민 페이지에서 팀별 최종 결과를 확인합니다.

2. 사용자 (참여자):

   • 제공된 QR 코드를 스마트폰으로 스캔하여 게임 웹 앱에 접속합니다.
   • 안내에 따라 응원하고 싶은 팀을 선택합니다.
   • 게임이 시작되면 "그대에게" 노래와 화면에서 표시되는 리듬에 맞춰 스마트폰을 신나게 흔듭니다!
   • 자신의 행동에 대한 실시간 피드백과 점수를 확인하며, 팀의 승리를 위해 응원합니다.
   • 게임 종료 후, 개인 및 팀의 최종 결과를 확인할 수 있습니다. (30초 주기로 게임 종료 여부 자동 확인)