Section (섹션)

Section(섹션) 은 페이지를 가로 줄로 나누는 큰 영역 단위입니다. 웹사이트는 보통 여러 Section이 위에서 아래로 쌓여 이뤄집니다.

섹션은 따로 있는 “기능”이 아닙니다

헷갈리기 쉬운 부분부터 짚고 갑니다. Framer에 “섹션”이라는 별도 도구나 버튼이 있는 게 아닙니다. 섹션은 텍스트·아이콘·이미지 같은 여러 요소를 하위로 담는 최상위 묶음을 가리켜 우리가 그렇게 부르기로 한 이름일 뿐입니다.

즉, 어떤 박스 안에 화면 한 영역을 이루는 요소들을 넣고, 그 가장 바깥 묶음을 섹션이라고 부르는 것입니다.

Section: 히어로 (← 화면 한 영역을 이루는 최상위 묶음)
├─ 텍스트  "한국 사용자를 위한 Framer 가이드"
├─ 텍스트  "무엇이든 검색해 보세요"
├─ 이미지  대표 스크린샷
└─ 아이콘 + 텍스트  "지금 시작하기" 버튼

이렇게 한 영역에 들어갈 요소들을 하나로 묶고, 그 최상위 박스를 섹션이라 부릅니다. 페이지는 이런 섹션들이 위에서 아래로 쌓여 완성됩니다.

전형적인 페이지 구성

┌─────────────────────────┐
│ Section: 헤더 (로고·메뉴)      │
├─────────────────────────┤
│ Section: 히어로 (큰 제목·CTA)   │
├─────────────────────────┤
│ Section: 기능 소개            │
├─────────────────────────┤
│ Section: 후기 / 가격          │
├─────────────────────────┤
│ Section: 푸터                │
└─────────────────────────┘

왜 Section으로 나누나요?

• 구조가 한눈에 — 레이어 패널에서 페이지 흐름이 명확해집니다.
• 영역 단위 수정 — Section째로 순서를 바꾸거나 복제할 수 있습니다.
• 배경·여백 관리 — Section마다 배경색·상하 여백을 따로 줄 수 있습니다.

다음 단계

Stack (스택)으로 Section 내부를 정렬해보세요.