사례 연구로 돌아가기
Building productsbuilding productsbike racks3d viewersite furnishings
Dero: 코드 없이 임베드한 3D 자전거 거치대 구성 도구
Dero·
Dero는 미네소타주 미니애폴리스에 본사를 둔 자전거 주차 시설 제조업체이자 PlayCore 계열사입니다. 상업용 및 맞춤형 자전거 거치대, 공공 자전거 수리 스테이션, 자전거 쉘터, 자전거 보관함, 현장 편의 시설 및 거리 경관 제품을 제조하며, 단일 거치대를 구매하는 주택 소유자부터 수백 명의 라이더를 위한 자전거실을 계획하는 건축가까지 1995년부터 고객을 지원해 왔습니다. 제품 페이지에는 브로셔, 제출 자료, 설치 가이드, CAD, Revit 및 SketchUp 파일, CSI 사양서 등 설계 지정자가 필요로 하는 자료가 제공됩니다.
이 중 7개 페이지에는 이제 Simplio3D로 제작된 3D 자전거 거치대 구성 도구도 있으며, 제목은 간결하게 3D Viewer로 표시됩니다. 의도적으로 기본 기능에 집중했습니다. 방문자는 거치대 설치 방식을 선택하고, 해당되는 경우 린 바를 추가하며, 마감재를 시험해 볼 수 있고, 거치대는 3D로 즉시 변경됩니다. 가격, 장바구니, 양식은 없으며, dero.com에 적용하는 데에는 코드 작성 대신 임베드 스니펫을 붙여넣기만 하면 되었습니다.
프로젝트 한눈에 보기
| 항목 | 세부 정보 |
|---|---|
| 클라이언트 | 미네소타주 미니애폴리스의 Dero, PlayCore 계열사: 1995년부터 자전거 거치대, 맞춤형 거치대, 공공 자전거 수리 시설, 자전거 쉼터, 자전거 보관함, 현장 시설물 및 거리 경관 제공 |
| 웹사이트 | dero.com, Dero 자체 스토어와 견적 목록을 갖춘 WordPress 사이트 |
| 제품 | 상업용 자전거 거치대 7종: Hoop Rack, Hoop Rack Heavy Duty, Downtown Rack, Arc Rack, Swerve Rack, Bike Hitch 및 Bike Bike Rack |
| 3D 뷰어의 기능 | 선택한 설치 방식, 해당 거치대에 있는 경우 린 바의 사용 여부, 22가지 마감 옵션 중 하나를 적용한 거치대를 3D로 보여주며 선택 사항을 요약해 제공합니다 |
| 제외되는 항목 | 가격, 장바구니 및 양식. 구매와 견적 요청은 Dero 제품 페이지에 이미 있던 옵션을 통해 계속 진행됩니다 |
| 설정 | 제품 페이지의 “3D 뷰어” 제목 아래에 스니펫을 붙여넣어 임베드하는 랙당 기본 구성기 1개. 플러그인, 쇼핑몰 연동, 별도 코드 작성이 필요 없습니다 |
| 플랫폼 | Simplio3D의 이전 버전 |
고객이 필요로 한 것
랙 자체의 마감
Dero의 랙은 아연도금, 스테인리스 스틸 또는 다양한 분체도장 색상으로 제공됩니다. 작은 색상 샘플만으로는 전체 랙에 적용된 색상이 어떻게 보이는지 알기 어렵습니다.
표면 설치 또는 매립 설치
이 모든 랙은 베이스 플레이트로 바닥에 볼트 고정하거나 지면에 매립 설치할 수 있으며, 랙이 바닥과 맞닿는 부분의 모습도 서로 다릅니다.
린 바가 있는 위치
7개의 랙 중 4개에는 선택형 린 바를 추가할 수 있었기 때문에, 미리보기에서 이를 추가하고 다시 제거할 수 있는 방법이 필요했습니다.
미리보기일 뿐, 두 번째 쇼핑몰이 아닙니다
각 제품 페이지에는 이미 구매 또는 견적 요청 옵션이 마련되어 있었습니다. 3D 뷰는 고객의 선택을 돕기만 하면 됐습니다.
제품군 전반에 걸친 일관된 사용 방식
7개의 랙 모두에서 동일한 선택지를 같은 위치에 제공해야 했으므로, 방문자는 하나의 3D Viewer를 사용해 보면 모두 익힐 수 있습니다.
개발 프로젝트 불필요
플러그인이나 개발자, 스토어 변경 없이 기존 WordPress 제품 페이지에 뷰어를 적용해야 했습니다.
솔루션: 7개 제품 페이지에 적용된 3D 자전거 거치대 구성 도구
dero.com에서는 모든 거치대에 설명, 문서 및 다운로드 자료와 함께 Dero의 구매 또는 견적 요청 옵션이 포함된 전용 제품 페이지가 있습니다. Dero가 자전거 주차의 표준이라고 부르는 Hoop Rack부터 자전거 모양의 Bike Bike Rack까지, 이 중 7개 제품에는 페이지 하단에 3D Viewer 섹션이 새로 추가되었습니다.
각 3D Viewer는 기본형 구성 도구입니다. 연회색 배경에서 거치대를 회전하고 확대할 수 있으며, 옆 패널에는 설치 방식, 린 바, 마감재의 세 가지 선택 항목만 있습니다. 가격은 표시되지 않고, 장바구니에 추가되거나 전송되는 정보도 없습니다. 유일한 목적은 거치대를 보여주는 것이며, 그래서 설정할 내용도 매우 적었습니다.
설치 방식, 린 바, 마감재를 3D 거치대에 표시
세 가지 선택 항목은 설치 후 거치대의 외관을 바꾸는 요소입니다.
- 설치 방식. Surface와 In-Ground를 선택하는 드롭다운입니다. Surface는 볼트로 고정하는 베이스 플레이트가 있는 거치대를 표시하고, In-Ground는 이를 지면에 매립되는 더 긴 다리로 바꿉니다.
- 린 바. Hoop Rack, Hoop Rack Heavy Duty, Downtown Rack 및 Arc Rack에서 제공되는 스위치입니다. 켜면 거치대 가로 방향으로 바가 표시되며, 나머지 3개 거치대에는 이 스위치가 표시되지 않습니다.
- 마감재. 모든 거치대에 동일하게 적용되는 22가지 스와치입니다. Galvanized와 Stainless를 비롯해 Black, Flat Black, White, Light Gray, Red, Yellow, Bright Yellow, Orange, Blue, Sky Blue, Green, Light Green, Hunter Green, Sepia Brown, Bronze, Silver, Dark Purple, Wine Red, Beige, Iron Gray가 있습니다. 아연도금 스와치는 단색이 아니라 아연도금 강철의 얼룩진 질감을 보여 줍니다.
패널 아래의 작은 (i) 버튼을 누르면 선택 내용을 텍스트로 나열한 Configuration Summary가 열립니다. 예를 들어 Swerve Rack에서는 Select Mount: Surface 및 Select Finish: Wine Red로 표시됩니다. 방문자는 동일 페이지에서 바로 구매 또는 견적 옵션으로 이동할 수 있습니다.
각 3D 뷰어에서 제공하는 기능
각 제품 페이지에서 고유한 3D 뷰어를 제공하는 7가지 랙.
| 랙 | Dero의 설명 | 3D 뷰어에서 선택 가능한 옵션 |
|---|---|---|
| 후프 랙 | 자전거 주차의 표준: 완전한 반경으로 구부러진 두꺼운 파이프, 자전거 2대 주차 가능 | 장착 방식, 린 바, 22가지 마감 |
| 후프 랙 헤비 듀티 | 표준 후프 랙보다 더 크고 두꺼운 파이프 | 장착 방식, 린 바, 22가지 마감 |
| 다운타운 랙 | 튼튼한 사각 튜브와 완벽한 지지를 위한 넓은 폭; 자전거 2대 주차 | 장착 방식, 린 바, 22가지 마감 |
| Arc Rack | 깔끔한 기하학적 라인의 사각 튜브; 자전거 2대 주차 | 장착 방식, 린 바, 22가지 마감 |
| Swerve Rack | 자전거 프레임 형태를 따라 제작한 두꺼운 파이프; 자전거 2대 주차 | Mount, 22가지 마감 |
| Bike Hitch | 완만한 곡률의 벤드가 적용된 기둥과 링, 슬림한 실루엣; 자전거 2대 주차 | Mount, 22가지 마감 |
| 자전거 모양 자전거 거치대 | 자전거 형태로 디자인된 거치대로, 기능적인 거리 예술 작품처럼 보이며 자전거 2~4대를 주차할 수 있습니다 | Mount, 22가지 마감 |
Dero와 같은 3D 뷰어 설정 방법
코딩이 전혀 필요 없는 5단계입니다.
3D 모델 업로드
새 프로젝트에 거치대 모델을 추가하세요. Simplio3D은 GLB, GLTF, FBX, OBJ, STL 및 DAE 파일을 지원합니다.
설치 방식 추가
Surface 및 In-Ground 옵션이 있는 드롭다운으로, 각 옵션은 모델에 해당하는 베이스를 표시합니다.
린 바 추가
린 바가 있는 랙에서 바를 표시하거나 숨기는 스위치입니다.
마감재 추가
마감재마다 스와치 하나씩: 아연도금 강철에는 텍스처를, 나머지 각 마감재에는 색상을 적용합니다.
임베드 스니펫 붙여넣기
컨피규레이터의 iframe 스니펫을 복사하여 제품 페이지에 붙여넣으세요. 이후 Simplio3D에서 변경한 내용은 페이지를 다시 수정하지 않아도 반영됩니다.
Dero의 구매 및 견적 옵션 옆에서 제공되는 미리 보기
Dero의 제품 페이지는 이미 판매 기능을 갖추고 있습니다. 각 페이지에는 마감재, 설치 방식, 해당 시 린 바를 선택한 뒤 수량을 입력하고 Add to cart 및 Add to quote를 이용할 수 있는 Dero 자체 구매 또는 견적 요청 옵션이 있으며, 대량 주문은 견적 목록을 통해 진행됩니다. 3D Viewer는 같은 페이지에 배치되지만 이 기능들에는 영향을 주지 않습니다.
자체 가격, 장바구니 또는 양식이 없으며, 어디에도 정보를 전송하지 않습니다. 방문자는 원하는 설치 방식과 마감재로 거치대를 확인한 다음 Dero의 옵션에서 동일한 선택을 합니다. 이처럼 기능을 간결하게 유지했기 때문에 빠르게 공개할 수 있었습니다. 연결할 제품도, 동기화할 가격도, 누구에게 전달할 양식도 필요하지 않았습니다.
코드 작성 없이 임베드
모든 Simplio3D 구성 도구에는 복사할 수 있는 공유 링크와 iframe 스니펫이 있습니다. 각 Dero 제품 페이지에서는 이 스니펫이 3D Viewer 제목 아래에 전체 너비로 배치됩니다. 플러그인, 스크립트, 스토어 연동이 필요 없으므로, 뷰어를 게시하는 일은 하나의 페이지에 하나의 스니펫을 붙여넣는 것으로 완료됩니다.
페이지에는 해당 스니펫만 포함되므로 3D Viewer 자체는 Simplio3D에서 관리됩니다. 새 마감재나 업데이트된 모델은 그곳에서 변경할 수 있으며, 제품 페이지를 수정하지 않아도 다음번 페이지 로드 시 dero.com에 반영됩니다. 이와 같은 뷰어에 대한 자세한 내용은 3D 제품 뷰어에서 확인하세요.
결과
모든 마감을 랙에서 직접 확인
방문자는 구매하거나 견적을 요청하기 전에, 원하는 설치 방식과 린 바를 적용한 랙에서 22가지 모든 마감을 직접 확인할 수 있습니다.
7개 페이지에서 동일한 도구 제공
후프 랙부터 바이크 바이크 랙까지, 각 3D 뷰어는 동일한 세 가지 선택 항목과 동일한 마감 옵션을 제공하며 같은 방식으로 작동합니다.
사이트에서 새로 관리할 사항이 없습니다
제품 페이지에는 임베드 스니펫만 포함됩니다. 변경 사항은 Simplio3D에서 이루어지며, 스토어와 견적 목록은 기존 방식대로 계속 운영됩니다.
Dero의 이야기
Simplio3D 덕분에 설치 후 랙이 실제로 어떻게 보일지 쉽게 보여줄 수 있었습니다. 각 3D Viewer에는 장착 방식, 해당되는 경우 랙의 린 바, 그리고 전체 마감 옵션이 포함되어 있으며, 제품 페이지에 추가하는 일도 임베드 코드를 붙여넣기만 하면 됐습니다. 개발자도, 플러그인도 필요 없고 페이지 관리도 간편합니다.
Colin K.디자이너 · Dero
이 프로젝트에 관한 질문
자전거 랙을 3D로 보여주고 구매자가 장착 방식, 린 바 또는 마감 같은 옵션을 변경해 주문 전에 결과를 확인할 수 있는 도구입니다. Dero의 구성 도구는 의도적으로 기본 기능에 충실합니다. 세 가지 선택 항목과 3D 보기만 제공하며, 가격이나 양식은 포함하지 않습니다.
상업용 랙 7종인 Hoop Rack, Hoop Rack Heavy Duty, Downtown Rack, Arc Rack, Swerve Rack, Bike Hitch, Bike Bike Rack에서 이용할 수 있습니다. 각 뷰어는 dero.com의 해당 랙 제품 페이지에 있습니다.
설치 방식(표면 설치 또는 매립 설치), 옵션이 제공되는 4개 랙의 기댐 바, 그리고 아연도금 강철, 스테인리스강 및 20가지 색상을 포함한 22가지 스와치 중 마감재를 변경할 수 있습니다. 선택 요약은 각 옵션을 텍스트로 안내합니다.
Dero의 제품 페이지에는 이미 구매 또는 견적 요청을 위한 자체 옵션이 마련되어 있습니다. 3D 뷰어는 방문자의 선택을 돕는 역할만 하므로 설정과 관리가 간편합니다.
아니요. 각 3D 뷰어는 Simplio3D에서 복사하여 제품 페이지에 붙여넣는 iframe 스니펫입니다. 플러그인이나 스토어 연동이 필요 없으며, Simplio3D에서 변경한 내용은 페이지를 수정하지 않아도 자동으로 반영됩니다.
네. Simplio3D 컨피규레이터는 제품에 필요할 때 조건부 규칙, 가격 책정, 견적 또는 문의 양식, 증강 현실 기능을 추가할 수 있습니다. 다음 섹션에서는 이와 같은 프로젝트에 현재 추가할 수 있는 기능을 소개합니다.
오늘 이러한 프로젝트에 추가할 수 있는 기능
이 섹션의 내용은 이전 버전의 Simplio3D에서 실행되는 앞서 설명한 Dero의 3D Viewer에는 포함되어 있지 않습니다. 지금 자전거 거치대 또는 현장 편의 시설 제조업체가 시작한다면 다음 기능을 활용할 수 있습니다.
- 설치될 위치에서 거치대 확인. 증강 현실을 통해 앱 없이 휴대폰으로 구성된 거치대를 보도나 자전거실에 배치할 수 있습니다. iOS의 AR Quick Look, Android의 Scene Viewer, 데스크톱 브라우저에서 생성한 QR 코드를 지원합니다.
- 모델에 표시되는 상세 정보. 핫스팟은 튜브 크기나 거치 가능한 자전거 수와 같은 정보 팝업이 있는 마커를 추가하며, Scenery는 배경과 카메라를 전환합니다.
- 뷰어와 주문 양식의 동기화. 임베드된 구성 도구는 각 변경 사항을 브라우저 이벤트인
simplio3d:option.changed로 알립니다. 이를 활용하려는 사이트는 자체 스크립트 몇 줄만으로 자체 주문 양식에서 동일한 마감재와 설치 방식을 미리 선택할 수 있습니다. - 더 빠르게 확장하는 전체 제품군. 다른 거치대를 위한 첫 번째 구성 도구는 작성된 설명을 바탕으로 생성할 수 있으며, 카테고리별 일괄 추가 기능을 사용하면 공유 소재 라이브러리의 마감재 범위를 각 스와치를 수작업으로 만들지 않고 스와치 세트로 전환할 수 있습니다.
- 모든 뷰어 점검. AI 어시스턴트는 옵션 적용 범위와 조건부 로직을 감사하여, 예를 들어 모든 마감재에 소재가 할당되어 있는지 확인하고 수정안을 제안할 수 있습니다. 범위가 제한된 연결로 MCP를 통해 워크스페이스에 연결된 Claude와 같은 AI 클라이언트도 동일한 점검을 수행할 수 있으며, 가격 또는 SKU 변경 사항은 항상 사람이 적용하는 보류 중인 변경 사항으로만 전달됩니다.
모든 셔터를 위한 3D 미리보기
Evergreen Shutters가 자체 견적 시스템에서 모든 견적과 함께 각 셔터의 생성된 3D 뷰를 제공하는 방법을 소개합니다.
색상과 양식만, 그 외에는 없습니다
Fanbedarf.de가 네 가지 모델, 원단 색상, 문의 양식을 갖춘 3D 재킷 컨피규레이터를 WordPress 사이트에 적용한 방법을 소개합니다.
관련 사례 연구
Tentest: 모든 패널에 디자인 캔버스를 제공하는 3D 팝업 텐트 구성기
Scandipro Group 소속 에스토니아 팝업 텐트 제조업체 Tentest는 자체 3D 구성기를 구축했습니다. 여섯 가지 텐트 크기, 모든 패널의 로고 업로드 기능이 포함된 디자인 캔버스, AR, 견적 요청 기능을 제공합니다.
Fell & Frame: WooCommerce용으로 자체 구축한 목재 창호 구성기
칼라일의 목공업체 Fell & Frame은 Simplio3D에서 자체 목재 창호 구성기를 구축했습니다. 구매자는 여섯 가지 여닫이창 유형을 밀리미터 단위로 치수를 설정하고 WooCommerce 장바구니에 추가할 수 있습니다.
Evergreen Shutters: 내부 견적 시스템 내 3D 셔터 미리보기
Evergreen Shutters Ltd는 자체 견적 플랫폼 내에서 수천 가지 셔터 변형에 대한 정확한 시각 자료가 필요했습니다. 3D 엔진을 구축하는 대신 Simplio3D API을 통합하고 모든 견적과 함께 생성된 3D 뷰를 반환했습니다.