Web Audio API로 구현하는 점심 룰렛 효과음: 청각적 UX의 완성

사용자가 웹 서비스를 이용할 때 느끼는 '만족도'는 시각적인 디자인뿐만 아니라 미세한 인터랙션에서 결정됩니다. 그중에서도 청각적 피드백은 사용자의 행위에 대한 확신을 주고 몰입감을 극대화하는 강력한 도구입니다.

eleslog.work의 인기 도구인 점심 룰렛은 단순히 이미지가 회전하는 것을 넘어, 실제 물리적인 목재 룰렛이 돌아가는 듯한 긴장감을 선사합니다. 이를 위해 사용된 Web Audio API의 고급 제어 기법과 오디오 합성 전략을 심도 있게 파헤쳐 봅니다.

1. HTML5 Audio vs Web Audio API: 왜 후자인가?

우리는 보통 웹에서 소리를 재생할 때 <audio> 태그를 가장 먼저 떠올립니다. 하지만 룰렛 애니메이션처럼 1ms 단위의 정밀한 타이밍 제어가 필요한 인터랙션에는 한계가 명확합니다.

• 기존 방식의 한계: HTML5 Audio는 재생과 일시정지 위주의 단순 작업에 최적화되어 있습니다. 응답 속도가 비교적 느려 사용자가 버튼을 누른 순간과 소리가 나는 순간 사이에 미세한 지연(Latency)이 발생할 수 있습니다.
• Web Audio API의 강점: 오디오 소스를 노드(Node) 기반의 그래프 구조로 연결합니다. 소리를 실시간으로 합성(Synthesis)하거나, 재생 속도를 부드럽게 변조하고, 필터를 적용하는 등 전문 오디오 소프트웨어 수준의 작업이 브라우저에서 가능합니다.

2. AudioContext: 모든 소리의 시작점

Web Audio API의 모든 작업은 AudioContext라는 가상 컨테이너 안에서 이루어집니다. 주의할 점은 현대 브라우저의 보안 정책상 사용자의 직접적인 클릭이나 터치 이벤트가 발생하기 전까지는 오디오가 'suspended(정지)' 상태로 유지된다는 것입니다.

// 컨텍스트 생성
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// 사용자 인터랙션 발생 시 컨텍스트 재개
async function initAudio() {
  if (audioCtx.state === 'suspended') {
    await audioCtx.resume();
  }
}
        

3. 룰렛 효과음의 핵심: 물리 기반 가변 주기 알고리즘

룰렛이 돌아갈 때 들리는 '틱, 틱' 소리는 일정한 간격으로 재생되면 기계적이고 어색하게 느껴집니다. 실제 룰렛은 마찰력 때문에 속도가 서서히 줄어들며, 그에 따라 소리의 간격도 점점 넓어집니다.

4. 효율적인 사운드 합성: 파일 없이 소리 만들기

효과음을 위해 매번 MP3 파일을 서버에서 내려받는 것은 리소스 낭비일 수 있습니다. 아주 짧은 클릭음은 OscillatorNode(발진기)를 통해 직접 합성할 수 있습니다.

function playTick(speed) {
  const osc = audioCtx.createOscillator();
  const gain = audioCtx.createGain();

  // 'square' 파형은 타격감 있는 클릭 사운드에 적합합니다.
  osc.type = 'square';
  
  // 주파수를 짧은 시간 동안 고음에서 저음으로 급격히 떨어뜨려 타격음 생성
  osc.frequency.setValueAtTime(150 + (speed * 2), audioCtx.currentTime);
  osc.frequency.exponentialRampToValueAtTime(10, audioCtx.currentTime + 0.05);

  // 엔벨로프(Envelope) 제어: 소리의 끝을 부드럽게 깎아 노이즈 방지
  gain.gain.setValueAtTime(0.2, audioCtx.currentTime);
  gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.05);

  osc.connect(gain);
  gain.connect(audioCtx.destination);

  osc.start();
  osc.stop(audioCtx.currentTime + 0.05);
}
        

5. 런타임 최적화와 메모리 관리

사용자가 룰렛을 연타하거나 수많은 효과음이 겹칠 때 CPU 점유율이 높아질 수 있습니다. Web Audio API는 노드가 사용 완료되면 자동으로 가비지 컬렉션의 대상이 되지만, 더 정밀한 관리를 위해 AudioBuffer를 미리 디코딩하여 메모리에 적재해두는 기법을 사용했습니다. 이는 매번 새로운 노드를 생성하는 비용을 절감하여 저사양 기기에서도 끊김 없는 소리를 보장합니다.

마치며: 웹 기술로 완성하는 생동감

청각적 요소는 사용자가 서비스와 소통하고 있다는 '실감'을 주는 가장 강력한 수단 중 하나입니다. eleslog.work는 이처럼 보이지 않는 곳에서의 디테일을 통해 최고의 사용자 경험을 지향합니다.

단순한 기능 구현을 넘어, Web Audio API를 활용해 프로젝트에 생명력을 불어넣어 보세요. 다음 포스트에서는 캔버스 그래픽과 오디오 파형을 실시간으로 결합하는 뮤직 비주얼라이저(Music Visualizer) 제작법에 대해 알아보겠습니다.