3M 공식 대리점 · B2B2C 마켓플레이스

BondingCenter

산업용 테이프·접착제를 온라인에서 거래하는 B2B/B2C 이커머스 플랫폼 — AI 제품 추천부터 CAD 재단 도면 뷰어, 전자결제까지 웹과 모바일 앱을 하나의 코드베이스로 제공합니다.

B2B2C 이커머스AI 추천CAD 도면 뷰어웹 + iOS/Android

프로젝트 개요

BondingCenter는 3M 산업용 접착제·테이프(IATD) 제품을 온라인으로 판매하는 커머스 플랫폼으로, 3M 공식 대리점이 운영합니다.

도면에 맞춰 재단이 필요한 산업 고객(B2B)과 일반 소매 고객(B2C)을 동시에 대상으로 합니다.

전화·견적 중심이던 산업재 거래를 제품 탐색–도면 업로드–결제–배송 추적까지 온라인에서 완결되는 자사 판매 채널로 전환하기 위해 만들었습니다.

웹과 iOS/Android 앱을 단일 코드베이스로 운영해 모든 접점에서 동일한 경험을 제공합니다.

자연어 질의를 LLM으로 파싱해 상위 제품을 추천합니다. 빠른 검색과 AI 추천 메시지 생성을 분리해 응답 지연을 최소화했습니다.

고객이 PDF/DXF/DWG 도면을 업로드하면 브라우저에서 인라인 미리보기로 확인하고 그대로 주문에 반영합니다.

PG 전자결제, 주문 생성, 배송 추적까지 구매 플로우 전반을 다룹니다.

마일리지 적립/사용과 Bronze~Diamond 5단계 등급별 혜택을 제공합니다.

TipTap 리치텍스트 에디터 기반 블로그·기술 자료실·FAQ로 제품 탐색과 학습을 지원합니다.

제품 문의를 실시간으로 주고받는 채팅을 제공합니다.

단일 코드베이스로 iOS/Android를 출시하고, 동적 sitemap·robots로 검색 최적화를 적용했습니다.

상황: 웹과 iOS/Android를 모두 제공해야 했지만 별도 네이티브 개발은 비용·유지보수 부담이 컸습니다.
과제: 하나의 코드베이스로 세 플랫폼을 일관되게 운영해야 했습니다.
행동: Next.js 웹앱을 Capacitor로 래핑해 iOS/Android로 패키징하고 푸시 알림을 연동했으며, 반응형·접근성 UI 시스템을 구축했습니다.
결과: 단일 코드베이스로 웹·iOS·Android를 동시 운영하며 기능과 디자인의 일관성을 확보했습니다.

프레임워크 · 언어Next.js 15 (App Router, Turbopack) · React 19 · TypeScript

데이터 · 백엔드Supabase (PostgreSQL) · Next.js API Routes (서버리스)

결제국내 전자결제(PG) · 주문 · 배송 추적

AILLM 자연어 제품 추천(2단계) · 기술 데이터시트(TDS) PDF 자동 요약

CAD · 도면dxf-viewer · three.js (PDF/DXF/DWG 인라인 뷰어)

모바일Capacitor (iOS/Android) · 푸시 알림

UITailwindCSS 4 · shadcn/ui · Radix UI · HeadlessUI · Framer Motion · lucide-react

에디터 · 문서TipTap · pdf.js · jsPDF

데이터 · 폼TanStack Table · Recharts · react-hook-form · Zod · dnd-kit