클라이언트가 처음 이런 말을 꺼냈을 때 솔직히 당황했습니다. "블로그랑 포트폴리오를 저희가 직접 관리하고 싶은데, 디자이너한테 매번 부탁하긴 좀 그렇고요." 개발자 없이 디자인도 챙기면서 콘텐츠 관리까지 넘겨야 하는 상황. 그때 Framer CMS를 제대로 파고들기 시작했고, 결과적으로 그게 5년 차 프리랜서로서 새로운 전환점이 됐습니다.
CMS 컬렉션, 왜 디자이너한테 게임체인저인가
CMS(Content Management System)란 웹사이트에 새 콘텐츠를 추가할 때 디자인 캔버스를 건드리지 않아도 되는 콘텐츠 관리 시스템입니다. 쉽게 말해, 블로그 글을 하나 올리고 싶을 때 Figma나 Framer 에디터를 열지 않아도 된다는 뜻입니다. 그냥 정해진 입력란을 채우면 페이지가 자동으로 생성됩니다.
제가 직접 써봤는데, 이게 처음에는 별거 아닌 것처럼 느껴졌습니다. 그런데 클라이언트 프로젝트에서 블로그·프로젝트·팀 컬렉션 3개를 동시에 운영해보고 나서 생각이 완전히 바뀌었습니다. 클라이언트가 저한테 연락하지 않고도 새 팀원 소개 페이지를 올리고, 포트폴리오 케이스 스터디를 추가하는 걸 보면서 "아, 이게 진짜 서비스구나" 싶었거든요.
Framer에서 CMS 컬렉션을 설정하면 각 컬렉션마다 필드(Field)를 정의하게 됩니다. 필드란 각 항목이 갖는 데이터 속성값으로, 제목·슬러그·날짜·이미지·본문 콘텐츠 같은 것들입니다. 여기서 슬러그(Slug)란 각 페이지의 URL 경로를 결정하는 텍스트 값으로, 예를 들어 yoursite.com/articles/getting-started에서 getting-started 부분이 슬러그입니다. 보통 제목을 기반으로 자동 생성됩니다.
국내 노코드·로우코드 시장이 빠르게 성장하면서 Webflow, Squarespace 같은 CMS 기반 빌더들이 주목받고 있는데(출처: Gartner), Framer는 그중에서도 디자이너 친화적인 인터페이스와 React 기반 렌더링 성능을 동시에 갖춘 드문 도구입니다. 제 경험상 Webflow보다 진입 장벽이 낮고, 디자인 자유도는 오히려 더 높다고 느꼈습니다.
디테일 페이지와 멀티 레퍼런스 필드, 설계가 전부다
Framer CMS의 핵심은 디테일 페이지(Detail Page)에 있습니다. 디테일 페이지란 CMS 컬렉션의 모든 항목에 공통으로 적용되는 템플릿 페이지로, 한 번만 디자인하면 100개든 200개든 모든 항목 페이지에 동일한 레이아웃이 자동 적용됩니다. 제가 직접 써봤을 때 가장 강력하다고 느낀 부분이 바로 여기였습니다. 레이아웃 수정 한 번으로 전체 항목이 한꺼번에 업데이트되니, 기존에 페이지마다 일일이 수정하던 작업 방식과 비교하면 시간이 체감상 절반 이하로 줄었습니다.
그런데 디테일 페이지 설계에서 초보자들이 가장 많이 실수하는 지점이 있습니다. 어떤 항목은 썸네일 이미지가 있고, 어떤 항목은 없는 상황입니다. 이걸 모르고 템플릿에서 이미지 프레임을 그냥 지워버리면, 이미지가 있는 다른 모든 항목에서도 이미지가 사라집니다. 하나의 템플릿이 전체에 적용되기 때문입니다. 올바른 해결책은 이미지 컴포넌트의 가시성(Visible) 속성에 조건을 설정하는 것입니다. "이미지 필드가 설정된 경우에만 보이도록" 조건을 걸면, 이미지가 없는 항목에서는 자동으로 숨겨지고, 있는 항목에서는 정상적으로 표시됩니다. 제 외주 작업에서도 이 설정 하나로 클라이언트가 이미지 없는 글을 올려도 레이아웃이 깨지지 않게 됐습니다.
카테고리 분류 방식도 처음에는 그냥 옵션 필드로 만들었는데, 실제 운영해보니 멀티 레퍼런스 필드(Multi-reference Field) 방식이 훨씬 유리했습니다. 멀티 레퍼런스 필드란 다른 CMS 컬렉션의 항목을 여러 개 참조할 수 있는 필드 유형으로, 카테고리를 별도 컬렉션으로 분리해서 관리할 때 사용합니다. 예를 들어 카테고리 이름을 "Framer"에서 "Framer Tips"로 바꾸면, 그 카테고리를 참조하는 모든 게시글에 자동으로 반영됩니다. 옵션 필드 방식이었다면 항목 하나하나를 들어가서 수정해야 했을 텐데, 컬렉션 기반 참조 구조를 쓰면 그 수고가 사라집니다.
제가 지금 외주 3건에서 재사용하고 있는 CMS 템플릿 4종의 핵심 구성은 다음과 같습니다.
- 블로그 템플릿: 제목·날짜·썸네일·본문·카테고리(멀티 레퍼런스) 필드 구성
- 포트폴리오 템플릿: 프로젝트명·클라이언트·썸네일·서브 이미지·태그 필드 구성
- 이벤트 템플릿: 이벤트명·날짜·장소·썸네일·신청 링크 필드 구성
- 이커머스 템플릿: 상품명·가격·이미지1·이미지2·카테고리 필드 구성
이 구성을 한 번 잡아두니 새 외주 프로젝트마다 설계 시간이 크게 줄었고, 클라이언트 인수인계도 훨씬 깔끔해졌습니다.
필터링과 SEO, 한국 시장에서 Framer를 제대로 쓰는 법
Framer CMS의 필터링 기능은 생각보다 강력합니다. CMS 컬렉션 프레임(Collection Frame)이라는 전용 컴포넌트를 사용하는데, 이 프레임 안에 아이템 하나만 디자인해두면 컬렉션 전체 항목이 자동으로 반복 렌더링됩니다. 여기에 카테고리 필터를 조합하면, 사용자가 "Framer" 버튼을 클릭했을 때 해당 카테고리 항목만 보이는 인터랙티브 필터링을 코드 없이 구현할 수 있습니다.
제가 직접 구현해봤는데, 컴포넌트 배리언트(Variant)를 활용한 방식이 핵심이었습니다. 배리언트란 하나의 컴포넌트가 가질 수 있는 여러 상태 버전을 의미하는데, 필터 옵션별로 배리언트를 만들어두고 클릭 이벤트로 배리언트를 전환하는 구조입니다. 처음 설정할 때는 "이게 진짜 되나?" 싶었는데, 실제로 작동하는 걸 보고 나서 예상 밖으로 완성도가 높다는 걸 느꼈습니다.
다만 솔직히 말하면, 영상에서 다루는 내용은 여기까지입니다. CMS 자체 기능을 배우기엔 충분하지만, 실제 외주를 받아서 운영하다 보면 SEO 최적화가 훨씬 중요한 변수가 됩니다. 메타 태그(Meta Tag)란 검색엔진이 페이지 내용을 파악하는 데 사용하는 HTML 헤더 정보이고, OG 이미지(Open Graph Image)란 SNS에 링크를 공유할 때 자동으로 표시되는 미리보기 이미지입니다. Framer CMS에서는 이 두 가지를 컬렉션 필드와 연동해서 항목마다 자동으로 설정할 수 있는데, 제 외주에서 이 가이드를 별도로 세팅한 클라이언트는 첫 달부터 검색 유입이 가시화됐습니다.
구글 서치 콘솔 공식 데이터에 따르면 모바일 검색이 전체 검색의 60% 이상을 차지하며, SEO 최적화 없이 론칭한 사이트는 초기 노출 기회를 상당히 놓치게 됩니다(출처: Google Search Central). Framer CMS는 이 부분을 필드 연동만으로 해결할 수 있다는 점이 다른 빌더 대비 강점입니다.
한국 시장에서 Framer는 아직 마이너한 선택지입니다. 한국어 학습 자료나 커뮤니티가 부족하다 보니 처음 접하는 디자이너들이 중간에 포기하는 경우도 많습니다. 하지만 제 경험상 이게 오히려 기회입니다. Framer로 디자인부터 CMS 운영까지 혼자 커버할 수 있게 되면서, 개발자 없이 풀 사이트를 납품하는 게 가능해졌고 실제로 일반 외주 대비 마진율이 두 배 수준으로 올라갔습니다.
Framer CMS를 처음 배우는 분이라면 먼저 블로그 컬렉션 하나로 시작해서 디테일 페이지 설계와 가시성 조건 설정을 직접 손으로 만들어보는 걸 권합니다. 이론보다 실제로 항목을 추가하고 페이지가 자동 생성되는 걸 눈으로 확인하는 순간, 이 도구의 가치가 체감됩니다. 그다음엔 멀티 레퍼런스 필드와 필터링, 그리고 SEO 필드 연동 순서로 확장해나가면 외주에서 바로 쓸 수 있는 수준이 됩니다. 한국 시장에서 Framer를 제대로 다루는 디자이너가 아직 많지 않은 만큼, 지금이 진입하기 좋은 시점이라고 생각합니다.