WebXR로 몰입감 넘치는 웹 경험 빌드하기

안녕하세요 저는 Ada Rose Cannon입니다 웹 표준 관련 작업을 하는 Safari 엔지니어입니다 오늘 보여 드릴 내용은 WebXR API를 위한 몰입도 높은 가상 현실 경험을 웹사이트에 추가하는 방법입니다 WebXR과 그 기능이 낯선 분들을 위해 데모부터 시작해 보겠습니다

여기가 홈 뷰입니다 Safari를 실행하고 앞서 빌드한 웹사이트를 볼 수 있습니다 Launch VR Experience라는 버튼이 있네요 버튼을 쳐다보고 탭합니다 이제 Safari가 웹사이트에서 몰입형 경험 시작을 허락해 달라고 요청합니다 Allow를 탭하니 체스 정원이 제 주변에 나타납니다

제 앞에는 컴퓨터와 체스를 할 수 있는 체스판이 있습니다 Natural Input을 통해 말을 선택하고 움직일 수 있죠 체스에 대해 더 잘 알아보기 위해 이 데모를 만들었습니다 만들면서 많은 것을 배웠습니다 놀라울 정도로 빠르게 게임에서 지긴 했지만 Digital Crown을 누르거나 제스처를 사용하여 홈 뷰로 이동하면 이 가상 현실 체험을 떠날 수 있습니다 그러면 체험이 종료되고 Safari의 웹페이지로 돌아가게 됩니다 WebXR을 사용하여 웹을 위한 경험을 만드는 것은 정말 놀랍습니다 저는 Mac에서 무언가를 만든 다음 제가 만든 것을 실물 크기로 살펴보는 것을 좋아합니다 이전에는 상상 속이나 모니터로만 가능했던 일이죠 WebXR은 모든 Apple Vision Pro 사용자에게 정식 버전으로 제공되요 이 세션에서는 WebXR을 소개합니다 가상 현실 기능을 웹사이트에 추가하고 Vision Pro의 특정 기능 활용법을 보여드립니다 visionOS에서 웹사이트를 테스트 디버깅하는 방법도 알려 드립니다

WebXR 소개로 시작하겠습니다

방금 본 체스 데모는 가상 현실이 실제로 작동하는 예입니다 하드웨어 가속 그래픽으로 구축된 가상 환경으로 WebGL을 통해 이동했습니다 visionOS 2.0의 Safari는 Vision Pro에서 몰입형 가상 현실 세션을 지원합니다 가상 현실, VR과 관련 기술인 증강 현실, AR을 아울러서 XR이라고 부릅니다 웹에서 XR 기술을 사용하기 위한 API를 WebXR이라고 합니다 WebXR은 W3C의 웹 작업 그룹에서 개발한 웹 표준입니다

이 그룹은 웹에서 몰입형 경험을 구현하기 위해 WebXR을 설계했으며 이는 여러 브라우저 간에도 작동하고 다양한 XR 하드웨어에서 최소한의 변경만으로도 작동합니다 API는 새로운 형식의 요소와 상호작용 모델이 흔하지 않은 분야에서 완벽하진 않더라도 미래에 발생할 변화에 대비할 수 있게 설계되고 있습니다 이 표준은 견고함을 추구하면서 사용자 개인정보 보호와 보안을 우선시하도록 설계되었습니다 웹은 조심해야 하는 곳입니다 악의적 행위자도 선의의 개발자도 새 웹 API를 사용할 수 있으니까요 사용자 보호 기능은 WebXR 표준에 처음부터 내장되어 있어 사용자를 놀라게 하지 않으면서 쉽게 종료할 수 있게 만들어졌어요

보안은 모두 서버에서 시작됩니다 모든 WebXR 콘텐츠에는 HTTPS가 필요합니다 이렇게 하면 중간자 공격을 통한 XR 콘텐츠 인젝션이 불가능합니다

WebXR 경험이 iFrame이 있는 웹페이지에 임베드된 경우 iFrame이 포함된 페이지에 HTML 속성이 포함되어야 하며 iFrame의 HTML 태그에 XR 공간 추적 허용이 포함되어야 해요 이 요구 사항은 광고와 같은 타사 코드가 개발자의 허락 없이 VR 경험을 시작하지 못하도록 방지합니다

모든 WebXR 경험은 세션 시작을 요청하기 위해 사용자 상호작용이 필요합니다 웹사이트에는 사용자가 XR 세션을 시작하기 위한 첫 번째 작업을 하는 버튼이나 기타 어포던스가 있어야 합니다 사용자를 그냥 XR에 던져넣을 수는 없습니다 페이지가 로드되는 즉시 세션이 시작되면 안 됩니다 사용자가 XR을 원한다는 신호를 보내야 합니다

이를 통해 웹페이지와 상호작용 중 갑자기 몰입형 경험 세션이 시작해 사용자가 놀라거나 혼란을 겪는 것을 방지할 수 있습니다 visionOS에서는 Safari가 사용자에게 몰입형 경험을 실행할지 허용 여부를 묻습니다 WebXR 세션은 지속적인 손 동작 추적 요청을 선택할 수도 있습니다 이 경우 두 번째 메시지에서 이에 대한 동의를 요청합니다 사용자가 무엇을 허용하는지 알 수 있게 하는 것이 중요합니다

WebXR 사양은 세션 전반에 걸쳐 사용자 개인정보를 보호하기 위해 노력하는 구현을 권장합니다 visionOS에는 시선과 핀치 상호작용 모델이 있지만 사용자가 무엇을 보고 있는지 아는 것은 매우 민감한 정보입니다 WebXR과 Safari의 visionOS에서 공간 입력은 사용자가 핀치하는 순간에 어디를 보고 있는지만 표시하며 WebXR 세션은 핀치하는 동안 사용자의 손이 어디 있는지만 파악합니다

WebXR 표준은 시스템 상호작용이 WebXR 세션 종료 시 예약되도록 규정하고 있습니다 이 요구 사항은 사용자가 세션에서 불쾌함을 느낄 경우 신속하게 세션을 종료할 수 있는 방법을 보장합니다 사용자는 언제든지 크라운을 누르거나 제스처를 통해 홈 뷰로 이동하여 몰입형 체험을 쉽게 종료할 수 있습니다 디자이너나 개발자는 경험을 쉽게 종료할 수 있는 UI를 제공할 수 있고 제공해야 합니다 하지만 사용자가 급한 일이 생겨 시스템 상호작용을 통해 바로 나가는 경우도 있습니다

네트워크 연결부터 세션이 진행 중인 시간과 세션이 종료되는 때까지 WebXR의 모든 수준에서 사용자 안전과 개인정보 보호가 최우선입니다 첫째, WebXR은 일반적인 웹 개발과 어떻게 다를까요? 웹에는 문서로 콘텐츠를 표시하는 다양한 방법이 있습니다 기존의 HTML과 CSS 방식이 있습니다 픽셀을 직접 렌더링하기 위한 캔버스 요소가 있고 WebGL은 하드웨어 가속 컴퓨터 그래픽을 담당합니다 WebXR 세션은 일단 시작되면 문서와 브라우저 윈도우를 숨겨요

그리고 WebXR 세션은 WebGL만으로 콘텐츠를 렌더링합니다 따라서 WebXR을 알아보기 전에 WebGL의 Hello, world 예제부터 하나의 정사각형을 렌더링하는 WebGL 렌더링을 살펴보겠습니다 먼저 캔버스를 설정하고 GLSL 언어로 꼭짓점 셰이더에 프래그먼트를 작성해 시작합니다 그런 다음 3D 공간에서 도형의 꼭짓점을 정의하고 WebGL을 호출하여 사각형을 렌더링합니다 벡터 수학과 행렬 대수에 대한 지식을 다시 꺼내보셔야 할겁니다

간단한 결과물을 만들기 위해 많은 코드가 필요했습니다 원시 WebGL만으로 작업할 사람은 거의 없을 것입니다 그럴 필요도 거의 없습니다 저도 거의 사용해 보지 않았습니다 합리적인 작업 방식이 아니기 때문입니다 다행히도 빠르게 시작하는 데 도움이 되는 다양한 WebGL 프레임워크가 있습니다 이러한 각 라이브러리는 그래픽과 JavaScript를 모두 사용해 다양한 수준의 경험에 적합합니다 WebXR 지원도 통합되어 있습니다 WebXR을 직접 사용하는 것도 어렵지는 않지만 WebXR을 위한 추상화도 제공하는 경우가 많습니다 3JS, Babylon, PlayCanvas 각각 JavaScript를 사용하지만 구문이 약간 다릅니다

Wonderland 엔진에는 장면을 구축하기 위한 고급 도구를 제공하는 그래픽 인터페이스가 있습니다

마지막으로 A-Frame이 있습니다 선언적이며 3D 환경을 설명하기 위한 맞춤형 HTML 요소 기반입니다 자세히 살펴보도록 하죠

저는 WebXR 초보자들에게 A-Frame을 즐겨 소개합니다 간결하고 멋지거든요 간단한 데모 시작을 위한 코드가 한 화면에 다 들어갈 수 있습니다 맞춤형 HTML 요소는 웹 개발자에게 익숙한 작업 방식을 제공하면서 WebGL로 구축된 장면을 구성하는 느낌을 줍니다 HTML 요소와 이벤트입니다 활발한 커뮤니티와 커뮤니티에서 만든 다양한 컴포넌트가 있습니다 JavaScript로 나만의 컴포넌트를 본격적으로 만들 준비가 되었다면 3JS 라이브러리 사용에 대한 선언적 HTML 요소에 대해 알아보시면 좋을 겁니다 그러면 A-Frame에서 배운 내용을 향후 프로젝트에 적용할 수 있어요 빨간색 사각형 예제와 비슷한 것을 A-Frame으로 렌더링해 보겠습니다

문서 헤드에 라이브러리 JavaScript 파일을 포함시키고 해당 라이브러리의 맞춤화 HTML 컴포넌트를 사용할 수 있어요 A-Frame 콘텐츠를 래핑하는 장면 요소를 추가하고 빨간 상자를 추가해 눈높이에 두고 장면에 살짝 배치합니다 상자의 기본 너비, 높이, 깊이는 1미터입니다 WebXR에서는 미터법을 사용합니다 실제 축척이므로 가상 물체 크기가 실제 크기입니다

좋아요, 상자가 벌써 작동합니다 라이브러리에서 WebXR 부분을 자동으로 처리하고 WebXR 세션 시작용 버튼까지 포함하고 있습니다 조금 더 만져 보겠습니다 여기 구와 원통과 같은 기본 도형 몇 가지를 추가로 설명했습니다 하늘에 상자와 비행기도 추가하고 회전시켜서 바닥에 놓이도록 합니다

다음으로 a-scene에 커서 컴포넌트를 추가합니다 여기에는 광선 캐스터로 공간 입력이 가리키는 곳을 찾습니다 그리고 그 위에 가상 이벤트를 실행합니다 가상 이벤트 이름은 2D 문서에서 유사 이벤트와 일치하게 지정되요 클릭, 마우스 진입, 마우스 이탈이 실제 마우스를 사용하지 않아도 가능합니다

애니메이션을 적용할 도형에 애니메이션을 첨부하면 끝입니다

이것이 이 데모의 전체 코드입니다

결과를 보시죠 A-Frame의 Hello, world 예제의 변형입니다 커서 컴포넌트를 사용해 물체에서 핀치로 이벤트를 발생시키는 방법을 보여 줍니다 약간의 상상력을 발휘하면 이러한 기반에서 어떻게 더 몰입감 넘치는 완벽한 장면을 만들 수 있는지 알 수 있습니다 A-Frame에서는 WebXR API를 직접 만질 필요가 없습니다 하지만 컴포넌트를 확장하거나 다른 프레임워크로 더 깊이 들어가야 할 때는 WebXR 작동 방법을 아는 것이 매우 유용할 수 있습니다 WebXR 라이프사이클을 4개의 세그먼트로 나누었습니다 세션을 시작하기 전에 어떤 것이 지원되는지 알아봐야 합니다

WebXR을 사용하기 전에 가장 먼저 해야 할 일은 세션을 시작할 수 있는지 확인하는 것입니다 Is session supported 메서드를 Navigator.XR 객체에서 사용해 몰입형 VR 세션이 지원되는지 확인할 수 있습니다

VR이 지원된다면 사용자가 XR로 들어갈 수 있는 버튼을 추가할 수 있습니다 대부분 선택한 라이브러리에서 세션 요청을 처리할 것입니다 하지만 세션 요청에는 몇 가지 흥미로운 옵션이 있으니 어떻게 작동하는지 살펴보겠습니다 세션을 요청할 때 손 동작 추적과 같은 원하는 추가 기능을 포함시킬 수 있습니다 세션을 요청하면 대화 상자가 팝업되어 사용자가 세션을 허용하도록 합니다 기능 목록이 두 개 있습니다 여기 없는 기능을 처리할 수 있다면 optional features 목록에 넣습니다 특정 기능이 누락되는 것을 절대 처리할 수 없는 콘텐츠를 만들고 있다면 required features 목록에 넣어요 하지만 필수 기능이 지원되지 않거나 사용자가 액세스를 거부하여 제공할 수 없다면 세션 요청이 거부된다는 점을 기억하세요 가능하다면 optional features를 사용하세요 세션이 생겼다면 참고 공간을 요청할 수 있습니다 참고 공간은 좌표계의 원점을 설명합니다 로컬 플로어는 매우 일반적으로 사용할 수 있으며 장면의 원점이 사용자의 발 근처에 있어서 유용합니다 서서 하는 체험에 좋죠

WebXR에서 잠시 벗어나 보겠습니다 웹에서 표준 애니메이션을 만들 때 윈도우에서 애니메이션 프레임 요청을 사용합니다 윈도우의 다음 프레임이 언제 렌더링될지 콜백을 받습니다 해당 프레임을 원하는 대로 변경합니다 그런 다음 호출하고 애니메이션 프레임을 다시 요청해 다음 프레임에 대한 작업을 대기열에 추가합니다 이를 프레임 루프라고 합니다 WebXR 프레임 루프도 비슷하지만 프레임 타이밍이 다른 일반적인 XR 기기는 경험을 구동하는 컴퓨터와 비교됩니다

웹 브라우저는 일반적으로 초당 60프레임으로 실행됩니다 WebXR은 훨씬 더 빠릅니다 따라서 WebXR 세션은 자체 요청 애니메이션 프레임을 제공하며 이 프레임은 윈도우가 아닌 WebXR 디스플레이에 동기화됩니다 여기서 이 함수를 다시 호출하기 위해 다음 프레임을 바로 요청하여 프레임 루프를 설정합니다 여러분이 WebXR에서 가장 관심을 가질 정보는 다양한 추적 물체의 숫자 위치입니다 XR에는 전역 좌표계가 없습니다 대신 모든 위치는 세션 시작 후 요청한 참고 공간을 기준으로 제공됩니다 WebXR에서 컨트롤러의 targetRaySpace와 같은 공간은 위치를 나타내지만 숫자로 된 값은 없습니다 숫자로 된 위치는 포즈라고 부르는데 다음 프레임 시점의 실제 좌표를 포함합니다 이를 상호작용과 렌더링에 사용할 수 있습니다

프레임에서 포즈를 가져오기 위해 getPose 메서드를 사용합니다

개발자가 종료 메서드를 호출하여 세션을 종료하거나 사용자가 브라우저에 세션 종료를 요청해 세션을 종료할 수 있습니다 예를 들어 Vision Pro에서는 Digital Crown을 누르면 됩니다 어떤 이유로든 세션이 종료되면 종료 이벤트가 발생하여 이 시점에서 WebXR로 들어가는 버튼이 다시 표시될 수 있다고 알려 줍니다 지금까지 WebXR을 처음부터 끝까지 살펴봤습니다 이제 세션 중에 일어나는 일을 자세히 살펴보겠습니다 일반적인 애니메이션 프레임뿐만 아니라 공간 입력으로 작업에 도움이 되는 흥미로운 이벤트도 있기 때문이죠

기존 XR 헤드셋에는 버튼뿐만 아니라 하드웨어 컨트롤러도 3D 공간에서 추적되므로 위치와 방향을 알 수 있습니다 손 동작 추적을 사용하기도 합니다 손 동작 추적 입력에는 손이 하는 동작에 대한 정보가 포함됩니다 사용자 손 3D 모델에 애니메이션을 적용할 수 있을 정도의 정보입니다 WebXR에서는 이러한 입력을 추적 포인터라고 합니다

VisionOS에는 Natural Input이 있습니다 Natural Input은 시선과 핀치의 조합을 사용하여 가상 콘텐츠와 상호작용합니다 WebXR에서 이 입력을 지원하고자 W3C 내에서 작업했습니다 WebXR에서는 이러한 입력을 일시적 포인터라고 합니다 사용자가 제스처를 하는 동안에만 존재하기 때문입니다 XR 세션에는 반복할 수 있는 모든 입력 소스 목록이 있습니다

XR 입력 소스는 일종의 공간 입력 방식을 나타냅니다

각 XR 입력 소스에는 타깃 광선 공간이 있으며 여기서 음의 Z 방향을 따라 선을 그리면 XR 입력 소스가 가리키고 있는 것을 나타냅니다 일시적 포인터의 경우 이 공간은 사용자의 눈에서 사용자가 보고 있는 대상을 향합니다 입력에는 잡는 위치를 나타내는 그립 공간도 있을 수 있습니다 일시적 포인터의 경우 엄지와 손가락이 만나는 위치를 나타냅니다 일시적 포인터 입력은 드문 것이며 상호작용이 진행되는 동안에만 존재합니다

상호작용이 시작되면 여러 이벤트가 발생합니다 입력이 추가되거나 제거될 때 입력 소스가 변경되고 선택된 동작을 설명하는 이벤트가 선택됩니다 사용자가 visionOS에서 핀치를 할 때 WebXR에서는 어떤 일이 발생하는지 자세히 살펴보겠습니다

처음에는 입력이 없습니다 웹사이트는 내가 뭘 보고 있는지 손이 무엇을 하고 있는지 모릅니다 제 엄지와 손가락을 함께 꼬집어 핀치 동작을 합니다

새 입력이 생성되어 세션의 입력 소스 목록에 추가됩니다 타깃 광선 모드를 통해 이것이 일시적 포인터임을 알 수 있습니다

입력 소스 변경 이벤트가 발생하여 목록이 업데이트되고 새 입력이 추가되었음을 알립니다

선택 시작 이벤트도 입력에서 곧바로 발생합니다 지금 사용자가 선택을 하고 있는 중이니까요 다음으로 손을 살짝 움직여 봅니다

새로운 이벤트는 없군요 그립 공간과 타깃 광선 공간으로 표시되는 위치가 업데이트되기는 했지만요 그립 공간은 계속 엄지와 손가락이 닿는 지점을 따라갑니다 타깃 광선 공간은 사용자 시선을 계속해서 추적하지 않습니다 대신 사용자의 손에 붙어 있는 것처럼 움직여서 손을 움직여 처음 핀치한 후 광선을 조정할 수 있게 합니다

선택 이벤트가 발생하여 제스처가 성공적으로 완료되었음을 알립니다

selectend는 제스처가 성공적으로 완료되었는지와 관계없이 제스처가 완료되었음을 알려 줍니다 두 개의 이벤트가 있으면 트래킹이 느슨하거나 동작 도중에 트래킹이 취소되는 입력 상황에 유용합니다 정리할 때는 selectend를 사용하고 사용자가 성공적으로 확인하면 한 번 할 동작에 select를 사용합니다 마지막으로 입력이 제거됩니다 입력 소스 목록이 변경되었음을 알리는 새 이벤트가 발생합니다

이제 핀치를 중단하고 원점으로 돌아왔습니다 입력이 없고 웹사이트는 내 손이나 시선이 무얼 하는지 알지 못합니다

이제까지 단계별로 확인했습니다 앞서의 상자 데모를 복습하고 어떤 일이 일어났는지 알아봅시다

웹사이트는 내가 뭘 보고 있는지 손이 어디 있는지 전혀 모릅니다 개인정보 보호에 매우 바람직하며 웹사이트는 이러한 지식 없이도 여전히 훌륭한 경험을 제공할 수 있습니다

이 체스 말을 움직이겠습니다

체스 말을 쳐다보고 손가락과 엄지손가락을 함께 핀치했습니다

핀치하는 순간 이 지점의 그립 공간과 체스 말을 향한 제 눈에서 targetRaySpace로 새로운 입력이 생성되었습니다 선택 시작 이벤트가 발생합니다 프레임과 입력 소스에 대한 참고가 포함된 이벤트입니다 제가 보고 있던 물체를 찾으려면 이것만 있으면 됩니다 웹사이트는 광선 캐스터를 사용해 제가 바라본 물체를 선택합니다

각 프레임에서 제가 손을 움직일 때마다 이 물체를 이동시키고 타깃 레이스 베이스와 동기화합니다 제 시선을 따라 움직이는 게 아니라 제 손을 따라 움직입니다

원하는 곳에 배치하고 놓는 제스처를 합니다 select end 이벤트가 실행되고 웹사이트가 가장 가까운 사각형에 제 체스말을 배치합니다 입력이 제거되고 웹사이트는 더 이상 내 손이 무엇을 하고 있는지 내가 어디를 보고 있는지 알지 못합니다

손 동작 추적 기능이 없을 때 일어나는 일을 많이 말씀드렸죠 visionOS에서도 손 동작 추적 기능을 지원하지만 세션을 시작할 때 기능으로 요청해야 합니다 손 동작 추적을 요청하고 승인을 받으면 감지된 모든 손이 트래킹된 포인터 입력으로 추가됩니다 이러한 입력은 추적이 가능하기만 하면 계속 사용할 수 있는 입력입니다

이 입력에는 조인트 공간이 있는 손 오브젝트가 있으므로 WebGL으로 사용자의 손을 원하는 대로 표시할 수 있습니다 사용자가 손을 볼 수 없다면 매우 불편할 수 있기 때문에 반드시 손을 표시해야 합니다

손 동작 추적 활성화 시와 비활성화 시의 가장 큰 차이점은 손 동작 추적을 요청하면 WebGL로 사용자의 손을 직접 그려야 한다는 점입니다 추적을 사용하지 않는 경우에는 사용자의 실제 손을 표시합니다 손 동작 추적이 활성화된 경우에도 일시적 포인터 입력은 계속 사용할 수 있습니다 visionOS에서는 모든 선택 이벤트가 일시적 포인터 입력과 연관됩니다 따라서 손 동작 추적과 Natural Input을 함께 사용하는 경험을 만들 수 있습니다

이는 손 동작 추적을 요청하고 사용자가 동시에 양손으로 핀치하는 경우 최대 4개의 입력을 동시에 가질 수 있다는 뜻입니다

손 동작 추적으로 가능한 일 중 하나죠 정밀한 근접 상호작용에 매우 유용합니다

손 동작 추적으로 근접작업을 정확히 하기는 까다로울 수 있어요 이 예에서는 두 손가락의 근접성을 사용하여 손잡이로 물체를 집어서 옮기고 있습니다 이를 위해 손가락 끝 사이의 거리를 비교하고 중심점이 손잡이와 교차하는지 알아내야 했습니다

근접 상호작용과 멀리 있는 물건과의 상호작용 두 경우 모두에 일시적 포인터를 사용할 수 있어요 손 동작 추적이 활성화된 경우에도 계속 사용할 수 있습니다

일시적 포인터와 손 동작 추적은 매우 멋지지만 웹에서는 더 재미있고 다양한 것을 사용할 수 있습니다 WebXR 중에 문서가 숨겨지더라도 전통적인 웹사이트를 구축할 때 사용하는 많은 표준 웹 API에 여전히 액세스할 수 있습니다

WebXR에서 특히 잘 작동하는 몇 가지 기능들입니다 WebXR 특정 입력 외에도 PlayStation 5 컨트롤러와 같은 기존 게임 경로를 계속 사용할 수 있습니다 컨트롤러 버튼과 아날로그 스틱은 소형 VR 차량 조종에 아주 유용합니다 음성 합성과 음성 인식은 명령을 말하여 작업을 수행하고 응답을 들을 수 있는 음성 인터페이스 구축에 적합해요 훌륭한 입체 그래픽과 분위기 음향과 사운드 효과를 결합하는 것도 아주 중요합니다 웹 오디오 API의 패너 노드는 진정한 몰입형 경험을 위한 공간 사운드스케이프 구축에 적합합니다 물체의 소리가 물체 자체에서 나는 듯한 느낌이 들 때 몰입도가 더욱 높아집니다 이제 WebXR을 소개했으니 visionOS에서 테스트하고 디버그하는 방법을 볼께요 콘텐츠를 테스트할 때 실제 Vision Pro 또는 visionOS 시뮬레이터를 사용할 수 있습니다 이 예에서는 시뮬레이터를 사용하겠습니다 WebXR을 사용하려면 보안 컨텍스트가 필요하며 HTTPS 웹사이트 외 개발 시스템의 로컬 호스트가 있습니다 여기에서는 이미 상자 데모 HTTP 서버를 실행하고 있습니다 .페이지를 열고 버튼을 테스트하여 XR 세션을 시작할 수 있습니다 WAS와 D 키로 3D 공간에서 이동할 수 있습니다 마우스 우클릭, 드래그로 카메라를 회전할 수 있습니다 WebXR 중에 윈도우를 클릭하면 일시적 포인터 입력이 시뮬레이션되요

손 동작 추적은 시뮬레이터에서는 테스트할 수 없습니다 실제 기기가 필요합니다 성능 향상을 위해 이 페이지에 로깅을 설정했습니다 현재 프레임 속도와 드로우 호출 수를 알려 줍니다 macOS Safari에서 Web Inspector를 사용하여 페이지가 올바르게 작동하는지 검사할 수 있습니다

이 페이지는 개발 메뉴에서 사용할 수 있습니다 로컬 웹페이지에서와 마찬가지로 여기에서 로그를 확인하고 JavaScript를 검사, 일시 중지해 단계별로 실행할 수 있습니다

경험을 만들 때 빠른 반복을 위해 주로 시뮬레이터를 사용합니다 그런 다음 변경 사항을 서버에 푸시하고 실제 기기를 사용하여 변경 사항을 확인했습니다

이 WebKit 블로그 게시물에서 visionOS의 디버깅과 테스트에 대한 자세한 내용을 확인할 수 있습니다 Vision Pro를 위한 WebXR 경험을 구축하는 데 도움이 되어드릴 것입니다 아직 기기가 없더라도요

또한 WWDC23의 Patrick의 세션 ‘Safari 개발자 기능 재발견하기’에서 Safari 개발자 도구에 대해 자세히 살펴볼 수 있습니다 Apple 플랫폼의 새로운 기능인 WebXR은 아직 초기 단계입니다 여러분이 앞으로 WebXR을 사용해 해내실 일들이 정말 기대됩니다 앞으로도 이 기능의 발전을 계속 지켜봐 주시기 바랍니다

Vision Pro가 없더라도 시뮬레이터는 WebXR 프로젝트가 visionOS 및 새로운 일시적 포인터 입력과 작동하는지 확인하는 좋은 방법입니다 WebXR을 사용해 본 적이 없다면 이번 기회에 체험해 보세요 WebXR 및 WebGL을 위한 크고 활동적인 커뮤니티가 있어요 그래픽 코딩이 처음인 개발자들을 위한 훌륭한 리소스가 있습니다

이 세션과 관련된 리소스를 확인하고 관련 세션을 시청하세요 오늘 함께해 주셔서 감사드리며 즐거운 WWDC 되세요