E-커머스 전시 화면 구성 모듈화

sameul__choi·2022년 11월 28일
0

안녕하세요 저는 3개월간의 프로젝트에서 전시 화면 구성 모듈화 백엔드를 맡아 개발한 최진영입니다. 저희 팀은 커머스 플랫폼의 상품 전시에 대한 스키마 지식이 전혀 없는 상태에서 프로젝트 요구사항 주제들을 받았습니다. 힘든 점도 많았지만 돌이켜 보면 그 덕분에 팀원들과 상품 전시에 대한 많은 고민을 하며 기능 개발을 하게 되어 배울 부분이 많았습니다. 지금부터는 프로젝트의 핵심 기능 중 하나인 '전시 화면 구성 모듈화' 주제에 대하여 말씀드리겠습니다.

전시, 오프라인 매장 그 잡채..

소비자들은 쇼핑 플랫폼에 들어오면 여러가지의 전시 구좌들을 마주하게 됩니다. 저희는 상품 전시가 오프라인 매장에서 상품이 진열되어 있는 형태나 모습, 분위기 등 소비자로 하여금 쇼핑 욕구가 생기게끔 하는 일련의 마케팅(?)과 궤를 같이 한다고 생각하였습니다. 때문에 커머스 플랫폼에서 소비자들이 가장 먼저 마주하게 될 전시는 어떻게 구현되어 있고, 운영되는 지 궁금증이 생겼습니다.

메인 화면에서 상품은 전시를 통해 소비자에게 노출 되게 됩니다. 적재, 적소, 알맞은 시간에 편성된 상품을 타겟하는 소비자에게 노출 되게끔 하여 매출 신장에 도움을 줄 수 있겠고, 이미 품절된 상품이나, 봤었던 상품의 경우에는 최대한 노출을 줄여 소비자가 보다 많은 상품에 노출될 수 있도록 하는 것이 좋을 것이라 생각했습니다.

그러기 위해선 '전시에는 많은 변경사항이 필연적이겠다' 라고 생각하였습니다. 실제로 실무에서 상품 전시가 어떤 프로세스로 진행되는 지는 모르지만, '전시 화면 구성 모듈화'는 잦은 변화에 대한 개발과 운영 시간을 효율화 시키기 위한 액션이라 생각했습니다.

그래서 어떻게 ?

우선적으로, 저희는 모든 전시 구좌를 개별로 묶고, 구좌 마다 해당 구좌에서 전시 될 Item들을 따로 묶어 Item set을 교체 할 수 있도록 설계하였습니다. 그 이유는 구좌 내 개별 상품에 문제(품절, 상품 오류)가 생길 수도 있고, 똑같은 구좌내 여러가지의 상품을 시간대 별로 전시하기 위함이었습니다.

각각의 성격이 다른 전시 대상들(뱃지, 배너, 상품, SNS피드)을 Item이라는 개념으로 추상화 하였고, 이를 사용하는 로직의 재사용성을 높였습니다. 각 전시 구좌 마다 원하는 데이터가 다를 수 있기 때문에 해당 전시에 필요한 데이터만을 받기 위한 '데이터 피커'라는 API를 두어 적재 적소에 필요한 데이터 피커를 통하여 데이터를 서빙할 수 있게끔 설계하였습니다.

전시 구좌 등록과 아이템 리스트, 아이템 등록이 완료되면, 구좌와 해당 전시 카테고리, 노출 우선순위, 프론트 모듈, 데이터피커등의 정보를 선택하여 하나의 온전한 전시 컴포넌트를 만들 수 있습니다. 언급된 모든 것들은 모두 다른 값으로 바꿀 수 있어 재사용이 가능하게끔 설계하였습니다.

모듈화 그 결과는?

앞서 말씀드린 내용을 바탕으로 개선된 전시 기능을 정리해 보았습니다.

1. 각 전시 구좌들을 API를 통해서 순서와 노출될 아이템 등을 조정할 수 있도록 하였습니다. 
2. 변경된 사항을 메인 화면에 간편하게 반영할 수 있도록 하였습니다. 
3. 데이터 피커를 통해 효율적으로 데이터를 서빙하고 쉽게 변경할 수 있도록 설계하였습니다. 
4. 전시 컴포넌트의 필드 값들을 모두 재사용 할 수 있게끔하여 간편하게 교체하여 사용할 수 있습니다. 

이를 통해 전시 서비스의 개발과 운영의 효율성을 증대시켜, 기획 담당 직원분들이나 편성 담당 직원 분들도 손쉽게 전시 구좌를 등록하고 운영할 수 있는 인터페이스를 만들었습니다.

0개의 댓글