🛍️ USobjet
3D 모델을 활용한 커스터마이징 가능한 상품 미리보기 시스템
상태: 🟢 운영 중 서비스 URL: usobjet.vercel.app
서비스 소개
USobjet은 가방, 지갑 등의 상품을 3D로 미리보기하고, 다양한 옵션(색상, 크기, 재질)을 실시간으로 변경하며 확인할 수 있는 시스템입니다.
주요 기능
- 3D 모델 관리: 상품별 3D 모델 등록 및 관리
- 실시간 미리보기: 옵션 선택에 따른 3D 모델 실시간 변경
- 옵션별 가격 계산: 색상, 크기, 재질 선택에 따른 가격 자동 계산
- 썸네일 자동 생성: 3D 모델 기반 상품 이미지 자동 생성
- 관리자 대시보드: 상품 및 3D 모델 통합 관리
기술 스택
| 분류 | 기술 |
|---|---|
| Frontend | React, TypeScript, Tailwind CSS |
| 3D Engine | Three.js, React Three Fiber, @google/model-viewer |
| Backend | NestJS, TypeScript |
| Database | Supabase (PostgreSQL + Storage) |
| State | Zustand |
| Build | Vite, pnpm workspaces |
| Deployment | Vercel (Frontend), Railway (Backend) |
아키텍처
usobjet/
├── apps/
│ ├── api/ # NestJS 백엔드 API
│ └── admin-app/ # React 관리자 패널
├── packages/ # 공유 패키지
└── supabase/ # Database 설정핵심 기술
- WebGL 3D 렌더링: Three.js 기반 실시간 3D 모델 렌더링
- IndexedDB 캐싱: 썸네일 및 모델 데이터 클라이언트 캐싱
- Storage Factory 패턴: Mock/Supabase 저장소 추상화
개발 배경
온라인 쇼핑에서 상품의 실물 확인이 어려운 문제를 해결하고자 했습니다. 특히 커스터마이징 가능한 상품(가방, 지갑 등)의 경우, 옵션 조합에 따른 결과물을 미리 확인할 수 있는 3D 미리보기 시스템을 구축했습니다.
현재 상태
완료된 기능
- 3D 모델 라이브러리 및 썸네일 자동 생성
- 상품-옵션-3D모델 연결 시스템
- 상품 미리보기 페이지
- Supabase 통합 (PostgreSQL + Storage)
- Railway 배포 및 Slack 알림
개발 예정
- 고객용 공유 링크 생성
- 옵션 통계 대시보드
- Cafe24 연동
- AR 뷰어
배포 URL
| 서비스 | URL |
|---|---|
| User App | usobjet.vercel.app |
| Admin App | usobjet-admin-app.vercel.app |
| API Server | Railway (Private) |
링크
- GitHub: codemon-ai/usobjet