Shopify와 WooCommerce 상품 페이지에 AR 추가하기
한눈에 보기: 상품 페이지에 AR을 넣으려면 상품의 실제 크기에 맞춘 3D 모델이 GLB(Android와 웹), USDZ(iPhone) 두 가지로 필요합니다. Shopify는 3D 모델을 상품 미디어로 지원하고, WooCommerce나 다른 사이트에서는 무료 model-viewer 컴포넌트에 두 파일을 넣어 삽입합니다.
1단계: 3D 파일 만들기
- 평면 상품(아트 프린트, 포스터, 캔버스, 러그, 벽지 샘플): 상품 사진을 jpgtousdz에 올리고 실제 가로 또는 세로 길이를 입력하세요. 그 크기의 GLB와 USDZ를 받을 수 있습니다.
- 입체 상품(꽃병, 의자, 신발): 상품 주위를 천천히 돌며 동영상을 찍고 동영상 3D 변환을 사용해 실제 높이를 입력하세요.
- 상품 페이지가 느려지지 않도록 파일은 작게(텍스처 2048px 이하) 유지하세요.
2a단계: Shopify
- Shopify 관리자에서 상품을 열고 미디어로 이동해 GLB 파일을 3D 모델로 업로드하세요.
- Shopify가 자체 3D 뷰어로 보여 주며, 이를 지원하는 테마는 휴대폰에서 내 공간에서 보기 버튼을 추가합니다.
- iPhone과 Android 폰에서 상품을 확인하세요. 현재 파일 크기 제한과 지원 테마는 Shopify 고객센터에서 볼 수 있습니다.
2b단계: WooCommerce, WordPress 또는 다른 웹사이트
GLB와 USDZ를 미디어 라이브러리에 업로드한 뒤, 상품 설명에 맞춤 HTML 블록을 추가하고 model-viewer를 넣으세요.
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer src="/media/print-50x70.glb" ios-src="/media/print-50x70.usdz"
ar ar-modes="quick-look scene-viewer webxr" ar-placement="wall"
camera-controls alt="50 x 70 cm 프린트"></model-viewer>2c단계: 코드 없이 하는 방법
페이지를 직접 수정할 수 없다면, 상품의 jpgtousdz AR 뷰어 링크로 연결되는 버튼이나 QR 코드를 추가하세요. 앱 없이 iPhone과 Android에서 AR로 열립니다.
공개 전 체크리스트
| 확인 항목 | 이유 |
|---|---|
| 실제 크기가 맞는지 | 고객은 AR로 크기를 판단합니다. 크기가 틀리면 반품으로 이어집니다. |
| 배치가 맞는지 (벽 또는 바닥) | 작품은 벽에, 가구는 바닥에 놓입니다. |
| iPhone과 Android에서 모두 작동하는지 | 각각 다른 파일을 사용합니다. |
| 대체 텍스트를 넣었는지 | 접근성과 검색에 도움이 됩니다. |
자주 묻는 질문
Shopify에 USDZ가 필요한가요?
Shopify에는 GLB를 올리면 표시는 알아서 처리됩니다. 테마나 다른 채널에서 필요할 수 있으니 USDZ도 함께 보관해 두세요.
WooCommerce는 AR을 기본으로 지원하나요?
아니요. 플러그인을 쓰거나 위 예시처럼 GLB, USDZ 파일과 함께 model-viewer를 삽입하세요.
비용은 얼마인가요?
model-viewer는 무료입니다. jpgtousdz의 사진 AR 변환은 처음 한 번 무료이고 이후에는 요금제에 포함됩니다. API는 사진당 $0.15, 동영상 3D 모델당 $1.50입니다.