리멤버 Framer 도입기

Framer 도입 과정과 적용 사례를 공유합니다

안녕하세요. 프로덕트 디자이너 김희경입니다. 저는 현재 리멤버의 파운데이션 크루에서 여러 조직들의 빠른 실행을 위한 업무 효율화와 새로운 사업적 시도를 할 수 있도록 제품을 개선하거나 새롭게 만드는 일을 하고 있는데요. 오늘은 제가 올해 진행한 업무 중 하나였던 사내 Framer 도입 경험을 공유하고자 합니다.

리멤버에는 크게 두 가지 방식으로 구현된 웹사이트가 존재했습니다. 첫 번째는 과거에 만들어져 지금까지 사용되고 있는 워드프레스와 여러 웹 빌더 서비스를 활용한 웹사이트 이고, 두 번째는 제품 조직의 리소스를 활용해 직접 개발한 형식의 웹사이트들입니다. 이처럼 구현 방식이 다양하게 나뉘어 있다 보니, 관리해야 하는 프로그램이 복잡해지고 CMS를 사용해야하는 동료들이 이를 학습하기에도 어려움이 있었습니다.

특히, 워드프레스와 다른 웹 빌더 서비스 자체가 가진 문제들도 있었는데요. 워드프레스 CMS는 처음 사용하는 동료들에게는 학습 난이도가 높았으며, 각 웹 빌더 서비스들 마다 원하는 수준의 디자인과 자유도가 반영된 화면을 구현하기 어려웠습니다. 이러한 문제들로 인해 워드프레스와 웹 빌더 서비스를 사용하는 리멤버의 서비스 화면과 랜딩 페이지는 다른 제품에 비해 레거시 디자인이 많이 남아 있었고, 업데이트가 원활히 이루어지지 않아 오래된 느낌을 주는 문제가 있었습니다.

더불어 마케팅 조직과 사업실에서 다양한 목적으로 활용할 수 있는 웹 사이트와 콘텐츠 발행 시스템이 필요한 시점이기도 했습니다. 이를 위해, 제품 조직의 리소스를 효율적으로 활용하면서도 원하는 퀄리티를 유지할 수 있는 방안을 찾기 위해 리서치를 진행하게 되었습니다.

고려 사항

디자이너가 디자인한 그대로 퍼블리싱이 가능한가?
웹 개발 리소스를 최소한으로 사용하여 정적/동적 페이지 구현이 가능한가?
CMS를 처음 사용하는 사람도 빠르게 학습하고 사용할 수 있는가?
SEO 관리가 가능한가?
지표 측정을 위한 Analytics 설정을 할 수 있는가?

위와 같은 기준으로 여러 웹 빌더 서비스를 살펴보았고, 결과적으로 Framer를 도입하기로 결정했습니다.

왜 Framer인가?

새로운 툴을 도입한다는 것은 그만큼 새로운 학습 부담과 비용, 그리고 관리해야 하는 업무 범위가 늘어난다는 뜻이기도 합니다. 그럼에도 불구하고 Framer를 도입하게 된 3가지 이유가 있었습니다.

빠른 학습 : 프로덕트 디자이너뿐만 아니라 CMS를 처음 사용하는 사용자가 쉽게 학습할 수 있음
올인원 솔루션 : 화면 디자인, CMS 설정, 배포를 한곳에서 수행할 수 있어 원하는 퀄리티로 빠르게 배포하고 수정할 수 있음
개발 리소스 절감 : 웹 프론트엔드 개발자 투입 없이 사이트 구축 가능

빠른 학습과 올인원 솔루션, 결정적으로 개발 리소스를 크게 절감할 수 있다는 점이 Framer를 도입하게 된 가장 큰 이유였습니다. 도입 후 가장 먼저 정적인 랜딩페이지 작업에 Framer가 도입되었고, 이후 CMS를 활용한 블로그형 콘텐츠 페이지 구축에도 Framer를 적극적으로 활용하게 되었습니다.

리멤버에서 Framer를 활용한 사례

다음은 리멤버에서 Framer를 적용한 사례 중 제가 작업을 맡아 진행했던 부분을 공유드려볼까 합니다.

Pro:logue(프롤로그)

리멤버 프롤로그는 업계 프로페셔널 인사를 만나 성공과 커리어에 대한 이야기를 나누는 인터뷰 콘텐츠입니다. 각 인터뷰이가 돋보이는 디자인의 리스트 페이지와 가독성을 고려한 아티클 페이지로 구성되었습니다. 리멤버에서 Framer CMS를 활용한 첫 사례로, Framer로 작업하기 전 Figma에 정의된 리멤버 디자인 시스템을 초기 설정하는 데 시간이 꽤 걸렸던 기억이 있습니다. (디자인 시스템은 초기에 세팅해두면 여러 프로젝트에 활용할 수 있어 초기 리소스를 투자하면 이후에는 편리하게 작업할 수 있습니다.)

Biz:logue(비즈로그): HD현대

HD현대 비즈로그 콘텐츠는 프롤로그의 기업향 콘텐츠로, 기업의 숨은 성공 히스토리를 전달하는 아티클 페이지입니다. 인터랙션과 이미지, 영상 소스를 활용해 HD현대의 특성이 잘 드러나도록 페이지를 구성하는 작업이 많아 재미있게 진행했던 기억이 있습니다.

리멤버 채용 솔루션 블로그

고객 사례, 인사이트 등 CMS를 활용한 블로그 콘텐츠와 리소스 페이지처럼 Framer native form을 활용해 리드 수집이 가능한 페이지 작업도 진행하였습니다. 이 작업을 통해 본격적으로 CMS와 3rd party 기능을 엮어보는 작업도 경험하게 되었습니다.

이벤트 사이트

리멤버 서비스에는 B2C 유저를 위한 다양한 이벤트와 혜택이 존재합니다. 이를 효과적으로 운영하고 전달하기 위해 이벤트 사이트를 구축하게 되었는데요. 이벤트 및 혜택 생성은 CMS를 활용해 블로그 글을 쓰듯 손쉽게 이벤트 페이지를 구현할 수 있도록 했습니다. (내부에서 활용하는 웹사이트인 만큼 이벤트 사이트 도메인은 공개가 되지 않지만, 리멤버의 다양한 이벤트 페이지는 대부분 Framer CMS를 활용하여 생성되었으니 서비스에서 보게 되면 반가워해주세요!ㅎㅎ)

그 외에도 리멤버의 일본 자회사 MyBridge의 고객 사례 블로그 작업 등 점점 더 다양한 곳에 Framer가 적용되고 있습니다.

Framer 도입 후

장점

웹 프론트엔드 개발 리소스 절감

CMS라는 데이터베이스 구조부터 그 데이터를 변수로 사용한 디자인 작업과 배포까지 모든 단계를 한 사람이 하기 때문에 효율성이 극대화되는 장점이 있습니다. 워드프레스를 사용할 때는 디자인 변경을 위해 개발자와 협업이 필요했지만, Framer는 디자이너만으로도 디자인 수정과 배포가 가능해졌습니다. 이로 인해 시간과 리소스를 절약할 수 있었습니다.

빠른 시도 가능

디자이너가 새로운 콘텐츠 페이지나 웹사이트를 빠르게 구성하고 배포하여 사용자 반응을 확인할 수 있게 되었습니다. 또한 디자인과 콘텐츠 팀 간의 협업을 보다 쉽게 만들어 주었습니다. CMS를 통해 콘텐츠 작성자가 직접 페이지를 수정할 수 있어, 디자이너와 개발자 간의 반복적인 커뮤니케이션이 줄어들었습니다.

우려되는 점

Framer 기술 의존성

사내에는 아직 Framer를 사용하여 제품화할 수 있는 인력이 많지 않아 관련 업무가 몇몇 사람에게 집중되는 문제가 있었습니다. 사실 업무 과중보다도 기술이 개인에게 집중되는 현상은 조직에 리스크가 될 수 있다고 생각합니다.

이런 문제를 해결하고자 최근에는 프로덕트 디자인팀 모두가 Framer에 대한 비슷한 수준의 이해도를 가지고 작업할 수 있도록 Framer 워크숍을 진행하기도 했습니다. 워크숍에서는 프론트엔드 개발 지식이 없는 팀원들도 쉽게 이해할 수 있도록 기본적인 CMS 사용법과 디자인 시스템 활용법을 중점적으로 교육하여 전반적인 툴 이해도를 높일 수 있었습니다.

완전한 노코드?

웹 프론트엔드 개발 리소스를 절감했다는 장점을 앞서 말씀드렸지만 그렇다고 해서 ‘Framer가 완전한 노코드 툴인가?’라는 질문에는 ‘아니오’라고 답할 수 있습니다. Framer는 기본적으로 매우 직관적이고 사용자 친화적인 도구지만, CMS 본문에 적용되는 고급 CSS 스타일링이나 데이터 추적을 위한 사용자 정의 기능을 추가하려면 코드를 작성해야 합니다.

마치며

Framer 도입 후기를 작성하면서 짧은 기간 동안 꽤 많은 프로젝트 결과물이 남게 되었음을 실감하게 되었는데요. 역시 빠르게 시도할 수 있는 툴이라서 다양한 프로젝트에 활용할 수 있었던 것 같습니다.

하지만 세상에 완벽한 툴은 없기 때문에 무조건적인 추천을 할 수 있는 툴은 아닐 수 있습니다. 만약 저희처럼 제품 조직의 리소스를 효율적으로 사용하려는 목적과 웹 기반으로 빠른 시도를 원한다면 Framer 사용을 추천합니다.

개인적으로는 사이드 프로젝트로 개인 블로그를 만들며 학습했던 Framer라는 툴을 사내에 도입하고 적극적으로 활용해 볼 수 있던 한 해가 되었던 것 같습니다. 내년에는 저뿐만 아니라 디자인 팀원 모두가 Figma만큼 Framer를 편하게 다룰 수 있도록 스터디를 운영해 볼 계획입니다.

더불어 기존에 사용하던 Figma는 디자인 중심의 툴이었다면, Framer는 CMS라는 데이터베이스를 활용하여 디자인에 데이터 변수를 활용하는 부분이 많은데요. 확실히 코드 베이스로 이루어져 있어 웹 환경에 대한 이해도를 높일 수 있다고 생각됩니다. 이런 이유로 실무에서 직접 사용하지 않더라도 프로덕트 디자이너분들이 Framer를 많이 활용해 보셨으면 좋겠습니다.