뷰티 필터를 개발하며 얻은 새로운 경험

컬리는 안드로이드에만 제공되던 상품 필터를 PC와 모바일 웹으로 확장해 상품 탐색 경험을 통일하고, 오래된 재고·가격 정보로 인한 불편을 줄이려 했다. 이를 위해 Redux로 관리하던 서버 데이터를 React Query로 전환하고, 서버 캐시 시간 5분보다 짧은 1분의 staleTime을 설정해 데이터 동기화와 불필요한 API 호출 방지를 꾀했다. 필터 조건을 URL에 저장하는 등 사용자가 탐색 상태를 유지하고 공유할 수 있는 개선도 함께 진행했다. 배포 후 고객이 상품을 선택하는 평균 위치가 32번째에서 19번째로 앞당겨졌으며, 기술 선정 토론회를 통해 팀이 함께 학습하고 결정하는 문화도 강화됐다.

• 서버에서 가져온 데이터는 Redux의 전역 상태에 넣기보다 React Query 같은 서버 상태 전용 도구로 관리하면 캐싱과 동기화 정책을 분리할 수 있다.
• React Query의 staleTime을 서버 캐시 시간보다 짧게 설정해 데이터 최신성과 불필요한 네트워크 요청 사이의 균형을 맞출 수 있다.
• 필터 조건을 URL에 반영하면 새로고침이나 페이지 이동 뒤에도 탐색 상태를 복원하고 결과를 공유할 수 있다.
• 팀 단위 기술 도입은 근거 문서 공유와 사전 학습, 의견 수렴, 토론을 거쳐 결정하면 구성원의 이해를 맞추는 데 도움이 된다.