MUSINSA Store Chat

바코드 찍으면 끝. AI가 품번/색상/사이즈 자동 추출

---

Highlights

AI Native 개발 항목 내용 협업 도구 Claude Code (Opus) 협업 방식 자율적 문제 해결 위임

핵심 성과 지표 수치 백엔드 코드 4,500+ lines 프론트엔드 코드 4,300+ lines 테스트 E2E 14개 + Unit 34개 OCR 정확도 95%+

---

문제 상황

기존 슬랙 프로세스 ┌─────────────────────────────────────────┐ │ │ │ 1. 바코드 사진 촬영 │ │ 2. 품번/색상/사이즈 수동 타이핑 😤 │ │ 3. 슬랙에 전송 │ │ 4. 이모지로 처리 상태 표시 (누락 빈번) │ │ 5. 여러 층 동시 문의 → 추적 어려움 │ │ │ └─────────────────────────────────────────┘ Pain Points 매번 품번 12자리 + 색상 + 사이즈 타이핑 처리 상태 확인을 위해 슬랙 스레드 계속 확인 바쁜 시간대에 어떤 문의가 미처리인지 파악 불가

솔루션

이 앱으로 해결 ┌─────────────────────────────────────────┐ │ │ │ 1. 바코드 사진 촬영 │ │ 2. AI OCR 자동 추출 ✨ (Claude Vision) │ ← 자동화 │ 3. 원클릭 문의 전송 │ │ 4. 실시간 상태 관리 🔄 (WebSocket) │ ← 실시간 │ 5. 층별/상품별 대시보드 📊 │ ← 추적 가능 │ │ └─────────────────────────────────────────┘ Key Benefits 바코드 촬영만으로 품번/색상/사이즈 자동 입력 푸시 알림으로 상태 변경 즉시 확인 대시보드에서 전체 문의 현황 한눈에 파악

---

핵심 기능

1. 바코드 OCR (Claude Vision API)

• 바코드 사진 → 품번/색상/사이즈 자동 추출
• 프롬프트 엔지니어링으로 세로 텍스트까지 인식
• "동일 스펙 요청" 토글로 원클릭 문의

📸 바코드 촬영 → 🤖 Claude Vision OCR → 📝 폼 자동 완성

---

2. 실시간 문의 관리

보낸 문의

받은 문의

• 보낸 문의 / 받은 문의 탭 분리
• 상태별 필터 (대기중 / 확인중 / 전달완료 / 재고없음)
• 품번, 색상, 요청자로 검색
• WebSocket으로 실시간 상태 동기화

---

3. 분석 대시보드

• 상태별 분포 (파이 차트)
• 시간대별/층별 문의량 (바 차트)
• 상품별 문의 빈도 TOP 10
• 7일 / 30일 기간 필터

---

4. 재고 자동 조회

• OCR 추출 품번으로 재고 자동 조회
• 층별/사이즈별 재고 현황 표시
• 재고 있는 층 시각적 강조

---

5. 실시간 채팅

채팅방 목록

채팅 대화

• 슬랙 스타일 메시지 UI
• WebSocket/STOMP 실시간 통신
• 층별 채팅방 (일반/공지/문의)

---

6. 실시간 알림

• 새 문의 도착 시 실시간 알림
• 문의 상태 변경 알림 (확인중/전달완료/재고없음)
• 읽음/안읽음 상태 관리
• 알림 설정 (방해 금지 모드)

---

Tech Stack

Backend

Frontend

AI & Testing

---

Architecture

┌─────────────────┐         ┌─────────────────┐         ┌─────────────────┐
│                 │  HTTP   │                 │   SQL   │                 │
│   Mobile App    │────────▶│  Spring Boot    │────────▶│   PostgreSQL    │
│   (React PWA)   │◀────────│  (REST + WS)    │◀────────│                 │
│                 │   WS    │                 │         │                 │
└─────────────────┘         └────────┬────────┘         └─────────────────┘
                                     │
                                     │ HTTP
                                     ▼
                            ┌─────────────────┐
                            │                 │
                            │  Claude Vision  │
                            │  (Anthropic)    │
                            │                 │
                            └─────────────────┘

데이터 흐름

1. 모바일에서 바코드 이미지 업로드
2. Spring Boot가 Claude Vision API로 OCR 요청
3. 추출된 품번으로 PostgreSQL 재고 조회
4. WebSocket으로 문의 상태 실시간 동기화