---
title: 기기 방향 감지하기
slug: WebAPI/Detecting_device_orientation
translation_of: Web/API/Detecting_device_orientation
---
<div>{{SeeCompatTable}}</div>

<h2 id="요약">요약</h2>

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

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

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

<h2 id="방향_이벤트_처리하기">방향 이벤트 처리하기</h2>

<p>방향의 변화를 받기 위해 여러분이 해야하는 것은 {{ event("deviceorientation") }} 이벤트에 리스너를 등록하는 것 뿐이다:</p>

<pre class="brush: js">window.addEventListener("deviceorientation", handleOrientation, true);
</pre>

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

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

<ul>
 <li>{{ domxref("DeviceOrientationEvent.absolute") }}</li>
 <li>{{ domxref("DeviceOrientationEvent.alpha") }}</li>
 <li>{{ domxref("DeviceOrientationEvent.beta") }}</li>
 <li>{{ domxref("DeviceOrientationEvent.gamma") }}</li>
</ul>

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

<pre class="brush: js">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
}
</pre>

<h3 id="방향_값_설명">방향 값 설명</h3>

<p>각 축으로부터 보고된 값은 표준 좌표계 축을 중심으로 회전한 양을 가리킨다. 더 자세한 내용은 <a href="/en-US/DOM/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a> 문서에 나와있으며, 다음은 이를 간략하게 요약한 것이다.</p>

<ul>
 <li>{{ domxref("DeviceOrientationEvent.alpha") }} 값은 0도부터 360도까지 범위의 z축을 중심으로 한 기기의 움직임을 나타낸다.</li>
 <li>{{ domxref("DeviceOrientationEvent.beta") }} 값은 -180도부터 180도까지 범위의 x축을 줌심으로 한 기기의 움직임을 나타낸다. 이는 기기의 앞뒤 움직임을 나타낸다.</li>
 <li>{{ domxref("DeviceOrientationEvent.gamma") }} 값은 -90도부터 90도까지 범위의 y축을 중심으로 한 기기의 움직임을 나타낸다. 이는 기기의 좌우 움직임을 나타낸다.</li>
</ul>

<h3 id="방향_예제">방향 예제</h3>

<p>이 예제는 {{event("deviceorientation")}} 이벤트를 지원하고 방향을 감지할 수 있는 기기에서 실행중인 모든 브라우저에서 작동한다.</p>

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

<pre class="brush: html">&lt;div class="garden"&gt;
  &lt;div class="ball"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;pre class="output"&gt;&lt;/pre&gt;
</pre>

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

<pre class="brush: css">.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%;
}
</pre>

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

<pre class="brush: js">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 &gt;  90) { x =  90};
  if (x &lt; -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);
</pre>

<p>여기 실제로 실행해 볼 수 있는 예제이다:</p>

<div>{{ EmbedLiveSample('Orientation_example', '230', '260') }}</div>

<div class="warning">
<p><strong>경고:</strong> Chrome과 Firefox는 동일한 방식으로 각을 다루지 않습니다. 그래서 어떤 축의 방향은 반대가 됩니다.</p>
</div>

<h2 id="모션_이벤트_처리하기">모션 이벤트 처리하기</h2>

<p>모션 이벤트는 이벤트 이름이 {{ event("devicemotion") }}으로 다르다는 점을 제외하면, 방향 이벤트를 처리하는 방법과 동일하다.</p>

<pre class="brush: js">window.addEventListener("devicemotion", <em>handleMotion</em>, true);</pre>

<p><em>HandleMotion</em> 함수의 파라미터로 넘겨진 {{ domxref("DeviceMotionEvent") }} 객체에 실제로 변화된 정보들이 담겨져 있다.</p>

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

<ul>
 <li>{{ domxref("DeviceMotionEvent.acceleration") }}</li>
 <li>{{ domxref("DeviceMotionEvent.accelerationIncludingGravity") }}</li>
 <li>{{ domxref("DeviceMotionEvent.rotationRate") }}</li>
 <li>{{ domxref("DeviceMotionEvent.interval") }}</li>
</ul>

<h3 id="모션_값_설명">모션 값 설명</h3>

<p>{{ domxref("DeviceMotionEvent") }} 객체는 웹 개발자들에게 기기의 위치와 방향의 변화 속도에 관한 정보를 제공한다. 세 개의 축에 따라 변화한 정보가 제공된다 (자세한 내용은 <a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained">Orientation and motion data explained</a> 문서를 참조).</p>

<p>{{domxref("DeviceMotionEvent.acceleration","acceleration")}}과 {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}}에서, 각 축은 다음에 해당된다:</p>

<ul>
 <li><code>x</code>: 서쪽에서 동쪽으로 나타나는 축을 의미한다</li>
 <li><code>y</code>: 남쪽에서 북쪽으로 나타나는 축을 의미한다</li>
 <li><code>z</code>: 땅에서 수직으로 나타나는 축을 의미한다</li>
</ul>

<p>{{domxref("DeviceMotionEvent.rotationRate","rotationRate")}}에서, 조금은 다르게, 각 값들은 다음에 해당된다:</p>

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

<p>마지막으로, {{domxref("DeviceMotionEvent.interval","interval")}}은 기기에서 데이터를 얻을 수 있는 시간 간격(단위는 밀리초)을 의미한다.</p>

<h2 id="스펙">스펙</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('Device Orientation')}}</td>
   <td>{{Spec2('Device Orientation')}}</td>
   <td>Initial specification.</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>{{domxref("DeviceOrientationEvent")}}</td>
   <td>7.0</td>
   <td>3.6<sup>[1]</sup><br>
    6</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>{{domxref("DeviceMotionEvent")}}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>6</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>{{domxref("DeviceOrientationEvent")}}</td>
   <td>3.0</td>
   <td>3.6<sup>[1]</sup><br>
    6</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>4.2</td>
  </tr>
  <tr>
   <td>{{domxref("DeviceMotionEvent")}}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>6</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td><span style="font-size: 12px; line-height: 18px;">4.2</span></td>
  </tr>
 </tbody>
</table>
</div>

<h3 id="Gecko_구현_참고_사항">Gecko 구현 참고 사항</h3>

<ol>
 <li>Firefox 3.6, 4, 5는 표준인 {{domxref("DeviceOrientationEvent")}} 이벤트가 아닌 <a href="/en-US/DOM/MozOrientation" title="MozOrientation">mozOrientation </a>을 지원한다</li>
</ol>

<h2 id="참고_자료">참고 자료</h2>

<ul>
 <li>{{domxref("DeviceOrientationEvent")}}</li>
 <li>{{domxref("DeviceMotionEvent")}}</li>
 <li>The legacy <code><a href="/en-US/DOM/MozOrientation" title="en-US/DOM/MozOrientation">MozOrientation</a></code> event.</li>
 <li><a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a></li>
 <li><a href="/en-US/docs/Web/Guide/DOM/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation In 3D Transforms">Using deviceorientation in 3D Transforms</a></li>
</ul>