---
name:TRENSHOW · DDPICK
org:Trenshow
period:2024.06 ~ 2024.10
frontend:[Next.js 12,React,TypeScript,React Native]
state:[Redux,Redux-Saga]
ui:[SCSS Modules]
etc:[Socket.IO,react-barcode,jsPDF,XLSX]
infra:[Serverless,AWS S3]
---
#
TRENSHOW · DDPICK
>동대문 의류 물류 SaaS(WMS) 및 배송 플랫폼
## 프로젝트 배경
동대문 의류 유통 현장은 사입자 · 화주사 · 물류센터 · 라이더 등 다양한 주체가 얽힌 복잡한 구조임에도 이를 통합 관리할 SaaS가 부재했습니다. 다주체 통합 플랫폼 구축을 목표로 프로젝트가 시작되었습니다.
## 주요 성과 및 기여
→웹뷰 ↔ 네이티브 양방향 바코드 통신 프로토콜 설계 — 입고 · 적치 · 피킹 · 출고 등 작업 맥락에 따라 스캐너 모드를 전환하고, 스캔 실패 시 에러 코드를 네이티브 스캐너 UI로 되돌려 즉시 피드백
·iOS와 Android의 message 이벤트 수신 대상 차이를 양쪽 리스너 등록으로 해결
·스캔 결과에 따른 상태 분기 처리로 현장 작업 인력 30% 절감
→공통 UI 컴포넌트 세트 · 폼 훅 설계로 6개 플랫폼 2개월 내 동시 출시 — 버튼 · 입력 · 셀렉트 · 데이트피커 등 공통 세트를 정의해 플랫폼 간 재사용
→반복 입력 자동화 폼 훅 구현 — 필드명 규칙 기반으로 연락처 · 사업자번호 · 카드번호 등 포맷을 자동 적용해 현장 반복 입력 오류 감소, 재고 처리 속도 30~50% 향상
→바코드 라벨 발행 파이프라인 구축 — 로케이션 · 상품 · 반품 · 거래처 4종 바코드 생성 및 대량 PDF 출력
→Socket.IO 기반 관리자-작업자 실시간 알림 · 채팅 연동으로 소통 병목 해소
→입고 → 적치 → 피킹 → 출고 → 반품 전 라이프사이클 화면과 일별 · 월별 정산 시스템 개발
## 배운 점
물류 작업자들이 반복 입력으로 인한 오류를 꾸준히 제기. 이를 개선하기 위해 자동화 입력과 프로세스 단축 UI를 직접 설계 · 구현. 단순한 UI 개선도 현장 효율을 크게 높일 수 있다는 점, 사용자의 목소리가 제품 완성도의 핵심 동력이라는 점을 체감.
## 화면 미리보기
// 8 screenshots · 클릭하면 원본 크기로 열립니다