뷰티 컬리, React Query 도입으로 필터 UX 개선 및 API 호출 최적화

뷰티 컬리(Beauty Kurly) 웹 프론트엔드 팀이 Redux에서 React Query로 데이터 상태 관리 방식을 전환하며 사용자 경험과 기술 효율성을 동시에 개선했다. 기존 시스템은 페이지 이동이나 재접속 시 이전 데이터를 보여줘 실시간 재고 변동에 대응하지 못하는 문제가 있었다.

기술 스택 전환 및 캐싱 전략

팀 내부의 민주적 의사결정 프로세스를 통해 비동기 데이터 관리 전문 라이브러리인 React Query를 도입했다. 서버 캐시 시간(5분)과 달리 stale time을 1분으로 짧게 설정해 불필요한 API 호출을 방지하면서도 최신 정보를 유지하는 균형을 맞췄다. 이를 통해 품절이나 가격 변동 등 서버 상태의 실시간 동기화가 가능해졌다.

필터 기능 개선 및 성과

필터 적용 결과, 고객이 원하는 상품을 더 상단에서 발견할 수 있게 되었다. 데이터 분석에 따르면 필터 적용 전 평균 32번째 상품에서 구매가 결정되던 것이, 적용 후에는 평균 19번째 상품으로 축소되어 탐색 효율이 높아졌다.

추가로 필터 상태를 URL에 저장해 새로고침 시 초기화를 방지하고, 검색 키워드 하이라이트 기능을 자체 제안하여 개발했다. 이러한 변경으로 숱한 API 호출을 줄이고, 다른 화면 방문 후 복귀 시에도 서버에서 새로운 데이터를 빠르게 수신할 수 있는 환경을 구축했다.