픽업전용 장바구니

올리브영이 장바구니를 일반/오늘드림/픽업 3개 탭으로 분리하고 SSR에서 CSR로 렌더링 방식을 변경해 픽업 서비스 사용률 증가

2023년 10월 10일7분intermediate

AI 요약

Context

기존 장바구니는 일반 배송과 오늘드림/픽업을 하나의 탭에서 관리했기 때문에 고객이 픽업 옵션을 인지하기 어려웠다. 픽업을 진행하려면 오늘드림 장바구니 또는 주문서 단계에서 배송 타입을 선택해야 했으므로 고객 진입장벽이 높았다.

Technical Solution

장바구니 탭 구조 변경: 기존 2개 탭(일반/오늘드림)을 3개 탭(일반/오늘드림/픽업)으로 분리해 픽업 전용 탭 신설
매장 선택 기능 추가: 픽업 장바구니에서 Kakao Map API를 활용한 지도 기반 매장 선택 팝업 구현
렌더링 방식 변환: SSR에서 CSR 방식으로 전환해 매장 선택 시 화면 깜박임 현상 제거
MSA 전환 초기 작업: Monolithic 구조의 장바구니 서비스에서 데이터 Aggregation 서비스를 별도로 분리하고 일부 기능을 API로 이관
UI/UX 현행화: 상품 카드, 배송 방법 변경 팝업, 결제 영역 등의 시각 요소 개선

Impact

9월 올영세일 기간 6월 세일 대비 픽업 서비스 사용률 증가

Key Takeaway

CSR 방식의 동적 상태 변경이 필요한 기능은 SSR 기반 플랫폼에서 부분적으로 마이그레이션할 수 있으며, 동시에 향후 MSA 전환에 대비해 데이터 레이어를 서비스 경계에 맞춰 점진적으로 분리하는 것이 중요하다.

실천 포인트

전자상거래 플랫폼에서 사용자 선택에 따라 실시간으로 재고/가격 등 정보가 변경되는 기능(매장 선택, 옵션 변경 등)을 구현할 때는 SSR 대신 CSR을 사용하면 페이지 깜박임을 제거할 수 있고, 동시에 백엔드 데이터 조회 구조를 마이크로서비스 경계로 재설계하면 향후 서비스 분리 시 영향 범위를 줄일 수 있다.

태그

#Microservices #Kakao Map API #Cart #CSR

원문 읽기