피그마 오토레이아웃｜내용에 맞춰 늘어나는 틀 만들기

2026-10-30 업데이트 · 편집부 · 읽는 시간 약 2분

피그마에서 가장 먼저 익혀야 할 기능입니다. 오토레이아웃을 안 쓰면 글자가 한 줄 늘어날 때마다 모든 요소를 손으로 옮겨야 합니다.

뭘 해 주는 기능인가

버튼을 예로 들겠습니다. 오토레이아웃 없이 만든 버튼은 글자를 ‘확인’에서 ‘확인하고 저장하기’로 바꾸면 글자가 버튼 밖으로 삐져나옵니다. 배경 사각형을 손으로 늘려야 합니다.

오토레이아웃을 쓰면 버튼이 글자에 맞춰 저절로 늘어납니다. 양옆 여백도 그대로 유지됩니다.

목록, 카드, 메뉴, 표 같은 것도 마찬가지입니다. 항목을 하나 추가하면 아래 요소들이 저절로 밀립니다.

적용하기

1. 묶을 요소들을 선택합니다 (Shift+클릭 또는 드래그)
2. Shift+A
3. 프레임이 생기고 오토레이아웃이 적용됩니다

오른쪽 패널에 오토레이아웃 설정이 나타납니다.

빈 프레임에 먼저 오토레이아웃을 걸고 그 안에 요소를 넣어도 됩니다.

기본 설정 네 가지

여백은 네 방향을 따로 줄 수 있습니다. 설정 옆의 아이콘을 누르면 위·아래·좌·우를 각각 입력할 수 있습니다.

정렬의 9칸 격자가 중요합니다. 버튼 안의 글자를 가운데에 두려면 격자 가운데를 고르면 됩니다.

크기 설정 — 여기가 핵심입니다

오토레이아웃을 쓰다 헤매는 이유는 거의 이 설정 때문입니다. 요소를 선택하면 오른쪽에 너비(W)와 높이(H)가 나오고, 각각 세 가지 중 하나를 고를 수 있습니다.

실제 예로 보면

버튼: 너비·높이 모두 ‘내용에 맞춤’. 글자가 길어지면 버튼이 늘어납니다.

카드: 카드 프레임은 너비 ‘고정'(또는 채우기), 높이 ‘내용에 맞춤’. 글이 길어지면 카드가 아래로 길어집니다.

카드 안의 본문 글자: 너비 ‘채우기’, 높이 ‘내용에 맞춤’. 카드 너비에 맞춰 줄바꿈되고, 줄이 늘면 아래로 늘어납니다.

목록 항목: 너비 ‘채우기’. 목록 너비가 바뀌면 항목들도 따라갑니다.

중첩 — 실무의 기본 구조

오토레이아웃 안에 오토레이아웃을 넣습니다. 복잡해 보이지만 이게 실제 작업 방식입니다.

카드 하나를 만드는 구조입니다.

“ 카드 (세로 오토레이아웃) 이미지 (고정 높이) 내용 묶음 (세로 오토레이아웃) 제목 (채우기 / 내용에 맞춤) 본문 (채우기 / 내용에 맞춤) 버튼 줄 (가로 오토레이아웃) 버튼 1 (내용에 맞춤) 버튼 2 (내용에 맞춤) “

안쪽부터 만들어 나가면 쉽습니다. 버튼 두 개를 Shift+A로 묶고, 제목과 본문을 묶고, 전체를 다시 묶는 순서입니다.

이렇게 만들면 제목이 두 줄이 되어도 카드 전체가 알아서 늘어나고, 버튼 글자가 길어져도 깨지지 않습니다.

간격을 ‘자동’으로

간격 입력란에 숫자 대신 ‘자동’(Auto)을 고를 수 있습니다. 요소들이 양 끝으로 밀리고 남은 공간이 사이에 균등하게 나뉩니다.

머리말 영역에서 로고를 왼쪽, 메뉴를 오른쪽에 붙일 때 씁니다. 숫자로 맞추면 화면 너비가 바뀔 때마다 틀어집니다.

쓰려면 그 프레임의 너비가 ‘고정’이나 ‘채우기’여야 합니다. ‘내용에 맞춤’이면 남는 공간이 없어 적용되지 않습니다.

자주 걸리는 지점

마지막 항목이 처음에 답답한 부분입니다. 오토레이아웃 안에서는 요소를 마음대로 끌어 놓을 수 없습니다. 그게 이 기능의 목적이기도 합니다. 꼭 자유롭게 두어야 하는 요소는 ‘절대 위치’로 설정하면 빠집니다.

왜 꼭 써야 하나

네 번째가 특히 중요합니다. 컴포넌트와 오토레이아웃을 함께 쓰는 게 피그마 작업의 기본입니다. 피그마 컴포넌트에 정리했습니다.