이 글은 누구를 위한 것인가
- 가구·인테리어 상품 반품이 "집에 안 어울려요" 때문인 팀
- 패션 가상 피팅을 도입하고 싶은 쇼핑몰
- AR 기능을 앱 없이 웹에서 구현하고 싶은 개발자
들어가며
가구 이커머스의 반품 1위 이유는 "실제 집에 놓으니 달라요"다. AR 미리보기 하나로 이 반품을 60-70% 줄일 수 있다. 앱 설치 없이 웹에서 작동하는 WebAR이 2026년 기준 가장 현실적인 방법이다.
이 글은 bluefoxdev.kr의 이커머스 AR 미리보기 가이드 를 참고하여 작성했습니다.
1. AR 미리보기 유형별 전략
[AR 미리보기 유형]
1. 상품 배치 (Placement AR):
예: 가구, 가전, 인테리어
기술: Google Model Viewer, iOS AR Quick Look
구현: .glb/.usdz 3D 파일 + WebAR
효과: 반품 35-60% 감소
2. 가상 피팅 - 뷰티:
예: 립스틱, 아이섀도, 헤어 색상
기술: Perfect Corp YouCam, ModiFace API
효과: 전환율 2-3배 상승
3. 가상 피팅 - 패션:
예: 안경, 모자, 시계
기술: Vue.ai, Wanna, Snap Try-On
효과: 교환율 40% 감소
4. 가상 피팅 - 의류:
예: 상의, 하의 전신 피팅
기술: 신체 스캔 필요, 복잡도 높음
효과: 아직 정확도 한계
[우선순위 권장]
가구/인테리어 쇼핑몰 → 상품 배치 AR
뷰티 쇼핑몰 → 뷰티 가상 피팅
안경/시계 → 착용 가상 피팅
2. Google Model Viewer 웹 AR 구현
// 상품 AR 미리보기 컴포넌트
"use client";
import { useEffect, useRef } from "react";
interface ARViewerProps {
glbUrl: string; // .glb 3D 파일 (Android/Web)
usdzUrl: string; // .usdz 파일 (iOS)
productName: string;
posterUrl: string; // 로딩 중 미리보기 이미지
}
export function ARProductViewer({ glbUrl, usdzUrl, productName, posterUrl }: ARViewerProps) {
const modelViewerRef = useRef<HTMLElement>(null);
useEffect(() => {
// Google Model Viewer 스크립트 로드
if (!document.querySelector('script[src*="model-viewer"]')) {
const script = document.createElement("script");
script.type = "module";
script.src = "https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js";
document.head.appendChild(script);
}
}, []);
return (
<div className="ar-viewer-container">
{/* @ts-ignore - Custom element */}
<model-viewer
ref={modelViewerRef}
src={glbUrl}
ios-src={usdzUrl}
poster={posterUrl}
alt={`${productName} 3D 미리보기`}
ar
ar-modes="webxr scene-viewer quick-look"
camera-controls
touch-action="pan-y"
style={{ width: "100%", height: "400px" }}
loading="lazy"
>
<button
slot="ar-button"
className="ar-button"
style={{
background: "#fff",
border: "1px solid #ddd",
borderRadius: "8px",
padding: "12px 16px",
cursor: "pointer",
position: "absolute",
bottom: "16px",
right: "16px",
}}
>
📱 내 공간에서 보기
</button>
</model-viewer>
<p className="text-sm text-gray-500 mt-2 text-center">
실제 크기로 공간에 배치해보세요
</p>
</div>
);
}
3. 3D 모델 최적화 파이프라인
import subprocess
import os
async def optimize_3d_model(input_path: str, product_id: str) -> dict:
"""
3D 모델 최적화: GLB + USDZ 생성
gltf-transform 사용
"""
output_dir = f"models/{product_id}"
os.makedirs(output_dir, exist_ok=True)
# 1. GLB 파일 최적화 (폴리곤 감소, 텍스처 압축)
glb_output = f"{output_dir}/model.glb"
subprocess.run([
"npx", "gltf-transform", "optimize",
input_path, glb_output,
"--compress", "draco", # Draco 압축
"--texture-compress", "webp", # WebP 텍스처
"--simplify", # 폴리곤 단순화
"--simplify-ratio", "0.75", # 75% 유지
], check=True)
# 2. iOS용 USDZ 변환
usdz_output = f"{output_dir}/model.usdz"
subprocess.run([
"python3", "-m", "usdzconvert",
glb_output, usdz_output,
], check=True)
# 파일 크기 확인
glb_size = os.path.getsize(glb_output)
usdz_size = os.path.getsize(usdz_output)
# 목표: GLB < 5MB, USDZ < 10MB
if glb_size > 5 * 1024 * 1024:
await further_optimize(glb_output)
# CDN 업로드
glb_url = await upload_to_cdn(glb_output, f"ar/{product_id}/model.glb")
usdz_url = await upload_to_cdn(usdz_output, f"ar/{product_id}/model.usdz")
return {
"glb_url": glb_url,
"usdz_url": usdz_url,
"glb_size_kb": glb_size // 1024,
"usdz_size_kb": usdz_size // 1024,
}
마무리
AR 미리보기 도입은 3D 모델 제작이 가장 큰 허들이다. 신규 상품부터 3D 촬영(사진측량 방식)으로 시작하고, 기존 상품은 핵심 상품 50개만 먼저 제작하는 것이 현실적이다. Google Model Viewer만으로 iOS(AR Quick Look)·Android(Scene Viewer) 모두 지원되므로 별도 앱 없이 웹에서 구현 가능하다.