디바이스 방향 이벤트
디바이스 방향 이벤트는 디바이스의 물리적 방향을 감지할 수 있을 뿐만 아니라, 디바이스의 동작을 감지햘 수 있는 이벤트입니다.
개념 및 사용법
모바일 디바이스에는 일반적으로 자이로스코프, 나침반, 가속도계 등의 센서가 탑재되어 있어 디바이스에서 실행 중인 애플리케이션이 디바이스의 방향과 동작을 감지할 수 있습니다.
디바이스 방향 이벤트를 사용하면 사용자 디바이스의 방향에 따라 동작을 변경할 수 있고, 사용자가 디바이스를 움직일 때 반응할 수 있는 웹 애플리케이션을 개발할 수 있습니다.
디바이스 방향 이벤트를 사용할 수 있는 몇 가지 일반적인 기능은 다음과 같습니다.
-
웹 기반 게임에서 사용자가 디바이스를 기울이고 움직여 게임 내 캐릭터나 오브젝트의 동작을 제어할 수 있도록 하는 기능입니다.
-
지도 기반 애플리케이션에서 디바이스의 위치에 따라 지도의 방향을 변경하거나, 사용자의 움직임에 따라 업데이트되는 길 안내를 제공합니다.
-
제스처 인식을 위해 사용되며, 예를 들어 사용자가 기기를 흔들면 '흔들기' 제스처를 인식하고, 이를 사용하여 사용자가 기기를 흔들 때 입력 영역을 지우는 등의 작업을 수행하는 데 활용됩니다.
참고 : 이 API는 모바일 브라우저에서 광범위하게 지원됩니다. 일부 데스크톱 전용 브라우저에는 하드웨어 차이로 인해 제한이 있을 수 있지만, 센서가 장착된 디바이스에서 API가 주로 사용됨을 고려할 때 이러한 제약은 그다지 중요하지 않습니다.
인터페이스
DeviceOrientationEvent
-
디바이스의 물리적 방향 변화를 나타냅니다.
DeviceMotionEvent
-
디바이스의 가속도 및 회전 속도의 변화를 나타냅니다.
DeviceMotionEventAcceleration
-
디바이스가 모든 세 축을 따라 경험하고 있는 가속도를 나타냅니다.
DeviceMotionEventRotationRate
-
디바이스가 세 축을 중심으로 회전하는 속도를 나타냅니다.
이벤트
deviceorientation
-
지구 좌표 프레임(Earth coordinate frame)과 비교하여 디바이스의 현재 방향에 대한 새로운 데이터를 디바이스에서 사용 가능할 때 발생합니다.
devicemotion
-
일정한 간격으로 발생하며, 해당 시점에 디바이스가 받는 물리적 가속도와 디바이스의 회전 속도를 나타냅니다.
deviceorientationabsolute
-
절대 디바이스 방향이 변경될 때 발생합니다.
명세서
Specification |
---|
Device Orientation and Motion |
브라우저 호환성
api.Window.deviceorientation_event
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
deviceorientation event |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Uses a non-standard name.
- Has more compatibility info.
api.Window.devicemotion_event
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
devicemotion event |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
api.Window.deviceorientationabsolute_event
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
deviceorientationabsolute event |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
api.DeviceOrientationEvent
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
DeviceOrientationEvent | ||||||||||||
DeviceOrientationEvent() constructor | ||||||||||||
absolute | ||||||||||||
alpha | ||||||||||||
beta | ||||||||||||
gamma | ||||||||||||
requestPermission() static method |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- See implementation notes.
api.DeviceMotionEvent
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
DeviceMotionEvent | ||||||||||||
DeviceMotionEvent() constructor | ||||||||||||
acceleration | ||||||||||||
accelerationIncludingGravity | ||||||||||||
interval | ||||||||||||
requestPermission() static method | ||||||||||||
rotationRate |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
api.DeviceMotionEventAcceleration
Report problems with this compatibility data on GitHubLegend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
api.DeviceMotionEventRotationRate
Report problems with this compatibility data on GitHubLegend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
같이 보기
- web.dev의 디바이스의 방향 & 움직임