[javascript] 모바일 디바이스의 진동 기능 사용하기

05 Dec 2023

모바일 디바이스에서 진동 기능을 사용하려면 JavaScript를 사용하여 진동 API를 호출해야 합니다. 이를 통해 알림, 효과음 등에 진동을 추가할 수 있습니다.

진동 기능 확인하기

진동 기능을 사용하기 전에 현재 디바이스가 진동 기능을 지원하는지 확인해야 합니다. 아래의 코드를 사용하면 진동 기능을 지원하는지 여부를 확인할 수 있습니다.

if ('vibrate' in navigator) {
  console.log('진동 기능을 지원합니다.');
} else {
  console.log('진동 기능을 지원하지 않습니다.');
}

진동을 호출하려면 navigator.vibrate() 메서드를 사용해야 합니다. 이 메서드는 인자로 진동 패턴을 전달받으며, 패턴은 배열로 표현됩니다. 배열의 요소는 진동 및 일시 정지 시간을 교대로 나타냅니다.

// 1초 동안 진동 후 1초 동안 일시 정지
navigator.vibrate([1000, 1000]);

// 0.5초 동안 진동 후 0.3초 동안 일시 정지 후 0.5초 동안 진동
navigator.vibrate([500, 300, 500]);

위의 코드에서 진동 패턴 배열의 각 요소는 밀리 초 단위로 표현됩니다. 따라서 1000은 1초를 의미하며, 500은 0.5초를 의미합니다.

진동을 멈추려면 navigator.vibrate() 메서드에 0을 인자로 전달하면 됩니다.

navigator.vibrate(0);

JavaScript 진동 API는 대부분의 최신 브라우저에서 지원됩니다. 하지만 일부 브라우저에서는 제대로 동작하지 않을 수 있으므로, 사전에 지원성을 확인하는 것이 중요합니다. 아래의 링크에서 브라우저 지원성을 확인할 수 있습니다.

모바일 디바이스에서 진동 기능을 사용하여 알림이나 효과음을 추가하는 등 다양한 사용 사례를 구현할 수 있습니다. 하지만 사용자 경험을 고려하여 적절하게 사용해야 합니다.