Web Audio API로 리듬 게임 노트 자동 생성하기

곡마다 노트를 직접 찍을 수는 없습니다

전통적인 리듬 게임은 작곡가가 노트를 직접 찍습니다. 곡의 의도와 가장 잘 어울리지만, 1인 개발 프로젝트에서 곡마다 노트를 손으로 찍기는 어렵습니다. Music Savior는 사용자가 듣는 곡을 자동으로 분석해 노트를 만드는 방향을 선택했습니다.

Web Audio API의 AnalyserNode를 사용하면 실시간으로 주파수와 진폭 정보를 얻을 수 있습니다. 저음 대역(킥, 베이스)을 따로 추적하면 곡의 박자가 비교적 잘 잡힙니다. 모든 곡에 완벽하지는 않지만, 노트가 “음악에 반응하는 느낌”을 주는 데는 충분합니다.

• AnalyserNode로 저음·중음·고음 대역을 분리해 분석합니다.
• 에너지가 임계값을 넘는 순간을 비트 후보로 잡습니다.
• 비트 후보들 사이 최소 간격을 두어 노트가 뭉치지 않게 합니다.
• 곡별 특성에 따라 임계값과 간격을 살짝 조정합니다.

노트 밀도와 난이도를 맞추기

비트 후보를 그대로 노트로 사용하면 곡에 따라 노트가 너무 많거나 너무 적습니다. 발라드는 비트가 약해서 노트가 비고, EDM은 비트가 너무 자주 떨어져서 화면이 정신없어집니다. Music Savior는 곡 전체 평균 에너지를 기준으로 임계값을 적응적으로 조정합니다.

난이도 옵션은 같은 비트 데이터에서 몇 퍼센트의 비트를 노트로 사용할지를 바꾸는 방식으로 만듭니다. 쉬움은 50% 정도, 어려움은 90% 이상을 사용합니다. 이렇게 하면 같은 곡이라도 난이도별로 자연스럽게 다른 패턴이 나옵니다.

자동 재생 정책과 사용자 제스처

브라우저는 사용자가 직접 버튼을 누르기 전까지 오디오 재생과 AudioContext 활성화를 막습니다. Music Savior가 “시작” 버튼이나 “음악 준비” 버튼을 굳이 두는 이유가 이 때문입니다. resume()을 호출하지 않으면 AnalyserNode에서 0만 나오는 경우가 많습니다.

모바일에서는 추가로 신경 써야 할 점이 있습니다. 잠금 화면이 켜지거나 다른 탭으로 전환되면 AudioContext가 일시 정지될 수 있습니다. 다시 돌아왔을 때 resume()을 호출하지 않으면 사용자는 “게임이 멈췄다”고 오해할 수 있습니다.

• AudioContext는 사용자 제스처 직후 생성하거나 resume합니다.
• 백그라운드 복귀 후 자동 재시작 로직을 둡니다.
• 오디오 권한이 막힌 환경에서는 데모 모드를 안내합니다.
• 모바일에서는 화면 자동 잠금을 길게 설정하도록 안내합니다.

자동 생성의 한계와 보완

아무리 비트 분석이 잘 되어도 곡의 의도를 100% 따라가지는 못합니다. 후렴, 브리지, 솔로 구간이 시각적으로도 강조되어야 사용자가 곡에 몰입할 수 있습니다. Music Savior는 곡 구조를 따로 다루지 않더라도, 노트 밀도가 갑자기 늘어나는 구간에는 화면 효과를 살짝 강조합니다.

장기적으로는 곡별 메타데이터(템포, 강조 구간)를 함께 다루는 방향이 좋지만, 메타데이터 작업 비용이 크기 때문에 현재는 자동 분석 + 시각 효과 조합으로 운영하고 있습니다. 결과적으로 “이 곡이 제일 재밌다”는 평이 곡별로 갈리는데, 이것도 게임으로서는 나쁘지 않은 결과입니다.

관련 글