이건 내가 만든 브라우저 기반 음악 시각화 도구임. 비슷한 건 많지만, 이건 내 거임.

브라우저에서 단일 HTML 파일로 돌아가는 뮤직 비주얼라이저를 하나 만들었어. 설치할 것도 없고 의존성도 없어. 그냥 재생 중인 음악에 연결하면 알아서 반응함.

체험하기: https://malakachakra.github.io/dsViz/

코드: https://github.com/malakachakra/dsViz

데스크톱에서 제일 잘 돌아가고, 모바일에서도 완벽하게 작동함.

포함된 기능

총 31개의 장면이 들어있어. 몇 가지 눈에 띄는 것들:

- Milkdrop 스타일의 피드백 워프, "이전 프레임을 다음 프레임이 왜곡시키는" 그 고전적인 느낌

- Moon Pool / Pool Floor: 진짜 물처럼 움직이는 물. 비트에 맞춰 파동 시뮬레이션에 물방울이 떨어지고, 수영장을 내려다보거나 잔물결이 일렁이는 타일 바닥 위를 떠다닐 수 있음.

- Lichtenberg: 킥 드럼 소리에 맞춰 가지를 뻗으며 자라나는 번개.

- Petri: 반응-확산(reaction-diffusion) 방식. 산호나 표범 무늬가 자라나는 것과 같은 수학적 원리야. 소리가 새로운 군집을 만들고 화학적 성질을 바꿔서, 음악이 그림을 직접 키워나가는 셈이지.

- Deep Field: 노래의 에너지에 맞춰 줌인되는 만델브로트(Mandelbrot) 다이브.

- 유체, 잔물결, 반응-확산 시뮬레이션에 더해 그림 속을 날아다니는 터널, 돔, 바닥 모드까지 지원함.

오디오 처리

소리는 저음, 중음, 고음으로 나뉘고, 각각 노래의 *자체* 최근 평균값과 비교해서 측정돼. 잔잔한 로파이(lo-fi) 곡이든 시끄러운 테크노 곡이든 똑같이 강렬하게 반응하도록 만들고 싶었거든. 각 대역별로 슬라이더가 있어서 사용자가 직접 효과, 색상, 강도 같은 걸 커스텀하고 다듬을 수 있어.

Claude로 제작

웹 버전 Claude에서 시작해서 나중에는 Claude Code로 옮겨서 작업했어. 7월에 나왔던 Claude 버전으로 처음 시작했을 땐 결과물이 좀 별로였거든. 밋밋하고 그냥 난잡하기만 했지. 이번 주말에 다시 붙잡고 수정했어. 내가 눈으로 보면서 방향을 잡고, Claude가 셰이더랑 엔진을 짰지. 내가 원하는 느낌("좀 더 불길하고 사이버펑크스럽게", 시점 전환이나 카메라 변화 등)을 말하면 결과물을 보고 다시 피드백을 주는 식이었어. 이 피드백 루프가 비주얼 작업에 딱 맞더라고. Claude Code는 헤드리스(headless)로 장면을 렌더링해서 스스로 결과물을 확인할 수 있으니까 왔다 갔다 하는 수고를 엄청 덜었지. 첫 10개 정도의 효과는 Claude가 알아서 설계하게 뒀고, 그다음 유체 효과 같은 건 내가 직접 지시해서 만들었어. 나머지는 Milkdrop 효과 중에서 괜찮은 것들을 골라 우리 엔진에 맞게 개조한 것들이 대부분이야. 프리셋을 다 만든 뒤로는 주로 전체적인 UI 수정에 집중했어.