더 좋아진 29CM 입점회 시리즈

브랜드 섹션 자동화를 위한 코드 컴포넌트 개발

29CM에서는 매주 수요일과 일요일에 입점회가 열린다는 사실, 이미 알고 계시겠죠? 

'수요입점회'에서는 패션 신규 브랜드를, '일요입점회'에서는 라이프 신규 브랜드를 단 하루동안 29%라는 막강한 혜택으로 소개하고 있어요.

이 시리즈는 여러 브랜드를 하나의 콘텐츠에 소개하면서, 브랜드 이름, 설명, 브랜드 홈 버튼이 포함된 브랜드 섹션이 매주 반복해서 등장하는 특징을 가지고 있습니다.

좀 더 효율적으로 작업할 수 없을까?

Framer 이전에는 콘텐츠를 제작할 때 각 요소를 개별적으로 등록해야 했어요. 예를 들어 선, 텍스트, 화살표 아이콘 등을 따로 입력해야 했죠. 그러나 Framer를 사용하면서 면 브랜드 이름, 설명, 브랜드 홈 링크와 같은 변화하는 값만 입력하면 한 번에 모든 요소를 그릴 수 있게 되었어요. 이렇게 제작 도구가 변화하면서 작업 효율이 크게 향상되었죠.

브랜드 섹션을 만드는 차이 (위) Post vs (아래) Framer

하지만 브랜드가 많을 때 이름, 설명, 링크를 일일이 입력하는 작업은 작업 효율을 저하시키는 또 다른 요소로 작용하게 되었죠.

개선된 브랜드 섹션 구조

바로 지금, 코드 컴포넌트가 필요한 때

디자이너가 브랜드 섹션에 일일이 입력하는 값은 사실 브랜드 조회 API를 통해 얻을 수 있는 정보입니다. 필요한 정보는 단 하나, 브랜드 아이디였죠. 그래서 우리는 브랜드 조회 API 요청을 통해, 브랜드 아이디를 받아와서 자동으로 브랜드 섹션을 그릴 수 있도록 브랜드 섹션 컴포넌트를 개선했습니다. 

브랜드 프로바이더 구조

또한, 콘텐츠마다 브랜드 섹션에 대한 룩이 다를 수 있으므로, 컴포넌트를 조절할 수 있는 control을 제공하였습니다. 약속된 prop name을 사용하면 어떤 컴포넌트든 브랜드 정보를 받아 동적으로 브랜드 섹션을 그릴 수 있게 되었습니다.

addPropertyControls 를 사용하여 컴포넌트를 prop 으로 받을 수 있어요.

Framer, where creative meets technology.

브랜드 프로바이더의 도입으로 '입점회' 콘텐츠의 제작 시간은 브랜드당 평균 16분 단축되었습니다. 이로써 디자이너의 시간과 노력을 절약하면서도 다양한 룩을 가진 브랜드 섹션을 자유롭게 구성할 수 있게되었다는 기분 좋은 결과까지 얻을 수 있었어요.

제가 속한 콘텐츠 스쿼드에서는 상품 프로바이더, 쿠폰 프로바이더 등의 컴포넌트를 추가로 개발하여 API 요청을 통해 디자이너의 작업 효율과 디자인 자유를 동시에 높일 수 있는 실행을 계속해 나가고 있습니다.

Framer의 작업 효율을 높이기 위해 고민 중, 이 글을 만나셨다면 코드 컴포넌트 활용을 고려해 보는 것은 어떨까요?

한지원 | 엔지니어링
Framer를 통해 더욱 창의적이고 효율적인 콘텐츠 제작 환경을 만들어가는 개발자입니다.