기기 방향 및 모션

Pete LePage

기기 모션 및 방향 이벤트는 휴대기기에 기본 제공된 가속도계, 자이로스코프, 나침반에 대한 액세스를 제공합니다.

이러한 이벤트는 많은 용도로 사용될 수 있습니다(예: 게임에서 캐릭터의 방향이나 동작을 제어). 위치정보와 함께 사용할 경우 더욱 정확한 턴바이턴 내비게이션을 생성하거나 특정 위치에 대한 정보를 제공할 수 있습니다.

요약

  • 기기의 어느 쪽이 위이고 기기가 어떻게 회전하는지 감지합니다.
  • 모션 및 방향 이벤트에 언제 어떻게 반응하는지 알아보세요.

어느 쪽이 위를 향하나요?

기기 방향 및 모션 이벤트에서 반환하는 데이터를 사용하려면 제공된 값을 이해하는 것이 중요합니다.

지구 좌표계

X, Y, Z 값으로 나타내는 지구 좌표계는 중력 및 표준 자기 방향을 기준으로 정렬됩니다.

좌표계
X 동서 방향을 나타냅니다 (동쪽이 +임).
Y 남북 방향을 나타냅니다 (북쪽이 +임).
Z 지면에서 수직인 상하 방향을 나타냅니다(위쪽이 +임).

기기 좌표계

기기 좌표계 그림
기기 좌표계 그림

x, y, z 값으로 나타내는 기기 좌표계는 기기의 중심을 기준으로 정렬됩니다.

좌표계
X 화면의 오른쪽이 +입니다.
Y 화면의 위쪽이 +입니다.
Z 화면이나 키보드에 수직으로 위쪽이 +입니다.

폰이나 태블릿에서 기기 방향은 일반적인 화면 방향을 기준으로 합니다. 폰 및 태블릿의 경우 세로 모드 기기를 기준으로 합니다. 데스크톱 또는 노트북 컴퓨터의 경우 방향은 키보드와 관련하여 고려됩니다.

회전 데이터

회전 데이터는 기기 좌표계와 지구 좌표계 사이의 각도 차이를 나타내는 오일러 각으로 반환됩니다.

알파

기기 좌표계의 알파 그림
기기 좌표계의 알파 그림

z축을 중심으로 한 회전입니다. 기기 상단이 정북향을 가리킬 때 alpha 값은 0°입니다. 기기가 시계 반대 방향으로 회전할수록 alpha 값이 증가합니다.

베타

기기 좌표계 그림
기기 좌표계의 베타 그림

x축을 중심으로 한 회전입니다. 기기 상단과 하단이 지면에서 등거리에 있을 때 beta 값은 0°입니다. 기기의 상단이 지면을 향해 기울어질수록 값이 증가합니다.

감마

기기 좌표계 그림
기기 좌표계의 감마 그림

y축을 중심으로 한 회전입니다. 기기 왼쪽과 오른쪽 가장자리가 지면에서 등거리에 있을 때 gamma 값은 0°입니다. 기기의 오른쪽이 지면을 향해 기울어질수록 값이 증가합니다.

기기 방향

기기 방향 이벤트는 기기의 전후좌우 기울기와 방향(폰이나 랩톱에 나침반이 있는 경우)을 포함하는 회전 데이터를 반환합니다.

가급적 사용하지 않습니다. 지원 여부를 테스트합니다. 모든 방향 이벤트에 대해 UI를 업데이트하지 마세요. 대신 requestAnimationFrame과 동기화하세요.

기기 방향 이벤트를 사용하는 경우

기기 방향 이벤트의 용도는 여러 가지가 있습니다. 예를 들면 다음과 같습니다.

  • 사용자가 이동함에 따라 지도를 업데이트합니다.
  • UI를 미세하게 조정합니다(예: 시차 효과(parallax effect) 추가).
  • 위치정보와 함께 턴바이턴 탐색에 사용할 수 있습니다.

지원 확인 및 이벤트 수신 대기

DeviceOrientationEvent를 수신 대기하려면 먼저 브라우저에서 이벤트를 지원하는지 확인합니다. 그런 다음, 이벤트 리스너를 deviceorientation 이벤트를 수신 대기하는 window 객체에 연결합니다.

if (window.DeviceOrientationEvent) {
  window.addEventListener('deviceorientation', deviceOrientationHandler, false);
  document.getElementById('doeSupported').innerText = 'Supported!';
}

기기 방향 이벤트 처리

기기 방향 이벤트는 기기가 이동하거나 방향을 변경할 때 발생합니다. 지구 좌표계와 관련하여 기기의 현재 위치 변화에 대한 데이터를 반환합니다.

이 이벤트는 일반적으로 alpha, beta, gamma라는 세 가지 속성을 반환합니다. 모바일 Safari에서는 추가 매개변수 webkitCompassHeading가 나침반 방향과 함께 반환됩니다.

기기 모션

기기 방향 이벤트는 기기의 전후좌우 기울기와 방향(폰이나 랩톱에 나침반이 있는 경우)을 포함하는 회전 데이터를 반환합니다.

현재 기기 모션이 필요한 경우 기기 모션을 사용합니다. rotationRate는 °/초 단위로 제공됩니다. acceleration 및 accelerationWithGravity는 m/sec2 단위로 제공됩니다. 브라우저 구현 간 차이점을 인식합니다.

기기 모션 이벤트를 사용하는 경우

기기 모션 이벤트를 사용하는 활용 사례로는 몇 가지가 있습니다. 예를 들면 다음과 같습니다.

  • 흔들기 동작을 통해 데이터 새로 고침
  • 게임에서 캐릭터의 점프 또는 이동
  • 건강 및 피트니스 앱용

지원 확인 및 이벤트 수신 대기

DeviceMotionEvent를 수신 대기하려면 먼저 이벤트가 브라우저에서 지원되는지 확인합니다. 그런 다음 devicemotion 이벤트를 수신 대기하는 window 객체에 이벤트 리스너를 연결합니다.

if (window.DeviceMotionEvent) {
  window.addEventListener('devicemotion', deviceMotionHandler);
  setTimeout(stopJump, 3 * 1000);
}

기기 모션 이벤트 처리

기기 모션 이벤트는 정기적인 간격으로 발생하고 특정 시점에서 기기의 회전 (°/초) 및 가속도 (m/초2)에 대한 데이터를 반환합니다. 일부 기기에는 중력 효과를 배제하는 하드웨어가 없습니다.

이 이벤트는 중력 효과를 배제하는 accelerationIncludingGravity, acceleration, rotationRate, interval의 네 가지 속성을 반환합니다.

예를 들어, 화면이 위를 향한 상태로 평평한 테이블에 폰이 놓여있는 경우를 살펴보겠습니다.

주 회전 가속도 (m/s2) 중력이 적용된 가속도 (m/s2)
움직이지 않음 [0, 0, 0] [0, 0, 0] [0, 0, 9.8]
하늘을 향해 위로 이동 [0, 0, 0] [0, 0, 5] [0, 0, 14.81]
오른쪽으로만 이동 [0, 0, 0] [3, 0, 0] [3, 0, 9.81]
위쪽과 오른쪽으로 이동 [0, 0, 0] [5, 0, 5] [5, 0, 14.81]

역으로, 화면이 지면에 수직이고 뷰어에서 바로 볼 수 있도록 폰이 고정된 경우는 다음과 같습니다.

주 회전 가속도 (m/s2) 중력이 적용된 가속도 (m/s2)
움직이지 않음 [0, 0, 0] [0, 0, 0] [0, 9.81, 0]
하늘을 향해 위로 이동 [0, 0, 0] [0, 5, 0] [0, 14.81, 0]
오른쪽으로만 이동 [0, 0, 0] [3, 0, 0] [3, 9.81, 0]
위쪽과 오른쪽으로 이동 [0, 0, 0] [5, 5, 0] [5, 14.81, 0]

샘플: 객체의 최대 가속도 계산

기기 모션 이벤트를 사용하는 방법 중 하나로 객체의 최대 가속도를 계산하는 것이 있습니다. 예를 들어, 사람이 점프할 때의 최대 가속도는 얼마인가요?

if (evt.acceleration.x > jumpMax.x) {
  jumpMax.x = evt.acceleration.x;
}
if (evt.acceleration.y > jumpMax.y) {
  jumpMax.y = evt.acceleration.y;
}
if (evt.acceleration.z > jumpMax.z) {
  jumpMax.z = evt.acceleration.z;
}

Go! 버튼을 누른 후 사용자에게 점프하라고 지시합니다. 그 동안 페이지는 최대 (및 최소) 가속도 값을 저장하고 점프 후에는 사용자에게 최대 가속도를 표시합니다.

의견