WebXR — 설치 없는 브라우저 AR/VR
앱스토어도, 다운로드도 없다. URL 하나로 AR과 VR을 연다. WebXR Device API는 웹 브라우저가 헤드셋·모바일 AR 하드웨어에 직접 접근하게 해주는 W3C 표준이며, "링크 한 번이면 곧 경험"이라는 웹의 강점을 몰입형 미디어로 가져온다.
WebXR이란 무엇인가
WebXR Device API는 웹 브라우저에서 가상현실(VR)과 증강현실(AR)을 구현하기 위한 표준 API다. 과거 WebVR을 대체하며 VR과 AR을 하나의 모델로 통합했고, "XR"은 둘을 아우르는 우산 용어다. 핵심 가치는 단 하나, 마찰 없는 접근성이다. 사용자는 링크를 클릭하는 것만으로 헤드셋을 쓰거나 휴대폰을 들어 즉시 몰입형 콘텐츠에 진입한다.
WebXR은 직접 화면을 그리지 않는다. 대신 기기의 포즈(위치·자세), 입력 컨트롤러 상태, 그리고 그릴 대상인 프레임버퍼를 제공한다. 실제 렌더링은 WebGL(또는 WebGPU)이 담당한다. 즉 WebXR은 "어디를 어떤 각도로 보고 있는지"를 알려주고, 화면을 채우는 일은 그래픽 API에 맡기는 분업 구조다.
WebXR은 브라우저가 VR/AR 하드웨어의 포즈·입력·렌더 타깃에 접근하도록 표준화한 API이며, 렌더링은 WebGL/WebGPU가 맡는다. 설치 없이 URL로 몰입형 경험을 전달한다.
세션 모델
WebXR의 모든 것은 XRSession에서 시작한다. 세션 타입에 따라 경험의 성격이 결정된다.
주요 기능 모듈
최소 예제 — AR 세션 진입
WebXR 지원 여부를 확인하고 AR 세션을 시작하는 가장 기본적인 흐름이다. 보안상 HTTPS와 사용자 제스처(클릭)가 반드시 필요하다.
// 1) AR 지원 여부 확인
if (navigator.xr) {
const supported = await navigator.xr.isSessionSupported('immersive-ar');
startBtn.disabled = !supported;
}
// 2) 버튼 클릭(사용자 제스처)으로 세션 시작
startBtn.addEventListener('click', async () => {
const session = await navigator.xr.requestSession('immersive-ar', {
requiredFeatures: ['hit-test', 'local-floor'],
});
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl', { xrCompatible: true });
session.updateRenderState({ baseLayer: new XRWebGLLayer(session, gl) });
const refSpace = await session.requestReferenceSpace('local-floor');
// 3) 매 프레임 포즈를 받아 렌더
session.requestAnimationFrame(function onFrame(t, frame) {
const pose = frame.getViewerPose(refSpace);
if (pose) {
for (const view of pose.views) {
// view.transform / view.projectionMatrix 로 WebGL 렌더
}
}
session.requestAnimationFrame(onFrame);
});
});프레임워크 — 직접 짜지 않는 길
위 코드는 저수준이다. 실무에서는 WebGL과 WebXR을 직접 다루기보다 상위 프레임워크를 쓴다.
| 도구 | 성격 | 적합한 경우 |
|---|---|---|
| Three.js | 범용 3D 라이브러리 (WebXRManager 내장) | 세밀한 제어가 필요한 커스텀 씬 |
| A-Frame | HTML 선언형 (엔티티-컴포넌트) | 빠른 프로토타이핑, 마크업 친화 |
| Babylon.js | 풀기능 3D 엔진 | 고급 머티리얼·물리·툴링 |
| PlayCanvas | 에디터 기반 웹 엔진 | 팀 협업·경량 배포 |
WebXR은 네이티브 SDK 대비 기능과 성능에서 뒤처질 수 있다. 브라우저·플랫폼별 지원 편차가 크고(특히 iOS Safari의 AR 지원은 제한적), LiDAR 정밀 메시나 최신 추적 기능에 대한 접근이 늦다. 보안 제약(HTTPS, 권한, 사용자 제스처)도 항상 고려해야 한다.
언제 WebXR을 선택하는가
WebXR이 최적인 경우
설치 없는 즉시 접근 링크 공유·QR 배포 마케팅/제품 미리보기 크로스 디바이스 도달 웹 기술 스택 활용반대로 최고 수준의 그래픽·추적·성능이 필요한 본격 게임이나 전문 도구라면 네이티브 헤드셋 SDK가 낫다. 그 대표적 사례가 Meta Quest SDK다.
댓글