진동효과가 있는 웹문서 만들기 물어봤더니
페이지 정보
본문
| AI 도구 | ChatGPT |
|---|---|
| 프롬프트 | 웹페이지에서 글자가 한글자씩 나오는 효과를 주는 스크립트를 만들고 싶어. 예문은 '안녕하세요' 로 해줘. 이때 글자가 나올때마다 각각 진동이 느껴지면 좋을 것 같아. 스마트폰 진동을 넣는l 코드가 있을까? |
결론,
아이폰은 안됨.. 사파리 안됨. 크롬으로도 안됨.
안드로이드는 가능..
스마트폰 진동은 JavaScript의 Vibration API**를 사용.
안드로이드에서만 작동하는 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>타이핑 + 진동 효과</title>
<style>
body {
font-size: 40px;
font-weight: bold;
padding: 40px;
}
.char {
display: inline-block;
animation: shake 0.15s linear;
}
@keyframes shake {
0% { transform: translate(0, 0); }
25% { transform: translate(-2px, 0); }
50% { transform: translate(2px, 0); }
75% { transform: translate(-2px, 0); }
100% { transform: translate(0, 0); }
}
</style>
</head>
<body>
<div id="text"></div>
<button onclick="start()">시작</button>
<script>
const message = "안녕하세요";
const container = document.getElementById("text");
function vibrate() {
if (navigator.vibrate) {
navigator.vibrate(30); // 30ms 진동
}
}
function start() {
container.innerHTML = "";
let i = 0;
const interval = setInterval(() => {
if (i >= message.length) {
clearInterval(interval);
return;
}
const span = document.createElement("span");
span.textContent = message[i];
span.className = "char";
container.appendChild(span);
vibrate();
i++;
}, 300);
}
</script>
</body>
</html>
아이폰 크롬에서는 왜 안되지?
브라우저 엔진
Blink 안드로이드
WebKit ㅇ아이폰 (크롬이어도 같음)
아이폰(iOS)에서는 Blink 엔진을 사용하는 브라우저 앱을 사실상 배포·사용할 수 없다.
이건 기술 문제가 아니라 플랫폼 정책 문제야.