웹 홈페이지에 진동을 일으키기
시작하기에 앞서…
어디서 많이 쓰이나?
사실 대부분 웹에서 진동을 일으키는 기능은 hoax 계열의 광고에서 많이 찾아볼 수 있다.
사용자를 당황하게 만들기 위해 대부분 진동과 함께 삐- 하는 소리를 울리게 하는 경우가 잦다.
진동 일으키기의 예시
원래이 진동울리게 하는것에 대한 순 기능은 말 그대로 웹브라우저 내에서 자바스크립트 만으로 스마트폰의 기능을 제어하기 위해 만든 기능일 뿐이다.
따라서 스마트폰 환경에서 안내 메시지를 함께 띄울 때 실패했다는 메시지와 함께 진동을 한번 일으킨다거나, 웹 홈페이지를 보면서 무언가 반응성 메시지를 띄워야 할 때 ‘화면에만 표시시키지 않고 스마트폰의 진동도 함께 울리면 더욱 더 사용자가 확실하게 알아챌 수 있기 때문에 사용할 것’ 이라고 본다.
코드
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <head> <meta charset="UTF-8" > <title> 진동 테스트 </title> <body> <script type="text/javascript" > navigator.vibrate = navigator.vibrate | | navigator.webkitVibrate | | navigator.mozVibrate | | navigator.msVibrate; // 작동되는 진동 메소드가 다르므로 통합 function vibrate() { if (navigator.vibrate) { navigator.vibrate(20000); // 진동을 울리게 한다. 1000ms = 1s 이다. } else { alert("진동을 지원하지 않는 기종 입니다."); } } function vibratearray() { if (navigator.vibrate) { navigator.vibrate([100,30,100,30,100,200,200,30,200,30,200,200,100,30,100,30,100]); // 배열로도 가능하다. 진동은 SOS 모스부호 } else { alert("진동을 지원하지 않는 기종 입니다."); } } function stop() { navigator.vibrate(0); // (0) 대신에 ([]) 을 넣어도 동일하다. } </script> <button type="button" onclick="vibrate()" > 진동 시작 </button> <br /> <button type="button" onclick="vibratearray()" > SOS 진동 시작 </button> <br /> <button type="button" onclick="stop()" > 진동 중지 </button> </body> </html> |
참고사항
Google Chrome 은 Webkit 을 prefix 로 넣어야 된다.
FireFox 는 11이면 moz 를 prefix 로 16부터는 없어도 자동으로 인식을 한다.