레이아웃 (Stack · Grid)
요소를 하나하나 손으로 배치하면 화면 크기가 바뀔 때 무너집니다. Framer의 Stack과 Grid를 쓰면 자동으로 정렬되어 반응형에 강해집니다.
Stack (스택)
요소를 가로 또는 세로로 자동 나열합니다. CSS의 Flexbox와 같은 개념입니다.
- 프레임을 선택하고 오른쪽 패널에서 Stack 활성화
- 방향(가로 ↔ 세로), 간격(Gap), 정렬(Align) 을 조절
- 요소를 추가하면 간격을 유지한 채 자동 배치됩니다
메뉴, 버튼 그룹, 카드 목록처럼 “일정한 간격으로 나열되는 것”은 거의 다 Stack으로 만듭니다. 더 깊은 내용은 디자인 구조 → Stack을 참고하세요.
Grid (그리드)
요소를 격자(행·열) 로 배치합니다. 상품 목록, 갤러리, 카드 그리드에 적합합니다.
- 열 개수와 간격을 지정
- 각 칸의 크기를 고정하거나 자동으로 채우게 설정
- 반응형에서 모바일 1열, 태블릿 2열, 데스크톱 3~4열 식으로 조정
가장 흔한 조합
세로 Stack (페이지 전체)
├─ 헤더
├─ 히어로
├─ Grid (카드 3열) ← 상품·기능 목록
└─ 푸터- 섹션 쌓기 → 세로 Stack
- 카드 나열 → Grid
- 버튼·태그 줄 → 가로 Stack
실전 팁
- 간격은 4·8·16·24px처럼 일정한 단위로 통일하세요.
- 좌표를 손으로 고정하지 말고 레이아웃에 맡기면 반응형이 훨씬 쉬워집니다.
다음 단계
자주 묻는 질문
Last updated on