[개발자 블로그 탐독] 뷰티 필터를 개발하며 얻은 새로운 경험

 

안녕하세요 저는 컬리의 “뷰티 필터를 개발하며 얻은 새로운 경험” 포스트에 대해 소개할 이서영입니다.

컬리를 아시나요?

컬리는 2014년에 설립한 한국의 온라인 쇼핑몰로 서비스 영역은 크게 식품 판매를 전문으로 하는 마켓컬리와 화장품 판매를 전문으로 하는 뷰티컬리 2가지로 구분됩니다.

합리적인 가격의 지성피부를 위한 선크림을 구매하기 위해선 어떤 과정을 거쳐야 할까요?

단순히 ‘선크림’만을 검색하게 되며 100여가지의 제품이 나오게 됩니다. 이 상황에서 필터를 적용하게 된다면 더욱 편리하고 효율적으로 제품을 검색할 수 있겠죠?

관련 상품만 보기 위해 카테고리를 “선케어”로 설정합니다. 또한 합리적인 가격의 물건을 사고 싶기에 가장 낮은 가격 구간대와 “할인상품”을 선택합니다. 마지막으로 피부 타입에 맞게 “지성 피부”를 선택하면

무려 11건으로 상품 목록이 간단해집니다. 선택지가 추려진 덕분에 더욱 합리적으로 구매 결정을 할 수 있게 되었습니다.

그렇다면 필터 프로젝트를 하는 이유와 그 목표는 무엇일까요?

가장 큰 목표는 우선, 고객의 관점에서 상품 탐색 경험의 개선입니다. 이전에는 일분 운영 체제(안드로이드)에만 적용되어 있었던 필터를, PC와 모바일 웹에서 사용할 수 있도록 확장하여 플랫폼 별로 분산된 고객 경험을 통일하기 위함이었습니다.

그리고 기술의 관점에선 데이터의 상태 관리 방법의 전환을 목표로 설정하였습니다. 기존의 컬리몰에서는 한 화면을 오래 띄워두거나, 다른 페이지에 방문한 후 컬리몰에 재접속하였을 때, 이전의 데이터를 보여주고 있었습니다. 따라서 고객은 구매 가능한 상태임을 보고 장바구니 담기를 시도하였지만, 실시간 재고 변동 등으로 인해 품절로 상품을 구매하지 못하는 불편함이 있었습니다.

그동한 컬리몰은 redux를 통해 서버에서 가져온 데이터를 상태 관리하고 있었습니다. 필터 프로젝트를 진행하며 이것을 React Query로 전환하였습니다. 이러한 결정은 커머스 웹 개발 팀의 ‘웹 개발 기술 선정 토론회’라는 문화에서 이루어졌습니다. 이는 팀에서 민주적으로 기술 결정을 하기 위한 장치로 다양한 의견들을 수렴하여 토론회에서 해당 기술과 관련된 토론을 진행하고, 최종적으로 많은 팀이 선호하는 기술 도입을 결정합니다.

React Query란 비동기 데이터 관리를 위한 전문 라이브러리이며 redux를 사용할 때보다 다양한 비즈니스 요구사항을 빠르게 달성할 수 있게 됩니다.

기존의 컬리몰에서는 API응답으로 받은 서버의 데이터를 전역 상태 관리 라이브러리인 redux에 저장하고, 그 데이터를 리액트 어플리케이션 전역에서 관리하고 있었습니다.

React Query는 리액트 어플리케이션에서 서버의 상태를 불러오고, 캐싱하고, 또 지속적으로 동기화 및 업데이트 작업을 도와주는 라이브러리로 다양한 이벤트 발생 시, 서버 상태 동기화 시나리오를 충족할 수 있습니다.

React Query로 전환함에 따라 다음과 같은 장점을 기대할 수 있었습니다.

먼저, 고객 측면에서는 React Query에서 제공하는 옵션들을 활용하여 서버 상태를 동기화 할 수 있고, 품질이나 가격 변동 이슈 등 실시간으로 고객이 정보를 제공 받을 수 있는 것을 기대했습니다.

또한 기술적으로도 서버에서 가져온 데이터를 효율적으로 상태 관리함으로써 불필요한 API 호출을 방지할 것을 기대하였습니다.

이러한 필터 프로젝트를 통해 고객은 상품을 선택하는 위치의 변화가 있었습니다. 상품 탐색 과정에 대한 경험이 개선됨에 따라 원하는 상품을 찾기 위해 보통 32번째 상품까지 확인해야 했다면, 필터를 적용함으로써 평균 19번째 상품에서 구매결정을 할 수 있도록 개선되었습니다. 다시 말해, 필터 도입으로 고객에게 필요한 상품을 더 상단에 보여줄 수 있도록 변화하였습니다.

그리고 기술적인 측면에서 불필요한 API 호출 방지가 가능해졌습니다. 사용자가 쉽게 적용하고 해제할 수 있는 필터의 특징에 따라 이 과정에서 들어갔을 숱한 API 호출을 React Query를 사용함으로서 방지할 수 있었습니다. 또한 사용자가 다른 화면을 보고 컬리몰에 되돌아 왔을 때도 서버에서 금방 새로운 데이터를 받아 볼 수 있게 되었습니다.

이상으로 마켓컬리의 뷰티 필터 적용 방법에 대한 소개를 마치도록 하겠습니다! 감사합니다😉💜

 

 

 

https://helloworld.kurly.com/blog/2022-5th-tech-meetup-web-frontend/

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