TECH 으로 돌아가기
TECH HACKER NEWS 1주 전 6분 읽기 24 READS

노래만 부르면 악보가 뚝딱 나오는 브라우저 도구, 원리까지 파헤쳐봤어요

샤워하다가 기가 막힌 멜로디가 떠올랐는데, 악보를 그릴 줄 몰라서 그냥 날려버린 경험 있으신가요? 이번에 소개된 프로젝트는 그 아쉬움을 정확히 겨냥해요. 브라우저에서 마이크에 대고 노래를 부르면, 그 멜로디를 분석해서 인쇄할 수 있는 악보로 바꿔주는 도구거든요. 설치할 프로그램도 없고 회원 가입도 필요 없이 웹페이지 하나로 끝나요. '흥얼거리면 악보가 나온다'는 아이디어 자체는 오래됐지만, 그 전 과정이 브라우저 안에서 통째로 돌아간다는 게 이 프로젝트의 매력 포인트예요.

목소리가 악보가 되기까지

기술적으로 어떤 일이 벌어지는지 단계별로 뜯어볼게요. 먼저 Web Audio API와 getUserMedia로 마이크 입력을 받아요. 브라우저가 오디오를 실시간 스트림으로 넘겨주면, 다음 단계가 이런 도구의 심장인 피치 검출(pitch detection)이에요. 이게 뭐냐면, 소리 신호에서 '지금 몇 헤르츠짜리 음이 울리고 있는지'를 찾아내는 작업이에요. 파형이 얼마나 자주 반복되는지를 재는 자기상관(autocorrelation) 기법이나 이를 개선한 YIN 알고리즘이 고전적인 방법이고, 요즘은 CREPE처럼 딥러닝으로 피치를 추정하는 모델도 쓰여요.

말은 쉬운데 사람 목소리는 만만한 상대가 아니에요. 목소리에는 기본 주파수 위에 배음이 잔뜩 얹혀 있어서, 알고리즘이 한 옥타브 위나 아래 음으로 착각하는 '옥타브 에러'가 자주 생기고요. 음을 떨어주는 비브라토, 음과 음 사이를 미끄러지듯 이어 부르는 습관 때문에 '어디까지가 한 음인지' 경계를 긋는 것도 어려워요. 그래서 주파수를 알아낸 다음에는 양자화라는 과정을 거쳐요. 연속적인 주파수 값을 가장 가까운 반음(도, 도#, 레...)에 붙이고, 음이 시작된 시점들을 분석해 템포를 추정한 뒤 8분음표나 16분음표 격자에 리듬을 맞춰 넣는 거죠. 마지막으로 이렇게 정리된 음표들을 VexFlow나 abcjs 같은 자바스크립트 악보 렌더링 라이브러리로 그려내면 인쇄 가능한 악보가 완성돼요. 이 모든 과정이 브라우저 안에서 끝나기 때문에, 내 목소리 녹음이 서버로 전송되지 않는다는 프라이버시 장점도 따라와요.

자동 채보라는 오래된 숙제

오디오를 악보로 바꾸는 기술을 자동 채보(Automatic Music Transcription)라고 하는데, 음악 정보 검색 분야에서 수십 년째 연구 중인 난제예요. 여러 악기가 동시에 울리는 다성 음악은 아직도 완벽한 채보가 안 되거든요. 대신 한 사람이 부르는 단선율은 가장 현실적으로 풀 수 있는 문제라서 상용 도구도 많아요. 보컬 편집의 대명사인 멜로다인, 구글이 SPICE라는 모델로 구현한 허밍 검색, 로직 프로나 뮤즈스코어의 오디오-미디 변환 기능이 다 같은 뿌리에서 나온 기술이에요. 이 프로젝트는 그 계보에서 '설치 없이, 브라우저에서, 가볍게'라는 접근성을 파고든 셈이죠.

웹 오디오, 배워두면 쓸 데 많아요

이 프로젝트가 한국 개발자에게 주는 힌트는 Web Audio API의 잠재력이에요. 노래방 앱의 음정 채점, 악기 튜너, 발음 교정 서비스처럼 국내에서도 수요가 확실한 기능들이 전부 이 기술 위에서 구현 가능하거든요. 무거운 신호 처리는 AudioWorklet으로 오디오 전용 스레드에서 돌리고, 성능이 더 필요하면 러스트나 C++로 짠 코드를 WASM으로 가져올 수도 있어요. 모든 처리가 클라이언트에서 끝나니 서버 비용이 거의 안 든다는 것도 사이드 프로젝트에는 큰 장점이고요. 피치 검출 라이브러리도 이미 여러 개 공개돼 있어서, 주말 프로젝트로 '허밍 작곡 메모장' 같은 걸 만들어보기 딱 좋아요.

마무리

정리하면, 이 프로젝트는 신호 처리라는 어려운 기술을 브라우저라는 가장 접근성 좋은 플랫폼에 얹어서 '누구나 흥얼거림을 악보로' 만들 수 있게 한 사례예요. 여러분이라면 이 기술로 뭘 만들어보고 싶으세요? 노래방 채점기, 아이 목소리 기록 앱, 아니면 또 다른 아이디어가 있다면 댓글로 나눠주세요.


🔗 출처: Hacker News

SOURCE · HACKER NEWS
원문 전체 보기 → https://om-intelligence.ch/projects/vocal-notation/vocal-not...
SHARE
처리 중...