◫ 공간 UI·XR

스페이셜 오디오 큐

Spatial audio cue

소리가 화면 밖 특정 방향·거리에서 나는 것처럼 들려주는 오디오 — 시야 밖 알림을 "그쪽을 보라"고 유도한다.

다른 이름: 3D positional audioDirectional sound

···

js

const wrap=document.createElement('div');
wrap.style.cssText='position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#171a2c,#0a0a12 75%)';
document.body.appendChild(wrap);
const src={x:0.86,y:0.32};
const listener={x:0.42,y:0.62};
function pct(v){ return (v*100)+'%'; }
const srcDot=document.createElement('div');
srcDot.style.cssText='position:absolute;width:12px;height:12px;border-radius:50%;background:#ffd76a;box-shadow:0 0 14px #ffd76a;'
 +'left:'+pct(src.x)+';top:'+pct(src.y)+';transform:translate(-50%,-50%)';
wrap.appendChild(srcDot);
const head=document.createElement('div');
// 오른쪽 귀를 늘 약하게 밝혀 "소스가 오른쪽에 있다"는 방향성을 정적으로도 보이게 한다 —
// 캡처 시점이 애니메이션 어느 프레임이든 방향 힌트 자체는 항상 보여야 하기 때문.
head.innerHTML='<div class="ear l"></div><div class="ear r hot"></div>';
head.style.cssText='position:absolute;left:'+pct(listener.x)+';top:'+pct(listener.y)+';transform:translate(-50%,-50%);'
 +'width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);z-index:1';
wrap.appendChild(head);
const style=document.createElement('style');
style.textContent='.ear{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.35);transform:translateY(-50%)}'
 +'.ear.l{left:-5px}.ear.r{right:-5px}.ear.hot{background:var(--accent);box-shadow:0 0 8px var(--accent)}';
document.head.appendChild(style);
// 링 3개를 서로 다른 위상으로 계속 확장시켜, 캡처 시점이 언제든 최소 하나는 중간 단계(선명)로 보이게 한다.
const RINGS = 3, PERIOD = 2200, MAXR = 150;
const els = Array.from({ length: RINGS }, () => {
  const r = document.createElement('div');
  r.style.cssText = 'position:absolute;left:' + pct(src.x) + ';top:' + pct(src.y) + ';border-radius:50%;'
    + 'border:1.5px solid rgba(255,215,106,.7);transform:translate(-50%,-50%)';
  wrap.appendChild(r);
  return r;
});
function frame(t) {
  els.forEach((el, i) => {
    const phase = ((t + (i * PERIOD) / RINGS) % PERIOD) / PERIOD;
    const d = phase * MAXR;
    el.style.width = d + 'px'; el.style.height = d + 'px';
    el.style.opacity = String(0.75 * (1 - phase));
  });
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);

공간 UI에서는 알림이 항상 시야 안에 있지 않다. 뒤에서 메시지가 오거나, 옆방에서 타이머가 울릴 수 있다. 스페이셜 오디오는 소리를 실제 그 위치에서 나는 것처럼(좌우 음량 차이, 미세한 시간차, 거리에 따른 감쇠) 재생해서, 사용자가 고개를 돌리기 전부터 "어느 쪽인지"를 알게 한다.

그래픽 힌트 없이 소리만으로 방향을 전달하는 것이 핵심이다. 소리가 가까운 소스일수록 크고 선명하고, 먼 소스일수록 작고 리버브가 섞인다 — 거리감도 함께 준다.

데모는 오른쪽 위 소스에서 리플(파동)이 계속 퍼져 나오는 걸 위에서 내려다본 평면도로 보여준다. 중앙 리스너 아이콘의 오른쪽 귀가 늘 밝게 표시되는 것으로 "이 소리는 오른쪽에서 온다"는 방향성을 나타낸다.

언제 쓰나

시야 밖 이벤트를 알릴 때 시각 알림과 함께 씁니다. 소리만으로 방향을 완전히 전달하기 어려운 경우가 많으니 자막·아이콘 같은 대체 단서를 함께 제공하세요.