Show GN: MUSICSTAR - 음악의 영혼 시각화를 통한 디지털멍때리기
(musicstar.kr)🚀 한 줄 요약
웹 오디오 분석 기술과 Three.js를 결합해, 음악의 비트에 맞춰 40개의 파편이 '칼군무'를 추는 시각적 명상(Deep Mung) 플랫폼입니다.
💡 왜 만들었나요? (A Father's Legacy)
이 프로젝트는 K-POP 댄스 퍼포먼스를 연습하는 아들을 위해, 그 열정에 걸맞은 가장 완벽한 시네마틱 무대를 선물해주고 싶다는 마음에서 시작되었습니다. 단순한 배경 화면을 넘어 기술적 정교함이 예술적 감동으로 이어지는 경험을 구현하고자 했습니다.
🛠 기술적 도전과 특징 (Geek Points)
#초저지연 동기화 (32ms 미만): 오디오 캡처와 시각적 반응 사이의 딜레이를 극소화하여 비트와 화면이 어긋나지 않는 완벽한 '칼군무'를 구현했습니다.
#GPU 최적화 (Custom GLSL Shaders): 복잡한 3D 연산을 GPU로 오프로딩하여 CPU 점유율을 40% 이상 낮췄으며, 저사양 환경에서도 60 FPS의 부드러운 움직임을 유지합니다.
#실시간 오디오 피처 추출: Meyda.js를 활용해 주파수 대역별 특징을 분석하고, 17가지의 수학적 포메이션(MANDALA, WING 등)에 실시간으로 매핑했습니다.
#프라이버시 우선: 모든 오디오 처리는 사용자의 브라우저 내에서 100% 로컬로 진행됩니다. 데이터가 외부로 전송되지 않아 안심하고 사용할 수 있습니다.
🌌 주요 기능
#The Choreographer: 음악 장르와 분위기에 따라 변하는 17가지 역동적 대형과 12가지 시네마틱 카메라 뷰 제어.
#Rainbow Terrain: 베이스 비트에 반응하며 무한히 펼쳐지는 와이어프레임 지형 탐험.
#Digital Detox: AI가 만드는 소음에서 벗어나 오직 소리와 빛에 집중하는 '시각적 명상 공간' 제공.
[제작자 후기]
저의 아이다어는 "음악의 영혼을 시각화해서 현대인들을 뇌과학적으로 디톡스시켜주는 무료 서비스(일종의 디지털안식처)를 만들자!"입니다.
Google jules와 무료로 2주간 바이브코딩해서 제가 만들었지만 저도 1시간동안 멍하게 되더라구요.
뭔가 뇌 디톡스 효과가 있는 것 같습니다.
평소 좋아하는 음악을 켜고 제가 만든 서비스를 통해 음악의 영혼을 보고 뇌과학적 디톡스 효과가 있는지 리뷰부탁드립니다.