디자인 구조 한눈에 보기
Framer로 잘 만들려면 세 가지 구조 개념을 이해해야 합니다. Layer(레이어) · Section(섹션) · Stack(스택) — 이 셋의 관계만 잡으면 나머지는 쉽습니다.
세 가지의 관계
페이지
└─ Section (영역: 헤더 / 히어로 / 기능소개 / 푸터 …)
└─ Stack (자동 정렬: 가로 또는 세로)
└─ Layer (개별 요소: 텍스트 · 이미지 · 버튼 …)| 개념 | 역할 | 비유 |
|---|---|---|
| Section | 페이지를 가로 줄로 나누는 큰 영역 | 책의 “장(章)“ |
| Stack | 영역 안에서 요소를 자동 정렬 | 줄 세우기 |
| Layer | 화면의 모든 개별 요소 | 낱낱의 물건 |
좌측 패널은 탭이 3개입니다
Framer 화면 왼쪽 패널은 위쪽에 탭 3개가 있습니다. 이 위치를 먼저 익혀두세요.
| 탭 | 하는 일 |
|---|---|
| Pages | 사이트의 페이지 목록 — 페이지를 추가·이동·관리 |
| Layer | 현재 페이지의 요소들이 트리 구조로 보이는 곳 (가장 자주 씀) |
| Asset | 색상·이미지·컴포넌트 등 재사용 자산 모음 |
레이어 패널의 아이콘으로 구조를 읽는다
두 번째 탭인 레이어 패널에서는 각 레이어 왼쪽 아이콘 모양만 봐도 그게 Stack인지, 일반 박스인지 바로 알 수 있습니다.
Stack — 가로 방향
스택은 반드시 가로/세로 중 하나의 방향을 가집니다. 자식 요소가 가로로 나란히 배치되면 이 아이콘이 표시됩니다.
Stack — 세로 방향
자식 요소가 위에서 아래로 쌓이면 이 아이콘이 표시됩니다. 가로 아이콘과 방향만 다릅니다.
일반 박스 (스택 아님)
스택이 아닌 보통 프레임은 그냥 네모 박스 아이콘입니다. 즉, 아이콘이 막대 묶음이 아니라 단순 사각형이면 자동 정렬이 걸려 있지 않은 요소입니다.
정리하면 — 세로 막대 2개 = 가로 스택, 가로 막대 2개 = 세로 스택, 단순 네모 = 스택이 아닌 일반 박스입니다. 아이콘만 보고도 레이아웃 동작을 예상할 수 있어요.
왜 이 구조가 중요한가요?
- 반응형이 쉬워집니다 — 손으로 좌표를 고정하지 않고 Stack에 맡기면 화면 크기가 바뀌어도 자동으로 정렬됩니다.
- 수정이 빨라집니다 — Section 단위로 영역을 옮기고, Stack 간격만 바꾸면 전체가 정돈됩니다.
- 협업이 쉬워집니다 — Layer 이름을 잘 지으면 누가 봐도 구조를 이해합니다.
다음 단계
Section (섹션)부터 시작하세요.
자주 묻는 질문
Last updated on