처음 Auto Layout을 접하면 “정렬이 자동으로 되는구나” 정도로만 느껴질 수 있어요.
근데 내가 컴포넌트를 만지다 보면,
하지만 이 기능을 제대로 이해하고 쓰기 시작하면,
버튼, 카드, 모달, 리스트, 전체 페이지까지 반응형처럼 유연하게 구성할 수 있습니다.
Auto Layout은 단순한 ‘정렬 도우미’가 아니란 말입니다.
반응형 UI의 핵심 도구이자, 컴포넌트 시스템의 기반 이라고 할 수 있죠.
이번 글에서는 초급을 넘어서 실무에서 바로 적용할 수 있는 고급 기능과 팁을 보여드릴게요.
Auto Layout 복습: 기본 구조 다시 보기
Auto Layout은 프레임에 적용되어 내부 요소들의 간격, 정렬, 방향, 여백(Padding) 등을 자동으로 정리해주는 기능입니다.
Shift + A단축키로 바로 적용 가능- 수직(Stack), 수평(Row) 배치 모두 가능
- 내부 간격(Gap), 외부 여백(Padding), 콘텐츠 크기 따라가기(Resize) 설정 가능
여기까지는 기본이지만, 여기서 조금만 더 들어가면 디자인 효율이 3배 이상 올라갑니다.
고급 기능 1: 동적 리사이징 (Fill Container vs Hug Contents)
Auto Layout 프레임 안 요소들의 크기를 조절할 때,
Hug Contents / Fill Container / Fixed Width 세 가지 중 선택할 수 있어요.
- Hug Contents: 내용에 맞게 자동 조정됨 (텍스트 길이만큼)
- Fill Container: 부모 프레임 너비를 꽉 채움 → 반응형 구성에 유리
- Fixed: 정해진 크기 유지 (권장하지 않음)
Tip:
버튼 같은 경우 Text + Rectangle + Auto Layout 조합으로 만들고
텍스트는 Hug, 박스는 Padding + Fill로 설정하면 가장 이상적입니다.
고급 기능 2: Nested Auto Layout (중첩 사용)
Auto Layout은 안에 또 Auto Layout을 넣을 수 있습니다.
이걸 Nested Auto Layout이라고 하는데요,
복잡한 UI(예: 카드 안에 버튼 + 텍스트 + 아이콘)를 구성할 때 매우 유용합니다.
예시:
- 카드 전체 → 수직 Auto Layout
- 상단 영역 → 텍스트 + 날짜 (수평 Auto Layout)
- 중간 이미지 → 고정
- 하단 CTA 버튼 → Fill Container로 확장
이 구조는 리디자인 시 전체 정렬을 손대지 않고도 세부 변경이 가능해요.
고급 기능 3: 간격 하나 바꾸면 전부 정리되는 마법 – Spacer 활용
빈 Frame을 넣고, Spacer처럼 Auto Layout 내 간격 조정용으로 활용하면
별도 마진 계산 없이도 정렬 자동화가 가능합니다.
예:
- 상단 메뉴 + Spacer + 하단 메뉴
→ 중간 공간이 자동으로 밀려나 정렬이 유지됨
고급 기능 4: Auto Layout + Components = 최강 조합
컴포넌트 안에 Auto Layout을 넣고,
여기서 내용만 바꿔도 정렬이 무너지지 않도록 구성해두면
실무에서 디자인 유지보수 시간을 엄청나게 줄일 수 있어요.
특히 텍스트가 달라지거나 버튼 수가 바뀌어도
Padding, Gap, Resize 설정 덕분에 전체 UI는 깨지지 않고 유연하게 유지됩니다.
마무리 팁
| 기능 | 설명 | 실전 활용 |
|---|---|---|
| Hug Contents | 내용 따라 크기 자동 조정 | 버튼, 라벨 |
| Fill Container | 부모 크기 따라 확장 | 카드, 리스트 |
| Nested Auto Layout | 안에 또 Auto Layout 가능 | 복잡한 레이아웃 |
| Spacer 활용 | 여백 대신 빈 프레임 | 자동 정렬 |
| Components 조합 | 유지보수 최적화 | UI 디자인 시스템 구축 |
마무리하며
Figma의 Auto Layout은 제대로 쓰기만 하면
코딩 없이도 반응형 UI처럼 동작하는 레이아웃을 만들 수 있는 강력한 무기입니다.
기초 개념을 익힌 후, 위에 소개한 고급 기능들을 조금씩 실무에 적용해보세요.
특히 컴포넌트와 함께 쓰면, 디자인 시스템 구축이 정말 쉬워집니다.