동작기반 작동

무엇을 요구하나요?

기기를 흔들기, 기울이기, 사용자의 몸짓으로 실행하는 기능은

• 버튼 같은 일반적인 방법으로도 실행할 수 있어야 하고,
• 실수로 실행되지 않도록 동작 인식을 끌 수 있어야 합니다.

기기를 거치대에 고정해 쓰는 사용자, 손을 움직이기 어려운 사용자는 흔들거나 기울일 수 없고, 손 떨림이 있는 사용자는 의도치 않게 기능을 실행할 수 있습니다.

자주 틀리는 예

1. 흔들어야만 받을 수 있는 쿠폰

window.addEventListener('devicemotion', (e) => {
  if (Math.abs(e.acceleration.x) > 15) giveCoupon();
});

<button type="button" id="coupon-btn">쿠폰 받기</button>
<label><input type="checkbox" id="shake-on"> 흔들어서 받기 사용</label>

스크립트는 버튼으로도 실행하고, 흔들기는 사용자가 켰을 때만 반응하게 바꿉니다.

document.getElementById('coupon-btn').addEventListener('click', giveCoupon);
window.addEventListener('devicemotion', (e) => {
  if (!document.getElementById('shake-on').checked) return; // 사용자가 켰을 때만
  if (Math.abs(e.acceleration?.x ?? 0) > 15) giveCoupon();
});

2. 기울여서 넘기는 화면

기울이기로 화면을 넘긴다면 [이전]·[다음] 버튼을 함께 두고, 기울이기 기능은 기본으로 꺼 두세요.

확인하는 방법

1. 개발자에게 devicemotion, deviceorientation 이벤트를 쓰는 기능이 있는지 확인하세요.
2. 있다면 같은 기능을 버튼으로 실행할 수 있는지, 동작 인식을 끌 수 있는지 확인하세요.
3. 휴대폰을 책상에 놓은 채로 모든 기능을 쓸 수 있는지 확인해 보세요.