CMS
2025. 7. 9.
CMS 페이지 사용법: 컬렉션 생성부터 디자인까지
Framer의 CMS 페이지를 통해 콘텐츠를 효율적으로 관리하고 자동 생성할 수 있습니다. 컬렉션과 필드를 설정하여 블로그와 뉴스 등 다양한 형식의 콘텐츠를 쉽게 연결하고 디자인할 수 있는 방법을 제공합니다.
Posted By
Framer Space
목차
Table of Contents
본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.
CMS 페이지란?
CMS 기능을 활용하여 블로그나 뉴스처럼 여러 콘텐츠가 반복되는 페이지를 자동으로 만들 수 있는 페이지입니다. 하나의 디자인을 기반으로 여러 항목을 빠르게 구성할 수 있어, 대규모 콘텐츠를 관리할 때 정말 편리합니다.
CMS란?
Content Management System(콘텐츠 관리 시스템)의 줄임말입니다.
디자이너 없이 글만 입력하더라도 기존에 지정된 디자인으로 페이지가 만들어지기 때문에 블로그, 뉴스, 제품 목록처럼 콘텐츠가 많고 계속 바뀌는 경우에 유용합니다.
CMS Collection 만들기
CMS 페이지를 사용하기 위해서는 먼저 콘텐츠의 틀이 될 컬렉션(Collection)을 만들어야 합니다.Note : CMS 컬렉션이란 비슷한 유형의 콘텐츠를 모아둔 폴더입니다. 쉽게 말해서 콘텐츠 그룹이라고 할 수 있습니다.
CMS Collection 만드는 방법
Framer 상단 메뉴에서
CMS클릭사이드바에서
+버튼 눌러 새 컬렉션 생성컬렉션 이름 입력 (예: Articles, Products 등)
필드(Fields) 설정하기
필드(field)는 각 CMS 콘텐츠 아이템 안에 들어가는 데이터의 종류와 구조입니다.
필드 설정 방법
상단 바의
Edit Fields클릭필요한 필드 추가
필드 유형:
Plain Text: 제목처럼 짧은 텍스트Formatted Text: 본문처럼 긴 텍스트Image: 배너나 썸네일Date: 게시 날짜각 필드는 이름 변경, 설명 추가, 필수 여부(Required) 설정 가능
Note : 팀 협업 시 필드에 설명을 추가하면 명확하게 전달할 수 있습니다.
항목(Item) 추가하기
컬렉션(Collection)안에 들어가 있는 각의 콘텐츠 한 개가 바로 항목(Item)입니다.
항목(Item) 추가하는 방법
생성한 컬렉션을 클릭
상단 바의
New Item선택각 필드에 블로그 글 제목, 날짜, 이미지, 본문 내용 등을 입력
이렇게 추가한 각 항목은 CMS 페이지 하나로 연결됩니다.
CMS Detail Page 디자인하기
사이드 탭의 페이지에서
+버튼 클릭 →New CMS Page선택연결할 컬렉션(Collection) 선택 (예: Articles)
Detail Page 선택
Index Page: 항목 목록(블로그 리스트, 카드뷰 등)Detail Page: 단일 항목 내용 페이지
선택한 컬렉션의 필드들이 자동으로 페이지에 연결
[+]insert>Fields탭에 있는 요소를 활용하여 디자인
Q. CMS Detail 페이지를 만든 이후에 새로운 필드를 추가할 수 있나요?
CMS 컬렉션으로 돌아가서
Edit Fields선택새 필드 추가 (예:
Link필드)CMS 항목에 해당 필드 내용 입력
변수(Variables)를 사용하여 CMS 페이지에 Link필드 연결하는 방법
Q. 페이지마다 존재하는 필드 항목이 달라야하면 어떡하나요?
어떤 글에는 Link 필드가 있고, 어떤 글에는 없다고 가정을 해봅시다. Link가 없는 글에 버튼이 계속 보인다면 의미도 없고 디자인도 어색하겠죠? 이런 상황에는 CMS 항목에 데이터가 있을 때만 요소를 보여주는 방법인 조건부 표시 (Conditional Visibility) 기능을 사용하시면 됩니다.
요소(예: 버튼) 선택
속성 패널에서 Visible 항목
+버튼 클릭Set Variable>Link필드 선택is set클릭
is set 항목을 선택하면 해당 필드가 있을 때만 보여주고, 없으면 자동으로 숨겨지게 됩니다.
본 글은 Framer 공식 영상인 ‘Understanding CMS Collections, Items & Fields in Framer’를 참고하여 번역·각색한 콘텐츠입니다.
