deviceorientation
기울여서 비상구로
해결하는 문제
휴대폰을 기울이는 몸의 동작을 입력으로 쓰고 싶다.
휴대폰의 기울기 센서 값을 공의 가속도로 바꾸고, 충돌하는 순간 진동으로 손에 알려 줍니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것앞뒤(beta)·좌우(gamma) 기울기
브라우저가 하는 일시작 자세를 0으로 보정하고 화면 방향 반영
나오는 것공의 가속도, 충돌 시 진동
쓰는 브라우저 기술
DeviceOrientationEventVibration APIScreen Orientation
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- 보정(캘리브레이션)
- 민감도와 마찰
- iOS 권한 요청 (requestPermission)
자주 막히는 곳
- 아이폰은 버튼을 눌러 권한을 허락받아야 센서 값이 온다
- HTTPS가 아니면 센서 값이 오지 않는다
- 가로 화면에서는 기울기 축이 바뀐다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 자세 흔들림으로 균형 능력 평가
- 손떨림 기록
웹 서비스
- 기울여 넘기는 전자책
- 휴대폰 수평계·각도계
피지컬 AI
- 휴대폰 기울기로 RC카·로봇팔 조종
- 휴대폰을 컨트롤러로 쓰는 체험 부스
넓히는 방법
- 직접 그리는 미로 편집기
- 기록 경쟁 순위표
- 기울기로 3D 화면 둘러보기
지원 브라우저
PC 크롬·엣지일부
맥 사파리일부
안드로이드 크롬된다
아이폰 사파리일부
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
휴대폰을 기울이면 공이 굴러가서 불을 피해 비상구로 가는 미로 게임을 만들어줘. 불에 닿거나 벽에 부딪히면 진동하게 해줘.
같은 분류의 능력
11 기기·센서에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md