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

Context

컬리몰은 Redux를 통해 서버 데이터를 전역 상태로 관리하고 있었으나, 화면을 오래 띄우거나 페이지를 이탈했다 돌아올 때 이전 데이터를 표시하는 문제가 있었다. 이로 인해 고객이 구매 가능한 상품으로 보고 주문했으나 실시간 재고 변동으로 품절되는 불편함이 발생했다.

Technical Solution

• Redux에서 React Query로 서버 상태 관리 라이브러리 전환: 비동기 데이터 페칭, 캐싱, 동기화를 전담하는 라이브러리 도입
• React Query의 stale time을 1분으로 설정: 서버 캐싱 시간 5분보다 짧게 구성하여 실시간 상태 동기화 강화
• 필터 결과를 URL에 저장: 새로고침 후에도 사용자가 보던 필터 상태를 유지하고 공유 가능하도록 구현
• 모바일 웹 검색 키워드 하이라이트 처리: 검색 결과에서 정확한 키워드를 시각적으로 강조
• 전역 설정 사전 공유 및 병렬 프로젝트 조율: 다른 프로젝트들과의 혼선을 방지하기 위해 공통 설정을 미리 팀에 공유

Impact

• 고객이 원하는 상품을 찾기 위해 확인하던 상품 위치: 평균 32번째에서 19번째로 개선
• 필터 적용 및 해제 과정에서 발생하던 불필요한 API 호출 방지
• 사용자가 다른 화면을 보고 컬리몰로 돌아올 때 서버에서 신규 데이터를 빠르게 수신

Key Takeaway

서버 상태 관리 라이브러리(React Query)의 도입은 단순한 기술 선택이 아니라, 팀의 의사결정 문화(웹 개발 기술 선정 토론회)와 결합할 때 고객 경험과 코드 품질을 동시에 향상시킬 수 있다. URL 기반 상태 유지, 하이라이트 처리 등 사용자 편의 기능은 초기 기획에 없었던 것으로, 팀 주도의 개선 문화가 강한 영향을 미쳤다.