[JavaScript] 진동(vibrate) 처리

JavaScript에서 진동 처리하기

JavaScript에서 진동을 처리하려면 Vibration API를 사용할 수 있습니다. 이 API는 navigator.vibrate() 메서드를 제공하며, 진동 기능이 있는 디바이스(일반적으로 모바일)에서 작동합니다.

✅ 기본적인 진동 예제

다음 코드를 실행하면 500ms 동안 진동이 발생합니다.

navigator.vibrate(500);

✅ 진동 패턴 설정

배열을 사용하여 진동 패턴을 만들 수 있습니다.

navigator.vibrate([300, 100, 500]);

✅ 진동 중지

다음 코드를 실행하면 현재 실행 중인 진동을 멈출 수 있습니다.

navigator.vibrate(0);

✅ 버튼을 눌렀을 때 진동시키기

HTML 버튼을 추가하여 클릭하면 진동이 실행되도록 설정할 수 있습니다.

<button onclick="navigator.vibrate(200)">진동하기</button>

✅ 지원 여부 확인

브라우저가 진동 기능을 지원하는지 확인하는 코드입니다.

if ("vibrate" in navigator) {
    console.log("이 디바이스는 진동을 지원합니다!");
} else {
    console.log("진동 기능을 지원하지 않습니다.");
}

🎯 주의할 점

• 데스크톱 브라우저에서는 대부분 작동하지 않음 - Vibration API는 모바일 환경에서만 작동하는 경우가 많습니다.
• 일부 브라우저에서는 사용자 입력 이벤트 필요 - Chrome에서는 버튼 클릭 같은 이벤트가 있어야 진동이 동작합니다.
• iOS 제한 - Safari(iOS)에서는 기본적으로 지원하지 않습니다.

이제 모바일 웹에서 진동을 활용해 UX를 개선할 수 있습니다! 🚀