HTML <model> 요소가 모든 Apple OS에 등장하다

WWDC 2026에서 한 Safari 엔지니어가 단 하나의 태그 <model>만으로, 자바스크립트 라이브러리 없이, 캠핑용 망치 3D 모델을 전자상거래 제품 페이지에 떨어뜨려 놓고 방문자가 손가락으로 회전시킬 수 있게 했습니다.¹ 이것을 가능하게 한 요소는 한동안 visionOS에서 제공되어 왔습니다. 2026년의 새로운 소식은, 바로 그 동일한 마크업이 이제 iPhone, iPad, Mac의 Safari에서 렌더링되고, 이를 둘러싼 자바스크립트 API가 한층 성숙해졌다는 점입니다. Apple은 이를 분명하게 표현했습니다. “우리는 visionOS에서 Model 요소를 처음 선보였습니다… 이제 Model 요소가 iOS, iPadOS, macOS에 찾아옵니다! 동일한 마크업, 동일한 요소가 Apple의 모든 플랫폼에서 작동합니다.”¹

아래의 따라하기 과정은 정적 <img> 폴백에서 시작해 궤도 인터랙션, 스크립트 기반 변환, 베이크된 애니메이션 재생, 그리고 AR Quick Look에 이르기까지, 세션이 제시하는 드롭인 3D 경로를 그대로 따라갑니다. 여기 나오는 모든 내용은 WWDC 2026 세션 215에서 직접 가져온 것입니다.

TL;DR

• <model> 요소는 앞서 visionOS에서 처음 등장했습니다. WWDC 2026은 이를 iOS, iPadOS, macOS Safari로 확장하고 그 주변의 자바스크립트 API를 성숙시킵니다.¹
• model은 미디어처럼 임베드됩니다. src를 USDZ 파일로 가리키고, <video>처럼 MIME 타입을 지정한 <source> 태그를 추가하며, 아직 이 요소를 지원하지 않는 브라우저를 위한 폴백으로 <img>를 내부에 중첩합니다.¹
• ready 프로미스는 model이 언제 로드되었는지 알려 주므로 스피너를 교체할 수 있고, catch 블록은 실패 시 폴백 콘텐츠를 보여 줍니다.¹
• stagemode="orbit" 속성은 단 하나의 속성으로 인터랙티브 회전을 제공합니다. 스크립트로 제어하려면 stagemode="none"으로 설정하고 rotateSelf로 만든 DOMMatrix를 통해 entityTransform을 구동합니다.¹
• 베이크된 애니메이션은 playbackRate와 play()로 재생되며, 음수 값은 역방향으로 재생합니다. 그리고 model을 <a rel="ar">로 감싸면 iOS와 iPadOS 방문자에게 완전한 AR Quick Look 경험을 제공합니다.¹

실제로 출시된 것

Safari 팀의 Aleksei가 0:37부터 크로스 플랫폼 확장에 대해 설명합니다.

여기서는 솔직한 맥락이 중요합니다. <model> 요소는 완전히 새로운 것이 아닙니다. Apple은 이를 visionOS에서 먼저 출시했고, 거기서는 제품이 Apple Vision Pro에서 실제 깊이감을 느끼도록 내장된 입체(스테레오스코픽) 렌더링을 함께 제공했습니다.¹ WWDC 2026은 그 토대 위에서 두 가지 일을 합니다. 이 요소를 iOS, iPadOS, macOS Safari로 가져와 “여러분의 3D 콘텐츠가 이동 중 iPhone을 쓰든, 카페에서 iPad를 쓰든, 책상에서 Mac을 쓰든 모든 Safari 방문자에게 도달”하게 하고, 정적 뷰어를 인터랙티브한 뷰어로 바꾸는 자바스크립트 API를 더욱 구체화합니다.¹

현 상태에 맞선 주장은 직설적입니다. 오늘날 웹의 대부분의 3D는 인기 있는 자바스크립트 라이브러리인 model-viewer를 거칩니다. Apple의 논거는 이렇습니다. 네이티브 요소는 추가 라이브러리가 필요 없고, “플랫폼이 직접” 렌더링하며, “떠오르는 웹 표준이므로 여러분의 코드는 미래에도 유효하다”는 것입니다.¹ Apple의 Safari 팀은 “W3C에서 model 명세에 적극적으로 기여하고 있다”고 밝히며, Immersive Web Community Group을 통한 피드백을 권합니다.¹ 아직 이 요소를 지원하지 않는 브라우저를 위해, 세션은 “새 표준의 API를 자바스크립트로 보완해 주는” 폴리필을 안내하면서, 인용할 가치가 있는 한 가지 단서를 덧붙입니다. “Apple Vision Pro 같은 공간 플랫폼에서의 입체 디스플레이처럼, 이 요소의 일부 기능은 폴리필할 수 없습니다.”¹

콘텐츠 형식은 USDZ로, “Universal Scene Description을 단일 파일로 압축(zip)한 것”이며 “3D 모델에 필요한 모든 것, 즉 지오메트리, 머티리얼, 텍스처, 애니메이션을 패키징”합니다.¹ Safari는 다른 형식도 지원하지만, 세션은 최상의 경험을 위해 USDZ를 권장합니다.¹ 에셋이 어디서 오는지는 별개의 문제입니다. Apple은 캡처, 변환, 제작(Capture, Convert, Create) 방식을 권합니다. iPhone으로 실제 사물을 스캔하거나, 기존 파일을 변환하거나, Blender 같은 도구에서 처음부터 만드는 것입니다.¹ 세션은 생성형 도구가 생태계에 존재한다는 점도 언급합니다. 거론된 앱인 Tripo3D와 Meshy.ai는 Apple 제품이 아니라 서드파티 서비스입니다.¹

페이지에 model을 떨어뜨리기

이 요소는 모든 웹 개발자가 이미 알고 있는 미디어 태그처럼 동작합니다. “<img> 태그나 <video> 태그와 마찬가지로, source 속성으로 <model> 태그가 파일을 가리키게 하면 나머지는 브라우저가 처리합니다. 플러그인은 필요 없습니다.”¹ <video>와 동일한 패턴으로, MIME 타입을 지정한 중첩 <source> 태그를 사용할 수도 있습니다(세션은 값의 이름을 밝히지 않고 패턴을 보여 주지만, model/vnd.usdz+zip이 표준 USDZ 미디어 타입입니다). 오늘날 도입을 안전하게 만드는 부분이 바로 폴백입니다. <model> 안에 <img>를 두면, 구버전 Safari나 지원하지 않는 브라우저는 대신 그 이미지를 렌더링합니다.¹

<model src="mallet.usdz">
  <source src="mallet.usdz" type="model/vnd.usdz+zip">
  <img src="mallet.jpg" alt="캠핑용 망치" width="480" height="480">
</model>

3D 모델은 “수십 메가바이트 이상”이 될 수 있으므로 로딩에 시간이 걸립니다.¹ ready 프로미스는 model이 실제로 로드되어 표시할 준비가 되었을 때 이행됩니다. 기다리는 동안 스피너를 보여 주고, ready가 이행되면 숨기며, 예기치 못한 상황은 catch 블록에서 폴백 콘텐츠를 드러내며 처리하세요.

const model = document.querySelector("model");

try {
  await model.ready;
  spinner.hidden = true;       // model is loaded and ready to display
} catch (error) {
  spinner.hidden = true;
  fallback.hidden = false;     // show fallback content on failure
}

렌더링 관련 한 가지 세부 사항이 사람들을 헷갈리게 합니다. <model> 요소는 “자체 가상 공간에서 렌더링되므로 페이지의 배경을 가져오지 않습니다.”¹ 페이지 디자인에 맞추려면 model에 직접 background-color를 설정하세요. 세션은 제약을 하나 덧붙입니다. “배경은 항상 불투명하게 렌더링되며, 투명도가 있는 색을 지정하더라도 변환됩니다.”¹

방문자가 직접 살펴보게 하기

가장 저렴한 인터랙티브 기능은 속성 하나로 충분합니다. stagemode="orbit"을 쓰면 방문자가 “모델을 좌우로 자유롭게 회전시키고, 위아래로 기울이면 원래 각도로 부드럽게 되돌아옵니다.”¹ 또한 회전 중에 잘려 나가는 부분이 없도록 모델이 약간 더 작게 재조정됩니다.¹ 대부분의 제품 페이지에서는 그 단 하나의 속성이 기능 전부입니다. “orbit stagemode는 속성 하나로 인터랙티브 3D를 제공합니다.”¹

정확한 각도가 필요할 때는 대신 자바스크립트로 모델을 구동하세요. entityTransform 속성은 “자바스크립트를 통해 정확한 시야각을 설정할 수 있게” 해 줍니다.¹ 이를 사용하려면 먼저 orbit을 비활성화해야 합니다. stagemode 속성을 제거하거나 "none"으로 설정하면 됩니다.¹ 세션은 수동 변환이 모델을 보이는 영역 밖으로 회전시킬 경우 일부분이 잘리거나 가려질 수 있으므로 위치를 조정해야 할 수 있다고 경고합니다.¹ “3D 공간에서 모델의 방향을 나타내는” DOMMatrix로 방향을 만들고, rotateSelf를 호출해 회전을 정의한 뒤 이를 할당합니다.

// disable orbit: <model stagemode="none"> in the markup

// capture the original orientation up front, for Reset
const initialTransform = model.entityTransform;

// Side view: rotate 135 degrees around the Y axis
sideButton.addEventListener("click", () => {
  const matrix = new DOMMatrix();
  matrix.rotateSelf(0, 135, 0);
  model.entityTransform = matrix;
});

// Reset to the original orientation
resetButton.addEventListener("click", () => {
  model.entityTransform = initialTransform;
});

변환을 할당하면 뷰가 즉시 전환됩니다. 전환을 매끄럽게 하기 위해, 세션은 requestAnimationFrame으로 회전에 애니메이션을 적용합니다. “경쾌하면서도 부드럽게 느껴지는 0.5초”인 500밀리초의 애니메이션 지속 시간을 사용해, 프레임에 걸쳐 회전을 이징하고 매 프레임마다 새로운 DOMMatrix로 entityTransform을 업데이트합니다.¹ Apple의 표현 그대로의 솔직한 트레이드오프는 이렇습니다. 커스텀 변환은 “완전한 제어권을 주지만, 바운딩 박스, 클리핑, 수동 애니메이션 코드 같은 추가 작업이 필요합니다.”¹ 필요할 때는 스크립트 기반 변환을 택하고, 그렇지 않을 때는 stagemode="orbit"에 기대세요.

베이크된 애니메이션을 재생한 뒤 AR로 이동하기

모델은 자체 모션을 담을 수도 있습니다. 애니메이션은 “보통 Blender나 Maya 같은 3D 도구에서 제작되어 USDZ 파일로 베이크”되며, 이 요소는 “첫 번째 애니메이션 트랙을 재생”합니다.¹ 자바스크립트 두 줄로 재생을 제어합니다. 모델에 playbackRate를 설정한 뒤 play() 메서드를 호출하면 됩니다. 양수 값은 정방향으로 재생하고 음수 값은 역방향으로 재생하며, 세션은 더 빠른 재생을 위해 5와 -5를 사용합니다.

function play(rate) {
  model.playbackRate = rate;   // positive plays forward, negative reverses
  model.play();
}

play(5);    // fast forward
play(-5);   // fast reverse

마지막 단계는 제품을 화면 밖으로 꺼내 실제 공간 안으로 가져옵니다. “model을 rel="ar" 속성을 가진 <a> 태그로 감싸 동일한 리소스를 가리키게 하면, iOS와 iPadOS에서 여러분의 고객은 완전한 AR Quick Look 경험을 얻습니다.”¹

<a rel="ar" href="mallet.usdz">
  <model src="mallet.usdz">
    <img src="mallet.jpg" alt="캠핑용 망치">
  </model>
</a>

visionOS에서는 이 요소가 이미 3D를 “웹의 자연스러운 일부처럼 느껴지게” 했습니다. 고객이 “제품을 페이지 밖으로 끌어내 마치 손안에 든 것처럼 살펴보게” 해 주는 입체 렌더링과 함께, Safari에서 방문자를 장면 안에 들여보내는 몰입형 웹사이트 환경을 구동합니다.¹

더 작게 출시하기

로컬 파일은 멋져 보이지만, 같은 파일도 인터넷을 거치면 느리게 로드됩니다. 세션은 모델에 명령줄 도구인 usdcrush를 실행합니다. “품질 변화 없이 파일이 7.9MB에서 1.9MB로 줄어들고”, Safari에서 나란히 연 두 버전은 똑같아 보입니다.¹ 동반 도구인 usdrecord는 아직 썸네일이나 폴백 이미지가 없을 때 3D 파일에서 직접 그것을 생성하며, 출력 형식이나 파일 내 커스텀 카메라로 렌더링하는 등의 옵션을 제공합니다.¹ 두 도구 모두 더 큰 USD 모음의 일부로서 “이미 여러분의 Mac에 설치되어” 있으며, 세션은 카탈로그 전체에 걸쳐 usdrecord를 스크립트로 실행할 수 있다고 언급합니다.¹ 형식 자체에 대해서는, Alliance for OpenUSD가 변환 도구와 함께 전체 USDZ 명세를 “명확하고 벤더 중립적인 참고 자료”로 공개합니다.¹

랩이 크기와 로딩에 관해 더한 것

WWDC 랩은 세션이 열어 둔 몇 가지 세부 사항을 채워 주었습니다.

압축과 관련해, usdcrush는 이제 텍스처를 AVIF로 인코딩합니다. 이전에는 JPEG를 사용했습니다.² Apple은 또한 적절한 메시 압축 형식에 관해 Alliance for Open Media와 논의 중이라고 밝혔습니다.²

크기와 관련해, 패널은 명확한 상한선을 제시하지 않았지만 페이지 내 모델의 최대 시각적 품질은 약 10MB 정도에 자리한다고 시사했습니다. 몰입형 환경은 정당하게 더 클 수 있습니다.²

로딩과 관련해, 패널은 한 가지 공백을 인정했습니다. 오늘날 모델의 로딩 상태를 위한 CSS 의사 클래스가 없으므로, 앞서 다룬 ready 프로미스가 그 일을 위한 도구입니다.² 패널은 또한 기억해 둘 만한 2단계 구분을 그었습니다. 다운로드된 바이트는 리소스가 처리되어 사용 가능한 상태와 같지 않다는 것입니다.²

핵심 정리

웹 개발자를 위해: - 오늘 바로 <model>을 추가하되 내부에 <img> 폴백을 중첩하세요. 그러면 지원하지 않는 브라우저는 정적 이미지로 우아하게 격하되고, 지원하는 Safari는 자동으로 인터랙티브 3D로 업그레이드됩니다.¹ - 표시 여부를 ready 프로미스에 게이트하고 실패는 catch에서 처리하세요. 수 메가바이트짜리 USDZ는 로드에 실제 시간이 걸리기 때문입니다.¹

3D 아티스트를 위해: - 첫 번째 애니메이션 트랙을 Blender나 Maya에서 USDZ로 베이크하세요. 이 요소가 그것을 재생하며, 정방향과 역방향 제어를 위한 playbackRate와 play()를 노출합니다.¹ - 출시 전에 usdcrush를 실행해 눈에 띄는 품질 손실 없이 파일 크기를 줄이고, usdrecord로 모델 자체에서 <img> 폴백을 생성하세요.¹

제품 및 커머스 팀을 위해: - 속성 하나로 인터랙티브 회전을 제공하는 stagemode="orbit"을 사용하고, 정확한 각도나 커스텀 UI가 필요한 경우에만 스크립트 기반 entityTransform을 남겨 두세요.¹ - model을 <a rel="ar">로 감싸 iOS와 iPadOS 쇼핑객이 AR Quick Look으로 제품을 자신의 공간에 배치할 수 있게 하세요.¹

FAQ

HTML <model> 요소는 2026년에 완전히 새로 나온 것인가요?

아니요. Apple은 <model> 요소를 visionOS에서 먼저 출시했습니다. WWDC 2026은 동일한 마크업으로 이를 iOS, iPadOS, macOS Safari로 확장하고, 그 주변의 자바스크립트 API(ready 프로미스, entityTransform, 베이크된 애니메이션 재생, <a rel="ar">)를 성숙시킵니다.¹

<model>을 지원하지 않는 브라우저를 위한 폴백은 어떻게 추가하나요?

<model> 태그 안에 <img> 태그를 중첩하세요. 구버전 Safari나 아직 이 요소를 지원하지 않는 브라우저는 대신 그 이미지를 렌더링하므로, 방문자는 여전히 제품을 볼 수 있습니다. 폴리필도 제공되지만, visionOS 입체 디스플레이 같은 일부 기능은 폴리필할 수 없습니다.¹

<model> 요소는 어떤 파일 형식을 사용하나요?

지오메트리, 머티리얼, 텍스처, 애니메이션을 단일 파일로 패키징하는 Universal Scene Description의 압축본인 USDZ입니다. Safari는 다른 형식도 지원하지만, Apple은 최상의 경험을 위해 USDZ를 권장하며, Alliance for OpenUSD가 전체 명세를 공개합니다.¹

model을 인터랙티브하게 만들려면 어떻게 하나요?

속성 하나로 좌우 자유 회전을 제공하려면 stagemode="orbit"을 설정하세요. 정확한 각도가 필요하면 stagemode="none"으로 설정하고, rotateSelf로 DOMMatrix를 만들어 model의 entityTransform 속성에 할당하며, 부드러운 전환을 원하면 requestAnimationFrame으로 프레임에 걸쳐 애니메이션을 적용하세요.¹

웹 model을 증강 현실로 가져가려면 어떻게 하나요?

<model>을 rel="ar" 속성을 가진 <a> 태그로 감싸 동일한 USDZ 리소스를 가리키게 하세요. iOS와 iPadOS에서는 이것이 방문자에게 완전한 AR Quick Look 경험을 제공하여 제품을 자신의 환경에 배치할 수 있게 합니다.¹

<model> 요소는 Apple이 자사 플랫폼 전반에 걸쳐 밀고 있는 동일한 USD 토대 위에서 작동합니다. Apple의 새로운 Swift 네이티브 USD 프레임워크인 USDKit과 visionOS 27의 새로운 기능의 공간 컨텍스트를 참고하세요. 라이브러리보다 태그를 택하자는 주장은 노 빌드 선언문과 HTML은 에이전트가 원하는 형식이다의 더 넓은 논의와 맞닿아 있습니다. 전체 시리즈 허브는 Apple Ecosystem Series입니다.

References