Device Orientation API

Frontend roadmap에 따라 계속해서 PWAs에 적용가능한 API들을 다루고 있다.
오늘의 주제는 자이로스코프를 사용가능하게 하는 Device Orientation API이다.

이런 주제는 사실 공식문서를 읽는게 가장 이해가 빠르기 때문에 아래 공식문서 링크를 첨부하고 예제를 다루도록 하겠다.

디바이스 방향 이벤트 : MDN

기기 방향 데이터 접근 및 표시

// 사용자 권한 요청
if (typeof DeviceOrientationEvent.requestPermission === 'function') {
  DeviceOrientationEvent.requestPermission()
    .then(permissionState => {
      if (permissionState === 'granted') {
        window.addEventListener('deviceorientation', handleOrientation);
      } else {
        console.log("Permission denied for Device Orientation");
      }
    })
    .catch(console.error);
} else {
  window.addEventListener('deviceorientation', handleOrientation);
}

// 기기 방향 데이터 처리
function handleOrientation(event) {
  const alpha = event.alpha; // Z축 회전 (yaw)
  const beta = event.beta;   // X축 회전 (pitch)
  const gamma = event.gamma; // Y축 회전 (roll)
  
  console.log(`Yaw (alpha): ${alpha}`);
  console.log(`Pitch (beta): ${beta}`);
  console.log(`Roll (gamma): ${gamma}`);
}

DeviceOrientationEvent.requestPermission()을 호출하여 사용자 권한을 요청한다.

• 사용자가 권한을 허용하면, deviceorientation 이벤트를 사용해 기기의 방향 데이터를 실시간으로 수신할 수 있다.

• event.alpha (yaw), event.beta (pitch), event.gamma (roll) 속성은 각각 기기의 회전, 기울기와 같은 방향 정보를 제공한다.