유통 · 웹/앱 개발
리테일 커머스 앱
상품 탐색부터 매장 재고 확인, 주문까지 한 경로로 이어지는 커머스 웹과 앱입니다.
문제
웹 기획전과 매장 재고, 앱 주문이 서로 다른 데이터를 보고 있었습니다. 품절은 결제 직전에야 드러났고, 첫 화면은 이미지 때문에 모바일에서 느렸습니다.
접근
- 01상품, 장바구니, 주문, 매장 재고 조회를 하나의 API 계약으로 맞췄습니다.
- 02웹과 앱이 같은 주문 상태를 보도록 클라이언트만 나누었습니다.
- 03구매 경로의 이미지와 글꼴에 로딩 예산을 두고, 품절과 결제 실패 상태를 화면으로 설계했습니다.
- 04운영자가 기획전 순서와 품절 노출을 직접 바꾸는 어드민을 포함했습니다.
구성
- Next.js
- React Native
- TypeScript
- MySQL
설계 목표
- 웹과 앱의 가격·재고 불일치를 줄이는 단일 상품 원장을 목표로 합니다.
- 핵심 구매 경로의 첫 로딩을 모바일 망에서 버틸 수 있는 무게로 관리합니다.
- 품절을 결제 전 단계에서 보여 실패 주문을 줄이는 흐름을 만듭니다.