devicemotion
흔들어서 주사위 굴리기
해결하는 문제
흔드는 동작을 버튼 대신 쓰고 싶다.
가속도 센서 값에서 중력을 빼 흔드는 세기를 구하고, 기준을 넘으면 주사위를 굴린 뒤 진동합니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것가속도 (중력 포함)
브라우저가 하는 일크기에서 중력 9.8을 빼서 흔들기 세기 계산
나오는 것기준을 넘으면 굴리기와 진동
쓰는 브라우저 기술
DeviceMotionEventVibration API
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- 흔들기 기준값
- 다시 감지까지 기다리는 시간
- 진동 패턴 (떨림·쉼 반복)
자주 막히는 곳
- 걷기만 해도 흔들기로 잡힐 수 있다
- 아이폰은 진동이 지원되지 않는다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 흔들림 패턴으로 넘어짐 감지
- 운동 동작 분류
웹 서비스
- 보드게임 도우미
- 모임 순서 정하기
피지컬 AI
- 흔들면 켜지는 랜턴 시제품
- 진동 패턴 신호 장치
넓히는 방법
- 흔든 횟수로 운동 세기
- 흔들어 섞는 제비뽑기
- 걸음 수 세기
지원 브라우저
PC 크롬·엣지일부
맥 사파리일부
안드로이드 크롬된다
아이폰 사파리일부
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
휴대폰을 흔들면 주사위 두 개가 굴러가고 멈출 때 진동하는 웹페이지를 만들어줘. PC에서는 버튼으로 굴리게 해줘.
같은 분류의 능력
11 기기·센서에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md