Safari HTML model로 상품 3D 넣기, 다른 브라우저에는 무엇이 보일까?

model 요소를 지원하지 않는 브라우저에는 상품 사진을 남긴다

Safari의 새 <model> 요소를 쓴다고 다른 브라우저에도 3D 렌더러가 생기는 것은 아니다. 요소 안에 img를 넣으면 model을 지원하지 않는 브라우저에 대체 이미지를 제공할 수 있다. model 제안 문서의 대체 콘텐츠 예제도 이 구조를 사용한다.

Safari 27은 이전에 visionOS에서 제공하던 요소를 iOS·iPadOS·macOS로 넓혔다. 지원 환경에서는 별도 JavaScript 뷰어 라이브러리를 불러오지 않고 브라우저가 3D 파일을 표시한다. 상품 하나에 적용하는 최소 형태는 다음과 같다.

<model src="/products/chair.usdz"
       stagemode="orbit"
       style="display: block; width: 100%; height: 320px;">
  <img src="/products/chair.jpg"
       alt="원목 프레임과 회색 좌판을 갖춘 의자"
       style="max-width: 100%; height: auto;">
</model>

파일 경로는 실제 상품 에셋으로 바꿔야 한다. stagemode="orbit"는 지원 환경에서 사용자가 모델을 돌려 보는 상호작용을 켠다. 미지원 환경에서 나오는 사진에는 이 회전 기능이 없다. 여러 형식을 제공할 때는 source 목록을 쓸 수 있지만, 목록에 파일을 넣는 것과 모든 브라우저가 그 형식을 읽는 것은 다르다.

model을 지원해도 파일을 불러오지 못할 수 있다

브라우저가 model을 지원하는지와 상품 파일이 정상적으로 열리는지는 서로 다른 조건이다. 요소가 있어도 URL이 틀리거나 파일을 해석할 수 없으면 3D 화면이 완성되지 않는다.

ready Promise는 모델 파일을 가져와 처리하면 완료되고, 가져오기나 해석에 실패하면 거부된다. 따라서 준비 중 표시를 없애는 성공 처리와 함께 실패 시 상품 사진을 표시하는 처리도 마련해야 한다.

안쪽 img 하나만 넣고 모든 실패 화면을 처리했다고 판단해서는 안 된다. ready.catch(...)에서 모델 영역을 숨기고 별도의 사진 영역을 보여주는 식으로 오류 상태를 명시할 수 있다. 상품명·규격·가격 같은 정보는 3D 표시가 성공해야만 읽히는 구조로 만들지 않는 편이 낫다.

다른 브라우저에도 회전 기능이 필요하면 뷰어를 유지한다

<model>과 <model-viewer>는 이름이 비슷하지만 같은 요소가 아니다. 전자는 브라우저의 네이티브 기능이고, 후자는 JavaScript 의존성을 추가하는 웹 컴포넌트다. model-viewer는 glTF·GLB 모델을 웹페이지에서 보여주고 조작하는 용도로 쓰인다.

model-viewer 프로젝트는 evergreen 데스크톱·모바일 브라우저의 최근 주요 2개 버전과 Mac·iOS Safari의 최근 2개 버전을 지원 대상으로 안내한다. 이는 model 요소의 지원 범위가 아니다. 또 페이지 안에서 3D가 보인다는 사실만으로 AR도 동작한다고 판단할 수는 없다.

상품 하나로 성공·미지원·실패 화면부터 시험한다

도입 여부는 같은 상품을 다른 상태에서 보여주며 결정할 수 있다. 우선 지원 Safari에서 파일이 열리고 회전하는지 확인한다. 다음으로 model 미지원 브라우저에서 사진과 대체 텍스트가 남는지 확인한다.

세 번째는 지원 브라우저에서 파일 경로를 일부러 잘못 지정한 테스트다. 로딩 중 표시가 끝없이 남는지, 준비한 오류 화면이 나오는지 살핀다. 네 번째는 다른 브라우저에서도 회전이 필요한 상품에 대해 별도 뷰어 경로를 시험하는 일이다.

사진으로 충분한 상품 페이지에는 네이티브 3D를 추가 선택지로 붙일 수 있다. 모든 방문자에게 조작 가능한 3D가 핵심이라면 이미지 대체만으로 끝내지 말고, 대상 브라우저에서 작동하는 뷰어까지 준비해야 한다.