레이아웃 (Stack · Grid)
요소를 하나하나 손으로 배치하면 화면 크기가 바뀔 때 무너집니다. Framer의 Stack과 Grid를 쓰면 자동으로 정렬됩니다.
Stack (스택)
요소를 가로 또는 세로로 자동 나열합니다. CSS의 Flexbox와 같은 개념입니다.
- 프레임을 선택하고 오른쪽 패널에서 Stack 활성화
- 방향(가로 ↔ 세로), 간격(Gap), 정렬을 조절
- 요소를 추가하면 간격을 유지한 채 자동 배치됩니다
메뉴, 버튼 그룹, 카드 목록처럼 “일정한 간격으로 나열되는 것”은 거의 다 Stack으로 만듭니다.
Grid (그리드)
요소를 격자(행·열) 로 배치합니다. 상품 목록, 갤러리, 카드 그리드에 적합합니다.
- 열 개수와 간격을 지정
- 반응형에서 모바일은 1열, 데스크톱은 3열 식으로 조정
실전 팁
- 섹션 → Stack(세로), 카드 목록 → Grid 조합이 가장 흔합니다.
- 간격은 4px, 8px, 16px처럼 일정한 단위로 통일하면 깔끔합니다.
다음 단계
Last updated on