Design
2025. 7. 7.
Stack과 반응형 레이아웃 활용법
Stack은 자식 요소를 자동으로 정렬하여 반응형 구조를 구현하는 특수 프레임으로, 사용자는 수동 배치 없이도 콘텐츠에 맞춰 자연스럽게 레이아웃을 유지할 수 있습니다. 이 글에서는 Stack에 관한 내용을 설명해 드리겠습니다.
Posted By
Framer Space
목차
Table of Contents
본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.
Stack이란?
Stack은 자식 요소들을 가로 또는 세로로 자동 정렬해 주는 특수 프레임이에요.
CSS의 Flexbox 또는 Figma의 Auto Layout과 비슷한 개념으로, 콘텐츠 정렬과 반응형 구조 구현에 탁월합니다.
Stack의 장점
요소들을 수동으로 배치하지 않아도 됨
콘텐츠에 따라 자동으로 크기 및 정렬이 조정됨
반응형 구조 구현이 쉬움
텍스트나 이미지가 바뀌어도 레이아웃이 자연스럽게 유지됨
예를 들어 버튼 텍스트가 바뀌면 버튼 너비도 자동 조절되고, 카드 내 텍스트가 늘어나면 전체 영역이 자연스럽게 확장됩니다.
Stack을 만드는 3가지 방법
기존 프레임에 Stack 속성 추가
프레임 선택 후 오른쪽
Layout설정
처음부터 Stack 프레임으로 생성
툴바에서
Row또는Column선택 후 드래그
기존 요소를 Stack으로 묶기
여러 요소 선택 후
우클릭 > Add Stack또는 단축키 사용 (Mac:Option + Cmd + Return, Windows:Ctrl + Alt + Enter)
Stack 속성 살펴보기
속성 | 설명 |
|---|---|
Direction | 가로(Horizontal) / 세로(Vertical) 정렬 |
Distribute | 시작/가운데/끝 또는 요소 간 간격 자동 조절 |
Align | 수직 방향 기준 정렬 ( |
Gap | 요소 간 거리 설정, 드래그로 조절 가능 |
Padding | Stack 내부 여백 지정 (4면 개별 설정 가능) |
자식 요소에 따라 Stack 자동 조정하기
Shift + A 또는 우클릭 > Fit Content를 사용하면 Stack 프레임이 자식 요소 크기에 맞춰 자동으로 조절됩니다.
Stack 사용 예시
내비게이션 바: 로고 + 메뉴 (가로 Stack)
카드 컴포넌트: 이미지 + 텍스트 + 버튼 (세로 Stack)
버튼 구성: 텍스트 길이에 따라 너비 자동 조정(
Fit Content)
반응형 레이아웃 구성도 가능해요
페이지 전체에 Stack을 적용하면 브레이크포인트별로 구조적인 변경이 쉬워집니다.
상단(Header), 본문(Body), 하단(Footer) 등 각 섹션을 Stack으로 구성해 관리하면, 정렬이나 간격 변경이 직관적이에요.
본 글은 Framer 공식 문서 'Stacks and Relative Positioning in Framer'를 번역·각색한 콘텐츠입니다.
