피그마 오토 레이아웃 지옥 탈출기: 기획서 수정 10배 빨라지는 법, 이것만 그대로 따라 하세요
피그마 오토 레이아웃 지옥 탈출기: 기획서 수정 10배 빨라지는 법, 이것만 그대로 따라 하세요
기획서에 글자 몇 자 추가했을 뿐인데, 뒤에 있는 박스를 일일이 밀고 크기를 조절하느라 시간을 다 써버리나요?
그 순간 피그마는 “협업 툴”이 아니라 “수동 노동 시뮬레이터”가 됩니다. 🧱
하지만 오토 레이아웃(Auto layout)을 쓰면, 프레임(그릇)이 콘텐츠(내용물)에 맞춰 자동으로 늘고 줄고, 리스트는 자동으로 밀리고, 간격은 균일하게 유지됩니다.
최신 UI에서도 당황하지 않도록, 기획자가 가장 자주 쓰는 기능만 뽑아 “바로 따라하는 순서”로 정리했습니다.
1) 오토 레이아웃, 기획자에게 왜 필요한가요?
오토 레이아웃은 한 줄로 말하면 이겁니다.
“내용물이 바뀌면, 그릇과 정렬이 알아서 따라온다.”
- 수정의 자유: 텍스트를 늘리면 버튼/박스가 자동으로 늘어납니다.
- 간격 유지: 항목을 추가하면 아래 요소들이 자동으로 밀려납니다.
- 정렬의 일관성: ‘이거 1px 어긋났나?’ 같은 불안을 줄입니다.
기획자 관점에서 가장 큰 이득은 “수정할 때마다 레이아웃 다시 잡는 시간”이 사라진다는 점입니다.
3) 업데이트된 패널에서 간격 조절하기 (3가지만 기억)
오른쪽 패널의 Auto layout 영역에서, 기획자가 자주 건드리는 건 딱 3개입니다.
3-1. 방향(Direction)
- 세로(Vertical): 위에서 아래로 쌓기(리스트/설명 문단에 최적)
- 가로(Horizontal): 왼쪽에서 오른쪽으로 쌓기(버튼 묶음/칩/탭에 최적)
3-2. 간격(Gap between)
요소와 요소 사이 거리입니다. 리스트 만들 때 “균일한 간격”을 자동으로 유지해 줍니다.
- 숫자만 바꿔도 전체 간격이 일괄 적용됩니다.
- 세로/가로 흐름에서는 Gap을 Auto로 두어 “남는 공간을 최대 분배”하는 방식도 가능합니다.
3-3. 안쪽 여백(Padding)
박스 테두리와 내용물 사이의 쿠션(여백)입니다.
- 패딩이 있어야 “버튼 같아 보이는 버튼”이 됩니다.
- 상/하/좌/우를 따로 줄 수도 있고(필요할 때만), 한 번에 동일 값으로도 설정 가능합니다.
팁: 숫자 1, 2 차이로는 감성이 안 바뀌고, “퇴근 시간”만 바뀝니다. 기본값을 정해두고(예: 버튼 패딩, 리스트 갭) 반복 적용하는 쪽이 효율적입니다.
4) 리스트 수정/추가/순서 변경을 “자동화”하는 법
기획서에서 자주 만드는 것: 공지사항 목록, 정책 항목, 입력 폼, 체크리스트… 전부 “리스트”입니다.
4-1. 리스트를 오토 레이아웃으로 묶는 기본
- 리스트 항목(텍스트/행 단위)을 여러 개 선택
- Shift + A로 오토 레이아웃 적용
- 방향을 Vertical로 두고, Gap을 원하는 값으로 조절
4-2. 항목 추가가 쉬워지는 이유
오토 레이아웃 프레임 안에서는 항목을 추가/삭제/재정렬해도 흐름(세로/가로 축)을 따라 자동으로 재배치됩니다.
4-3. 순서 바꾸기, 가장 확실한 방법
- 드래그 앤 드롭: Layers 패널에서 항목 순서를 위/아래로 드래그하면, 캔버스에서도 순서가 즉시 반영됩니다.
- 주의: 일부 단축키/환경에 따라 레이어 순서 이동 동작이 바뀌는 경우가 있어, “항상 먹히는 방법”은 드래그가 가장 안정적입니다.
5) 기획자를 위한 오토 레이아웃 생존 팁
5-1. 해제하고 싶을 때(되돌리는 단축키)
- 오토 레이아웃 해제: Mac Option + Shift + A / Windows Alt + Shift + A
중요: 컴포넌트 인스턴스에서는 오토 레이아웃을 바로 제거할 수 없고, 필요하면 인스턴스를 분리(Detach)하거나 메인 컴포넌트를 수정해야 합니다.
5-2. Hug vs Fill: 이 두 개만 알면 구조가 안 무너집니다
- Hug contents: “내용물에 딱 맞게 내 크기를 조절할게”
- Fill container: “부모 프레임의 남는 공간을 내가 채울게”
- Fixed: “나는 내 크기 고정, 흔들리지 않겠다”
기획서에서 자주 쓰는 조합은 이렇습니다.
- 버튼: 가로는 Hug(라벨 길이에 반응), 높이는 보통 고정
- 입력창: 가로는 Fill(부모 폭에 맞춤), 내부 텍스트는 규칙으로 관리
- 리스트 행: 행 프레임은 Fill, 안의 태그/버튼은 Hug로 섞으면 안정적
5-3. “여기만은 자유롭게 놓고 싶다”면: Ignore auto layout
배지, 닫기(X) 버튼, 뱃지 같은 건 리스트 흐름을 무시하고 특정 위치에 고정하고 싶을 때가 있습니다.
- 해당 자식 레이어를 선택하고 오른쪽 패널에서 Ignore auto layout을 사용하면 흐름 밖으로 배치할 수 있습니다.
6) 30초 체크리스트
- “수정이 자주 일어나는 덩어리”부터 오토 레이아웃을 적용했는가?
- 방향(세로/가로)이 목적에 맞는가?
- Gap(간격)과 Padding(안쪽 여백)이 규칙적으로 유지되는가?
- 버튼/라벨은 Hug, 입력창/행 프레임은 Fill로 역할이 구분돼 있는가?
- 필요한 요소만 Ignore auto layout로 예외 처리했는가?
FAQ
Q Shift + A를 눌렀는데 원하는 대로 안 쌓여요.
A오토 레이아웃은 선택한 레이어 배치 상태를 보고 “세로/가로/그리드”를 추정합니다. 적용 후 오른쪽 패널에서 방향(Vertical/Horizontal/Grid)을 명시적으로 바꾸면 대부분 해결됩니다.
Q 텍스트를 늘렸는데 박스가 안 늘어나요.
A부모 프레임이 Hug가 아닌 Fixed로 되어 있거나, 텍스트 레이어 자체가 고정 폭(고정 크기 텍스트)일 수 있습니다. 버튼처럼 “내용에 반응해야 하는 요소”는 Hug contents가 자연스럽습니다.
Q 오토 레이아웃 해제가 안 됩니다.
A선택한 것이 컴포넌트 인스턴스라면 오토 레이아웃을 직접 제거할 수 없습니다. 필요하면 인스턴스를 분리하거나, 메인 컴포넌트에서 변경해야 합니다.
Q Gap이랑 Padding이 헷갈려요. 뭐가 뭐죠?
AGap은 “항목과 항목 사이 간격”, Padding은 “박스 테두리와 내용물 사이 여백”입니다. 리스트는 Gap이, 버튼은 Padding이 체감이 큽니다.
Q 배지/닫기 버튼처럼 특정 위치에 고정하고 싶어요.
A해당 레이어를 선택하고 Ignore auto layout을 사용하면 흐름(쌓임) 규칙 밖으로 배치할 수 있습니다. 리스트 흐름은 유지하면서, 필요한 요소만 예외 처리하는 방식입니다.