기획자용 Figma Auto Layout: 화면 수정해도 안 무너지는 레이아웃 만들기

서론

Figma를 쓰다 보면, 처음엔 “그럴듯하게” 화면이 만들어집니다.
문제는 그 다음입니다. 텍스트가 길어지거나, 버튼이 하나 더 붙거나, 리스트가 한 줄 늘어나는 순간…
레이아웃이 와르르 무너지고, 다시 정렬하느라 시간이 녹아내립니다. (이때 마우스는 갑자기 삽이 됩니다 🥄)

해결책은 의외로 단순합니다. Auto Layout으로 “규칙”을 세워두면, 화면이 수정되어도 간격과 정렬이 자동으로 유지됩니다.
이 글에서는 기획자가 실무에서 바로 적용할 수 있도록, Auto Layout 핵심 개념부터 버튼/리스트/카드 예제, 그리고 초보가 자주 하는 실수까지 한 번에 정리해 보겠습니다.

오늘의 목표: Auto Layout의 핵심 4요소(방향/간격/패딩/정렬)만 잡고도 “수정해도 안 깨지는” 화면을 만든다.

본론

1) Auto Layout이 정확히 뭐예요?

Auto Layout은 “요소들이 줄 서는 규칙”을 정해주는 기능입니다.
예를 들어 버튼 안 텍스트가 길어지면 버튼이 자동으로 커지고, 리스트에 항목을 추가하면 간격을 유지한 채 아래로 자동으로 늘어납니다.

즉, Auto Layout은 레이아웃을 ‘수동 배치’에서 ‘규칙 기반 배치’로 바꾸는 스위치입니다.

단축키: 선택한 요소를 Auto Layout으로 만들기 Shift + A

2) Auto Layout이 필요한 순간 3가지

텍스트 길이가 바뀌는 UI (버튼 라벨, 뱃지, 태그 등)
→ “로그인”이 “로그인하고 계속하기”가 되는 순간 깨짐 방지
반복되는 리스트/카드 UI (상품 목록, 공지 리스트, 댓글 등)
→ 항목을 추가해도 간격을 유지
상태가 바뀌는 UI (에러 메시지 추가, 도움말 문구 등장, 토글 확장 등)
→ 아래 요소들이 자동으로 밀려나며 자연스럽게 정렬

기획자 관점 한 줄: 요구사항 변경은 늘 생깁니다. Auto Layout은 “변경에 강한 화면”을 만드는 보험입니다.

3) 핵심 4요소: 방향·간격·패딩·정렬

Auto Layout을 어렵게 만드는 건 기능이 많아서가 아니라, 기준이 머릿속에서 정리가 안 되기 때문입니다. 아래 4개만 잡으면 됩니다.

3-1. 방향(Direction)

Vertical(세로): 리스트, 폼, 카드 목록
Horizontal(가로): 버튼 내부(아이콘+텍스트), 탭 메뉴, 뱃지 나열

3-2. 간격(Spacing)

요소 사이 간격입니다. “항목 추가/삭제”가 생겨도 간격 규칙이 유지됩니다.

3-3. 패딩(Padding)

컨테이너(부모) 안쪽 여백입니다. 버튼/카드가 ‘예쁘게’ 보이는 핵심이 패딩입니다.

3-4. 정렬(Alignment)

가로/세로 축에서 어디에 붙을지 결정합니다. 텍스트 기준선이 흔들리지 않게 잡는 역할입니다.

4) Hug / Fill / Fixed 이해하기

Auto Layout에서 가장 자주 나오는 개념이 Hug / Fill / Fixed입니다. 이 세 가지를 “크기 결정 방식”으로 이해하면 간단합니다.

Hug contents: 내용물 크기에 맞춰 감싼다 (예: 버튼이 텍스트 길이에 맞춰 늘어남)
Fill container: 부모 컨테이너가 허용하는 만큼 채운다 (예: 카드가 화면 폭을 꽉 채움)
Fixed: 고정 크기 (예: 아이콘 24px, 썸네일 80x80 등)

암기 한 줄: Hug = 내용 따라감 / Fill = 부모 따라감 / Fixed = 내 길 간다 🧱

Hug / Fill / Fixed 3칸 비교표(한눈에 정리)

Hug contents	Fill container	Fixed
의미 내용물 크기에 맞춰 감싸서 커지거나 줄어듭니다.	의미 부모 컨테이너가 허용하는 공간을 채우며 늘어납니다.	의미 크기가 고정됩니다. 부모/내용 변화에 영향이 적습니다.
언제 쓰나 버튼 라벨, 뱃지, 태그처럼 텍스트 길이가 변하는 UI	언제 쓰나 카드/컨테이너, 입력 폼처럼 화면 폭을 따라가야 하는 UI	언제 쓰나 아이콘(24px), 썸네일(80x80) 등 규격이 정해진 UI
대표 예시 “로그인” → “로그인하고 계속하기” 텍스트가 길어져도 버튼이 자동 확장	대표 예시 카드가 화면 폭을 꽉 채우고 내부 요소만 규칙대로 배치	대표 예시 아이콘/이미지 크기는 그대로 유지하고 주변 레이아웃만 반응
초보가 자주 하는 실수 Hug로 두지 않고 Fixed로 고정해서 텍스트가 넘치거나 잘림	초보가 자주 하는 실수 Fill을 줬는데 부모가 Fixed라서 “채울 공간”이 없어 효과가 없음	초보가 자주 하는 실수 모든 걸 Fixed로 만들어서 수정할 때마다 레이아웃이 깨짐

5) 실전 예제 3개(버튼·리스트·카드)

예제 1) 버튼: 텍스트가 길어져도 버튼이 자동으로 늘어나게

사각형(R) + 텍스트(T)로 버튼을 만든다
두 요소를 선택하고 Shift + A로 Auto Layout 적용
패딩(Padding)을 상하/좌우 적당히 준다 (예: 상하 10, 좌우 16 같은 느낌)
버튼 프레임의 Width를 Hug contents로 설정

이제 텍스트를 바꿔도 버튼 폭이 자동으로 따라옵니다.

예제 2) 리스트: 항목을 추가해도 간격이 유지되게

리스트 항목 1개(텍스트+아이콘 등)를 만든다
항목을 Auto Layout으로 만들고(Shift+A), 항목 내부 정렬을 잡는다
항목들을 여러 개 쌓은 뒤, 상위 컨테이너도 Auto Layout(Vertical)로 만든다
Spacing을 설정한다 (예: 항목 간 12)

이제 항목을 복제(Ctrl/⌘+D)해 추가해도 간격이 자동 유지됩니다.

예제 3) 카드: 이미지/텍스트/버튼이 있는 카드가 수정에도 안 무너지게

카드 안에 이미지(고정), 제목(변동), 설명(변동), 버튼(변동)을 넣는다
카드 전체를 Auto Layout(Vertical)로 설정
이미지는 Fixed, 텍스트 영역은 상황에 따라 Hug 또는 Fill
카드 폭은 화면에 맞추려면 Fill container로 설정

결과적으로 카드 내용이 늘어나도 구조가 유지되고, 아래 요소들이 자연스럽게 밀립니다.

6) 초보가 자주 하는 실수 7가지(해결 포함)

그룹(Group)으로만 묶고 Auto Layout을 기대함
→ 그룹은 규칙을 못 잡습니다. Auto Layout은 “프레임 기반”으로 생각하세요.
부모는 Auto Layout인데 자식이 Fixed로 꽉 막힘
→ 텍스트/컨텐츠가 늘어야 한다면 Hug 또는 Fill로 바꿔주세요.
Horizontal/Vertical 방향을 반대로 설정
→ “줄 서는 방향”을 먼저 결정하고 시작하면 대부분 해결됩니다.
Padding과 Spacing을 섞어서 사용
→ Padding(바깥 컨테이너 안쪽 여백) / Spacing(요소 사이 간격)으로 역할 분리하세요.
중첩 Auto Layout에서 부모-자식 정렬 기준이 꼬임
→ “부모는 큰 흐름, 자식은 작은 흐름”으로 레벨을 나눠 설정하세요.
텍스트 리사이즈(자동 높이/자동 너비) 설정이 어긋남
→ 텍스트가 줄바꿈되어야 하는지, 한 줄로 흘러야 하는지 먼저 결정하세요.
처음부터 모든 걸 Auto Layout으로 만들다가 포기
→ 버튼/리스트/카드처럼 “반복·변경이 많은 UI”부터 적용하면 성공률이 높습니다.

현실 팁: Auto Layout은 한 방에 완벽해지기보다, “깨지는 부분을 규칙으로 봉합”하면서 느는 스킬입니다.

7) 기획자 실무 팁: 전달/검수 포인트

간격(Spacing)과 패딩(Padding)을 숫자로 맞춘다: 개발 전달 시 커뮤니케이션이 쉬워집니다.
반복 요소는 컴포넌트화: 리스트/카드는 다음 단계에서 컴포넌트로 이어지면 유지보수가 급격히 편해집니다.
변경 시나리오를 한 번만 시뮬레이션: 텍스트 길이/항목 추가/에러 문구 등장 같은 케이스를 미리 테스트하면 “깨짐”이 줄어듭니다.

결론

Auto Layout은 “디자인을 잘하는 기능”이 아니라, 수정에 강한 화면을 만드는 기능입니다.
기획자에게 중요한 건 한 번 예쁘게 만드는 것이 아니라, 요구사항이 바뀌어도 흔들리지 않는 구조를 만들어 업무 시간을 아끼는 것이니까요.

오늘은 핵심 4요소(방향/간격/패딩/정렬)와 Hug/Fill/Fixed만 잡아도 버튼/리스트/카드가 “자동으로” 정돈되는 경험을 할 수 있습니다.
다음 단계로는 Constraints(반응형 규칙)를 배우면, 화면 크기가 바뀌어도 안정적으로 유지되는 구조까지 완성할 수 있습니다.

FAQ

QAuto Layout은 모든 요소에 적용해야 하나요?

A 아닙니다. 변경이 잦거나 반복되는 UI(버튼, 리스트, 카드, 폼)부터 적용하는 게 효율적입니다. 배경 장식처럼 고정 요소까지 모두 Auto Layout으로 만들 필요는 없습니다.

Q Hug/Fill/Fixed 중 무엇을 먼저 익혀야 하나요?

A 우선순위는 Hug → Fill → Fixed를 추천합니다. 버튼/뱃지처럼 “내용에 따라 크기가 바뀌는 UI”가 가장 자주 등장하기 때문입니다.

Q Auto Layout을 했는데도 텍스트가 밀리거나 깨져요.

A 대부분은 부모는 Auto Layout인데 자식이 Fixed로 고정되어 있거나, 방향(가로/세로) 설정이 반대로 되어 발생합니다. 이 글의 “실수 7가지” 항목을 체크리스트처럼 확인해 보세요.

Q Auto Layout 다음에 배우면 좋은 주제는 뭔가요?

A 다음은 Constraints를 추천합니다. Auto Layout이 내부 정렬 규칙이라면, Constraints는 “프레임 크기 변화에 대한 고정 규칙”이라 반응형까지 자연스럽게 이어집니다.

이 블로그 검색

AI야, 기획 아이디어 줄래?