피드로 돌아가기
Show Dev: Your Face Is Now a Music Generator
Dev.toDev.to
AI/ML

Client-side Face Detection과 Stateful Server를 통한 실시간 Procedural Audio 구현

Show Dev: Your Face Is Now a Music Generator

Jean Michael Mayer2026년 4월 19일3intermediate

Context

기존 AI 음악 생성 모델의 높은 Latency와 브라우저 리소스 과부하로 인한 연속성 결여 문제를 해결하고자 함. 단순한 Clip 생성 방식이 아닌 사용자의 감정 변화에 즉각 반응하는 Continuous Stream 구조의 필요성 대두.

Technical Solution

  • Privacy 보호 및 Latency 최소화를 위해 Webcam Frame 분석 및 Emotion Vector 추출 과정을 Client-side에서 전담하는 구조 설계
  • Cold Start 방지와 음악적 상태 유지(State Management)를 위해 Serverless가 아닌 Railway 기반의 Long-running Node.js 서비스 채택
  • 급격한 파라미터 변화로 인한 오디오 왜곡 방지를 위해 250ms Debounce 로직을 적용한 Emotion Snapshot 전송 주기 최적화
  • 고비용의 Waveform 생성 AI 대신 Emotion Vector를 음악적 파라미터로 매핑하는 Procedural Music Engine 기반의 Smart Director 방식 도입
  • Web Audio API를 통한 Client-side 렌더링과 Server-side 파라미터 제어의 분리를 통한 UI-Audio 독립적 배포 환경 구축

- 실시간 인터랙티브 시스템 설계 시 데이터 전처리(Face Detection)와 핵심 로직(Music Generation)의 물리적 분리 검토 - 상태 유지(Stateful)가 필수적인 스트리밍 서비스의 경우 Serverless 환경보다 전용 컨테이너 서비스의 적합성 판단 - 사용자 입력의 샘플링 레이트가 시스템의 처리 한계나 자연스러운 결과물 도출 범위 내에 있는지 Debounce 주기 검증

원문 읽기