프레이머에서 메타데이터 관리하기

콘텐츠의 메타데이터를 관리하는 새로운 방법

안녕하세요, 29CM 콘텐츠 스쿼드의 프론트엔드 개발자 임규민입니다.

29CM은 Framer를 도입하여 콘텐츠를 제작하고, 기존에 다른 제작도구를 통해 만들어진 콘텐츠들을 이관하는 작업을 진행하고 있어요. 

오늘은 콘텐츠 발행을 위해 필요한 정보인 메타데이터를 관리하는 과정에서의 고민과 해결 과정에 대해 이야기해 볼게요.

29CM은 브랜드뉴스, 쇼케이스, 포스트 등 다양한 종류의 콘텐츠들을 제작하고 있어요. 그리고 콘텐츠들에는 제목, 설명, 커버 이미지, 노출 기간 등 기본적으로 가지고 있어야 할 메타데이터가 있죠.

Framer라는 새로운 제작 도구가 추가되면서 이 도구를 통해 발행되는 새로운 종류의 콘텐츠에 대한 메타데이터를 관리할 방안을 찾아야 했어요. 

목표는

1) Framer에서 퍼블리싱을 하고

2) 발행에 필요한 메타데이터 입력 후 

3) 버튼 클릭 한 번으로 

정보를 모두 갖춘 완성 콘텐츠가 만들어지는 것.

디자이너의 입장에서 Framer로 제작뿐만 아니라 메타데이터의 관리까지 할 수 있다면 작업 효율이 더 높아질 것이고, 별도의 어드민을 구축하지 않아도 되어 비용 측면에서의 이점도 있었어요. 

디자이너분들께 기술의 맛을 보여드릴 생각에 두근거림이 멈추질 않았습니다.

https://gist.github.com/gyuminlim-29cm/aaee9fd77ac6bc7e8fcd23f4f3770572

Framer에서 제공하는 Code Component와 Property Controls 기능을 이용해 툴 내에서 메타데이터를 입력할 수 있는 컴포넌트를 만들었어요. 그리고 Framer의 발행 버튼을 클릭해 발행이 완료되는 시점에 메타데이터를 적재하는 기능을 구현할 차례였죠. 구현 방안으로 Framer에서 제공하는 발행이 완료된 시점을 관찰할 수 있는 Web-hook이나 내부 API를 사용하면…

사용할 수 없네요. 이런. Framer에서 제공해 주지 않고 있었습니다.

구상했던 프로세스의 핵심 기능이기 때문에 다른 구현 방안을 찾아야 했고, 다양한 방법들을 고민해 본 끝에 Chrome Extension을 구현해 보기로 했어요. Chrome Extension은 다양한 흑마법 같은 기능들을 제공하고 있었거든요. 그중 페이지 내에서 호출되는 HTTP 요청을 관리할 수 있는 Web Request API를 사용하면 Framer에서 페이지가 발행 완료되는 시점을 알 수 있었죠. 또한 추후에 Framer를 더욱 편리하게 사용하도록 다양한 기능을 접목시킬 수 있어, 확장성 측면에서도 이점이 있어 이 방향성을 결정하게 되었어요.

https://gist.github.com/gyuminlim-29cm/0c4410e228eb9ce8e61c00a7b8144d2a

1) Framer에서 메타데이터 입력

2) 입력한 데이터를 Chrome Extension에 전달

3) Chrome Extension에서 Framer 페이지 발행 시점에 전달 받은 메타데이터로 적재 API를 호출

마침내 완성된 콘텐츠를 만들어낼 수 있도록 구현했어요!

이렇게 Framer에서 콘텐츠 제작뿐만 아니라 발행까지 수행할 수 있게 되어, 디자이너분들이 더욱 편하게 작업할 수 있게 되었어요. 이 글을 쓰는 지금까지 141개의 Framer로 제작한 콘텐츠의 메타데이터가 적재되었답니다.

이처럼 콘텐츠 제작의 생산성을 높이기 위해 필요한 과제들을 풀어나가며 29CM만의 Framer로 발전시킬 수 있을 거라 생각되어 앞으로가 기대되네요!

임규민 | 엔지니어링
콘텐츠 제작의 생산성을 위해 다양한 기술적 시도를 하고자 합니다.