CMS 개념 이해하기
01. CMS란?
- 콘텐츠 관리 시스템, Content Management System
- 한 번 등록한 콘텐츠는 CMS 리스트, 카드, 상세 페이지 등 다양한 곳에서 반복해서 사용 가능
- 어디서든 수정하면 모든 연결된 콘텐츠에 자동 반영
- 디지털 파일 캐비닛: 컬렉션 = 폴더, 아이템 = 폴더 안의 서류, 필드 = 서류 안의 항목들
02. 반복 콘텐츠를 자동화하는 구조
- Collection (컬렉션): 콘텐츠를 유형별로 묶는 폴더 (예: 블로그, 팀원, 제품 등)
- Field (필드): 각 콘텐츠가 가진 속성 (예: 제목, 이미지, 날짜 등)
- Item (아이템): 실제 콘텐츠 단위 (예: 블로그 글 1개)
- List / Detail Pages: 여러 아이템을 목록으로 보여주거나, 하나의 아이템을 상세하게 보여주는 페이지
03. CMS의 장점
| 전통적 방식 | CMS 방식 |
| 각 페이지를 직접 수정해야 함 | 한 번 입력하면 자동 반영됨 |
| 콘텐츠 위치마다 반복 입력 필요 | 콘텐츠는 한 곳에서 관리 |
| 변경 사항 반영에 실수 발생 가능 | 항상 일관된 콘텐츠 유지 |
| 협업/업데이트 시 충돌 가능성 있음 | 구조화된 데이터로 작업 간소화 |
CMS 컬렉션 생성하기
01. CMS 컬렉션 생성 흐름
- 컬렉션 생성
- 컬렉션 이름은 명확하고 일관성 있게 짓기 (예시: articles, team, products)
- 컬렉션 생성 시 기본 필드가 자동 포함됨 (title, slug 등)
02. 필드 추가 및 구성
- 필드: 콘텐츠 구조를 정의하는 핵심 요소
- 각 필드는 입력 가능한 데이터의 형태를 결정
- 알맞은 타입을 선택해야 디자인과 기능이 유연해짐
| 필드 타입 | 설명 | 예시 |
| Plain Text | 한 줄짜리 텍스트 입력 | 제목, 이름, 직함 |
| Formatted Text | 스타일이 적용 가능한 여러 줄 텍스트 | 본문, 설명, 소개 글 |
| Date | 날짜 선택 필드 | 작성일, 이벤트 날짜 |
| Link | URL 입력 필드 | 외부 링크, 참고 자료 |
| Image | 1장의 이미지 업로드 | 썸네일, 대표 이미지 |
| Gallery | 여러 이미지 업로드 | 제품 갤러리, 포트폴리오 |
| Color | 컬러 선택기 | 배경색, 태그 색상 |
| Toggle | On/Off 스위치 | 공개 여부, 추천 항목 |
| Number | 숫자 입력 | 가격, 순서, 점수 |
| Option | 미리 정의한 선택지 중 하나 선택 | 카테고리 선택 (단일) |
| File | PDF, ZIP 등 첨부 파일 | 다운로드 자료, 첨부 파일 |
| Reference | 다른 CMS 컬렉션에서 1개 항목 참조 | 작성자, 카테고리 (단일 연결) |
| Multi-Reference | 다른 CMS 컬렉션에서 여러 항목 참조 | 태그, 관련포스트 |
03. 아이템 추가
- New Item → 각 필드 데이터 입력 → Save
- 입력 값 예시:
- 제목: "프레이머 CMS 시작하기"
- 이미지: 배너 업로드
- 날짜: 오늘 날짜 선택
- 본문: 에디터로 텍스트 입력
- 링크: 외부 블로그 주소 입력
CMS 연결하기
01. Collection List란?
- CMS 콘텐츠를 반복적으로 출력할 수 있는 기능
- 게시글 리스트, 제품 카드, 포트폴리오 갤러리 등에 사용
02. Collection List 삽입
원하는 페이지 선택 → Insert → CMS → Collection List 선택 → 캔버스에 드래그
03. 텍스트 & 이미지 연결
- Collection List 안의 각 요소는 CMS의 필드와 자동 연결
- 예시: 카드의 배너 이미지 → CMS의 image 필드
04. 기존 디자인에 CMS 데이터 연결 (수동 연결)
- 기존 디자인을 Collection List 안으로 드래그
- 카드의 텍스트 또는 이미지 요소 선택
- 오른쪽 패널에서 연결 가능한 속성에 마우스 오버 → "+" 버튼 클릭
- Set Variable → 연결할 CMS 필드 선택
※ 이 부분이 현재 버전이랑 좀 차이가 있는 듯해서 추가 학습 자료 실습(AI Agent 사용)으로 넘어감
05. 모든 카드에 자동 적용
- 카드 하나에만 디자인해도 나머지 CMS 항목들은 동일한 구조로 자동 적용
- 스타일 수정 시 모든 카드가 동시에 변경
06. 컴포넌트 연결
- 미리 만든 컴포넌트를 Collection List 안에 넣으면 CMS와 연결 가능
- 단, 컴포넌트 내부 텍스트에도 Variable 속성 설정 필요
07. 추가 학습 자료 실습 (AI Agent 사용)
Airbnb 메인 페이지처럼,
상단에 큰 Hero 영역,
검색 UI,
숙소 카드들이 그리드로 보이는
반응형 홈 레이아웃을 만들어줘.
Properties라는 이름의 컬렉션 만들어 줘.
필드는 아래 그대로야.
Name → Plain Text
Image → Image
Location → Plain Text
Price → Number
Summary → Plain Text
Description - > Formatted Text
region → Option (서울, 부산, 제주)
isHot → Toggle (true/false)
그리고 최소 12개의 숙소 데이터 Item을 만들어 줘.
CMS 필터링/정렬 기능 추가하기
01. 필터링과 정렬이 필요한 이유
- 홈페이지에는 대표 콘텐츠 3개만 보여주고 싶은 경우
- ‘추천’ 항목만 별도로 뽑아 슬라이더에 보여주고 싶은 경우
- 특정 조건에 따라 콘텐츠를 나누어 보여주고 싶은 경우
02. 필터 옵션 구성
- Source: 어떤 CMS 컬렉션에서 데이터를 가져올지 선택
- Sort: 특정 필드 기준으로 항목 정렬 (예: Date, Title)
- Filter: 조건에 맞는 항목만 표시
- Limit To: 표시할 최대 항목 수 설정
- Start Offset: 앞에서부터 일정 개수의 항목을 건너뛰고 표시
03. 추천 콘텐츠만 필터링
- CMS Toggle 필드 생성 (featured로 이름 지정)
- 기본값은 "off(비추천)" 상태
- 대표 콘텐츠에만 featured = on 설정
- Collection List → Filter → featured = true 로 설정
04. 최신순 정렬 + 3개만 필터링
- Sort: date 필드 → 내림차순
- Limit To: 3
05. 특정 카테고리만 필터링
- CMS에 category 필드 추가 (예: News, Tips, Update 등)
- 원하는 카테고리로 필터 적용 (예: category = "News")
06. Offset으로 건너뛰기
- 슬라이더에는 최신 3개 보여주고, 그 아래엔 다음 3개만 보여주고 싶을 때
- 첫 번째 리스트: Limit = 3, Start Offset = 0
- 두 번째 리스트: Limit = 3, Start Offset = 3
07. 커스텀 정렬용 숫자 필드 만들기
- CMS에 order 필드 (숫자형) 추가
- 원하는 순서대로 번호 부여 (1, 2, 3...)
- Sort 기준을 order 필드로 설정 → 직접 순서 제어 가능
CMS 상세 페이지 연결하기 (Dynamic Routing)
01. CMS 상세 페이지란?
- CMS 컬렉션에 있는 각각의 항목(Item)을 위한 개별 페이지를 자동 생성하는 기능
- 예시: 블로그 포스트 하나당 하나의 URL을 만들고 싶은 경우
02. 상세 페이지 생성 (Dynamic Page 생성)
- Pages 탭 → [+] 버튼 → New CMS Page → 컬렉션 선택 → Detail Page
- 해당 페이지는 컬렉션의 각 항목을 하나씩 받아서 렌더링하는 동적 페이지 템플릿이 됨
03. 콘텐츠 연결 및 디자인
- CMS 필드 데이터는 페이지에 자동 배치
- 스타일은 자유롭게 변경 가능하며, 텍스트 색, 폰트, 배경 등을 일반 페이지처럼 수정 가능
04. 새로운 필드를 추가하고 연결
- CMS → 컬렉션에서 새 필드 추가 (예: link)
- 해당 아이템에 값 입력 (예: https://example.com)
- 상세 페이지로 돌아와 버튼 만들기
- 버튼의 link 속성에 → Set Variable → 새 필드 선택
05. 변수(Variable)를 이용한 동적 연결
- 텍스트, 이미지, 버튼 등 거의 모든 요소에 Variable 연결 가능
- 예시: 텍스트 → content 속성, 버튼 → 링크 속성, 이미지 → fill 속성에 연결
- Insert → CMS → Fields 메뉴에서 직접 드래그하면 자동 연결 가능
06. 조건부 렌더링 (Conditional Visibility)
- 특정 필드가 비어있을 경우 해당 요소를 숨기고 싶을 때 사용 가능
- 요소 선택 → Visible 속성 선택
- + Set Variable → 해당 필드 선택 → Is Set 체크 → 값이 없을 때 자동으로 숨겨짐
항목별 스타일 & 조건부 렌더링
01. 조건부 렌더링이란?
CMS 데이터 유무에 따라 요소의 표시 여부를 제어하는 기능
02. 링크 있는 경우만 버튼 보여주기
- CMS에서 link 필드 추가 및 일부 항목만 링크 입력
- 상세 페이지에서 버튼 만들기
- 버튼 선택 → Visible 속성 클릭
- + Set Variable → link 필드 → Is set 선택 → 링크가 없을 때 자동으로 숨겨짐
03. 카테고리에 따라 배경 색 다르게 하기
- CMS → category 필드 → "news", "event", "update" 등 값 추가
- 카드 컴포넌트를 Variant로 설정 (예: 기본 / news / event)
- 컴포넌트 선택 → Variant → + Set Variable → category 필드 연결
04. 추천 글에는 뱃지 표시
- CMS에 featured 라는 Toggle 필드 추가 (Yes/No)
- 카드에 뱃지를 추가
- 뱃지 요소 선택 → Visible → + Set Variable → featured → featured가 Yes일 때만 뱃지가 보임
05. 기타 활용 아이디어
- price 필드가 없으면 “문의하기” 버튼만 보이도록 구성
- thumbnail 이미지가 없으면 텍스트만 가운데 정렬
- isNew 필드가 True면 “New” 라벨 노출
컬렉션 관계 & 필터 UI 만들기
01. 컬렉션 관계란?
- 한 컬렉션에서 다른 컬렉션을 참조(Reference)할 수 있음
- 컬렉션 간의 관계를 통해 중복 없이 정돈된 데이터 구조를 유지
02. 글 → 작성자 연결
- Authors라는 새 컬렉션 생성: 이름, 프로필 이미지, 소개 텍스트 등 입력
- Articles 컬렉션으로 이동 → + Add Field → Relation 선택
- 이름: author → 연결 대상: Authors 컬렉션 선택
- 각 글 항목에 작성자 선택 필드 생성 → 리스트에서 연결 가능
03. 상세 페이지에 관계 콘텐츠 표시
- 글 상세 페이지에 작성자 정보 표시
- 글 상세 페이지에서 author.name, author.image 등 필드 사용 가능
- 텍스트/이미지 레이어 선택 → + Set Variable → author.name 등으로 연결
04. 카테고리별 콘텐츠 필터링 UI 만들기
- Categories 컬렉션 생성
- Articles 컬렉션에 category라는 Relation 필드 추가
- 사용자가 카테고리를 선택하면, 그 카테고리에 해당하는 콘텐츠만 리스트에 표시되도록 구성
05. 필터 UI 만드는 방법
- 프레임 버튼 또는 텍스트를 만들어 필터 토글로 사용
- 버튼 클릭 시 컬렉션 리스트의 Filter 속성 변경
06. 컴포넌트와 연결된 필터
- 여러 버튼을 Variant로 만든 후 선택 시마다 필터 값 변경 가능
- 필터 UI도 컴포넌트로 만들어 재사용성 향상
- 카테고리 Pill 버튼 → Variant (Selected / Not Selected)
- 선택 시 Set Variable → 리스트 필터 갱신
'notes' 카테고리의 다른 글
| [내배캠] 데이터 드리븐 기획 | ① 데이터 드리븐 기획 기초 (0) | 2026.07.13 |
|---|---|
| [내배캠] 0 to 1 메이커톤 개인 회고 (0) | 2026.07.10 |
| [내배캠] 서비스 기획 심화 | ② 구조화된 UI 설계 & 반응형 웹 만들기 (0) | 2026.06.30 |
| [내배캠] 서비스 기획 심화 | ① Framer 입문 (0) | 2026.06.29 |
| [내배캠] 역기획 프로젝트 개인 회고 (0) | 2026.06.26 |
