Auto Layout 이해하기

피그마에서 UI 디자인을 하다 보면
버튼, 카드 UI, 리스트 등 반복되는 레이아웃 구조가 많이 등장합니다.

이때 사용하는 기능이 Auto Layout입니다.

Auto Layout은 요소들을 자동으로 정렬하고
간격을 유지하도록 만들어주는 기능입니다.

이 기능을 활용하면
UI를 훨씬 빠르고 체계적으로 제작할 수 있습니다.

주요 포인트 Top3

01. Auto Layout이란? (쉬프트 + a)

Auto Layout은 요소들을 자동으로 정렬해주는 기능입니다.

예를 들어

• 버튼 안의 텍스트
• 카드 UI
• 리스트 UI

같은 구조를 만들 때
요소 간 간격을 자동으로 유지할 수 있습니다.

그래서 디자인을 수정하거나 요소가 추가되더라도
레이아웃이 자연스럽게 정렬됩니다.

02. Padding Gap

Auto Layout에서 가장 중요한 개념은 다음 두 가지입니다.

Padding - 컨테이너 안쪽 여백

Gap - 요소 사이 간격

이 설정을 통해 UI 구조를 깔끔하게 유지할 수 있습니다.

03. Auto Layout 방향

Auto Layout에서는 Flow 옵션을 통해 요소 정렬 방식을 설정할 수 있습니다.
Flow는 요소들이 어떤 방향으로 배치되는지를 결정하는 기능입니다.

Freedom

정렬 방식 - 자유 배치
설명 - Auto Layout 규칙 없이 요소를 자유롭게 배치할 수 있습니다.
활용 - 일반 Frame처럼 사용할 때

Vertical

정렬 방식 - 위 → 아래 정렬
설명 - 요소들이 위에서 아래 방향으로 순서대로 배치됩니다.
활용 - 카드 리스트, 게시글 목록, 메뉴 리스트 등

Horizontal

정렬 방식 - 좌 → 우 정렬
설명 - 요소들이 왼쪽에서 오른쪽 방향으로 배치됩니다.
활용 - 버튼 그룹, 메뉴 바, 아이콘 리스트 등

Grid (Beta)

정렬 방식 - 격자(Grid) 정렬
설명 - 요소들을 여러 열(Column)로 정렬할 수 있는 레이아웃입니다.
활용 - 카드 목록, 상품 리스트, 갤러리 UI 등

이처럼 다양한 UI 레이아웃을 만들 수 있습니다.

04. Auto Layout 활용 예시

Auto Layout은 다양한 UI 제작에 활용됩니다.

버튼 UI

구성 - Rectangle + Text
방향 - Horizontal
설정 - Padding을 사용해 버튼 내부 여백을 설정

카드 UI

구성 - Image + Title + Description
방향 - Vertical
설정 - 요소 간 Spacing을 통해 일정한 간격 유지

리스트 UI

구성 - Icon + Text
방향 - Horizontal
설정 - 아이콘과 텍스트 간 Spacing 설정

이처럼 Auto Layout을 사용하면
버튼, 카드, 리스트 등 다양한 UI를 일정한 규칙으로 정렬할 수 있습니다.

GOYO.’s Tip

Auto Layout은 피그마에서 가장 많이 사용하는 기능 중 하나입니다.
버튼, 카드, 리스트 UI 등 대부분의 인터페이스가 Auto Layout을 기반으로 제작됩니다.

마무리

이번 글에서는 피그마에서 UI 요소를 자동으로 정렬하는
Auto Layout의 기본 개념과 활용 방법을 정리했습니다.

Auto Layout을 활용하면 보다 체계적인 UI 디자인을 만들 수 있습니다.