디자인 구조 한눈에 보기

Framer로 잘 만들려면 세 가지 구조 개념을 이해해야 합니다. Layer(레이어) · Section(섹션) · Stack(스택) — 이 셋의 관계만 잡으면 나머지는 쉽습니다.

세 가지의 관계

페이지
└─ Section (영역: 헤더 / 히어로 / 기능소개 / 푸터 …)
   └─ Stack (자동 정렬: 가로 또는 세로)
      └─ Layer (개별 요소: 텍스트 · 이미지 · 버튼 …)

왜 이 구조가 중요한가요?

• 반응형이 쉬워집니다 — 손으로 좌표를 고정하지 않고 Stack에 맡기면 화면 크기가 바뀌어도 자동으로 정렬됩니다.
• 수정이 빨라집니다 — Section 단위로 영역을 옮기고, Stack 간격만 바꾸면 전체가 정돈됩니다.
• 협업이 쉬워집니다 — Layer 이름을 잘 지으면 누가 봐도 구조를 이해합니다.

다음 단계

Section (섹션)부터 시작하세요.