[캠프 Day 38] 서비스기획 심화 - Framer 입문

● Intro

 지금까지 여럿 문제해결 과제를 수행하면서, 내가 가진 생각을 글로써, 혹은 약간의 이미지(와이어 프레임)로써 전개하는 연습을 했었다. 지난 역기획 과제에서도 느낀 것이지만, 결국엔 해결책이 얼마나 설득력 있는지가 단편적인 내 아이디어의 정수라고 생각도 들었다. 그런 의미에서 이번에는 내 생각을 표현하는 방법. 즉, Framer라는 도구를 배워보려 한다. 적절한 시기에 등장한 강의라고 생각된다. 백문이 불여일견, 그 견을 위한 연습을 해보자.

---

● Framer란?

: 웹사이트를 디자인하고, 퍼블리시하고, 분석할 수 있는 '올인원 노코드 웹 제작 도구'이다.
- 직관적인 시각 편집 방식으로 코드를 쓰지 않고도 '실제 서비스 수준의 웹사이트'를 만들 수 있다.

Framer 실제 웹화면

- 실시간으로 웹사이트를 만들고, 애니메이션을 넣고, CMS(콘텐츠 관리 서비스)를 설정
- 복잡한 개발 없이도 프로덕트를 직접 실현하고 퍼블리시
- 반응형 웹, 인터랙션, SEO(검색엔진 최적화), 도메인 연결, 사용자 행동 분석까지 모두 지원

---

● Framer 프로젝트의 계층 구조

 

- Workspace: 내 모든 프로젝트의 최상위 단위
- Project: 하나의 웹사이트 단위
- Page: 각 웹사이트를 구성하는 화면들 (Home, About 등)
- Canvas & Breakpoint: 실제 콘텐츠가 배치되는 영역

Framer 프로젝트의 계층 구조

---

● Framer 주요 단축키

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

---

 

● Frame 조작 단축키

조작	단축키/방법
요소 선택	클릭 또는 Layers 패널에서 직접 선택
다중 선택	Shift + 클릭, 박스로 드래그 선택
네스팅 해제 없이 이동	Space + 드래그
부모 Frame으로 이동	Esc 키
자식 요소 래핑	Cmd + Enter
정렬/간격 조정	우측 패널 상단 Align/Distribute 도구 사용

---

● Stack(일방향 정렬)

 

▶ Stack이란?

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

- Figma의 Auto Layout과 매우 유사

 

▶ Framer의 위치 지정 방법

위치 속성	설명
Absolute	자유롭게 배치 가능. 기본값. 다른 요소의 흐름에 영향 없음.
Relative	Stack이나 Grid 내부에서 흐름을 따라 배치됨. Stack의 기본 위치 속성.
Fixed	뷰포트 기준으로 고정됨 (스크롤 무시).
Sticky	뷰포트 상단에 닿으면 Fixed로 바뀌는 하이브리드형.

 

- Stack 안에 있는 요소들은 기본적으로 Relative로 배치되어, 자동으로 순서대로 정렬되고 간격을 유지한다.

- Absolute 요소를 Stack 안에 넣을 수도 있지만, 이 경우 Stack의 흐름에서 빠지게 된다.

 

▶ Fit Content vs Fill Container

: Stack을 활용한 반응형 UI의 핵심은 바로 크기 자동 조절인데, 누가? 어디에? 맞추는지에 따라 2가지로 갈린다.

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

---

● Grid(양방향 정렬)

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

 

▶ Grid의 계층 구조

- Grid Frame: 전체 레이아웃의 틀
- Grid Cell: 요소들이 정렬되는 좌표 기준 공간(보이지 않음)
- Grid Item: 유저가 직접 배치하는 요소들 (텍스트, 이미지 등)

Grid의 계층 구조

 

▶ 상황에 따른 정렬방식

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

---

● Link

 

▶ Link 스타일 관리

: 텍스트에 링크를 적용하면 Link Style 설정창이 자동 생성되는데, 각 스타일은 다음 3가지 상태를 설정 가능
※ 링크 스타일은 일괄 적용 및 재사용 가능하며, navbar 등 반복되는 UI에서 특히 유용함

 

- Default: 기본 상태 색상/스타일

- Hover: 마우스 오버 시 효과 (예: 색상 전환, 밑줄)

- Current: 현재 보고 있는 페이지에 연결된 링크로 시각적 구분

 

▶ 섹션 링크(스크롤 이동)

: 이동 대상이 되는 프레임을 선택 후 `Properties Panel` 하단에서 Scroll Section 추가

- 링크 대상 페이지를 먼저 선택 → 그 안에서 섹션 이름을 선택 가능
- 옵션은 다음 총 2가지 중 선택 가능

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

---

한 줄 코멘트: 일단 웹사이트를 Framer로 만들기 위해 필요한 기본적인 내용들은 모두 다뤘다. 이외에도 Insert를 활용하면 웬만한 콘텐츠들을 손쉽게 다룰 수 있다는 점도 흥미로웠다. 어떤 웹사이트를 간단히 만들어 보면서 연습할지 주제를 다시 한번 고민해 보는 시간이 필요할 것 같다. 일단은 재밌는 걸 하고 싶다.