mozilla
검색 결과

    기기 방향 감지하기

    This is an experimental technology
    Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

    요약

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

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

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

    방향 이벤트 처리하기

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

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

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

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

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

    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);
    

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

    경고: Chrome과 Firefox는 동일한 방식으로 각을 다루지 않습니다. 그래서 어떤 축의 방향은 반대가 됩니다.

    모션 이벤트 처리하기

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

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

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

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

    모션 값 설명

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

    accelerationaccelerationIncludingGravity에서, 각 축은 다음에 해당된다:

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

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

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

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

    스펙

    Specification Status Comment
    Device Orientation Events Working Draft Initial specification.

    브라우저 호환성

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    DeviceOrientationEvent 7.0 3.6[1]
    6
    ? ? ?
    DeviceMotionEvent (Yes) 6 ? ? ?
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    DeviceOrientationEvent 3.0 3.6[1]
    6
    Not supported Not supported 4.2
    DeviceMotionEvent (Yes) 6 ? ? 4.2

    Gecko 구현 참고 사항

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

    참고 자료

    문서 태그 및 공헌자

    Contributors to this page: PillarLee, ingpdw, junho85
    최종 변경: ingpdw,