[내일배움캠프] Chapter 5. 서비스기획 심화 - Framer

서비스기획 심화
Framer: 웹사이트를 디자인하고, 퍼블리시하고, 분석할 수 있는 올인원 노코드 웹 제작 도구

 

Step 1. Framer 입문

 

● Framer 란?

Framer는 웹사이트를 디자인하고, 퍼블리시하고, 분석할 수 있는 올인원 노코드 웹 제작 도구

직관적인 시각 편집 방식으로 코드를 쓰지 않고도 실제 서비스 수준의 웹사이트 제작 가능

- 실시간으로 웹사이트를 만들고, 애니메이션을 넣고, CMS를 설정

- 복잡한 개발 없이도 프로덕트를 직접 실현하고 퍼블리시

- 반응형 웹, 인터랙션, SEO, 도메인 연결, 사용자 행동 분석까지 모두 지원

 

● 노코드란?

노코드는 코드를 몰라도 만들 수 있는 개발

구분	기존 방식	노코드 방식
기획자가 웹사이트를 제작할 때	개발자 요청 - 기다림 - 테스트 반복	직접 만들고 퍼블리시 - 테스트 반복
구현 방식	HTML, CSS, JS로 직접 개발	시각 인터페이스로 구성
요구 지식	프로그래밍 언어 필요	도구 사용법만 알면 됨

 

- 낮은 학습 곡선

직관적 UI로 프로그래밍 언어 없이 짧은 시간 내 작업 결과를 볼 수 있으며, 비개발자들도 접근이 가능하다

- 프로토타이핑 속도

아이디어나 기획안을 직접 시각화하여 팀이나 사용자와 공유 가능하다 = 앞단 디자인/UX 구조 선제적 검정이 가능

- 비용 절감

초기 개발 비용을 줄이고 유연한 반복 수정이 가능하다

- ▶ 프로토타입, MVP 제작에 용이

 

● Framer 인터페이스

영역	역할
상단 툴바	프로젝트 설정, 요소 삽입, CMS, 프리뷰, 퍼블리싱 등
좌측 패널	페이지, 레이어, 자산 등 프로젝트 구조 생성
우측 패널	선택한 요소의 속성/스타일/인터렉션 조절
캔버스	실제 디자인 작업이 이루어지는 공간

 

● 주요 단축키

기능	단축키
Insert 패널 열기	I
Quick Action 실행	Ctrl + K
Canvas 팬(Pan) 모드	Shft + 드래그
확대 / 축소	Z, Option + 클릭
Zoom to fit	Shift + 1
Zoom to selection	Shift + 2
Zoom to 100%	Shift + 3
부모 프레임으로 이동	Esc
다중 선택	Shift + 클릭
중첩 방지 드래그	Space + 드래그

 

● Framer 프로젝트 구조

Workspace
└── Project (웹사이트 단위)
    ├── Pages (여러 페이지 구성)
    │   └── Canvas (디자인이 이루어지는 공간)
    │       └── Breakpoints (화면 크기별 레이아웃 단위)
    └── CMS, Assets, Settings 등 부가 기능

Workspace: 내 모든 프로젝트의 최상위 단위

Project: 하나의 웹사이트 단위

Page: 각 웹사이트를 구성하는 화면들 (Home, About 등)

Canvas: 각 페이지를 디자인하는 작업 공간

Breakpoint: 반응형 웹을 위한 디바이스별 프레임

Breakpoint

각 디바이스(데스크탑, 태블릿, 모바일)에 맞춘 디자인을 담는 프레임 단위
각 페이지에는 최소 하나의 Breakpoint가 필요하며, 여러 개를 추가해 반응형 디자인을 구현

Breakpoint	기본 너비	설명
Desktop	1200px	기본으로 생성되는 크기
Tablet	768px	태블릿용 레이아웃
Mobile	375px	모바일용 레이아웃

동일한 컴포넌트를 모든 Breakpoint에 자동 상속 가능
특정 뷰포트에서만 레이아웃을 수정하고 싶을 때 "Override" 기능 활용
Breakpoints는 상단 캔버스에서 + 버튼을 눌러 추가 가능

 

● Frame 

텍스트, 버튼, 이미지, 카드 등 모든 요소를 구성하는 단위

콘텐츠를 감싸고, 배치하고, 레이아웃 구조를 결정하는 핵심 단위

(Frame을 기본 단위로 계층적 Nesting 구조를 형성)

역할	예시
그룹핑	텍스트 + 버튼 + 이미지 = 한 카드로 묶기
레이아웃	Slack / Grid 기반 정렬 컨테이너
뷰포트 대응	Breakpoint 내에서 반응형 위치 조정

Frame 생성 및 조작법

F키 → Frame 도구 활성화
드래그로 생성 → Shift로 정사각형, Alt로 중심에서 확대
여러 요소 선택 후 Ctrl + Enter → Wrap with Frame
부모 Frame 삭제: Ctrl + Delete (자식은 남김)
독립 Frame 생성: Space + 프레임 생성 드래그

 

● Stack

프레임에 특수한 레이아웃 속성을 부여하여 자식 요소들이 자동으로 세로, 가로 방향으로 정렬되게 하는 기능

(피그마의 Auto Layout 기능과 유사)

- Slack의 속성

속성	설명
Direction	Row(가료) / Column(세로) 방향 설정
Gap	자식 요소 간의 간격 설정
Padding	Slack 내부 여백 (상하좌우)
Distribute	시작, 가운데, 끝 균등 간격 등으로 분배
Align (Cross Axis)	수직/수평 정렬 방식 설정 Main axis = Stack 방향 Cross axis = 그 반대 방향
Wrap	공간이 부족할 경우 다음 줄로 넘김

 

- Slack의 요소 위치 지정 방법

위치 속성	설명
Absolute	자유롭게 배치. 다론 요소에 영향 안받음
Relative	Stack이나 Grid 내부에서 흐름에 따라 배치
Fixed	뷰포트 기준으로 고정(스크롤 무시)
Sticky	뷰포트 상단에 닿으면 Fixed로 바뀜

 

- Fit Content vs Fill Container

속성	설명
Fit Content	자식 요소들의 크기에 맞게 Stack이 알아서 줄어듦 (Wrap 포함 가능)
Fill Container	부모 영역을 꽉 채움

(부모가 Fit 이고 자식이 Fill이면 충돌이 발생하여 프레이머가 자동으로 채워줌)

Stack의 활용 예시

네비게이션 바 (가로 Stack)
카드 리스트 (세로 Stack)
버튼 내부 텍스트 정렬
콘텐츠 섹션 사이으ㅣ 일관된 간격 윶ㅣ

Stack 관련 주요 단축키

Fit Container: Shift + A
Add Stack: Ctrl + Alt + ↩
Stack 방향 전환: 우측 속성 패널
Slack 레이아웃 추가: Layout 메뉴 - Stack 선택

 

● Grid

Grid는 수평(Row)과 수직(Column) 방향 모두를 제어할 수 있는 2차원 레이아웃 시스템

- Gird의 구성요소

Grid Frame (부모)
├── Grid Cells (자동 생성되는 보이지 않는 컨테이너)
│   └── Grid Item (각 셀에 위치하는 자식 요소)

Grid Frame: 전체 레이아웃의 틀

Grid Cell: 요소들이 정렬되는 좌표 기준 공간

Grid Item: 유저가 직접 배치하는 요소들 (텍스트, 이미지 등)

(Grid Frame은 자체 Padding, Gap, 정렬 설정 등을 통해 전체 배치를 조절

 

- Grid의 속성

속성	설명
행(Row)과 열(Column) 개수	고정 개수로 시작 추가되는 Grid item에 따라 자동 추가
Gap	행과 열 사이의 공간 지정
Padding	Grid Frame 내부의 여백
Wrap	Grid item이 공간을 넘치면 다음 행 배치

 

- Grid Item의 제어

속성	설명
Span	특정 아이템이 여러 열(Column) 또는 행(Row)에 걸쳐 표시되도록 설정
Fill	셀의 전체 공간을 채우도록 설정
Fit Content	텐츠 크기에 맞게 자동 크기 지정
Fixed	고정 크기 지정
Alignment	셀 안에서의 정렬 위치 (Start / Center / End 등)

 

Grid의 활용 예시

갤러리 레이아웃
카드 리스트
기능 목록 섹션 (Feature Bento)
대시보드 구성

Grid 관련 주요 단축키
Grid 만들기
- Shift + G
- 기존 Frame에 Layout → Grid를 적용
- 툴바 → Layout → Grid 도구 선택 후 드래그
- 단축키 Shift + G로 바로 생성
Span 늘리기: Properties 패널에서 직접 입력 또는 드래그
Fit Content 적용: 우클릭 → "Fit Content" 또는 Shift + A

 

● Stack vs Grid

구분	설명
Stack	단일 방향 (가로 또는 세로) 정렬
Grid	행(Row)와 열(Column)을 모두 사용해 정렬

Stack (좌) vs Gird (우)

 

상황	Stack 사용	Grid 사용
한 방향 흐름	O	X
행 + 열 구성 필요	X	O
갤러리/카드 레이아웃	X	O
Hero영역 (텍스트+버튼)	O	X
대시보드, 리스트	X	O

 

● Typography

Variable Font

Variable Font 선택 시 Weight, Slant, Grade, Width, Optical Size 등 세부 속성 조절 가능
각 속성은 애니메이션 적용 가능
폰트 내의 디테일한 축 조절로 텍스트 강조, 시각적 무게감 조절 가능

고급 텍스트 옵션

Balance 기능: 여러 줄 텍스트 가독성을 높이기 위해 줄 간 길이를 비슷하게 조정
텍스트 쉐도우, 스트로크, 대문자/소문자 변환, 밑줄/취소선 등 추가 효과 사용 가능 (+ 클릭)

Text 관련 주요 단축키
텍스트 삽입: T
자동 크기 모드 전환: Shift + A
텍스트 Balance 설정: Text - + - Balance 체크

 

● 링크 & 네비게이션

텍스트나 프레임, 버튼 등 모든 요소에 링크 설정 가능

링크 추가하기

요소 선택 후 Properties Panel 상단의 
Link + 버튼 또는 L 키 입력

외부 링크: 직접 URL입력
내부 페이지: 프로젝트 내 페이지 이름 자동 인식

 

- 링크 유형

대상	예시	설명
페이지	/pricing	사이트 내 다른 페이지로 이동
섹션	#features	같은 페이지 내 특정 섹션으로 이동
외부 사이트	https://framer.com	외부 웹사이트로 이동
CMS 항목	slvg 기반	CMS에 등록된 콘텐츠 항목에 연결

링크 스타일 (자주쓰는 스타일 설정 가능)

Default: 기본 상태 색상 / 스타일
Hover: 마우스 오버 시 효과 (예: 색상 전환, 밑줄)
Current: 현재 보고 있는 페이지에 연결된 링크로 시각적 구분

섹션 링크

섹션 이동은 스크롤 섹션 설정이 선행
이동 대상이 되는 프레임 선택 후 Properties Panel 하단에서 Scroll Section 추가
링크 대상 페이지를 먼저 선택 - 그 안에서 섹션 이름 선택 가능

옵션	설명
Offset Y	섹션의 정렬 기준 위치 조정 (예: 고정된 상단바 피하기위해 -80px 등 설정)
Scroll	Instant / Smooth 중 선택 가능

 

● 콘텐츠 삽입 및 인사이트 패널 활용

이미지 추가

드래그 앤 드롭
컴퓨터에서 이미지를 직접 캔버스로 드래그하면 이미지 Fill을 포함한 프레임이 생성됨.
직접 프레임 생성 + Fill 설정
프레임을 그리고 Fill을 이미지로 설정하여 이미지 삽입 가능.
레이아웃 메뉴 활용
Toolbar → Layout → Image 선택 시, 플레이스홀더 이미지가 들어간 프레임 생성
Plugins (Unsplash 등)
Insert 패널에서 직접 무료 이미지 가져오기 가능
Intrinsic Size 복원
이미지에 오른쪽 클릭 → "Intrinsic Size"로 원본 크기 복원
(Fill 모드에서 이미지가 잘릴 수 있음 → "Focal Point" 기능으로 중요한 부분 고정 가능)

비디오 삽입

직접 삽입
MP4 파일을 캔버스로 드래그 또는 Layout → Video Frame 생성
호스팅 URL 붙여넣기
또는 파일 직접 업로드 가능 (계정 플랜에 따라 용량 제한 존재)
외부 플랫폼 임베딩
YouTube, Vimeo 컴포넌트를 Insert 패널 → Media에서 삽입 가능

Insert 패널 카테고리

asics: 전체 페이지 템플릿 (3 Breakpoints 포함)
Sections: Hero, Footer 등 섹션 단위 템플릿
Navigation: 메뉴, 네비게이션 바 등
CMS: Collection, Field
Creative: Fit Text, Arc Text, Countdown 등 창의적 컴포넌트
Media: 이미지, 비디오, Lottie, Spotify, YouTube, Vimeo 등
Forms: 기본 Form + Loops, Mailchimp 등 3rd Party 연동
Icons: 각종 아이콘 라이브러리 (Phosphor, Feather 등)
Interactive: 다국어 Selector, Site Search, Carousel 등 인터랙션 기능
Social: Instagram, Facebook, Google Maps 등 소셜 임베딩
Utility: Embed, 복사 버튼, 다운로드, Gumroad, Lemon Squeezy 등

 

Step 2. 구조화된 UI 설계 & 반응형 웹 만들기

 

● 스타일 시스템

1. 컬러 스타일

반복되는 색상을 스타일로 정의하여 전체 사이트에서 한 번에 관리

컬러 스타일 적용

색상 선택 후 Color Picker 하단의 Create Style 클릭
이름은 surface/0, content/100 등 의미 기반 또는 숫자 기반으로 구성
스타일을 수정하면 해당 스타일이 적용된 모든 요소에 자동 반영됨
Assets 패널 → Styles에서 스타일 관리 (이름 변경, 폴더 정리, 삭제 가능)
스타일에서 분리하고 싶을 땐 Color 값 수동 변경하거나 Fill 제거

 

2. 텍스트 스타일

글자 크기, 폰트, 줄 간격 등을 미리 정의하여 페이지 전체의 타이포그래피 일관성 유지

텍스트 스타일 적용

텍스트 선택 → Properties 패널의 Style 항목 → + 버튼 클릭
Heading1~6 또는 Paragraph로 태그 지정
이름 예시: heading/1, body/regular
텍스트 색상과 정렬은 인스턴스에서만 Override 가능 (스타일 자체에는 영향 없음)
스타일을 삭제하려면 먼저 모든 레이어에서 해당 스타일을 제거해야 함

 

● 컴포넌트

버튼, 카드, 네비게이션 바, 푸터 같은 UI요소를 재사용 가능한 단위로 만드는 기능

디자인을 한 번만 만들고 여러 곳에서 사용하며 수정시 모든 인스턴스가 한 번에 반영

컴포넌트 만들기

요소(버튼 등)를 선택한 후 오른쪽 클릭 → Create Component 또는 단축키 ⌥ + ⌘ + K
컴포넌트 이름 지정 (buttons/primary-cta 형태로 폴더 구조도 생성됨)
자동으로 컴포넌트 전용 편집화면으로 이동됨

좌측 Assets 패널에서 컴포넌트 생성/수정/삭제/폴더 정리 가능
[공용 라이브러리 추가]를 통해 다른 프로젝트에서도 공유 가능

Variant  만들기

기본 상태 외에도 hover, pressed, inverted 등 다양한 스타일을 한 컴포넌트 안에 만들 수 있음
각 Variant에 맞게 배경색, 텍스트 색 등을 조정하고 이름을 붙임

Variable 만들기

텍스트,색상, 보이기/숨기기 등 요소별 속성을 컴포넌트 외부에서 수정할 수 있도록 함
예: 버튼 내부 텍스트를 각 인스턴스마다 "Sign Up Now", "Get for Free" 등으로 변경 가능

텍스트 레이어 선택 → Content → [+] → Create Variable
이름을 지정 (buttonText, planTitle 등)
컴포넌트 인스턴스에서는 별도로 텍스트 입력 가능

 

● 레이아웃 템플릿

반복되는 구조나 요소를 전체 페이지에 공통 적용할 수 있도록 만든 것

(템플릿은 하나의 컴포넌트처럼 동작)

템플릿 만들기

Nav 바 등 공통 요소를 우클릭 → Create Layout Template
이름을 입력 (예: Main Layout)
자동으로 템플릿 뷰로 이동함 (Nav 요소 + Placeholder가 생성됨)

Navbar / Footer: 공통 요소 직접 배치
Placeholder: 실제 페이지에서 들어갈 콘텐츠가 대체됨

템플릿 Variable

상단 패딩 조절 변수
Nav가 겹치지 않도록 기본 80px의 top padding
특정 페이지에서만 padding을 0으로 만들고 싶다면?
→ 템플릿에 Top Padding이라는 Toggle 변수를 추가 (Yes: 80px, No: 0px)

Nav 스타일 Variant 조절
Default / Inverted 등으로 분기되는 Nav 바 스타일
템플릿에서 Nav Style이라는 Variant 변수를 추가해 선택 가능하게 함

 

● 반응형

사용자가 어떤 기기를 사용하든 웹사이트의 콘텐츠와 레이아웃이 자연스럽게 적응하는 것

테스크탑, 테블릿, 모바일 등 모든 화면 크기에서 일관된 경험을 제공하는 것

 

1. Fluid Layout (유동형 레이아웃)
요소들이 부모 프레임의 크기에 따라 크기와 위치가 비율적으로 변하는 구조
Fill, Fit, Fixed, Max Width 같은 속성을 적절히 조합해서 구성
Stack이나 Grid를 활용해 자동 정렬을 설정

Fluid Layout 방법

1. Absolute Position → Stack 전환
2. Absolute로 배치된 요소 선택
3. 우측 속성 패널에서 Add Layout → Stack 선택
4. 방향(Row/Column), 간격(Gap), 정렬(Distribute/Align) 설정

이미지를 Frame으로 덧씌우기
이미지나 콘텐츠에 여백을 주고 싶을 때, 해당 요소에 직접 padding을 주는 대신
한 겹 더 감싸는 Frame을 만들어서 padding을 적용하는 방식이 매우 유용
ex. 
이미지를 가운데 정렬하면서도 좌우 여백을 주고 싶다면, 이미지를 담은 내부 Frame을 만들고 그 위에 외부 Frame을 씌워 padding을 설정
이렇게 하면 정렬이 더 명확해지고, 여백을 조절할 때 콘텐츠가 깨질 위험 없이 안정적인 레이아웃 가능

Section → Container → Content 구조처럼, Layer를 나누어 감싸는 방식이 가장 보편적이고 유지 보수에도 강함


Space Between 
- Start: 모든 요소를 위쪽 또는 왼쪽에 정렬
- Center: 요소들을 중앙에 모아서 정렬
- End: 요소들을 아래쪽 또는 오른쪽으로 정렬
- Space between: 첫 번째 요소는 시작지점, 마지막 요소는 끝 지점으로 하여 분산
- Space around: 요소들 사이에 균등한 간격을 배치 (양 끝에도 간격 존재)

Fill / Fit / Fixed / Max Width
- Fill: 부도 므페임의 여유 공간을 꽉 채움
- Fit: 콘텐츠에 맞게 크기 자동 조절
- Fixed: 고정된 크기 (px등)
- Max Width: 크기가 너무 커지는 걸 방지

 

2. Breakpoints (중단점)
Fluid Layout만으로는 완전히 대응하기 어려운 경우, 특정 뷰포트 너비를 기준으로 레이아웃을 재정의 (overried)

Breakpoint	기능	용도
Desktop	1200px	가장 일반적 PC 환경
Tablet	810~1199px	iPad 등 중형 디바이스
Mobile	390~809px	스마트폰 환경 대응

 

Breakpoint 방법

1. 각 Breakpoint를 클릭하고 카드가 들어있는 Frame 선택
2. Layout → Grid 설정 후 Column 수 조절
3. 설정값이 파란색으로 바뀌면 Override된 상태
(기타 overried: 텍스트 크기, padding 값, 요소 순서 변경 (드래그로 가능), visibility)

Layout Tempate에서 Breakpoint 적용
(Nav/Footer처럼 모든 페이지에 반복되는 요소는 Layout Template에 위치)

1. Layout Template 안으로 진입 (Nav 더블클릭)
2  동일하게 [+] 버튼으로 Breakpoint 추가
3. 각 Breakpoint별로 Nav나 Footer의 정렬, 간격 등을 조절

 

Text Style 반응형 제작
Text Layer에 개별적으로 Override하지 않고도, Text Style 자체에 Breakpoint를 추가

1. 텍스트 선택 → Style 패널에서 Text Style 클릭
2. + Add Breakpoints 클릭 → Large / Medium / Small 생성됨
3. 각 Breakpoint에서 Size, Line Height 등을 조정 가능

 

Step 3. CMS와 동적 콘텐츠 구성 (데이터를 연결하는 웹사이트)

 

●CMS 개념 및 생성

CMS 개념

CMS는 마치 디지털 파일 캐비닛
"컬렉션"은 캐비닛 속 폴더
"아이템"은 폴더 안의 서류
"필드"는 서류 안의 항목들(제목, 날짜, 이미지 등)

개념	역할
Collection	콘텐츠를 유형별로 묶는 폴더
Field	각 콘텐츠가 가진 속성 (제목, 이미지, 날짜 등)
Item	실제 콘텐츠 단위 (한 개의 블로그 글)
List / Detail Pages	아이템을 여러개 나열하거나 하나씩 상세하게 보여주는 방식

CMS 생성

1. 컬렉션 생성
(생성 시 기본 필드 생성 - titles, slvg)

2. 필드 추가 및 구성
필드 타입은 콘텐츠 구조를 정의하는 핵심 요소
각 필드는 입력 가능한 데이터의 형태를 결정, 알맞은 타입을 선택해야 디자인과 기능이 유연해진다

필드 타입	설명	예시
Plain Text	한 줄 텍스트	제목, 이름, 직함
Foramtted Text	스타일 적용 여러 줄 텍스트	본문, 설명, 소개글
Date	날짜 선택	작성일, 이벤트 날짜
Link	URL 입력	외부 링크, 참고 자료
Image	1장 이미지	썸네일, 대표 이미지
Gallery	여러 이미지	제품 갤러리, 포트폴리오
Color	컬러 선택	배경색, 태그 색상
Toggle	On/Off 스위치	공개 여부, 추천 항목
Number	숫자	가격, 순서, 점수
Option	미리 정의한 선택지 중 하나 선택	카테고리 선택(단일)
File	PDF, ZIP 등 첨부	다운로드 자료, 첨부 파일
Reference	다른 CMS 컬렉션에서 1개 항목 참조	다운로드 자료, 카테고리 (단일)
Multi - Reference	다른 CMS 컬렉션에서 여러 항목 참조	태그, 관련 포스트

3. 아이템 추가하기
New Item 버튼 클릭
각 필드에 데이터를 입력
Save를 눌러 저장
제목: "프레이머 CMS 시작하기"
이미지: 배너 업로드
날짜: 오늘 날짜 선택
본문: 에디터로 텍스트 입력
링크: 외부 블로그 주소 입

 

● CMS 연결

Collection List
CMS 콘텐츠를 반복적으로 출력할 수 있는 기능
게시글 리스트, 제품 카드, 포트폴리오 갤러리처럼 반복되는 콘텐츠에 적합

Collection List 삽입
좌측 메뉴에서 원하는 페이지 선택
I 키 또는 Insert 패널 → CMS > Collection List 선택
캔버스에 드래그하면 기본 카드 구조가 자동으로 생성됨
어떤 Collection에서 데이터를 가져올지 선택
(만든 리스트는 CMS에 새 항목이 추가될 때마다 자동으로 갱신)

1. 텍스트 & 이미지 연결
Collection List 안의 각 요소는 CMS의 필드와 자동 연결
카드의 제목 텍스트 → CMS의 title 필드
카드의 배너 이미지 → CMS의 image 필드

2. 기존 디자인에 CMS 데이터 연결

기존 디자인을 Collection List 안으로 드래그
카드의 텍스트 또는 이미지 요소 선택
오른쪽 패널에서 연결 가능한 속성에 마우스 오버 → "+" 버튼 클릭
Set Variable → 연결할 CMS 필드 선택
텍스트는 Content 속성에, 이미지는 Fill 속성에 변수를 연결
(텍스트 → title 필드 / 이미지 Fill → banner 필드)

3. 주의사항
카드 하나에만 디자인해도 나머지 CMS 항목들은 동일한 구조로 자동 적용
미리 만든 Pill 컴포넌트 등을 Collection List 안에 넣으면 CMS와 연결 가능
(단, 컴포넌트 내부 텍스트에도 Variable 속성 설정 필요)

 

● CMS 필터링/ 정렬 기능

CMS 필터

1. 필터 옵션 구성
Collection List를 선택하면 오른쪽 패널에 Content 설정 메뉴 생성

옵션 이름	설명
Source	어떤 CMS 컬렉션에서 데이터를 가져올지
Sort	어떤 필드를 기준으로 정렬할지 (ex. Date, Title 등)
Filter	조건에 맞는 항목만 보여주기
Limit to	최대 몇 개까지만 보여줄지
Start offset	앞에서 몇 개 항목을 건너뛸지 설정

2. 추천 콘텐츠만 보여주기
CMS에서 Toggle 필드 생성 (featured로 이름 지정)
기본값은 "off(비추천)" 상태
대표 콘텐츠에만 featured = on 설정
Collection List → Filter → featured = true 로 설정

3. 최신순 정렬 + 3개만 보여주기
Sort: date 필드 → 내림차순
Limit To: 3

4. 특정 카테고리만 필터링
CMS에 category 필드 추가 (예: News, Tips, Update 등)
원하는 카테고리로 필터 적용 (예: category = "News")

5. Offset으로 건너뛰기
슬라이더에는 최신 3개 보여주고, 그 아래엔 다음 3개만 보여주고 싶을 때
첫 번째 리스트: Limit = 3, Start Offset = 0
두 번째 리스트: Limit = 3, Start Offset = 3

6. 커스텀 정렬용 숫자 필드 만들기
CMS에 order 필드 (숫자형) 추가
원하는 순서대로 번호 부여 (1, 2, 3...)
Sort 기준을 order 필드로 설정 → 직접 순서 제어 가능

 

● CMS 상세 페이지 연결

CMS 컬렉션에 있는 각각의 항목(Item)을 위한 개별 페이지를 자동 생성하는 기능

1. 상세 페이지 생성
왼쪽 상단 Pages 탭 클릭
+ 버튼 → New CMS Page 선택
컬렉션 선택 (예: Articles)
Detail Page 선택
(이 페이지는 컬렉션의 각 항목을 하나씩 받아서 렌더링하는 동적 페이지 템플릿)

2. 콘텐츠 연결 및 디자인
Framer는 CMS 필드 데이터를 자동으로 페이지에 배치
(Title → Text, Image → Image Layer, Date → Text)

3. 새로운 필드 추가 및 연결
CMS → 컬렉션에서 새 필드 추가 (예: link)
해당 아이템에 값 입력 (예: https://example.com)
상세 페이지로 돌아와 버튼을 만들고,
버튼의 link 속성에 → Set Variable → 새 필드 선택

4. 변수(Variable)을 이용한 동적 연결
텍스트, 이미지, 버튼 등 거의 모든 요소에 Variable 연결 가능
텍스트 → content 속성에 연결
버튼 → 링크 속성에 연결
이미지 → fill 속성에 연결
(Insert → CMS → Fields 메뉴에서 직접 드래그하면 자동 연결)

5. 조건부 랜더링
요소 선택 → Visible 속성 선택
+ Set Variable → 해당 필드 선택 → Is Set 체크
→ 값이 없을 때 자동으로 숨겨짐.
→ 버튼, 링크, 이미지 등 어디든 적용 가능

 

● 항목별 스타일 & 조건부 랜더링

조건부 렌더링은 CMS 데이터 유무에 따라 요소의 표시 여부를 제어하는 기능

모든 조건부 설정은 Framer의 Visible 속성 → Variable → is set 옵션을 통해 손쉽게 구현

1. 링크 있는 경우만 버튼 보여주기
CMS에서 link 필드 추가 및 일부 항목만 링크 입력
상세 페이지에서 버튼을 만들고,
버튼 선택 → Visible 속성 클릭
+ Set Variable → link 필드 → is set 선택

2. 카테고리에 따라 배경 색 다르게 하기
CMS에서 category 필드에 "news", "event", "update" 등 입력
카드 컴포넌트에 배경색을 다르게 표현하고 싶다면?
→ 조건부 Variant 스타일을 만들고 변수로 연결:
카드 컴포넌트를 Variant로 설정 (예: 기본 / news / event)
컴포넌트 선택 → Variant → + Set Variable → category 필드 연결

3. 추천 글에 뱃지 표시
CMS에 featured 라는 Toggle 필드 추가 (Yes/No)
카드에 뱃지(예: 🌟 Featured)를 추가
뱃지 요소 선택 → Visible → + Set Variable → featured
→ featured가 Yes일 때만 뱃지가 보이도록 설정

 

● 컬렉션 관계 & 필터 UI 만들기

컬렉션 관계

Framer CMS에서는 한 컬렉션에서 다른 컬렉션을 참조(Reference) 할 수 있다
→ 컬렉션 간의 관계를 통해 중복 없이 정돈된 데이터 구조를 유지

 

1. 글 -  작성자 연결
Authors라는 새 컬렉션 생성이름, 프로필 이미지, 소개 텍스트 등 입력
Articles 컬렉션으로 이동 → + Add Field → Relation 선택
이름: author → 연결 대상: Authors 컬렉션 선택
→ 각 글 항목에 작성자 선택 필드가 생기고, 리스트에서 연결 가능

2, 상세 페이지에 관계 콘텐츠 표시
작성자 정보를 글 상세 페이지에 표시하려면
글 상세 페이지에서 author.name, author.image 등 필드 사용 가능
텍스트/이미지 레이어 선택 → + Set Variable → author.name 등으로 연결
(관계형 필드 내부의 서브필드도 드릴다운하여 연결 가능

3.카테고리별 콘텐츠 필터링 UI 만들기
Categories 컬렉션 생성 (이름만 있어도 OK)
Articles 컬렉션에 category라는 Relation 필드 추가
사용자가 카테고리를 선택하면, 그 카테고리에 해당하는 콘텐츠만 리스트에 표시되도록 구성
→ 이때 사용하는 기능이 필터 UI 구성

4.필터 UI 생성
컴포넌트를 만들고 Toggle 방식으로 필터를 생성 가능
프레임 버튼 또는 텍스트를 만들어 필터 토글로 사용
버튼 클릭 시 컬렉션 리스트의 Filter 속성 변경

5. 컴포넌트와 연결된 필터
여러 버튼을 Variant로 만든 후 선택 시마다 필터 값을 변경할 수 있다
필터 UI도 컴포넌트로 만들어 재사용성 향상
카테고리 Pill 버튼→ Variant (Selected / Not Selected)
선택 시 Set Variable → 리스트 필터 갱신

 

Step 4. 특강 (이강민 튜터)

 

● AI Wireframe 제작 기능

Insert - Wireframe - 원하는 내용 입력하면 자동으로 생성

1처 생성 이후 추가적인 내용을 더 입력하여 수정할 수 있음

다만 UI적인 요소들만 만들어주고 기능적인 요소는 제작할 수 없음

 

● Workshop 기능

Wireframe으로 제작하지 못한 기능적 요소를 AI로 제작하는 툴

(AI가 코드를 짜서 컴포넌트를 만들어준다)

Quick Acttion (Ctrl + A) - Workshop

 

● 로고 Vector set 기능

조금 더 다양해고 새로운 로고를 쉽게 적용할 수 있는 기능

Asset - Vector - New Vector Set - 페이지에 위치 - 우측 패널 Edit으로 수정

우측 패널 Effects에서 로고에 애니매이션을 줄 수 있음

 

● 버튼 CTA Analytics 기능

기본적인 통계는 Framer 자체 Analytics에서 제공

특정 버튼에 대한 통계는 버튼 클릭 - 우측 패널 Link - Tracking을 추가 - Analytics Funnel에서 추가하여 확인

 

● A/B 테스트 기능

우측패널 Tracking을 추가 - Analytics에서 좌측 패널 A/B 테스트 추가 - 좌측 패널 Pages에서 Varient 수정 - Analytics 우측 패널에서 Click 설정 - Start Test - Analytics에서 결과 확인