기기 방향 감지하기

요약

웹을 이용 가능한 기기들은 자신들의 방향을 알 수 있게 되었다. 즉, 중력과의 관계에서 자신의 방향의 변화를 나타내는 데이터를 알 수 있다는 뜻이다. 특히, 휴대 전화와 같이 손에 쥐고 쓸 수 있는 기기들은 이 정보를 화면을 수직으로 유지하기 위해 자동으로 회전시키는데 사용할 수 있고, 기기가 회전되어서 폭이 높이보다 길 때는 와이드 스크린으로 표시할 수 있게 된다.

방향 정보를 다루는 두 가지 방법의 JavaScript 이벤트가 있다. 첫 번째는 DeviceOrientationEvent로 가속도계가 기기의 방향의 변화를 감지했을 때 발생한다.  이 방향 이벤트들에 의해 보고되는 데이터를 받아서 처리함으로써, 사용자들이 기기를 움직이여서 생기는 방향과 높이의 변화를 상호 작용적으로 응답할 수 있게 된다.

두 번째 이벤트는 DeviceMotionEvent로 가속도에 변화가 일어났을 때 발생한다. 이 이벤트는 DeviceOrientationEvent와는 방향이 아닌 가속도를 감지하고 있다는 점에서 다르다. 일반적으로DeviceMotionEvent를 감지할 수 있는 센서들은 저장 장치들을 충격으로부터 보호하기 위해 노트북에서 사용되는 센서들을 포함한다. DeviceOrientationEvent는 모바일 기기에서 주로 더 많이 나타난다.

방향 이벤트 처리하기

방향의 변화를 받기 위해 여러분이 해야하는 것은 deviceorientation 이벤트에 리스너를 등록하는 것 뿐이다:

window.addEventListener("deviceorientation", handleOrientation, true);

이벤트 리스너를 등록한 후에는 (여기에서는 JavaScript 함수 handleOrientation()), 리스너 함수가 업데이트 된 방향 데이터와 함께 주기적으로 호출된다.

방향 이벤트는 다음 네 개의 값을 가진다:

• DeviceOrientationEvent.absolute
• DeviceOrientationEvent.alpha
• DeviceOrientationEvent.beta
• DeviceOrientationEvent.gamma

이벤트 핸들러 함수는 보통 다음과 같다:

function handleOrientation(event) {
  var absolute = event.absolute;
  var alpha    = event.alpha;
  var beta     = event.beta;
  var gamma    = event.gamma;

  // Do stuff with the new orientation data
}

방향 값 설명

각 축으로부터 보고된 값은 표준 좌표계 축을 중심으로 회전한 양을 가리킨다. 더 자세한 내용은 Orientation and motion data explained 문서에 나와있으며, 다음은 이를 간략하게 요약한 것이다.

• DeviceOrientationEvent.alpha 값은 0도부터 360도까지 범위의 z축을 중심으로 한 기기의 움직임을 나타낸다.
• DeviceOrientationEvent.beta 값은 -180도부터 180도까지 범위의 x축을 줌심으로 한 기기의 움직임을 나타낸다. 이는 기기의 앞뒤 움직임을 나타낸다.
• DeviceOrientationEvent.gamma 값은 -90도부터 90도까지 범위의 y축을 중심으로 한 기기의 움직임을 나타낸다. 이는 기기의 좌우 움직임을 나타낸다.

방향 예제

이 예제는 deviceorientation 이벤트를 지원하고 방향을 감지할 수 있는 기기에서 실행중인 모든 브라우저에서 작동한다.

자 그럼, 정원에 공이 하나 있다고 상상해보자:

<div class="garden">
  <div class="ball"></div>
</div>

<pre class="output"></pre>

이 정원은 가로 세로 200 픽셀이고(그렇다, 작은 정원이다), 정 중앙에 공이 있다:

.garden {
  position: relative;
  width : 200px;
  height: 200px;
  border: 5px solid #CCC;
  border-radius: 10px;
}

.ball {
  position: absolute;
  top   : 90px;
  left  : 90px;
  width : 20px;
  height: 20px;
  background: green;
  border-radius: 100%;
}

이제, 우리가 기기를 움직이면 공도 따라서 움직일 것이다:

var ball   = document.querySelector('.ball');
var garden = document.querySelector('.garden');
var output = document.querySelector('.output');

var maxX = garden.clientWidth  - ball.clientWidth;
var maxY = garden.clientHeight - ball.clientHeight;

function handleOrientation(event) {
  var x = event.beta;  // In degree in the range [-180,180]
  var y = event.gamma; // In degree in the range [-90,90]

  output.innerHTML  = "beta : " + x + "\n";
  output.innerHTML += "gamma: " + y + "\n";

  // Because we don't want to have the device upside down
  // We constrain the x value to the range [-90,90]
  if (x >  90) { x =  90};
  if (x < -90) { x = -90};

  // To make computation easier we shift the range of 
  // x and y to [0,180]
  x += 90;
  y += 90;

  // 10 is half the size of the ball
  // It center the positionning point to the center of the ball
  ball.style.top  = (maxX*x/180 - 10) + "px";
  ball.style.left = (maxY*y/180 - 10) + "px";
}

window.addEventListener('deviceorientation', handleOrientation);

여기 실제로 실행해 볼 수 있는 예제이다:

모션 이벤트 처리하기

모션 이벤트는 이벤트 이름이 devicemotion으로 다르다는 점을 제외하면, 방향 이벤트를 처리하는 방법과 동일하다.

window.addEventListener("devicemotion", handleMotion, true);

HandleMotion 함수의 파라미터로 넘겨진 DeviceMotionEvent 객체에 실제로 변화된 정보들이 담겨져 있다.

모션 이벤트는 다음 네 가지 속성을 가진다:

• DeviceMotionEvent.acceleration
• DeviceMotionEvent.accelerationIncludingGravity
• DeviceMotionEvent.rotationRate
• DeviceMotionEvent.interval

모션 값 설명

DeviceMotionEvent 객체는 웹 개발자들에게 기기의 위치와 방향의 변화 속도에 관한 정보를 제공한다. 세 개의 축에 따라 변화한 정보가 제공된다 (자세한 내용은 Orientation and motion data explained 문서를 참조).

acceleration과 accelerationIncludingGravity에서, 각 축은 다음에 해당된다:

• x: 서쪽에서 동쪽으로 나타나는 축을 의미한다
• y: 남쪽에서 북쪽으로 나타나는 축을 의미한다
• z: 땅에서 수직으로 나타나는 축을 의미한다

rotationRate에서, 조금은 다르게, 각 값들은 다음에 해당된다:

• alpha: 화면(또는 데스크탑의 키보드)에 수직인 축을 따른 회전율을 의미한다
• beta: 화면(또는 데스크탑의 키보드)의 평면의 왼쪽에서 오른쪽으로 나타나는 축을 따른 회전율을 의미한다
• gamma: 화면(또는 데스크탑의 키보드)의 평면의 아래에서 위쪽으로 나타나는 축을 따른 회전율을 의미한다

마지막으로, interval은 기기에서 데이터를 얻을 수 있는 시간 간격(단위는 밀리초)을 의미한다.

스펙

브라우저 호환성

Gecko 구현 참고 사항

1. Firefox 3.6, 4, 5는 표준인 DeviceOrientationEvent 이벤트가 아닌 mozOrientation 을 지원한다

참고 자료

• DeviceOrientationEvent
• DeviceMotionEvent
• The legacy MozOrientation event.
• Orientation and motion data explained
• Using deviceorientation in 3D Transforms