[그림 1] 스마트폰의 3D 공간 상의 물리적 회전 및 가속도 측정
디바이스의 방향을 정의하는 세 가지 핵심 축(X, Y, Z)에 대한 구조도입니다.
deviceorientation 이벤트는 기기의 물리적인 방향(각도) 변화를 반환합니다.
| 속성 (event.*) | 설명 |
|---|---|
alpha |
Z축을 기준으로 한 수평 회전 각도 (0 ~ 360). 0은 보통 지구의 북극점을 가리킵니다. |
beta |
X축을 기준으로 한 앞뒤 기울임 각도 (-180 ~ 180). 앞(화면)으로 숙이면 양수입니다. |
gamma |
Y축을 기준으로 한 좌우 기울임 각도 (-90 ~ 90). 우측으로 기울이면 양수입니다. |
absolute |
제공된 방향 데이터가 지구 좌표계(나침반)와 절대적으로 일치하는지(true) 기기 임의 기준선인지(false) 나타냅니다. |
devicemotion 이벤트는 기기가 이동하거나 회전할 때 발생하는 가속도 정보를 반환합니다.
| 속성 (event.*) | 설명 |
|---|---|
acceleration |
중력을 제외한 순수 기기의 가속도 (x, y, z 속성 보유). 단위: m/s² |
accelerationIncludingGravity |
중력 가속도(9.81m/s²)를 포함한 가속도 (x, y, z). 자이로스코프가 없는 기기에서도 지원됩니다. |
rotationRate |
각 축(alpha, beta, gamma)을 중심으로 기기가 회전하는 속도. 단위: 도/초 (deg/s) |
interval |
이벤트가 발생하는 시간 간격 (밀리초). 디바이스의 센서 스펙에 따라 다릅니다. |
최신 iOS 기기(Safari)에서는 개인정보 보호를 위해 사용자의 명시적인 승인 없이 센서 데이터 접근이 차단됩니다. DeviceOrientationEvent.requestPermission() 메서드를 사용해 버튼 클릭과 같은 명시적 사용자 상호작용 내에서 권한을 먼저 요청해야 합니다. 또한 이 API는 기본적으로 HTTPS 환경에서만 동작합니다.
<div class="orient-container">
<h3>Device Orientation API</h3>
<p>모바일 기기의 기울기에 따라 박스가 움직입니다. (에뮬레이터 필요)</p>
<div class="box-area">
<div id="movingBox" class="moving-box">M</div>
</div>
<div id="info" class="info">Alpha: 0 | Beta: 0 | Gamma: 0</div>
</div>