HTML 모델 요소 시작하기

이 모델 요소로 이제 iOS, iPadOS, macOS, visionOS의 웹사이트에 어떻게 인터랙티브 3D 콘텐츠를 도입할 수 있는지 알아보세요. 3D 애셋을 생성하고 최적화하기 위한 도구를 살펴보세요. 모델 요소의 다양한 기능을 둘러보고 웹 표준이 어떻게 웹에서 3D의 미래를 만들어 가고 있는지 확인해 보세요.

챕터

리소스

관련 비디오

WWDC26

WWDC25

공간 웹의 새로운 기능

WWDC24

USD 및 MaterialX의 새로운 기능

안녕하세요, 저는 Aleksei입니다 Safari 팀의 엔지니어예요.

오늘은 HTML Model 요소에 대해 흥미로운 내용을 소개해 드리겠습니다. 개발자가 3D 콘텐츠를 웹에 쉽게 가져올 수 있도록 지원하는 방법과 Apple 플랫폼 전반과 그 너머까지 다룹니다.

처음으로 3D를 탐색하는 웹 개발자이든 웹에 작품을 게시하려는 숙련된 3D 아티스트이든 시작하는 데 필요한 모든 것을 알려 드릴게요. 저희는 visionOS에서 Model 요소를 선보였습니다 이미지를 추가하는 것만큼 간단하게 3D 모델을 삽입할 수 있는 네이티브 HTML 요소예요. 이제 Model 요소가 iOS, iPadOS, macOS에도 제공됩니다! 동일한 마크업, 동일한 요소로 Apple 플랫폼 전반에서 동작해요. 3D 콘텐츠가 모든 Safari 방문자에게 전달됩니다 이동 중에 iPhone을 사용하든

카페에서 iPad를 사용하든

책상에서 Mac을 사용하든 상관없이요. 현재 3D의 표준 JavaScript 라이브러리인 "model-viewer"를 아실 것입니다. 개발자들에게 많은 도움이 됐지만 Model 요소는 네이티브예요 추가 라이브러리가 필요 없고 플랫폼에서 직접 렌더링되며 visionOS에서 입체 렌더링이 기본으로 제공됩니다. 새로운 웹 표준으로도 부상 중이라 코드가 미래에도 유효합니다. 웹 전반의 모든 플랫폼에 도달하기 위해 폴리필이 제공됩니다 아직 Model 요소를 네이티브로 지원하지 않는 브라우저를 위한 것이에요. 자세한 내용은 나중에 다루겠습니다. 제가 작업 중인 곳을 보여 드릴게요 야외 활동을 위한 이커머스 플랫폼인데 제품 이미지는 이미 준비되어 있어요. 오늘은 제품 페이지에 3D 모델을 추가하는 과정을 안내해 드릴게요. 먼저 에셋 준비 방법을 보여 드리겠습니다. 그다음 Model 요소를 깊이 살펴보면서 기능을 하나씩 추가하며 경험을 완성해 나갈 거예요. 마지막으로 프로덕션에 맞게 모델을 최적화하는 커맨드라인 도구도 소개합니다. 시작해 볼게요. 처음부터 3D 에셋이 없다면 어떻게 해야 할까요? 캡처, 변환, 제작 접근 방식을 추천합니다 iPhone으로 실물을 스캔하거나 기존 파일을 변환하거나 Blender 같은 도구로 처음부터 만드는 방법이에요. 하지만 생성형 AI 분야에도 혁신이 일어나고 있어요 원하는 콘텐츠를 만드는 완전히 새로운 방법이 생겼습니다. 이미지를 사용해 실물과 일치하는 모델을 생성하거나 텍스트 프롬프트로 더 창의적인 생성도 가능해요. Tripo3D, Meshy.ai 같은 앱이 선택지 중 일부예요. 제 스토어에는 이미 몇 가지 제품이 있지만 꼭 필요한 것을 추가하고 싶었어요 캠핑용 말렛입니다. 말렛 이미지 여러 장으로 시작해서 몇 분 후에 모델이 준비되었어요. USDZ 파일로 내보냈습니다. Model 요소는 USDZ를 지원합니다 단일 파일로 압축된 Universal Scene Description이에요. 3D 모델에 필요한 모든 것이 포함됩니다 지오메트리, 머티리얼, 텍스처, 애니메이션까지요. Safari는 다른 포맷도 지원하지만 최상의 경험을 위해 USDZ로 시작하는 것을 권장합니다. 이제 페이지에 모델을 올릴 차례예요. 말렛이 USDZ 파일로 준비되었습니다. Model 요소를 표현하는 다양한 방법을 소개할게요. 모델을 임베드하는 방법 표시 준비 시점 확인 방법과 폴백 처리 방법을 다룹니다. 페이지 디자인에 모델을 맞추는 방법도요. 방문자가 모델을 조작하고 탐색할 수 있게 하는 것 커스텀 트랜스폼 구현 방법과 애니메이션 재생 방법도 안내합니다. AR Quick Look과 공간 컴퓨팅으로 모델을 현실 세계로 가져오는 방법까지요. 먼저 모델 로딩부터 시작하겠습니다. 태그나 태그처럼 태그의 source 속성에 파일 경로를 지정하면 브라우저가 나머지를 처리합니다. 플러그인이 필요 없어요. mime 타입을 지정한 태그도 사용할 수 있어요 태그와 동일한 패턴입니다. 폴백에 대해서도 생각해 봐야 합니다. 가장 간단한 방법은 태그 안에 태그를 넣는 거예요. Model 요소를 아직 지원하지 않는 이전 버전의 Safari나 브라우저는 대신 이미지를 렌더링합니다. 방문자도 제품을 확인할 수 있게 되죠. 3D 모델은 수십 메가바이트 이상이 될 수 있어서 로딩에 시간이 걸릴 수 있습니다. ready 프로미스를 사용하면 모델이 실제로 로드되어 표시 준비가 됐을 때 알 수 있어요. 모델이 로딩되는 동안 시각적 신호를 제공하는 것이 좋습니다 스피너 같은 것이요. ready 프로미스가 완료되면 숨기세요. 예기치 않은 일이 발생하면 catch 블록에서 처리하고 폴백 콘텐츠를 표시하세요. 모델 기능에 폴리필을 적용할 수도 있어요. 폴리필은 JavaScript를 통해 새 표준의 API를 소급 적용해 모든 플랫폼에 도달하기 전에도 최신 기능을 사용할 수 있게 해줍니다. W3C의 Model 요소 샘플에서 이에 대한 예시를 보여 줍니다. window에 네이티브 요소가 정의되어 있지 않으면 폴리필 라이브러리를 로드해 가능한 한 많은 기능을 채울 수 있어요 네이티브 API에 최대한 가깝게요. 폴리필과 네이티브 요소 모두의 기능을 테스트하세요 두 가지를 확인하는 것이 중요합니다 일부 기능은 폴리필로 구현이 불가능하다는 점도 기억하세요 Apple Vision Pro 같은 공간 플랫폼의 입체 디스플레이가 그런 경우예요. Model 요소는 자체 가상 공간에서 렌더링됩니다 그래서 페이지의 배경을 물려받지 않아요. 페이지 디자인에 맞추려면 모델에 background-color를 직접 설정하세요. 배경은 항상 불투명하게 렌더링됩니다 투명도가 있는 색상을 지정해도 변환됩니다. 이제 기존 페이지에 모델이 로드되어 통합되었습니다. 방문자가 모델과 상호작용할 수 있도록 하는 것이 자연스러운 다음 단계예요. 얼마나 쉬운지 보여 드릴게요. 값이 orbit인 stagemode 속성을 사용하면 방문자가 모델을 좌우로 자유롭게 회전할 수 있고 위아래로 기울이면 원래 각도로 부드럽게 돌아옵니다. 인터랙티브하면서도 항상 보기 좋죠. 이 속성을 사용하면 모델이 약간 작아지는데 회전 중 어떤 부분도 잘리지 않도록 크기가 조정되기 때문이에요. 경험에 커스텀 인터랙티비티를 추가하고 싶을 때도 있습니다. entityTransform 속성으로 JavaScript를 통해 정확한 시각 각도를 설정할 수 있어요 작동 방식을 보여 드리기 위해 버튼 두 개를 추가할게요 측면 보기 버튼 하나와 모델을 원래 방향으로 되돌리는 초기화 버튼이에요. entityTransform을 사용하려면 orbit을 비활성화해야 합니다 stagemode 속성을 제거하거나 "none"으로 설정하세요.

모델을 수동으로 변환하면 일부가 잘리거나 표시 영역 밖으로 회전하면 사라질 수도 있어요. 보이도록 위치를 조정해야 할 수도 있습니다.

트랜스폼을 구현하기 위해 DOMMatrix를 생성합니다 이것은 3D 공간에서 모델의 방향을 나타냅니다 그다음 rotateSelf를 호출해 회전을 정의해요. 여기서는 Y축을 기준으로 135도 회전해 측면 보기를 구합니다. 마지막으로 model.entityTransform에 할당해 변경 사항을 적용합니다.

초기 트랜스폼을 미리 캡처해 두고 이를 사용해 모델을 원래 방향으로 초기화합니다. 뷰가 즉시 전환됩니다. 전환을 부드럽게 하려면 requestAnimationFrame으로 회전을 애니메이션화할 수 있어요. 먼저 상태를 설정합니다 현재 각도, 밀리초 단위의 애니메이션 지속 시간 500이면 0.5초로 빠르지만 부드러운 느낌을 줍니다 그리고 진행 중인 애니메이션을 취소할 참조를 만들어요.

animateTo는 먼저 실행 중인 애니메이션을 취소해 전환이 충돌하지 않게 하고 현재 각도를 시작 지점으로 캡처한 다음 시작 시간을 기록합니다.

그다음 step 함수를 추가합니다. 각 프레임마다 애니메이션이 얼마나 진행됐는지 계산하고 부드러운 마무리를 위해 회전에 이징을 적용합니다 그리고 새 DOMMatrix로 entityTransform을 업데이트해요. 애니메이션이 진행 중이면 다음 프레임을 요청합니다.

마지막으로 animateTo 호출을 버튼에 할당합니다. 측면 보기는 135도로 애니메이션되고 초기화는 0도로 돌아가요. 실제로 확인해 볼게요. 사용자가 측면 버튼을 탭하면 모델이 부드럽게 회전해 측면 보기를 보여 줍니다. 초기화를 탭하면 시작 위치로 부드럽게 돌아옵니다. 커스텀 트랜스폼과 애니메이션으로 완전한 제어가 가능하지만 추가 작업이 필요합니다 바운딩 박스, 클리핑, 수동 애니메이션 코드 등이요. 사용 사례가 허용한다면 orbit stagemode로 속성 하나만으로 인터랙티브 3D를 구현할 수 있어요. 제품에 가장 적합한 것을 선택하세요. 모델에 내장 애니메이션으로 생동감을 불어넣을 수도 있어요. 이러한 애니메이션은 보통 Blender나 Maya 같은 3D 도구로 제작되어 USDZ 파일에 포함됩니다. Model 요소는 첫 번째 애니메이션 트랙을 재생하고 JavaScript 몇 줄로 재생 속도를 제어하거나 음수 값을 사용해 역방향 재생도 가능합니다. 이를 위해 간단한 play 함수를 구현합니다 모델에 playbackRate를 설정하고 모델의 play() 메서드를 호출합니다 그게 전부예요. 양수 값은 정방향 재생, 음수 값은 역방향 재생이에요. 여기서는 빠른 재생을 위해 5와 -5를 사용합니다. 지금까지 스토어 방문자가 페이지에서 3D로 제품을 탐색할 수 있었어요. 하지만 자신의 환경에서 어떻게 보이는지 보고 싶다면 어떨까요?

을 rel="ar" 속성이 있는 태그로 감싸고 동일한 리소스를 가리키면 iOS와 iPadOS에서 고객이 완전한 AR Quick Look 경험을 할 수 있어요. visionOS에서는 Model 요소가 이미 3D 콘텐츠를 웹의 자연스러운 일부처럼 만들었습니다.

입체 렌더링으로 모델에 실제 깊이감이 생깁니다. 고객이 제품을 페이지에서 꺼내 마치 손에 쥔 것처럼 살펴볼 수 있어요. visionOS는 몰입형 웹사이트 환경도 지원하는데 Model 요소를 활용해 관람객을 장면 안으로 바로 이동시킬 수 있습니다 모두 Safari에서요.

이 기능에 대해 더 알고 싶다면 "Explore immersive website environments" 세션을 확인하세요. API를 자세히 설명합니다.

에셋이 준비되고 Model 요소가 적용되었으니 모든 것이 합쳐지는 걸 볼게요. 3D 모델이 있는 카탈로그 페이지입니다. 인터랙티브 탐색은 제가 가장 좋아하는 부분이에요. 고객이 제품을 회전하고 기울여 모든 각도에서 볼 수 있어요 원하는 방식으로 탐색하면서요. 모두 Safari에서 바로 실행됩니다. 로컬에서 실행하면 제품 페이지가 정말 멋지게 보이지만 인터넷을 통하면 로딩이 오래 걸릴 수 있어요. 모델을 더 작게 만들 수 있으면 좋을 텐데요. 이를 위해 커맨드라인 도구를 실행할게요 부트 모델에 usdcrush라는 도구를 사용합니다. 화질 변화 없이 파일이 7.9 MB에서 1.9 MB로 줄었습니다! 엄청난 압축이에요!

Safari에서 두 버전을 나란히 열어 보면 동일하게 보입니다. 동일한 화질에 파일 크기는 훨씬 작아졌어요.

3D 파일이 있지만 이미지가 아직 없다면 usdrecord 도구로 썸네일을 생성할 수 있어요 또는 폴백 이미지를 직접 만들어 출력 포맷이나 파일에 있는 경우 커스텀 카메라 렌더링 등을 지정할 수 있습니다. 스크린샷과 달리 스크립트를 작성할 수 있어요 사실 솔직히 말하면 이게 무슨 말인지 알잖아요? 좋아하는 LLM이 스크립트를 작성해 줄 거예요 전체 카탈로그에 실행하도록요. 이 두 커맨드라인 도구는 Mac에 이미 설치되어 있어요. USD 콘텐츠 작업을 위한 더 큰 도구 세트의 일부입니다. 전체 도구와 USD 생태계에 대해 자세히 알아볼 수 있습니다 WWDC24 세션에서요 "What's new in USD and MaterialX"입니다. Model 요소는 visionOS에서 시작했고 iOS, iPadOS, macOS 지원으로 Apple 제품군 전반으로 확장되고 있으며 웹 전체로도 가져가고 싶습니다. 저희 팀은 W3C에서 모델 사양에 적극적으로 기여하고 있으며 여러분의 의견을 듣고 싶습니다. 추가하고 싶은 기능이나 고려하지 않은 사용 사례가 있다면 지금이 피드백을 공유하기에 딱 좋은 때입니다. 웹 표준은 개발자 커뮤니티가 만들어 가며 여러분의 목소리가 중요합니다. USDZ 파일 포맷의 3D 콘텐츠의 경우 Alliance of OpenUSD에서 전체 사양을 공개했습니다 명확하고 특정 벤더에 종속되지 않은 참고 자료예요. Alliance는 변환 도구와 리소스도 제공해 기존 콘텐츠 파이프라인에 USDZ를 통합하는 데 도움을 줍니다. 에셋부터 프로덕션까지 Model 요소에 대해 알아봤습니다. 이제 다음 단계를 말씀드릴게요. 직접 3D 모델을 만들어 보세요 텍스트 기반 프롬프트나 이미 갖고 있는 이미지를 활용해서요. 웹사이트에 태그를 추가하고 USDZ 파일을 가리켜 Safari에서 살아나는 모습을 확인해 보세요. USD 도구로 에셋을 최적화하세요. 다양한 플랫폼에서 사용해 보며 요소가 어떻게 적응하는지 확인하세요. W3C의 Immersive Web Community Group에 참여하세요. 사용 사례, 피드백, 아이디어를 가져오세요. 관련 세션도 확인해 보세요. "Immersive website environments" 같은 세션이요. 공간 웹 기능에 대해 더 깊이 알고 싶다면 WWDC25의 "What's new for the spatial web"을 확인하세요. 여러분이 만들 것이 기대됩니다. 감사합니다, 즐거운 WWDC 되세요!

4:19 - Load a model

<!-- Using the src attribute -->
<model src="mallet.usdz"></model>

<!-- Using a <source> child for MIME type -->
<model>
    <source src="mallet.usdz" type="model/vnd.usdz+zip">
</model>

4:39 - Image fallback

<model id="mallet" src="mallet.usdz">
    <img src="mallet.png"
         alt="Rubber mallet with wooden handle">
</model>

5:09 - Ready promise

<model id="mallet" src="mallet.usdz"></model>

<script>
    const model = document.getElementById("mallet");
    model.ready.then(result => {
        // Hide the loading indicator
    }).catch(error => {
        // Loading failed, show fallback
    });
</script>

5:39 - Polyfill fallback

<script type="module">
    if (!window.HTMLModelElement) {
        import("model-element-polyfill.js").then(() => {
            // Polyfill ready to use
        });
    }
</script>

6:13 - Model background

<model id="mallet" src="mallet.usdz"></model>
<style>
    model {
        background-color: #f4f1ec;
    }
</style>

6:47 - Stage mode

<model id="mallet"
       src="mallet.usdz"
       stagemode="orbit">
</model>

7:31 - Custom transforms

<model id="boot" src="boot.usdz"></model>
<button id="button-side">Side</button>
<button id="button-reset">Reset</button>

<script>
    const model = document.getElementById("boot");
    const initialTransform = model.entityTransform;

    document.getElementById("button-side")
            .addEventListener("click", () => {
        const transform = new DOMMatrix();
        transform.rotateSelf(0, 135, 0);
        model.entityTransform = transform;
    });

    document.getElementById("button-reset")
            .addEventListener("click", () => {
        model.entityTransform = initialTransform;
    });
</script>

8:35 - Transition animation

<script>
    const model = document.getElementById("boot");
    const duration = 500;
    let currentAngle = 0;
    let animationId = null;

    function animateTo(targetAngle) {
        if (animationId) cancelAnimationFrame(animationId);
        const startAngle = currentAngle;
        const startTime = performance.now();

        function step(now) {
            const progress = Math.min((now - startTime) / duration, 1);
            const ease = 1 - Math.pow(1 - progress, 3);
            currentAngle = startAngle + (targetAngle - startAngle) * ease;
            model.entityTransform = new DOMMatrix().rotateSelf(0, currentAngle, 0);
            if (progress < 1) animationId = requestAnimationFrame(step);
        }

        requestAnimationFrame(step);
    }

    document.getElementById("button-side").addEventListener("click", () => animateTo(135));
    document.getElementById("button-reset").addEventListener("click", () => animateTo(0));
</script>

10:07 - Animation playback

<model id="bottle" src="bottle.usdz"></model>
<button id="button-play" onclick="play(5)">
    Play
</button>
<button id="button-reverse" onclick="play(-5)">
    Reverse
</button>

<script>
    const model = document.getElementById("bottle");

    function play(rate) {
        model.playbackRate = rate;
        model.play();
    }
</script>

11:06 - AR Quick Look

<a rel="ar" href="bottle.usdz">
    <model id="boot" src="bottle.usdz"></model>
</a>

0:00 - Introduction
The HTML model element, which brings 3D content to the web as simply as an image and now extends from visionOS to iOS, iPadOS, and macOS — how it compares to the model-viewer library and where it stands as an emerging web standard.
2:22 - Prepare the USDZ model asset
Approaches for creating 3D content: scanning with iPhone, converting existing files, authoring in tools like Blender, and generating models from images or text prompts. Why USDZ is the recommended format — it bundles geometry, materials, textures, and animations into a single file.
4:18 - Loading and fallbacks
Embed a model with the tag's src attribute or a nested . Use a nested as a fallback for older browsers, await the ready promise to know when the model can be displayed, and load the W3C polyfill so the element works where it isn't supported natively.
6:14 - Model background
Set background-color directly on the model element to match the surrounding page. The model renders in its own virtual space and doesn't inherit page styles, and any background is composited as fully opaque.
6:48 - Interactions
Add stagemode="orbit" to let visitors rotate the model with automatic spring-back and clipping protection. For custom interactivity, disable stagemode and drive the entityTransform property with a DOMMatrix to snap the model to specific viewing angles from JavaScript.
8:26 - Transition animation
Animate between custom orientations by updating entityTransform inside requestAnimationFrame. The pattern captures a starting angle, eases each frame's rotation, and cancels any in-flight animation so successive transitions don't conflict.
10:08 - Animation playback
Play animations baked into a USDZ file using the element's play() method and playbackRate property. Positive rates play forward, negative rates reverse, and the magnitude scales speed.
10:52 - AR and spatial
Wrap the model in an tag to enable AR Quick Look on iOS and iPadOS. On visionOS the model element renders stereoscopically and can power immersive website environments that place visitors inside a 3D scene.

12:29 - Optimize assets for production
Use usdcrush to shrink USDZ files (often by 4x) with no perceived quality loss, and usdrecord to render thumbnails or fallback images from a 3D file. Both ship with macOS as part of the broader USD tool suite.
14:53 - Next steps
Generate a 3D model from images or a prompt, add a tag to your site, optimize assets with usdcrush, and join the W3C Immersive Web Community Group to help shape the spec.

시작하기 탐색

알림 받기

플랫폼 탐색

피처링

기술 탐색

피처링

커뮤니티 탐색

피처링

문서 탐색

릴리즈 노트

다운로드 탐색

피처링

지원 탐색

피처링

빠른 링크

HTML 모델 요소 시작하기

챕터

리소스

관련 비디오

WWDC26

WWDC25

WWDC24