Safari 썸네일형 리스트형 React 앱에서 Device Orientation API 활용하기 모바일에서 기기의 기울기와 방향을 읽어 게임, AR, 파노라마 뷰어, 컴퍼스 등 몰입형 UI를 만들고 싶다면 Device Orientation API를 활용하면 됩니다. React에서는 훅으로 추상화해 권한 요청, 이벤트 구독, 성능 최적화까지 깔끔하게 관리하는 것이 실무적으로 가장 안전합니다.1. 브라우저 지원과 권한 모델대부분의 모바일 브라우저가 deviceorientation 이벤트를 지원합니다. 다만 iOS Safari는 사용자 제스처를 통한 명시적 권한 요청이 필요하며, HTTPS 환경에서만 동작하는 점을 유의해야 합니다. iOS 13+에서는 DeviceMotionEvent.requestPermission, iOS 16+에서는 DeviceOrientationEvent.requestPermissi.. 더보기 React에서 모션 센서 API 활용하여 인터랙션 강화하기 모바일 웹에서 기기의 기울기, 회전, 흔들기 등 모션을 활용하면 스크롤 없이도 풍부한 인터랙션을 제공할 수 있습니다. React에서 DeviceMotionEvent와 DeviceOrientationEvent를 안전하게 사용하고, iOS 권한 처리, 성능/접근성까지 고려하는 실전 구현 방법을 정리합니다.1. 지원 현황과 권한, 보안HTTPS 환경에서만 동작하는 보안 제약이 있습니다. 로컬 개발은 https 또는 localhost에서 테스트합니다. iOS 13+ Safari는 사용자 제스처로 권한을 직접 요청해야 합니다. Android Chrome은 HTTPS에서 기본 허용되는 경우가 많습니다. 데스크톱 브라우저는 대부분 제한적입니다.핵심 체크포인트입니다. 첫째, window.isSecureContext가 .. 더보기 React에서 Intersection Observer로 비디오 자동 재생 제어하기 스크롤에 따라 화면에 보이는 비디오만 자동 재생하고, 화면을 벗어나면 일시 정지시키는 UX는 피드·기사·제품 리스트에서 필수입니다. React에서는 Intersection Observer를 이용하면 성능 부담 없이 이를 안정적으로 구현할 수 있습니다.1. 핵심 아이디어와 브라우저 정책Intersection Observer는 특정 DOM이 뷰포트에 얼마나 노출되는지 비동기적으로 알려줍니다. 이 값을 기준으로 비디오를 play/pause 하면 됩니다. 단, 자동 재생은 브라우저 정책상 소리가 꺼진 상태(mutated)와 인라인 재생(playsInline)이 중요합니다. iOS Safari 등 일부 환경에서는 muted + playsInline 없이는 자동 재생이 거부됩니다.2. 단일 비디오 컴포넌트 구현가장.. 더보기 이전 1 다음