공간 웹의 새로운 기능

안녕하세요, visionOS Safari 팀의 Eddy입니다 올해는 공간 웹에 있어 중요한 한 해로 웹 경험의 수준을 높일 새 기능이 제공됩니다

다른 웹 콘텐츠와 일치하도록 3D 모델을 입체적으로 렌더링하는 기능을 추가했고 사용자는 모델과 상호작용할 수 있습니다 평면 화면에 국한되지 않는 새로운 미디어인 몰입형 미디어 재생 기능도 추가했습니다

웹사이트 환경 같은 새로운 개발자 미리보기 기능도 추가했습니다 새 기능을 도입하는 방법을 보여드리겠습니다 3D 모델을 웹페이지에 삽입하고 몰입형 미디어를 표시하고 맞춤형 웹페이지 환경을 제공하는 방법을 보여드리죠 바로 시작하겠습니다 수십 년간 웹 개발자는 HTML 이미지 요소로 웹에 이미지를 삽입했습니다 공간 컴퓨팅 시대를 맞이하여 웹 콘텐츠를 혁신하는 새로운 방법이 도입됩니다 바로 웹페이지에 3D 모델을 삽입하고 표시하는 방법입니다 이것은 새로운 HTML 모델 요소입니다 몇 년 전 웹 표준 기관에 제안되었고 올해 visionOS의 Safari에서는 기본 설정이 되었습니다 방문자는 이제 간단한 마크업만 있으면 삽입된 웹 콘텐츠와 3D 모델을 볼 수 있습니다 기존 모델 렌더링 라이브러리와 달리 모델 요소는 입체적으로 렌더링되며 따라서 사용자는 객체의 깊이를 인식하고 모델을 다양한 각도에서 확인할 수 있습니다 애셋 준비에서 상호작용과 애니메이션을 이용한 멋진 렌더링에 이르는 3D 모델 임베딩의 다양한 측면을 자세히 살펴보겠습니다 3D 모델을 삽입하는 첫 단계는 모델 생성입니다 visionOS의 Safari에서는 모델 요소가 3D 콘텐츠 산업에서 자주 사용하는 USDZ 파일 형식을 지원합니다 기존 도구로 USDZ 파일을 캡처, 변환, 생성하세요 iPhone으로 실제 물체를 3D 모델 파일에 캡처하세요 App Store에서 Reality Composer를 다운로드하세요 iOS의 Object Capture API는 앱이 비슷한 방식으로 모델 파일을 캡처하고 생성할 수 있게 합니다 작업에 맞는 3D 모델을 보유하고 있지만 모델 형식이 다를 수도 있습니다 macOS는 기본적으로 Preview나 명령줄 도구로 다양한 3D 모델 형식을 USDZ로 변환합니다 상급 사용자는 Blender Houdini, Maya Reality Composer Pro 같은 기존 3D 모델링 소프트웨어로 놀라운 3D 모델을 만들고 있습니다 대부분은 USDZ로 내보내기를 지원합니다 USD 생태계는 워크플로에서 활용 가능한 다양한 도구를 제공합니다 WWDC23 세션인 USD 생태계 살펴보기를 참고하세요 3D 모델 생성이 처음이라면 WWDC23의 Reality Composer Pro 알아보기도 도움이 됩니다 모델 요소를 실험할 때 테스트용 USDZ 파일을 준비하면 편리합니다 USDZ 파일을 얻는 가장 빠른 방법은 developer.apple.com/kr/에서 다운로드하는 것입니다 Object Capture로 만든 파일도 있고 3D 모델링 소프트웨어로 세심하게 만든 파일도 있습니다 여느 웹 애셋처럼 파일 크기를 작게 유지해야 로딩 속도가 빨라집니다 저는 압축한 텍스처를 포함한 복사본을 Mac의 Preview를 이용해 내보내는 방법을 선호합니다 파일은 훨씬 다양한 방법으로 최적화할 수 있으며 자세한 내용은 WWDC24 세션인 공간 컴퓨팅을 위해 3D 애셋 최적화하기에서 설명합니다 애셋 파일이 준비되었으니 웹 페이지에 삽입해보겠습니다 모델을 삽입하는 구문은 간단합니다 모델 요소의 source 속성에 USDZ 파일을 적용하세요 닫는 태그를 잊으면 안 됩니다 소스 요소를 빈 모델 요소 내부에 넣어도 됩니다 그림 요소를 다룰 때와 같은 방식이죠

모델 요소는 다른 시각적 DOM 요소와 동일하게 작동하므로 어떤 위치에도 자유롭게 배치할 수 있습니다 모델이 항상 페이지 표면 뒤에 렌더링된다는 점이 중요합니다 모델 요소를 페이지 뒤 가상 공간의 입구라 생각하세요 모델은 바로 이 공간에 존재합니다 모델 요소가 스크롤되어 표시될 때 콘텐츠가 페이지 밖으로 튀어나오지 않게 하는 장치죠 기본적으로 브라우저는 모델이 요소 경계 내에 들어가도록 크기를 조정합니다 이를 위해 모델 바운딩 박스의 x-y면을 요소 내부에 맞추고 중앙에 배치합니다

일부 오래된 웹 서버나 CDN은 USDZ 파일 확장자를 인식하지 못하며 HTTP 응답 헤더에 잘못된 콘텐츠 유형을 반환합니다 올바른 콘텐츠 유형을 반환하려면 웹 서버에 일부 구성을 추가해야 할 수도 있습니다 다양한 웹 서버에서 USDZ MIME 유형을 지정하는 예시입니다 자세한 내용은 웹 서버 소프트웨어의 설명서에 나옵니다 훌륭한 웹사이트 구축의 필수 요소는 다양한 기기를 사용하는 모든 방문자를 수용하는 것입니다 따라서 이번 버전과 호환되는 대체 기능을 제공해야 합니다 대체 이미지를 제공하려면 이미지를 모델 요소에 넣으세요

저는 모델의 2D 렌더링을 제공하여 다른 브라우저 사용자가 객체의 모양을 파악할 수 있게 합니다 정적 이미지 대신 Three.js BabylonJS model-viewer 같은 기존 제3자 라이브러리로 2D를 감상하는 방법도 있습니다

model-viewer 라이브러리 활용 예입니다 이는 모델을 JavaScript로 2D 캔버스에 그립니다 2D 뷰어 코드를 모델 요소로 감싸 대체 경험으로 사용할 수 있습니다 이 설정은 visionOS의 Safari 사용자가 입체적으로 렌더링된 모델의 깊이를 느끼게 하며 다른 브라우저 사용자는 2D 렌더링을 보게 됩니다 맞춤형 대체 동작을 구현하려면 JavaScript로 모델 요소 지원 여부를 확인하세요

window.HTMLModelElement object 존재 여부를 확인 가능합니다 사용자 에이전트가 visionOS Safari인지 감지하는 것은 좋은 생각이 아닙니다 이 기능은 취약하며 다른 브라우저가 모델 요소를 지원하기 시작하면 이상한 동작을 할 수 있습니다 감지 대상은 기능이지 에이전트가 아닙니다 USDZ 파일은 쉽게 10MB를 초과하므로 느린 네트워크에서는 로딩에 몇 초가 걸립니다 모델이 완전히 로드되었는지 확인해서 UI를 업데이트하고 싶으실 것입니다 대표적인 예는 로딩 표시기입니다

모델 요소에는 Promise 객체 반환 ready 속성이 있습니다 모델이 완전히 로드되면 프로미스가 이행됩니다 이제 로딩 표시기를 숨기고 모델 요소를 표시할 수 있습니다 로딩 오류가 발생하면 ready 프로미스가 실패할 수 있으니 적절한 방식으로 오류를 처리하세요 대표적인 방법은 재시도 버튼 제공입니다 제 경험에 따르면 로딩을 시각적으로 표시하면 대부분의 방문자는 페이지에서 벗어나지 않고 계속 머무릅니다

이제 모델이 삽입되었습니다 웹사이트에서 근사하게 표시해 보겠습니다 모델 요소는 모델을 렌더링할 가상 공간을 정의합니다 공간 색상을 주변 웹 콘텐츠와 동일한 색상으로 설정하면 모델 요소가 페이지에 자연스럽게 어우러집니다

페이지에 모델 요소를 추가하면 전체 모델 요소가 가상 공간으로 대체되어 해당 지역의 원래 배경색을 볼 수 없게 됩니다 이를 해결하려면 CSS의 background-color 속성을 사용하여 가상 공간의 색상을 설정해야 합니다 상위 항목이 아닌 모델 요소 자체에서 설정해야 합니다 배경 색상에 알파를 지정했다면 불투명한 색으로 변환됩니다 색상 정의를 반복하지 않으려면 CSS 맞춤형 속성으로 코드를 간결하게 유지하세요 모델 요소가 페이지에 혼합되면 창의적인 작업이 훨씬 쉬워집니다

이 예제에서는 오른쪽 패널 아래에 모델 요소를 확장했습니다 패널에 반투명 유리 효과를 적용해 특정 각도에서 아래에 있는 카메라를 드러내 매우 강한 레이어링 효과를 연출했죠

동일한 효과를 얻는 다양한 방법이 있지만 제 방식을 보여드리겠습니다 저는 먼저 position: absolute로 모델 요소가 패널 뒤로 확장되게 합니다 배경 필터는 모델 요소의 픽셀을 흐리게 하여 반투명 유리 효과를 생성합니다 선형 그라디언트는 가장자리에 반사광 효과를 적용해 두께감을 강조하고 패널 색상을 밝게 유지해 텍스트가 쉽게 읽히게 합니다 이상은 오래 전부터 존재해 온 좋은 CSS 트릭이지만 모델 요소의 깊이 효과와 결합해야 진가를 발휘합니다 이제 페이지가 멋지게 보이지만 조명 효과를 조정하면 모델이 훨씬 멋있어집니다 여기서는 동일한 모델 파일에 다른 조명을 적용하겠습니다 선택한 조명에 따라 모양이 얼마나 달라지는지 살펴보세요 조명 효과를 제어하려면 모델이 환경에서 받는 빛을 반영하도록 환경의 모습을 정의하는 특수한 이미지를 사용합니다 이 기법을 이미지 기반 조명(IBL)이라고 합니다 이미지는 일반적으로 IBL 파일이라고 부릅니다 IBL 파일은 환경의 360도 전체를 평면 이미지에 투영하므로 왜곡되어 보일 수 있습니다 이 평평한 구형 투영은 등적 직사각형 투영법이라고도 하며 IBL 파일에서 매우 자주 사용합니다 IBL 파일은 USDZ 파일의 일부가 아니므로 렌더링 중에 반드시 지정해야 합니다

모델 요소에 대한 IBL을 지정하려면 environmentmap 속성을 사용해야 합니다 제공하지 않으면 브라우저는 모델에 기본 조명을 적용합니다 IBL은 USDZ 파일의 일부가 아니므로 모델 파일을 웹페이지 외부에서 사용하면 동일한 조명 효과가 발생하지 않습니다 따라서 표시되는 앱은 시청 경험에 가장 적합한 조명을 적용할 수 있습니다 IBL 파일에 OpenEXR과 Radiance HDR 형식을 사용해 보세요 이 두 형식은 밝기 수준을 매우 넓은 크기로 표현하기 때문에 반사 효과가 훨씬 현실적입니다 반면 JPEG IBL은 매우 둔하고 밋밋하게 보입니다 이제 방문자가 모델과 상호작용할 수 있게 해봅시다 모델 요소는 기본적으로 다양한 사용자 상호작용을 지원합니다 기본적으로 모델 요소를 핀치 및 홀드하면 드래그 앤 드롭 상호작용이 시작됩니다 모델을 다른 앱이나 빈 위치에 드롭하여 Quick Look을 통해 공간에서 볼 수 있습니다 이것은 모델을 실제 크기로 보는 탁월한 방법으로 현실적인 조명 효과를 적용해 모델이 실제처럼 보이게 합니다 표면에 붙이거나 돌리고 크기를 조절할 수 있습니다 또한 모델 요소에 핀치 앤 드래그를 활성화해 인라인으로 표시되는 모델을 돌릴 수도 있습니다 모델을 위아래로 기울일 수도 있는데 모델을 놓으면 기울기가 초기화됩니다

이 인라인 회전 동작은 모델 요소에서 스테이지모드를 orbit으로 지정해 활성화합니다 회전은 y축을 따라 진행되며 제스처 중에 약간의 수직 기울임이 허용됩니다 브라우저 엔진은 모델 크기를 조절하고 오프셋해 회전 시 모델이 페이지 표면 뒤에 남게 합니다 이 스테이지모드 회전 동작이 작업에 맞지 않는다면 맞춤형 상호작용을 수동으로 수행하세요 모델을 특정 방식으로 수동으로 이동하고 방향을 조정하려면 JavaScript를 사용하세요 가상 공간에서 모델이 위치할 정확한 위치와 방향을 제어할 수 있습니다 모델 요소가 노출하는 변환 행렬을 변경하기만 하면 됩니다

변환 행렬은 entityTransform 속성을 통해 노출됩니다 모델이 로드되면 브라우저는 기본 배치에 필요한 변환을 계산하고 entityTransform 속성에 저장합니다 이 속성은 ready 프로미스가 해결되면 자동으로 채워집니다

모델 배치를 맞춤화하는 예시를 보여드리죠 모델을 오른쪽으로 돌리는 링크를 제공하려 합니다 turnRight 함수에서 브라우저가 entityTransform 속성에서 계산한 변환 행렬을 읽습니다 DOMMatrix 클래스의 기존 API인 rotateAxisAngle 메서드를 이용해 y축을 중심으로 90도 돌립니다 0-1-0은 y축을 의미하고 90은 90도 회전을 의미합니다 새 행렬이 생성되면 entityTransform 속성에 다시 설정하여 행렬이 적용되게 합니다 entityTransform 행렬이 지원하는 조작에는 균일한 크기 조정 회전, 이동이 포함됩니다 지원되지 않는 조작이 있는 행렬을 entityTransform 속성에 할당하면 오류가 발생합니다 기본 엔티티 변환으로 대부분의 작업을 처리할 수 있습니다 하지만 기본 계산의 수학적 원리를 이해하고 싶을 때도 있죠 이를 이해하려면 기본으로 돌아가 아이덴티티 행렬의 엔티티 변환 행동을 살펴보아야 합니다

엔티티 변환을 아이덴티티 행렬로 설정하면 USDZ 파일의 원점이 모델 요소의 중심점으로 정렬됩니다 모델은 페이지 표면 뒤의 공간 내에서만 렌더링됩니다 따라서 모든 전면 돌출부는 잘리게 됩니다 또한 USDZ 파일에서 1cm는 CSS에서의 1cm와 동일하게 렌더링되며 이는 CSS에서 약 38px에 해당합니다 visionOS에서 Safari 창은 사용자로부터 멀어질수록 커집니다 따라서 모델이 웹페이지에 표시될 때 USDZ 파일에서 사용된 단위와 실제 세계의 물리적 단위 사이에는 아무런 관계가 없습니다 객체를 실제 물리적 크기로 표시하려면 앞에서처럼 사용자가 페이지에서 객체를 드래그해 Quick Look으로 확인하게 하는 것이 가장 좋은 방법입니다 entityTransform 속성은 창의적으로 사용할 수 있습니다 이전 예시에서 이 속성은 카메라의 여러 기능을 살펴볼 때 모델의 다양한 부분으로 확대됩니다 단순한 이동은 물론이고 모델 애니메이션을 이용해 카메라 화면을 열거나 닫는 애니메이션을 만들 수도 있죠 방법을 보여드리겠습니다 USDZ 파일 형식은 파일 자체에서 애니메이션을 정의할 수 있으며 모든 주요 저작 도구에서 지원됩니다 또한 일부 USDZ 파일에는 여러 애니메이션 트랙이 있습니다 모델 요소는 USDZ 파일에서 정의된 첫 번째 애니메이션 트랙의 재생 기능을 지원합니다 간단한 루핑 애니메이션에서는 loop와 autoplay 속성을 사용할 수 있습니다 애니메이션을 수동으로 제어하려면 모델 요소에서 재생 및 일시 정지 메서드를 사용하세요 paused 속성으로 애니메이션 재생 여부를 확인할 수 있습니다 이 API는 비디오 요소용 API와 동일하므로 익숙하게 느껴질 것입니다

더 복잡한 작업이라면 3D 모델링 소프트웨어로 모델의 타임라인을 구축해 다양한 상태 사이에 애니메이션을 적용할 수 있습니다 제 카메라 모델 파일에서 저는 카메라 플래시 열기/닫기를 애니메이션으로 표현한 후 카메라 화면 열기/닫기를 애니메이션으로 표현합니다 애니메이션 정보는 USDZ 파일에 저장됩니다 애니메이션 모델을 모델 요소에 넣으면 currentTime 속성으로 타임라인을 이동할 수 있습니다 카메라 플래시를 열려면 currentTime 속성을 1로 설정하기만 하면 됩니다 currentTime 속성은 초 단위라는 점을 명심하세요 마찬가지로 화면을 열고 싶다면 3으로 설정합니다 모델은 암시적 애니메이션 없이 즉시 업데이트됩니다 따라서 사용자는 불연속적인 타임스탬프로 이동해 필요한 특정 효과를 사용할 수 있습니다 currentTime 속성을 일부 상호작용과 연결해 흥미로운 경험을 만들 수 있습니다

이것은 값 범위가 2와 3인 슬라이더입니다 화면 열림 애니메이션이 재생되는 타임라인 부분에 적용되죠 슬라이더 값 변경을 감시하는 이벤트 리스너를 추가합니다 이 경우 현재 시간을 슬라이더 값으로 설정합니다 방문자가 슬라이더로 화면 위치를 제어할 수 있습니다 이 개념은 페이지 스크롤이나 맞춤형 드래그 이벤트 같은 다른 상호작용에도 적용할 수 있습니다 currentTime과 entityTransform을 창의적으로 결합해 보세요 이전 카메라 페이지 예시에서 애니메이션은 타이머로 구동됩니다 개별 부분은 currentTime 속성으로 전체 카메라의 움직임은 entityTransform 속성으로 애니메이션화됩니다 페이지가 이미 충분히 멋지지만 제품 각인 같은 개인적인 취향을 더하면 훨씬 더 근사할 것입니다 하지만 USDZ 모델에 넣을 텍스트를 미리 알 수가 없죠 이럴 때 동적으로 생성된 모델이 필요합니다 런타임에 사용자 입력에 의존하는 모델을 표시해야 한다면 JavaScript로 브라우저 내에서 USDZ 파일을 프로그래밍 방식으로 생성하고 모델 요소 내에 표시하세요 Three.js는 프로그래밍 방식으로 3D 모델을 생성하는 강력한 JavaScript 라이브러리입니다 Three.js는 매우 심오한 주제이니 오늘을 자세히 설명하지 않겠습니다 여러분에게는 절차적으로 생성한 모델이 포함된 THREE.Scene 객체 하나가 있습니다 잘 만든 장면 객체가 있다고 가정해 봅시다 Three.js에는 USDZ 내보내기 모듈이 포함되어 있습니다 가져온 후에는 parseAsync 메서드로 모델 장면의 전체 USDZ 파일 데이터 블롭 생성이 가능합니다 URL.createObjectURL 메서드로 만든 데이터 블롭으로 연결되는 객체 URL도 생성 가능합니다 객체 URL이 있으니 이를 모델 요소의 source 속성으로 설정하여 렌더링을 시작할 수 있습니다 이렇게 하면 오프라인에서 미리 준비한 확인된 정적 USDZ 파일에 제한되지 않게 됩니다

방문자의 데이터 입력을 기반으로 모델을 맞춤화할 수 있습니다 제품에 이름을 추가하거나 텍스트 색상을 변경해 보세요

이 기능의 멋진 점은 여전히 모델을 끌어내 사용자의 공간에서 볼 수 있다는 것입니다

모델 요소는 훨씬 많은 API를 지원하며 오늘은 그 중 일부만 살펴보았습니다 나머지 API는 웹페이지에 모델을 도입할 때 유용합니다

모델 요소를 자세히 알아보려면 MDN 문서 페이지와 W3C 웹사이트의 모델 요소 제안서를 참고하세요 이 세션의 관련 링크에서 URL을 확인할 수 있습니다 또 다른 유형의 콘텐츠인 몰입형 미디어에 대해 설명해 드리겠습니다 작년에는 웹사이트에서 파노라마 및 공간 사진을 표시하는 방법을 도입했습니다 공간 비디오, 180도 360도, 광시야각 비디오와 Apple Immersive Video 지원도 확장 중입니다 파노라마 및 공간 사진 표현 방식도 업데이트했습니다 iPhone 15 Pro 이상에서는 카메라 앱에서 공간 비디오를 바로 캡처해 Apple Vision Pro 사진 앱에서 공간 감상 가능합니다 visionOS는 새로운 3가지 몰입형 미디어 유형을 지원합니다 180도, 360도 광시야각 비디오입니다 이러한 미디어 유형은 평면 표면을 넘어 전방향으로 펼쳐지는 몰입형 경험을 제공합니다 Apple Immersive Video 지원도 추가되어 카메라의 각 렌즈에 맞게 완벽하게 보정된 고해상도 스테레오 비디오를 제공합니다 올해 WWDC 세션인 visionOS를 위한 비디오 경험 살펴보기에서는 이러한 미디어 유형을 다룹니다

페이지에 360도 비디오 같은 몰입형 미디어 파일이 삽입되면 해당 파일은 2D 비디오로 렌더링됩니다 몰입형으로 보게 하려면 전체 화면으로 표시하세요 비디오가 사용자 주위 전뱡향에서 올바르게 투영됩니다 전체 화면 재생기는 180도와 Apple Immersive Video 형식에서 자주 사용하는 입체 콘텐츠도 지원합니다 몰입형 미디어를 이미 경험해 보셨을 수도 있습니다 하지만 웹사이트에서 이를 선보일 시간은 바로 지금입니다 기존 비디오 요소를 이용해 웹사이트에서 이러한 미디어를 모두 삽입할 수 있습니다 새로운 요소나 속성은 필요 없습니다 HTTP Live Streaming으로 대용량 비디오 애셋을 제공하세요 180, 360, 광시야각 미디어 파일은 미디어 투영을 설명하는 추가 메타데이터가 있는 APMP 즉 Apple Projected Media Profile을 준수해야 합니다 기존 미디어를 APMP로 변환하는 방법은 올해 WWDC 세션인 Apple Projected Media Profile 알아보기를 참고하세요 Apple Immersive Video에 대한 자세한 내용은 Apple Immersive Video 기술에 대해 알아보기를 보세요 광시야각 APMP 예시입니다 메타데이터는 녹화 중에 사용한 카메라 매개변수를 기록합니다 visionOS는 각 픽셀이 의도된 위치에 정렬한 형태로 미디어를 표시하여 재생 시 정확한 투영을 보장합니다 전체 화면으로 보면 가장자리에서도 직선이 직선으로 보입니다 APNP의 강점이죠 비디오 요소의 기본 제어 기능으로 전체 화면 전환이 가능합니다 JavaScript의 requestFullScreen API로 프로그래밍 방식으로 전환할 수도 있습니다 사실 이 API는 웹페이지에서 파노라마 및 공간 사진을 표시하는 API이기도 합니다 파노라마에서는 이제 같은 이미지 요소에 다른 소스를 제공해 적절한 썸네일을 표시할 수 있습니다 전체 화면으로 전환하면 가장 넓은 변형이 사용됩니다

공간 사진에서는 requestFullscreen API가 동일하게 작동합니다 공간 사진은 인라인으로 표시될 때는 평면 2D 이미지로 전체 화면으로 표시될 때는 공간적으로 표시됩니다 제 경험상 방문자에게 이 독특한 이미지가 실제로 공간적이라는 점을 항상 설명하고 이미지를 터치해야 진가를 느낄 수 있음을 알려야 합니다 visionOS 2.4에 개발자 미리보기 기능으로 추가된 새 속성 controls로 훨씬 쉽게 구현될 것입니다 controls 속성은 공간 사진 배지를 추가해 이미지가 공간 사진임을 표시합니다 전체 화면 버튼과 결합하면 JavaScript 작성 없이도 방문자가 이미지의 공간적 버전을 쉽게 확인할 수 있습니다 다른 개발자 미리보기 기능처럼 이 기능을 체험하려면 명시적으로 활성화해야 합니다 설정 > 앱 > Safari > 고급 > 기능 플래그에서 Spatial Image Controls API를 활성화하세요 다음에 다룰 주제인 웹사이트 환경도 여기서 활성화하세요 웹사이트 환경은 올해 도입하는 새로운 개발자 미리보기 기능으로 웹사이트가 방문자에게 가상 환경을 제공할 수 있게 합니다 원리는 다음과 같습니다 이 예시 페이지는 USDZ 파일을 환경으로 지정했고 사용자는 페이지 메뉴를 통해 환경을 표시하고 Safari와 웹사이트를 계속 볼 수 있습니다 디지털 크라운을 이용해 방해받지 않고 환경에 완전히 몰입할 수도 있습니다 브라우저 창을 넘어 웹사이트를 확장하는 멋진 방법이죠

환경을 제공하려면 rel 속성이 spatial-backdrop인 링크 요소를 사용하고 href 속성 으로 환경 USDZ 파일을 가리키세요 다른 3D 모델처럼 environmentmap 속성으로 USDZ 파일에 맞춤형 IBL을 제공할 수 있습니다 잘 만들어진 환경이 있다면 방문자는 레스토랑, 잠수함 지하 감옥 같은 장소로 순간 이동하는 느낌을 받게 됩니다 이것은 개발자 미리보기이므로 기능을 체험하려면 설정에서 기능을 활성화해야 합니다 마크업은 웹 표준화 과정을 거친 후 변경될 수 있습니다 Apple은 이 기능의 개발을 적극적으로 주도하며 여러분의 피드백은 큰 도움이 될 것입니다 맞춤형 환경 생성에 대해 자세히 알아보려면 WWDC24의 몰입감 넘치는 visionOS 앱을 위한 맞춤형 환경 만들기를 참고하세요 오늘은 다양한 새 공간 웹 기능을 살펴보았습니다 새 HTML 모델 요소와 지원되는 상호작용 맞춤형 조명 수동 배치에 대해 논의했죠 기존 비디오 요소를 사용해 웹사이트에서 바로 다양한 새 몰입형 미디어를 표시할 수 있죠 미래의 웹사이트 환경을 미리 엿보기도 했습니다

쉽게 시작하실 수 있도록 webkit.org에 모델 요소 사용 예시를 추가했습니다 Apple Vision Pro를 체험하는 가장 좋은 방법은 화면을 직접 보는 것입니다 준비가 되었다면 웹페이지의 적절한 곳에 3D 모델을 추가해 방문자에게 놀랍고 새로운 경험을 선사하세요 웹사이트에서 비디오를 제공한다면 지금 바로 웹사이트에 몰입형 미디어를 포함하세요 맞춤형 환경을 추가해 실험하고 피드백을 공유해 주세요 공간 웹뿐만 아니라 훨씬 더 많은 웹용 신기능이 추가되었습니다 자세한 내용은 올해 Safari 및 WebKit의 새로운 기능 세션에서 확인하세요

웹 기술 관련 버그 보고와 기능 요청은 WebKit 이슈 트래커인 bugs.webkit.org에서 제출하세요 Safari 인터페이스나 visionOS 또는 다른 Apple 플랫폼 문제는 feedbackassistant.apple.com에 제출하세요 새로운 기술로 여러분이 만들어낼 놀라운 결과물을 기대합니다 감사합니다 멋진 WWDC를 즐기세요