[내일배움캠프 PM 4기] 60일차 - Framer 핵심 정리

오늘의 UI 실습 기록: Figma & Framer 핵심 정리

오늘은 Figma의 레이아웃·컴포넌트 시스템과 Framer의 링크·스타일·반응형 구조까지
웹 UI 제작의 기본기를 정리하는 시간을 가졌다.
기초를 단단히 다져두려고 학습 내용을 블로그용으로 기록해둔다.

---

1. Figma — Frame, Zoom, Grid, Text 기본기

Frame 기본 조작

• F 키로 Frame 생성
• 드래그로 만들고, Shift는 정사각형, Alt는 중심 기준 확장
• 여러 요소 선택 후 Cmd + Enter → Wrap with Frame
• 부모 Frame 삭제 Cmd + Delete (자식은 남김)
• Frame 간 이동 Esc

Zoom 조작

• Z → Zoom Tool
• Option + 클릭 → Zoom Out
• Cmd + 1 전체 보기
• Cmd + 2 선택 요소 중심
• Cmd + 0 100% 보기
• Space + 드래그 → 화면 이동

Grid 만들기

• Frame → Layout → Grid 적용
• Layout 메뉴에서 Grid 도구 직접 드래그
• 단축키 Shift + G
  Grid는 내부적으로 셀 구조가 생성되고, 요소 배치 기준이 된다.

텍스트 사용

• T로 텍스트 생성
• 클릭: 자동 크기(헤딩)
• 드래그: 고정 크기(본문)
• Shift + A(Auto Layout)로 텍스트 박스 크기 제어가 편해짐

---

2. Framer — 링크, 스타일, 섹션 이동

링크 유형

• 페이지 이동: /pricing
• 동일 페이지 내부 섹션 이동: #features
• 외부 링크: https://…
• CMS 콘텐츠 링크: slug 기반

링크 스타일 관리

링크를 적용하면 스타일 패널이 자동 생성된다.
상태는 Default / Hover / Current 세 가지를 설정할 수 있다.
Navbar 등 반복되는 UI에서 스타일을 일괄 사용하기 좋다.

섹션 링크(스크롤 이동)

• 이동할 Frame 선택
• Properties Panel 아래에서 Scroll Section 추가
• 이동 대상 페이지 선택 후 섹션 지정
• Offset Y로 상단바와 겹치지 않도록 조정
• 스크롤 방식: Instant / Smooth

---

3. 스타일 시스템 구축

페이지를 만들 때 스타일을 처음부터 체계적으로 설정해두어야
나중에 유지보수와 확장이 쉽다.

네이밍 및 정리 방식

• 폴더 구조로 관리: content/, surface/, semantic/
• 의미 기반: surface/0, content/100 등
• 숫자 기반(Material 스타일): gray/300, primary/500
• /를 사용하면 자동으로 폴더가 생성되어 전체 스타일 관리가 편해진다.

---

4. 컴포넌트, Variant, Variable

컴포넌트 만들기

• 요소 선택 후 ⌥ + ⌘ + K
• 이름을 buttons/primary-cta처럼 폴더 구조 포함해 작성
• 전용 컴포넌트 편집 화면으로 이동

Variant

하나의 컴포넌트 안에 기본 / hover / pressed / inverted 등 여러 상태를 구성할 수 있다.
상태별 텍스트 색상, 배경 등 스타일을 나눠 관리하면 유지보수가 쉽다.

Variable

텍스트, 색상, 보임/숨김 등의 속성을 컴포넌트 외부에서 바꿀 수 있다.
예: 버튼 컴포넌트의 텍스트만 인스턴스마다 다르게 입력

카드 컴포넌트 안에 버튼 컴포넌트를 넣고
상위 카드 컴포넌트에 변수로 연결하는 방식도 가능하다.

---

5. Layout Template

Navbar, Footer, 공통 배경, 페이지 폭 등
여러 페이지에서 반복되는 요소는 템플릿으로 관리하면 효율적이다.

템플릿 생성

• 공통 요소 우클릭 → Create Layout Template
• 템플릿 뷰로 이동
• Placeholder 영역에 각 페이지별 콘텐츠가 들어가는 방식

템플릿을 유연하게 만들기

변수를 사용해 페이지마다 다른 형태를 적용할 수 있다.

예:

• 어떤 페이지는 Nav를 고정
• 어떤 페이지는 투명하게 표시
• Hero 섹션 위에 Nav를 겹치도록 만들기
  → 변수로 padding·스타일 옵션을 만들어두면 해결된다.

---

6. 반응형 디자인

1) Fluid Layout

핵심 규칙은 절대 배치(absolute)를 피하고 Stack으로 배치하는 것.

기본 원칙

• 모든 요소는 Stack을 활용해 정렬
• Width는 Fill로 설정하고 Max Width로 제한
• 이미지는 Add Frame 후 비율 고정하여 배치
  이 구조가 되어 있어야 반응형 전환 시 안정적이다.

2) Breakpoints

• Desktop을 기본으로, Tablet → Mobile 순으로 세분화
• Tablet에서 바꾼 내용은 Desktop에 영향을 주지 않음
• 특정 브레이크포인트만 초기화하려면 Override Reset
• Tablet에서 작업한 내용을 Desktop에 반영하고 싶을 땐 Update Primary

Nav/Footer 반응형

Layout Template 내부에서 Breakpoint를 추가하면
모든 페이지에 자동 적용된다.

텍스트 스타일 반응형

텍스트 레이어 단위로 오버라이드하지 않고
텍스트 스타일 자체에 Breakpoint를 저장할 수 있다.

예:

• Large: 64px
• Medium: 48px
• Small: 34px

---

정리

오늘 배운 핵심은 “구조화”와 “재사용”이었다.

• Frame·Grid로 구조를 잡고
• 컴포넌트/Variant/Variable로 재사용성을 높이고
• Layout Template로 공통 요소를 관리하고
• 반응형 원칙에 맞게 Stack 중심으로 배치하는 방식