목소리로 새를 날리는 실시간 피치 게임 'Voice Bird' — 피치 추정을 직접 구현했어요

마이크에 소리를 내면 음이 높을수록 새가 날아오르고, 낮추면 사뿐히 내려오는 실시간 피치 아케이드 게임입니다. Flappy Bird의 조작을 '탭' 대신 '목소리 음정'으로 바꿔봤어요. HTTPS에서 마이크 권한만 허용하면 데스크톱·모바일 모두 실제 목소리로 플레이할 수 있습니다.

주요 기능

• 실시간 피치 인식 — Web Audio API로 마이크 입력을 받아 매 프레임 기본 주파수(f0)를 추정합니다. 지금 내는 음이 화면 어디에 매핑되는지 음이름(C#3 등)과 Hz로 HUD에 실시간 표시돼요.
• 부드러운 조종감 — 지수이동평균(EMA) 스무딩과 옥타브 오검출 억제로 음성 떨림을 잡고, 로그 스케일로 음역을 화면 높이에 매핑해 조작이 자연스럽습니다.
• 음역 캘리브레이션 — "아~" 소리로 내 음역을 잠깐 측정해 매핑을 보정합니다(건너뛰기 가능).
• 스코어 공유 카드 — 점수와 캐릭터를 캔버스로 그려 이미지로 저장하거나 클립보드에 복사, 방송·자랑용으로 딱이에요.
• 완전 로컬 — 음성은 서버로 전송되지 않고 이 기기를 떠나지 않습니다.

기술 이야기

가장 신경 쓴 부분은 피치 추정을 외부 라이브러리 없이 직접 구현한 것입니다. 마이크 시간 도메인 신호에 자기상관(autocorrelation)을 돌려 주기를 찾고, 포물선 보간으로 정밀도를 높인 뒤 노이즈 게이트로 무음을 걸러냈어요. 실시간 게임이라 매 프레임 흔들림 없이 도는 게 관건이었습니다.

두 번째는 테스트 가능한 아키텍처입니다. 피치 소스를 PitchSource 인터페이스로 추상화하고, 게임 엔진(물리·장애물·충돌·점수·난이도 곡선)을 DOM에 의존하지 않는 순수 모듈로 분리했어요. 덕분에 실제 마이크가 없는 헤드리스 환경에서도 FakePitchSource로 음정을 주입해 장애물 통과·점수 상승·충돌·게임오버를 자동 검증할 수 있습니다. 합성 사인파(110/220/330/440Hz)로 피치 함수 정확도도 따로 검증했고요.

렌더링은 React 19 + Vite + Tailwind CSS v4 위에 Canvas 2D 커스텀 렌더러(world 좌표 기반)를 얹었습니다. UI 상태는 React가, 게임 화면은 Canvas가 나눠 맡아 프레임 부담을 줄였어요.

목소리는 이 기기를 떠나지 않으니, 마음껏 소리 질러보세요. 🐤🎶