DeskForge
전자제품 매장을 위한 3D 책상 구성기: 고객이 실제 자기 책상 위에 작업 공간을 꾸미고 세트 전체를 장바구니에 담습니다.


과제
모니터, 모니터 암, 책상을 온라인으로 사는 사람은 모든 것이 서로 맞고 함께 동작할지 알 수 없어서 망설이거나, 한 번에 하나씩 사거나, 맞지 않는 것을 반품합니다.
해결책
- 3D 구성기: 물리 기반 재질, 부드러운 그림자와 앰비언트 오클루전, 둥근 모서리, 실제 배열을 따른 키보드, 실제 상품 색상, Blender와 GLB 파일로 만든 모델, RGB 조명, 무광 또는 유광 화면을 갖춘 사실적인 장면; 메시 병합을 활용한 렌더링 예산과 휴대폰용 품질 모드.
- 책상과 방: 파라메트릭 책상(직선형, 홈 파인 형, L자형), 방 안에서의 책상 위치, 가구, 창문, 소품, 인테리어 프리셋 여섯 가지.
- 규칙 엔진: 배치, 인체공학, 거치 호환성(VESA, 하중, 클램프)을 점검하고 경고와 원클릭 수정 제공; 모니터 1~3대 레이아웃; 모니터 암과 스탠드; 치수 모드.
- 카탈로그와 커머스: 관리 화면, 가져오기, OpenAPI를 갖춘 카탈로그 API; 14개 카테고리에 걸친 사진 포함 실제 데모 상품 38개; 옵션, 할인, 품절; 호환 상품 추천과 “빠진 품목” 안내; 클릭 한 번으로 구성 전체를 장바구니에 담기.
- 매장에 삽입: gzip 압축 시 10 KB 미만의 로더 스크립트, frame-ancestors CSP를 적용한 임베드 모드와 데모 스토어, 상품 페이지용 간단한 위젯.
- 구성 저장: 짧은 링크로 저장, 이름 지정, “My setups”, Open Graph 미리 보기가 있는 공유 페이지, PNG와 PDF 내보내기; 실행 취소와 다시 실행.
- 분석: 이벤트 계획, 수집과 퍼널, 동의 기반 GA4 및 Meta Pixel 전송, 주문 기여도와 평균 주문 금액.
- 보안: root로 실행되지 않는 컨테이너, 요청 본문 크기 제한, IPv6를 고려한 요청 속도 제한, 임베드 허용 출처 목록.
- 아키텍처: 렌더링 엔진을 고르기 전에 진행한 벤치마크를 포함해 아키텍처 결정 기록 11건.
결과
구성기, 카탈로그, 임베드, 분석 기능이 완성되어 테스트로 검증되었으며, 첫 번째 매장 연동으로 Shopify를 계획하고 있습니다. 측정 결과: 상품 사진 60장이 썸네일로 18.8 MB에서 124.5 KB가 되었고, 지연 로드 임베드 프레임으로 LCP가 35~40 ms 줄었으며, 인테리어 프리셋은 135 ms 이내에 전환됩니다.