29CM, 결제 UX 개선으로 구매 전환율 UP!
by DD
8개월 전
조회수 5
결제 혜택을 인지하기 어렵고, 실시간 할인 반영이 안 되어 구매 전환율이 낮았음
즉시 할인 구좌 신설, 도메인/뷰 모델 분리, 양방향 연동 로직 개선
구매전환율 1.08%p 상승, 결제 혜택 사용 비중 27.6% 증가
UI/UX 개선을 위한 아키텍처 설계
주문서 페이지는 도메인 모델과 뷰 모델로 분리하여 UI 렌더링을 최적화했다. 구체적으로 useSortedPaymentMethodList, useBestDirectDiscount 등의 훅을 활용하여 UI 가공 로직을 분리했다. 따라서 코드 가독성을 높이고, 유지보수성을 향상시켰다.
결제 수단과 즉시 할인 연동 로직 개선
결제 수단 선택과 즉시 할인 선택 간의 양방향 연동 로직을 개선했다. 처음에는 useEffect를 사용했지만, 상태 변경 순서 문제로 인해 이벤트 핸들러에서 동기적으로 처리하도록 변경했다. 결과적으로 상태 전이 예측 가능성을 높이고, 디버깅을 용이하게 했다.
실 결제 금액 반영을 위한 성능 최적화
마일리지 입력 시 실 결제 금액을 실시간으로 반영하기 위해 debounce vs blur 방식을 비교했다. Debounce는 실시간성을 제공하지만, API 호출 빈도 증가 문제를 야기했다. 따라서 blur 방식을 선택하여 서버 부하를 줄이고, 안정적인 UX를 제공했다.
