Custom Sock Studio
맞춤 양말 D2C 플랫폼
HTML Canvas 기반 픽셀 단위 디자인 편집기가 양말 전개도 4방향(앞·뒤·발바닥·발목) 실시간 프리뷰를 렌더링. 크루·앵클·니하이 3종 실루엣과 20+ 원사 컬러를 지원하며 MOQ 30켤레부터 시작하는 B2B 자동 견적 계산기 탑재. Stripe 결제와 제조 WMS 연동으로 주문→생산→배송 파이프라인 자동화.
Architecture Overview
Next.js 풀스택. 클라이언트 OffscreenCanvas 워커 스레드가 4방향 렌더링 엔진의 핵심. 서버사이드 Node.js가 Stripe 웹훅 처리 + WMS API 연동. Supabase가 디자인 에셋과 주문 데이터 저장.
OffscreenCanvas 더블 버퍼링 · 실루엣 ClipPath 마스킹 · Stripe 웹훅 → WMS 자동 파이프라인
Technical Problems
양말 전개도 4방향 60fps 실시간 렌더링
앞·뒤·발바닥·발목 4개 뷰를 동기적으로 렌더링하면서 디자인 레이어 변경이 즉시 반영돼야 한다. DOM 기반 접근은 4방향 업데이트마다 레이아웃 스래싱이 발생해 모바일에서 체감 지연이 심각했다.
픽셀 단위 패턴 마스킹 편집 복잡도
양말 실루엣 형태에 맞는 패턴 마스크, 20+ 원사 컬러 스와치 실시간 교체, 사용자 이미지 업로드·합성을 모두 브라우저 내에서 60fps로 처리해야 했다.
B2B 자동 견적 + 제조 WMS 연동
MOQ·수량·컬러 수·디자인 복잡도에 따른 견적 계산이 제조사 내부 공식에 의존. 주문 확정 후 WMS에 규격서를 자동 전달하지 않으면 생산 착오 위험이 높았다.
Engineering Approach
OffscreenCanvas 워커 + rAF 더블 버퍼링
OffscreenCanvas 워커 스레드에서 4방향 합성 후 메인 스레드 Canvas로 transferFromImageBitmap 전송. requestAnimationFrame 60fps 렌더 루프. 변경된 레이어만 dirty 플래그로 부분 재렌더링해 CPU 사용량 최소화.
실루엣 SVG → ClipPath 마스킹 + hue-rotate O(1) 컬러
양말 실루엣 SVG를 globalCompositeOperation ClipPath로 변환해 Canvas 마스킹 적용. 컬러 교체는 getImageData 픽셀 순회 대신 CSS filter hue-rotate 합성으로 O(1) 처리. 레이어 스택 기반 패턴·텍스트·이미지 합성 관리.
Stripe payment_intent.succeeded → WMS 자동 주문
서버사이드에서 MOQ·수량·컬러수 파라미터 기반 견적 계산. Stripe 웹훅 `payment_intent.succeeded` → 주문 레코드 생성 → WMS API에 색상 스펙·규격서 JSON 자동 전달. 멱등성 키로 웹훅 중복 처리 방지.
Measurable Outcomes
60fps
렌더링
모바일 포함, OffscreenCanvas 워커
−70%
디자인 시간
12분 완성 (업계 40분 대비)
2개월
납품 기간
편집기 + 결제 + WMS 연동
30+
B2B 고객사
런칭 후 누적
Tech Stack
Project Specs
Year
2025
Duration
2개월
Capability
Commerce & Platforms
Status
DeliveredTechnologies