Rawfit: 여성 스니커즈 컨피규레이터

Client: Rawfit Services: 제품 컨피규레이터, 3D 에셋 파이프라인, 이커머스 통합 Duration: 8주 Tech: Three.js, Next.js, 커스텀 머티리얼 파이프라인

문제 정의

Rawfit은 여성 프리미엄 스니커즈 브랜드입니다. 제품은 두 가지 모델에 걸쳐 색상과 소재 조합이 깊게 펼쳐져 있습니다. 2D 카탈로그에서는 그 깊이가 읽히지 않습니다. 고객은 사진 네 장을 보고 옵션이 네 가지뿐이라고 짐작하며, 실제 존재하는 20가지 이상의 구성을 놓칩니다.

요청은 이러했습니다. 두 플래그십 모델에 대해 색상과 소재를 직접 고르고, 결과를 실시간으로 확인하고, 자신의 구성을 주문 문의로 남길 수 있는 컨피규레이터.

기능적인 SKU 선택기가 아니라 브랜드의 한 순간처럼 느껴져야 했고, Rawfit의 트래픽이 모바일 위주였기 때문에 모바일에서 잘 돌아가야 했습니다.

만든 것

프리미엄 미감, 실시간 베리언트 스왑, 주문 캡처를 갖춘 브라우저 기반 컨피규레이터입니다.

• 두 가지 제품 모델. 각각 풀 컨피규러블
• 색상 변경. 모델당 다섯 가지 색상 옵션이 부드러운 트랜지션과 함께 실시간으로 적용됩니다
• 소재 변경. 모델당 세 가지 소재 옵션(스무스 레더, 스웨이드, 캔버스). 정확한 PBR 처리
• 회전과 줌. 어느 각도에서도 신발이 중앙에 잡히는 프레이밍의 오빗 컨트롤
• 모바일 우선 UI. 터치 최적화 셀렉터, 하단 정렬 컨트롤, 가로 모드에서도 안정적인 프레이밍
• 스크린샷 캡처. 사용자가 자신의 구성을 저장하거나 공유할 수 있습니다
• 주문 캡처. 이름, 이메일, 선택한 구성이 Rawfit CRM으로 전송됩니다

작업 방식

1주차–2주차. 킥오프, 제품 결정, 무드보드. Rawfit이 CAD를 제공했고, 두 모델을 정확히 합의한 뒤 실제 생산 중인 베리언트 세트로 범위를 좁혔습니다.

3주차–4주차. CAD 기반 3D 모델 구축. 머티리얼 개발. 스무스 레더, 스웨이드, 캔버스 모두 제대로 보이려면 PBR 처리를 각기 달리해야 했습니다.

5주차–6주차. 컨피규레이터 UI. 베리언트 셀렉터, 오빗 컨트롤, 스크린샷 캡처, 모바일 레이아웃. 6주차 말 첫 클라이언트 리뷰.

7주차–8주차. 주문 캡처 통합, CRM 핸드오프, 런칭.

달라진 점

컨피규레이터는 두 컨피규어 모델의 기본 제품 페이지 경험으로 자리 잡았습니다. 컨피규어된 SKU의 전환율이 같은 카테고리의 비컨피규어 SKU보다 의미 있게 높아졌습니다.

배운 것

소재의 정확도가 곧 제품입니다. 첫 빌드의 세 가지 소재는 기술적으로는 분명히 달랐습니다(다른 러프니스 값, 다른 노멀 맵). 그러나 화면에서는 "비슷한 신발의 미묘하게 다른 톤 세 가지"로 읽혔습니다. 셋을 시각적으로 확실히 구분되도록 만드는 데 일주일을 추가로 투자했습니다. 그 한 주가 프로젝트에서 가장 가치 있는 한 주였습니다.

모바일 가로 모드는 실제 사용 사례입니다. 데스크톱 트래픽은 소수, 모바일 세로가 다수, 모바일 가로는 작지만 결정적입니다. 카페 테이블에서 친구에게 신발을 보여 주는 방식이 바로 가로 모드입니다. 세로·가로 회전에도 왜곡 없이 살아남도록 프레이밍을 설계했습니다. 작은 디테일이지만 자주 쓰입니다.

프리미엄 커스텀 영역에서는 결제 통합보다 주문 캡처가 낫습니다. Rawfit은 풀 카트 통합도 검토했지만, 결국 문의 폼 핸드오프 방식을 택했습니다. 커스텀 신발 주문은 Rawfit 측의 사람 손이 필요합니다(사이즈 확인, 특정 가죽 배치의 색상 정확도 확인). 카트 흐름이라면 반품을 늘렸을 것입니다. 문의 흐름은 만족한 고객을 늘렸습니다.

스택

• 런타임: Three.js와 React Three Fiber
• UI: Next.js App Router, Tailwind, 베리언트 트랜지션에는 Framer Motion
• 머티리얼: Blender에서 제작한 커스텀 PBR 머티리얼. PBR 익스텐션 GLTF로 익스포트
• 에셋 용량: 모델당 약 4MB. iPhone 12 이상에서 60fps
• 주문 캡처: 커스텀 Node 엔드포인트 → API를 통해 Rawfit CRM
• 호스팅: Vercel + 에셋 배포에는 Cloudflare

제품용 컨피규레이터가 필요하신가요

이 패턴은 베리언트 깊이가 실제로 있는 모든 제품에 적용됩니다. 풋웨어, 패션, 주얼리, 소형 가전, 가구, 액세서리. Configurator Studio Sprint 프로덕타이즈드 오퍼($18K, 4–6주)는 단일 제품 베리언트 컨피규레이터를 정해진 일정 안에 출시합니다.

또는 두 문장짜리 메일을 info@cclemang.com 으로 보내 주십시오.

전체 작업 보기 →