프로젝트 소개

부모님이 아이들과 쉽게 접속해서 바로 플레이할 수 있는 것을 최우선으로 한 미니게임 모음 사이트입니다. 설치 없이 모바일 브라우저에서 바로 플레이 가능하며, PWA를 통해 앱처럼 설치할 수도 있습니다.

게임 목록

🎡 숫자 룰렛 — 금지 숫자 / 미션 모드, 돌아가는 룰렛
👉 화살표 스핀 — 화살표가 가리키면 당첨!
🐊 악어 이빨 — 12개 이빨 중 함정 하나를 피해라
🐹 쏙쏙 햄찌 — 3x3 두더지잡기, 3단계 난이도
💣 째깍 폭탄 — 폭탄이 터지기 전에 넘겨라
🎈 풍선 팡 — 풍선이 터질 때까지 펌프!

모든 게임은 참여자 없이도 플레이 가능하며, 참여자가 있으면 턴/벌칙 시스템이 자동 활성화됩니다.

핵심 기술 구현

Web Audio API 사운드 시스템

외부 오디오 파일 없이 코드만으로 효과음과 BGM을 합성합니다. useAudio 훅으로 클릭, 위험, 폭발 등 다양한 효과음을, useBgm 훅으로 160BPM C 메이저 8마디 루프 BGM을 생성합니다. AudioContext는 사용자 인터랙션 시점에 lazy 초기화하여 브라우저 정책에 대응합니다.

PWA + 푸시 알림

@ducanh2912/next-pwa와 커스텀 Service Worker를 사용하여 오프라인 지원 및 앱 설치를 구현했습니다. web-push + Redis 기반의 푸시 알림 시스템으로 새 게임 출시 등을 알릴 수 있습니다.

Zustand 기반 게임 상태 관리

플레이어, 점수, 턴 등 게임 간 공유 상태를 Zustand로 관리하고, 게임 내부 상태(타이머, UI)는 각 페이지의 useState로 분리했습니다. 참여자 목록은 localStorage에 자동 저장되어 재접속 시 유지됩니다.

배운 점

Web Audio API 심화: 외부 파일 없이 오실레이터와 필터만으로 다양한 게임 사운드를 합성하는 과정에서 웹 오디오 프로그래밍에 대한 이해가 깊어졌습니다.
PWA 실전 적용: Service Worker 캐싱 전략, 푸시 알림 구현, iOS Safari의 제한사항 대응 등 PWA의 실전 이슈를 경험했습니다.

miniplay