29CM, 프론트엔드 UX 개선으로 결제 경험 및 구매 전환율 57.4% 향상: 즉시 할인 로직 분리 및 상태 관리 최적화 사례

핵심 기술: 29CM은 주문서 결제 혜택 UX 개선을 통해 고객의 결제 경험과 구매 전환율을 향상시켰습니다. 이를 위해 복잡한 비즈니스 로직과 UI 가공 로직을 분리하고, ViewModel 기반의 상태 관리 및 실시간 데이터 연동 로직을 최적화했습니다.

기술적 세부사항:
* 문제점: 고객이 결제 수단별 혜택을 직관적으로 인지하기 어렵고, 실시간 할인 반영 부재로 혜택 체감도가 낮아 구매 전환율이 저하되었습니다.
* 가설: 주문서에서 즉시 할인 적용 여부를 선택하고, 선택 즉시 결제 금액에 반영되면 구매 전환율이 상승할 것이라는 가설을 수립했습니다.
* 즉시 할인 (Direct Discount): 카드사/PG사에서 제공하는 할인으로, 구매 즉시 결제 금액에서 차감되는 방식입니다. 쿠폰/마일리지와 달리 즉각적인 혜택 체감이 가능하며, 낮은 비용으로 혜택 제공이 가능합니다.
* 아키텍처 개선:
* ViewModel 도입: API 응답 데이터를 UI에 적합한 뷰 모델로 매핑하여, UI 상태와 비즈니스 인터페이스를 명확히 구분했습니다.
* 도메인 모델과 뷰 모델 분리: API 응답 데이터(도메인 모델)와 UI 렌더링용 가공 데이터(뷰 모델)를 분리하여 관리했습니다.
* 훅(Hook) 기반 상태 관리: useSortedPaymentMethodList, useBestDirectDiscount, useApplicableDiscountList 등 훅을 활용하여 결제수단 목록 가공, 최대 즉시할인 배지 노출, 실험군 렌더링 로직을 분리하고 재사용성을 높였습니다.
* 양방향 상태 동기화: 결제 수단 변경 시 즉시 할인 적용 및 즉시 할인 선택 시 결제 수단 변경 로직을 useEffect 대신 이벤트 핸들러 내에서 동기적으로 처리하여 예측 가능성과 디버깅 용이성을 확보했습니다.
* 마일리지 사용 시 할인 기준 변경: 마일리지 사용 금액 변경 시 즉시 할인 금액 재계산을 위해 blur 방식을 선택하여 서버 부하를 줄이고 안정적인 UX를 제공했습니다.
* UX 개선:
* 결제 수단 목록 전략적/비전략적 제휴사 구분 및 정렬.
* 최대 할인 배지 노출로 고객의 혜택 인지 용이성 증대.

개발 임팩트:
* 구매 전환율 상승: 56.3% → 57.4% (+1.08%p)
* 결제 혜택 활용도 증가: 결제 혜택 사용 비중 27.6% 상승
* 전략 제휴 결제 수단 사용률 증가: 토스페이 +1.92%, 카카오페이 +5.61%
* 주문 완료 소요 시간 단축: 2분 56초 → 2분 36초 (-20초)
* 마케팅 효율 증대: 제휴사 펀딩액 136% 증가, 운영 건수 2.3배 증가
* 매출 기여도 향상: 결제 혜택 적용 주문 거래액 비중 25% → 60%

커뮤니티 반응: (언급 없음)

톤앤매너: 이 글은 29CM 프론트엔드 개발팀의 실제 프로젝트 경험을 바탕으로, 복잡한 기술적 과제를 해결하고 실질적인 비즈니스 성과를 달성한 과정을 상세하게 설명합니다. 개발자에게 유익한 기술적 인사이트와 함께 문제 해결 과정에서의 고민과 노하우를 공유하며 전문적인 톤을 유지합니다.