3주만에 가능할까? FE 개발자의 기획부터 개발까지의 이야기

 

 

Created by ChatGPT

 

 

 

안녕하세요! 저는 컬리에서 웹 프론트엔드 개발을 하고있습니다.
기존의 전통적인 이커머스 서비스의 상품 탐색과 구매 여정을 새로운 방식으로 풀어가기 위한 TF에 참여한 경험을 소개시켜드립니다. 또 새로운 서비스 쇼케이스를 만들어가게되는 과정 속 백엔드 개발자 없이 제품을 출시하는 이야기도 함께하려고 합니다.

 

*이 아티클에서는 개발 구현 사항에 아주 구체적인 이야기를 하지 않습니다.

 

보통 기획-디자인-개발-QA의 프로세스를 이터레이션하며 하나의 제품을 개발하곤 합니다. 이 글에서는 한번의 이터레이션 경험을 기획 시작부터 출시까지 2~3주간의 여정 이야기를 들려드리려고 합니다.

 

아이디어 수립은 여러가지 방법이 있습니다. 흔히 알고 있는 브레인 스토밍 기법 부터 단순히 생각나는 아이디어를 꺼내 이야기해보는 방법까지 다양합니다.(이 글에서는 아이디어를 수립하는 것이 주요한 주제가 아니기에 자세히 다루지 않겠습니다.)

 

사용자에게 맛과 퀄리티가 검증된 상품을 제공한다는 컬리의 중요한 컨셉과 일치하여 재밌을 것 같다고 생각했습니다.

 

 

 

  UX/UI와 설계는

이커머스의 제품에는 특정 카테고리의 상품을 전시하고 설명을 보여주는 전통적이고 관습적인 방식이 있습니다. 대부분의 이커머스는 상품 목록과 상품 상세 페이지를 통해서 상품을 탐색하고 설명하려고 합니다. 이러한 UX의 틀을 바꿔보기 위해서 목록의 탐색 경험과 상품 구매 경험을 함께 할 수 있도록 하는 UX/UI를 고민하게 되었습니다.

 

컬리는 하나의 상품을 출시하는 MD가 직접 검증하고 다수의 팀과 확인하여 제품을 소개합니다. 그 만큼의 컬리 상품상세는 직접 선택한 실무자의 의도가 많이 반영되어 있다는 것을 알 수 있는데, 그점에 착안하여 각 상품의 설명은 상품 상세 페이지의 디스크립션을 사용하여 만들어내는 것을 결정하게 되었습니다. 그렇게 하여 말 그대로 쇼케이스에 담긴 선정된 상품을 소개하는 쇼케이스라는 이름의 서비스가 탄생합니다.

 

  개발을 위해 고려해야하는 것

만들고자하는 서비스는 어쩌면 이벤트 페이지와 같이 단발성 홍보 페이지가 되길 바라지 않았습니다. 또 상품을 전시될 상품의 콘텐츠 제작을 위해서 많은 공수가 들지 않으면서 설득력 있는 설명이 있고, 페이지가 지루하지 않으면 좋겠다고 생각했습니다.

 

1. 재사용

그렇다면 재사용 가능하도록 제작하기 위해서 전체 페이지를 블록 단위로 구분하고 모듈을 조합하는 형식이 되어야겠다는 생각을 하게 되었고 각 영역을 분리하기 시작했습니다. 인트로 페이지를 시작으로 콘텐츠 영역 내의 여러 타입의 블록을 구성하여 조합하여 사용할 수 있도록 했습니다.

 

2. 콘텐츠 제작을 쉽고 빠르게

콘텐츠는 출시된 상품의 상품상세 디스크립션을 사용하여 제작되기 때문에 특별히 검수해야 것은 없었기 때문에 데이터를 구성하여 템플릿에 집어 넣을지만 생각하면 됐습니다. 따라서 재사용되는 블록 단위의 컴포넌트를 어떤식으로 구성하냐를 결정하면 데이터를 나열하기만 하도록 결정했습니다. 그러나 쇼케이스에서 보여주고자 하는 특정한 정보만을 위해서 새로운 API를 구성하는 것보다 간단한 방식을 고민했고 AWS S3를 통해 콘텐츠 데이터를 관리하게 되었습니다.

 

상품 판매에 대한 정보는 기존 컬리몰에서 사용중인 API 중 유저 기반의 상품 정보 제공을 위한 API를 사용하게 되었습니다. 상품을 전시하는 것 중 유저에게 약간은 민감한 부분으로 가격과 할인 정보, 판매여부와 같은 것들이 있습니다. 기존에 잘 만들어진 API를 사용하여 실시간으로 변동되는 상품 정보를 가져올 수 있도록 합니다.

 

3. 지루한 콘텐츠는 보기 어렵다

일반적인 유저라면 긴 글과 자세한 설명은 지루하고 소모적이라고 판단합니다. 시각적인 효과와 재미있는 효과를 통해 스크롤 액션을 계속 발생하게 할 수 있도록 하는 요소를 고민하는 중 인터렉티브 UI가 적용된 다양한 사이트를 둘러보게 되었습니다. 페이지에 진입했을 때, 스크롤을 다운하거나 업할 때, 상품 콘텐츠가 변경될 때 등을 고려하여 다양한 애니메이션과 효과를 적용해보았습니다.

 

 

 

  개발하기 위해서

컬리의 상품정보는 유저가 배송받는 위치를 기반으로 실시간 변동됩니다. 이 점을 고려하여 유저 데이터를 기반으로 상품 정보를 가져와야한다는 미션이 있었습니다. 기존 사용되던 API를 활용하여 개발이 가능하다는 검증을 통해서 백엔드 개발자 없이 개발하는 것을 결정하게 되었습니다. 추가적인 고려사항으로 페이지는 빠르게 렌더링되어야하며 인터렉티브한 애니메이션 효과에 대한 요구사항이 있습니다.

 

  UI?

제품의 지속가능성을 고려해 템플릿화(블록단위의 분리)를 했습니다. 각 블록 단위는 타입을 가지며 S3에 배포된 JSON 데이터에 명시되어 있는 형태에 끼워맞춰 콘텐츠를 보여줍니다. 그래서 각 블록을 구성하는 요소의 데이터 구조 단일화를 통해서 어떤 타입의 블록이더라도 마케팅팀이 원하는 블록을 사용할 수 있도록 분리했습니다.

 

블록단위로 운용되는 컴포넌트가 결정되니 각 위치에서 사용될 애니메이션이 쉽게 결정될 수 있었습니다. 애니메이션은 첫 화면에서 사용자가 스크롤을 통해 몰입감을 줄 수 있도록 'SHOW CASE' 라는 글자 속으로 들어가는 효과와 이번 쇼케이스의 키워드를 보여주는 페이지를 설정했습니다. 그리고 연속적으로 소개되는 상품 콘텐츠를 스크롤시 나타나게하여 스크롤 액션을 유도했습니다.

 

  데이터?

상품의 데이터는 실시간으로 정확하게 서빙되어야 합니다. 위에서도 말했다시피 상품 데이터는 사용자에게 민감한 정보입니다. 상품 콘텐츠 번호를 쇼케이스 콘테츠 데이터와 1:1로 매칭하여 데이터의 연결하고 API를 통해서 받아올 수 있는 상품 정보를 쇼케이스 콘텐츠에 반영합니다.

 

콘텐츠는 위에서 여러번 언급했듯이 AWS S3를 통해서 설명과 이미지를 제공합니다. 이 부분에 대해서 API와 매칭되어야 하는 콘텐츠 번호 아래 콘텐츠를 설정하면 자동으로 블록단위에 주입되어 콘텐츠를 노출합니다.

 

 

 

 

  마치며

 

이렇게 컬리 쇼케이스를 개발했던 여정에 대해서 들려드렸습니다. 이번 과정을 통해 다시 한번 다양한 담당자들과 소통하고 협의하는 방법을 배우게 된 것 같습니다. 또 아이디어를 빠르게 구현하고 출시하는 것에 대해서 즐거움을 느꼈습니다.

 

우리는 제품을 개발하는데 혼자 만들어내지 않습니다. 그렇기 때문에 제품이 만들어지는 과정의 전체적인 프로세스를 이해하고 과정중 병목지점과 실행방식을 계속해서 고민할 필요가 있습니다. 다만 이것들을 더 매끄럽게 진행해가는 것은 할때마다 쉽지만은 않다는 것을 느낍니다.

 

쇼케이스 페이지를 직접 확인해보세요!

https://www.kurly.com/events/showcase/202410

*Mobile 브라우저와 앱에서만 확인가능합니다.