흥얼거리면 노래가 되는 웹앱을 만들었습니다 (서버 없이 브라우저에서)

노래 만들고 싶다는 생각은 늘 있었는데, 작곡 프로그램 켜면 트랙이고 미디고 뭐부터 손대야 할지 몰라서 매번 껐어요. 근데 샤워하다 흥얼거린 멜로디는 제법 그럴듯하단 말이죠. 그 간극이 아까워서, 그냥 흥얼거린 걸 녹음하면 알아서 곡으로 만들어주는 걸 만들어보자 했습니다.

마이크 켜고 아무 멜로디나 흥얼대면, 그 소리를 음표로 따냅니다. 여기가 제일 골 아팠어요. 사람 목소리는 음정이 흔들리고 "음~" 하는 사이에 숨소리도 끼니까, 날것 그대로 음표로 바꾸면 반음씩 어긋난 이상한 악보가 나와요. 그래서 자기상관(autocorrelation)으로 피치를 추적한 다음, 그걸 반음 단위로 양자화하고, 추출된 음들로 조성(key)까지 추정해서 스케일 밖으로 튄 음은 가장 가까운 음으로 당겨주게 했습니다. 이걸 넣고 나서야 "어 이거 내가 흥얼댄 거 맞네" 소리가 나오더라고요.

멜로디만 있으면 밋밋하니까, 조성에 맞는 코드 진행을 골라서 하모나이즈하고 베이스랑 드럼 그루브까지 얹었어요. 위 화면이 "반짝반짝 작은별"을 넣었을 때 나온 편곡인데, 아래 I–vi–IV–V 코드가 자동으로 깔린 게 보일 거예요. 스타일도 8비트, 로파이, 신스웨이브 세 가지를 만들어놨는데 같은 멜로디여도 드럼이랑 음색, 스윙감이 달라져서 분위기가 확 바뀝니다. 다 만든 곡은 WAV로 내보내거나 공유용 카드 이미지로 저장할 수 있고요.

기술적으로는 React 19 + TypeScript에 Vite, 스타일은 Tailwind로 갔습니다. 핵심인 오디오 쪽은 전부 브라우저 Web Audio API로 처리했어요. 처음엔 서버에서 돌릴까도 생각했는데, 내 흥얼거림이 어디 서버로 올라간다는 게 좀 찝찝하더라고요. 그래서 녹음부터 피치 추적, 편곡, 신스 합성, WAV 렌더링까지 전부 기기 안에서 끝내도록 했습니다. 서버도 API 키도 없어서 음성은 어디에도 안 올라가요.

만들면서 제일 재밌었던 건 같은 멜로디를 세 스타일로 번갈아 들어보는 거였어요. "반짝반짝 작은별"을 8비트로 들으면 옛날 오락실 느낌이 나는데, 로파이로 바꾸면 갑자기 카페에서 흘러나올 것 같은 노래가 되고, 신스웨이브로 돌리면 또 밤 운전할 때 틀 법한 곡이 돼요. 코드 진행이랑 멜로디는 그대론데 드럼 패턴이랑 음색만 바꿨을 뿐인데 이렇게 달라지는 게 신기해서, 테스트한다는 핑계로 한참을 혼자 듣고 있었습니다. 리듬도 템포(BPM)에 맞춰 1/8 박자 그리드에 스냅되게 해놔서, 흥얼댈 때 박자가 좀 늘어졌어도 깔끔하게 정리돼 나옵니다.

마이크 없어도 "반짝반짝 작은별" 같은 예시 버튼으로 전체 흐름을 체험할 수 있게 해놨으니, 심심할 때 아무거나 흥얼대보세요. 생각보다 내 소리가 그럴듯한 곡이 되는 게 꽤 재밌습니다.