Device Orientation

기기의 물리적 움직임 감지

Device Orientation 및 Device Motion API는 스마트폰이나 태블릿 내부의 자이로스코프, 가속도계, 나침반 센서 데이터를 웹 브라우저에서 읽어올 수 있게 합니다.

이를 통해 기기의 기울기(알파, 베타, 감마 각도)나 가속도 정보를 실시간으로 파악하여, 모바일 환경의 VR(가상현실) / AR(증강현실) 콘텐츠 구현, 기기를 기울여 조작하는 브라우저 게임, 파노라마 이미지 뷰어 등을 개발할 수 있습니다. 개인정보 보안 강화를 위해 최근에는 HTTPS 환경과 명시적인 사용자 동작 승인이 요구되는 추세입니다.

// 기기의 기울기를 감지하는 예제

function handleOrientation(event) {
  // Alpha: 나침반 방향 (0 ~ 360)
  const alpha = event.alpha;
  
  // Beta: 앞뒤 기울기 (-180 ~ 180)
  const beta = event.beta;
  
  // Gamma: 좌우 기울기 (-90 ~ 90)
  const gamma = event.gamma;
  
  // UI 업데이트 로직 (모의)
  // document.getElementById('info').innerText = 
  //   `방향: ${Math.round(alpha)}, 앞뒤: ${Math.round(beta)}, 좌우: ${Math.round(gamma)}`;
    
  // DOM 요소 회전 등에 활용 가능
  // element.style.transform = `rotateZ(${alpha}deg) rotateX(${beta}deg) rotateY(${gamma}deg)`;
}

// 이벤트 리스너 등록
// 최신 iOS에서는 DeviceOrientationEvent.requestPermission() 권한 요청이 선행되어야 합니다.
if (window.DeviceOrientationEvent) {
  console.log("Device Orientation 이벤트를 리스닝 대기 중입니다...");
  window.addEventListener('deviceorientation', handleOrientation);
} else {
  console.log("이 기기 또는 브라우저에서는 방향 센서를 지원하지 않습니다.");
}