◾서비스 기획 심화 : Framer로 MVP를 만들고 검증까지
Chapter 1. Framer 기본 : 화면을 그리는 툴이 아니라 웹 구조를 만드는 툴
Chapter 2. Framer 스타일과 반응형 : 재사용성/유지보수성 강화
Chapter 3. Framer CMS : 반복 콘텐츠를 데이터처럼 관리하기 ▼
더보기
[게시글 목차]
1. CMS 개념 이해하기
2. CMS 컬렉션 생성하기
3. CMS 연결하기
4. 필터링/정렬 기능 추가하기
5. CMS 상세 페이지 연결하기
6. 항목별 스타일과 조건부 렌더링
7. 컬렉션 관계와 필터 UI 만들기
+) 오늘의 인사이트 / KPT 회고
Framer CMS : 반복 콘텐츠를 데이터처럼 관리하기
-
효율, 효율, 효율!!! 아 가보자고!!
1. CMS(Content Management System) 개념 이해하기
- 콘텐츠를 관리하는 시스템
- Framer에서 CMS : 반복되는 콘텐츠를 효율적으로 관리하기 위한 기능
ex. 포트폴리오 사이트를 만든다고 했을 때, 프로젝트 카드가 10개 있다고 해보자.
프로젝트명
썸네일 이미지
설명
진행 기간
사용 툴
상세 페이지 링크
→ 이걸 카드마다 직접 만들어두면 수정할 때 너무 번거롭다.(수작업 PM...)
CMS를 쓰면 프로젝트 정보를 하나의 데이터 목록으로 관리하고,
화면에서는 그 데이터를 불러와 카드 형태로 보여줄 수 있다.
[Framer CMS 기본 구조]
Collection
→ 콘텐츠 묶음
Field
→ 콘텐츠가 가진 속성
Item
→ 실제 콘텐츠 하나
List / Detail Page
→ 여러 개를 보여주거나 하나를 자세히 보여주는 화면
ex. 블로그
Collection: articles
Field: 제목, 작성일, 썸네일, 본문, 카테고리
Item: 블로그 글 하나
List Page: 글 목록 페이지
Detail Page: 글 상세 페이지
2. CMS 컬렉션 생성하기
- CMS : 일종의 디지털 캐비닛 같은 느낌
- 컬렉션 : 폴더, 아이템은 문서, 필드는 문서 안의 항목
ex.
articles
projects
products
team
reviews- 이름 신중하게 : 나중에 콘텐츠가 많아지면 data1, list2 같은 이름은 진짜 재앙이 될 수 있다.
(대충 지으면 이제 나중에 본인이 한 것도 못 찾고 시간만 엄청 낭비하게 됨...) - 컬렉션을 만들면 기본적으로 title(콘텐츠 제목)과 slug(URL에 들어가는 고유한 주소값) 같은 필드가 생긴다.
ex. 글 제목이 Framer CMS 시작하기라면 slug는 이런 식으로
framer-cms-start
→ 이 slug를 기준으로 상세 페이지 URL이 만들어진다.[컬렉션에 추가 가능한 다양한 필드]
Plain Text: 짧은 텍스트
Formatted Text: 본문처럼 긴 텍스트
Date: 날짜
Link: 외부 링크
Image: 대표 이미지
Gallery: 여러 이미지
Color: 색상
Toggle: 공개 여부, 추천 여부
Number: 순서, 가격, 점수
Option: 카테고리
File: 첨부 파일
Reference: 다른 컬렉션과 연결
Multi-Reference: 여러 항목 연결- 중요 포인트! : 필드 타입을 아무렇게나 정하면 안 된다.
→ 날짜는 Date로, 이미지는 Image로, 카테고리는 Option이나 Reference로 잡아야 나중에 정렬하거나 필터링하기 쉽다.
3. CMS 연결하기
- Collection List : CMS에 들어 있는 여러 아이템을 반복해서 화면에 보여주는 기능
ex. 프로젝트 컬렉션에 프로젝트가 6개 들어 있다면,
Collection List를 사용해 프로젝트 카드 6개를 자동으로 보여줄 수 있다.
[구조]
CMS Collection
→ Collection List
→ 카드 UI
→ 각 필드 연결카드 안의 제목 텍스트 → title 필드에 연결
이미지 → thumbnail 필드에 연결하는 식
-
카드 제목 → title
카드 이미지 → image
카드 설명 → description
버튼 링크 → link- 한 번 연결해두면 CMS에 새 아이템을 추가했을 때 리스트도 자동으로 갱신된다.
기존에는 카드 하나를 추가하려면 화면에서 복사하고, 텍스트 바꾸고, 이미지 바꾸고, 링크 바꾸고...
→ CMS를 연결해두면 데이터만 추가하면 화면은 알아서 같은 구조로 보여준다.
(이 작업을 효율충 디자이너가 좋아합니다)
4. 필터링/정렬 기능 추가하기
- ex. 블로그 사이트의 경우, 최신 글 3개만 홈에 보여주고 싶을 수 있다.
포트폴리오라면 대표 프로젝트만 따로 보여주고 싶을 수도 있다.
상품 리스트라면 특정 카테고리만 보여줘야 할 수도 있다.
→ 이럴 때 필터, 정렬 사용
[Collection List에서 설정 조정 가능]
Source: 어떤 컬렉션에서 가져올지
Sort: 어떤 기준으로 정렬할지
Filter: 어떤 조건의 아이템만 보여줄지
Limit To: 몇 개까지만 보여줄지
Start Offset: 앞에서 몇 개를 건너뛸지ex. 추천 콘텐츠만 보여주고 싶다면
CMS에 featured라는 Toggle 필드를 만들 수 있다.
featured = true
→ 이렇게 설정된 항목만 필터링해서 보여주는 식이다.최신 글 3개만 보여주고 싶다면:
Sort: date 기준 내림차순
Limit To: 3특정 카테고리만 보여주고 싶다면:
category = News[Offset]
ex. 첫 번째 영역에서는 최신 3개를 보여주고,
아래 영역에서는 그 다음 3개를 보여주고 싶다면:
첫 번째 리스트: Limit 3 / Offset 0
두 번째 리스트: Limit 3 / Offset 3이렇게 구성할 수 있다.
단순 리스트 같지만, 설정을 조합하면 꽤 다양한 콘텐츠 구성이 가능하다.
5. CMS 상세 페이지 연결하기
- CMS의 장점 : 각 아이템마다 상세 페이지를 자동으로 만들 수 있다.
ex. 블로그 글이 10개라면, 글마다 상세 페이지를 하나씩 수동으로 만들 필요가 없다.
→ Dynamic Routing : 하나의 상세 페이지 템플릿을 만들고,
CMS 아이템이 그 템플릿에 들어가도록 구성하면 된다.
[구조]
Articles 컬렉션
→ 글 아이템 여러 개
→ 하나의 Detail Page 템플릿
→ slug 기준으로 각 글 URL 생성ex. slug가 framer-cms-start라면 URL은 이런 식으로 만들어질 수 있다.
/articles/framer-cms-start→ 상세 페이지 안에서는 CMS 필드를 연결
제목 → title
대표 이미지 → image
본문 → content
작성일 → date
버튼 링크 → link- 이렇게 하면 글이 1개든 100개든 상세 페이지 구조는 하나만 관리하면 된다.
(효율력 상승하는 소리가 청량하게 울린다)
6. 항목별 스타일과 조건부 렌더링
- CMS 콘텐츠는 항상 모든 필드가 채워져 있지 않을 수 있다.
어떤 글에는 외부 링크가 있고, 어떤 글에는 없을 수 있다.
어떤 프로젝트는 추천 프로젝트이고, 어떤 프로젝트는 일반 프로젝트일 수 있다.
어떤 카드에는 이미지가 있고, 어떤 카드에는 없을 수도 있다.
이럴 때 조건부 렌더링을 사용한다.
→ 조건부 렌더링 : 특정 조건에 따라 요소를 보이게 하거나 숨기는 기능
ex. link 필드가 있는 경우에만 버튼을 보여줄 수 있다.
link 값이 있으면 버튼 표시
link 값이 없으면 버튼 숨김ex. 추천 글에는 뱃지를 붙일 수도 있다.
featured = true
→ Featured 뱃지 표시ex. 카테고리에 따라 카드 스타일을 다르게 만들 수도 있다.
category = event
→ event 스타일 Variant 적용
- 수동으로 작업하면 각 카드마다 보이고 숨기는 걸 직접 처리해야 하지만,(오우 노우...)
조건부 렌더링을 쓰면 데이터 값에 따라 UI가 자동으로 달라진다.
7. 컬렉션 관계와 필터 UI 만들기
- 컬렉션끼리 연결하는 방법 : 데이터베이스에서 관계를 맺는 것과 비슷
ex. 블로그 글 컬렉션과 작성자 컬렉션이 따로 있다고 해보자.
Articles
Authors
→ 각 글은 한 명의 작성자를 가질 수 있다.이때 Articles 컬렉션에 author라는 Relation 필드를 만들고, Authors 컬렉션과 연결한다.
그러면 글 상세 페이지에서 작성자 이름이나 프로필 이미지를 불러올 수 있다.
(클래스의 변수 불러올 때랑 얼추 비슷...)
author.name
author.image
author.description- 프로젝트 하나가 특정 카테고리나 사용 툴과 연결될 수 있다.
컬렉션 관계를 쓰면 같은 정보를 여러 번 입력하지 않아도 된다.
ex. 카테고리 이름을 매번 직접 쓰는 대신, Categories 컬렉션에서 선택하게 만들 수 있다(필터 UI도 여기서 연결됨).
→ 사용자가 카테고리 버튼을 누르면 해당 카테고리의 콘텐츠만 보여주는 방식
(포트폴리오에 적용하면 프로젝트를 유형별로 나눠서 보여주기 좋을 듯...)
오늘의 인사이트
Framer 강의 들을 때 자꾸 생각하게 되는 것...
포폴에 이거 적용하면 좋겠다 저거 적용하면 좋겠다.
(프로젝트에 반영할 생각보다 이게 더 큼ㅋㅋㅋㅋ 간지 포폴 어케 참는데?)
지금부터라도 조금씩 시간될 때 만들면 좋을 것 같다는 생각은 하는데
아직.... 프리랜서 경력 사항을 정리 못해서...ㅋㅋ...ㅋㅋㅋㅋㅋ
이대로는 영원히 안 할 것 같아서
대충이라도 일단 초안 작성 해놓고 내용 채울까 보다.
일단 기본 틀이라도 잡아놓으면 나중에라도 내용 채우겄지..
(또다시 내일의 나에게 일감을 미룬다)
아무튼 극강의 효율충 디자이너인 나에게 아주 유용한 내용이었다.
(이제 진짜로 만들기만 하면 됨. 진.짜.로.)
오늘의 KPT 회고
| Keep | • CMS를 단순 기능이 아니라 반복 콘텐츠를 데이터처럼 관리하는 구조로 이해했다. • Collection, Field, Item, List/Detail Page 흐름을 포트폴리오에 바로 적용해볼 수 있겠다라고 생각을 확장했다. • 조건부 렌더링, 필터 UI, Dynamic Routing처럼 유지보수 공수를 줄이는 기능에 흥미를 느꼈다. |
| Problem | • 포트폴리오에 적용하면 좋겠다는 생각은 계속 드는데, 아직 실제 제작으로 이어지지는 못했다.(과제가 해일처럼 몰려온다아!!!! + 귀찮음 이슈) • 프리랜서 경력이나 프로젝트 내용을 정리하지 못해서 포트폴리오 제작이 계속 뒤로 밀리고 있다.(빨리 해...) • 기능을 이해하는 것과 실제 내 콘텐츠 구조를 설계하는 것은 별개의 일이라, 시작 전 정리가 필요하다. |
| Try | • 완성도를 생각하기 전에 포트폴리오 CMS 구조 초안부터 먼저 잡아보기. • 프로젝트 컬렉션에 들어갈 필드부터 정리하기 : 프로젝트명, 설명, 기간, 역할, 사용 툴, 썸네일, 상세 링크 등. |
'Framer > 내용 정리' 카테고리의 다른 글
| 서비스 기획 심화 Chapter 2. Framer 스타일과 반응형 : 재사용성/유지보수성 강화 (0) | 2026.07.01 |
|---|---|
| 서비스 기획 심화 Chapter 1. Framer 기본 : 화면을 그리는 툴X, 웹 구조를 만드는 툴 (0) | 2026.06.30 |
