오토 레이아웃 — 반응형 UI를 만드는 핵심 기능

오토 레이아웃이란?

오토 레이아웃은 내부 요소가 추가되거나 콘텐츠가 변경될 때 프레임이 자동으로 크기를 조절하는 기능입니다. CSS의 Flexbox와 동일한 개념입니다. 버튼의 텍스트가 길어져도 버튼이 자동으로 늘어나고, 카드에 항목이 추가되어도 간격이 자동으로 유지됩니다.

오토 레이아웃 없이 디자인하면 요소를 하나씩 손으로 옮겨야 합니다. 실무에서 오토 레이아웃 없는 Figma 작업은 생각하기 어렵습니다.

오토 레이아웃 적용 방법

적용:
프레임 또는 요소 선택 → Shift+A
또는: 오른쪽 패널 상단 "+" 아이콘 옆 Auto Layout 클릭

기존 요소에 적용:
여러 요소 선택 → Shift+A → 선택한 요소들이 오토 레이아웃 프레임으로 자동 감싸짐

해제:
오른쪽 패널 Auto Layout 섹션 → 우측 점 3개 → Remove Auto Layout

핵심 설정 4가지

설정	역할	CSS 대응
Direction	요소 배치 방향: 가로(Horizontal) / 세로(Vertical) / 격자(Wrap)	flex-direction / flex-wrap
Gap	요소 간 간격	gap
Padding	내부 여백 (상하좌우 개별 설정)	padding
Alignment	자식 요소의 정렬 방향	align-items / justify-content

Alignment 9방향 완전 정복

오른쪽 패널 Auto Layout 섹션의 3x3 점 격자

가로(Horizontal) 방향 기준:
[왼위] [중위] [오위]   align-items: flex-start
[왼중] [중중] [오중]   align-items: center
[왼아] [중아] [오아]   align-items: flex-end

세로(Vertical) 방향은 위 개념이 90도 회전

Space Between:
Gap을 "Auto"로 설정하면 요소들이 균등 분산
(CSS: justify-content: space-between)

Resizing — 크기 결정 규칙

오토 레이아웃 프레임 자체:
Fixed: 고정 크기 (내용이 넘치면 클립)
Hug Contents: 내용에 맞게 자동 조절 (버튼에 사용)
Fill Container: 부모 프레임을 꽉 채움 (반응형 레이아웃에 사용)
Min / Max: 최소-최대 크기 설정 (반응형)

자식 요소:
Fixed: 지정 크기 고정
Hug: 내용에 맞게 조절
Fill: 부모 오토 레이아웃의 남은 공간 채움

실무 패턴:
버튼: Width Hug, Height Fixed(44px)
입력 필드: Width Fill, Height Fixed(52px)
카드: Width Fill, Height Hug
리스트 컨테이너: Width Fill, Height Hug

중첩 오토 레이아웃

복잡한 레이아웃은 오토 레이아웃을 여러 겹 중첩해서 만듭니다. CSS의 flex 컨테이너 안에 또 flex 컨테이너를 넣는 것과 같습니다.

예: 내비게이션 바 구조

[Nav Frame - Horizontal, Space Between, Padding 16]
  [Logo Group - Horizontal, Gap 8, Hug]
    Logo Icon (32x32)
    Logo Text
  [Menu Group - Horizontal, Gap 24, Hug]
    메뉴1
    메뉴2
    메뉴3
  [Action Group - Horizontal, Gap 8, Hug]
    로그인 버튼
    회원가입 버튼

결과: 창 너비가 변해도 Logo는 왼쪽, Menu는 가운데(상대적), Action은 오른쪽에 고정

실습 — 자동 늘어나는 버튼 + 카드 리스트

Step 1: 버튼 만들기
R → 임의 크기로 사각형 생성
T → 사각형 위에 텍스트 "시작하기" 입력
텍스트 선택 → Shift+A → 오토 레이아웃 적용
Width: Hug, Height: Hug
Padding: 상하 12, 좌우 24
Fill: #6366f1, Corner Radius: 12
검증: 텍스트를 "지금 바로 시작하기"로 변경 → 버튼 자동 확장 확인

Step 2: 카드 아이템 1개 만들기
F → 새 프레임 → Shift+A
Direction: Horizontal, Gap: 12, Padding: 16
아이콘 자리 (32x32 원), 제목 텍스트, 설명 텍스트
텍스트 그룹에 세로 오토 레이아웃 적용, Gap: 4

Step 3: 카드 리스트 만들기
Step 2 아이템 3개 복제 (Ctrl+D x2)
3개 선택 → Shift+A
Direction: Vertical, Gap: 1, Width Fill
배경: 흰색, Border: #e2e8f0 1px, Corner Radius: 16
검증: 아이템 하나 삭제 → 나머지 자동으로 올라오는지 확인

관련 검색어  ·  피그마 오토 레이아웃, Figma Auto Layout, 피그마 Flexbox, 피그마 Hug Fill, 피그마 반응형 UI, 피그마 Gap Padding, 오토 레이아웃 중첩