멜로디부터 화면까지 전부 코드로 만든 비주얼라이저 (소리 켜고 보세요)

"내 노래 하나 만들어보고 싶다"는 생각, 다들 한 번쯤 해보셨을 거예요. 저는 악기를 못 다룹니다. 근데 코드는 다루죠. 그래서 코드로 만들었습니다. 멜로디부터 그걸 시각화하는 화면까지 전부요. 아래 영상이 결과물입니다. 꼭 소리 켜고 보세요.

소리부터 얘기하면, 신스 앱을 안 쓰고 파이썬으로 파형을 직접 만들었습니다. 기본은 사인파예요. 여기에 배음을 쌓아서 음색을 만들고(가산합성이라고 합니다), ADSR 엔벨로프로 소리가 붙었다 사라지는 결을 잡았습니다. 킥이랑 하이햇도 따로 합성했고요. 90 BPM, Am-F-C-G 진행에 A단조 펜타토닉 멜로디를 얹으니 5.3초짜리 루프가 나왔습니다. 처음엔 진짜 삑삑거리는 전자음이었는데 엔벨로프를 다듬을수록 점점 음악처럼 들리는 게 신기했어요.

솔직히 말하면 신스 앱 켜면 10분에 만들 소리입니다. 근데 음원을 어디서 가져오는 순간 '내 작품'이 아니라 '남의 소리에 그림 얹은 것'이 되는 느낌이라, 불편해도 처음부터 만들고 싶었어요. 고집이었죠. 후회는 없습니다.

화면은 그 음원을 짧은 구간마다 FFT로 분석해서 만들었습니다. 지금 이 순간 어떤 주파수가 얼마나 세게 울리는지가 숫자로 나오는데, 그걸 28개 밴드로 묶어서 낮은 음은 안쪽 막대에, 높은 음은 바깥 막대에 연결했어요. 그러니까 화면에서 움직이는 방사형 막대 하나하나가 실제 그 순간의 소리입니다. 눈속임 애니메이션이 아니라요. 중앙 펄스랑 하단 스펙트럼도 같은 데이터로 움직입니다.

제일 짜릿했던 건 처음으로 소리랑 화면이 맞아떨어진 순간이었습니다. 베이스가 둥 할 때 안쪽이 부풀고 하이햇이 치 할 때 바깥이 파르르 떠는 걸 보는데, 아 소리를 눈으로 본다는 게 이런 거구나 싶었어요. 그 맛에 새벽까지 파라미터를 만졌습니다.

토이 프로젝트지만 완결감이 좋았습니다. 어느 하나 남의 걸 안 가져왔다는 게 은근히 뿌듯해요. 다음엔 루프를 더 길게 만들어보고, 아무 음악이나 넣으면 거기에 맞춰 반응하는 버전도 생각 중입니다. 이어폰 끼고 소리 키워서 한번 보세요. 5.3초 루프인데 계속 듣게 됩니다. 제가 만들어서 하는 말이 아니라... 아니다, 맞아요. 제가 만들어서 하는 말입니다.

작업 순서를 궁금해하실 것 같아 남기면, 소리를 완성한 다음에 화면을 만든 게 아니라 둘을 계속 왔다 갔다 했습니다. 화면을 붙여보니 소리의 빈 데가 보여서 하이햇을 더 넣었고, 하이햇을 넣으니 바깥 막대가 심심해서 감쇠 곡선을 다시 만졌어요. 눈과 귀가 서로를 디버깅해주는 느낌이었는데, 이 경험이 이번 작업에서 제일 남는 부분이었습니다.

삽질 포인트도 하나 공유하면, 막대를 FFT 값에 그대로 연결하면 화면이 정신없이 떨립니다. 사람 눈에 자연스러우려면 올라갈 땐 빠르게, 내려올 땐 천천히 떨어지게 비대칭 감쇠를 줘야 하더라고요. 이퀄라이저 UI들이 왜 다 그렇게 움직이는지 만들어보고 알았습니다. 다 이유가 있었어요.

영상에 쓴 도구는 별거 없습니다. 파이썬 표준 라이브러리로 WAV를 만들고, 시각화는 캔버스를 프레임 단위로 렌더해서 영상으로 묶었어요. 화려한 장비 없이도 소리와 그림은 만들 수 있더라고요. 궁금한 부분은 댓글로 물어봐 주세요.