부엉이 게임 파일럿 ( 3 ) - Next.js, 폴링 방식

 

부엉이 게임 파일럿 기록 처음부터 보기 : https://helloworld.ai.kr/22

개발 작업 흐름

1. 게임 진행 시나리오 작성
2. 필요한 화면/UI/DB 구조를 GPT와 정리
3. 게임 규칙 → NotebookLM → 규칙 PPT 생성
4. Next.js 프로젝트 초기화
5. Cursor에게 UI/DB/로직 구현 위임
6. 나는 실시간 QA + 버그 수정 + 운영 준비 담당

이처럼 많은 부분을 AI 도구에 의지하여 작업을 진행했다.

아키텍쳐

• Next.js ( 간단한 서버 기능 필요 )
• TypeScript
• Tailwind CSS
• Supabase PostgreSQL ( 플레이어 행동 로그, 게임 결과 저장 )

상태 관리 전략

이번 프로젝트에서는

• zustand
• React Query

같은 전역 상태 관리 도구를 사용하지 않았다.

이유:

• 동시접속 최대 10명 내외
• 상태 복잡도 낮음
• 과한 추상화 불필요

React 훅 기반 로컬 상태로 충분했다.

실시간 처리 전략

요구사항:

• 플레이어 화면 동기화 필요
• 하지만 완전 실시간까지는 불필요
• 트래픽 매우 낮음

최종 선택:

→ WebSocket 사용하지 않음
→ 1~2초 폴링 방식

이게 구현 난이도 대비 훨씬 안정적이었다.

GM용 페이지

운영 편의를 위해 관리자 전용 페이지를 별도로 만들었다.

주요 기능:

• 라운드 진행 제어
• 게임 진행 제어
• 정보 확인
• BGM 재생

실제 행사 운영에서
GM 페이지가 컨트롤 타워 역할을 한다.

오디오 자산 제작

파일럿 분위기를 위해 BGM도 직접 준비했다.

• Suno AI → 배경음악 생성
• ElevenLabs → 효과음 생성

 

다음 글 보러가기 : https://helloworld.ai.kr/25

부엉이 게임 파일럿 ( 4 ) - Figma