피그마 Auto Layout 기능 완전 정복 – 정렬, 간격, 반응형 디자인까지

피그마(Figma)의 Auto Layout은 UI 디자인을 체계적으로 정렬하고, 반응형 구조를 구성하는 데 필수적인 기능입니다. 복잡한 정렬 문제도 클릭 몇 번으로 해결할 수 있고, 개발자와 협업할 때 CSS 구조 이해도에도 큰 도움이 됩니다. 이 글에서는 Auto Layout의 기초부터 고급 기능까지 단계별로 소개합니다.

1. Auto Layout이란?

Auto Layout은 요소 간 간격과 정렬을 자동으로 관리하는 기능으로, 다음과 같은 작업을 간단하게 만들어 줍니다:

버튼 안의 텍스트가 길어져도 자동 정렬
카드 레이아웃이 늘어나도 균형 유지
모바일/데스크탑 뷰 전환에 유연하게 대응

2. Auto Layout 적용 방법

Step 1: 요소 또는 프레임 선택
Step 2: 오른쪽 패널에서 ‘+ Auto Layout’ 클릭
Step 3: 방향 설정 (가로 또는 세로), 정렬, 간격 지정

예: 버튼 텍스트와 아이콘을 함께 선택한 후 Auto Layout을 적용하면, 텍스트가 길어져도 자동으로 버튼 크기가 조정됩니다.

3. 기본 설정 이해하기

Auto Layout의 주요 속성은 다음과 같습니다:

Direction: 가로(Horizontal), 세로(Vertical)
Spacing Between Items: 요소 사이 간격 (px)
Padding: 프레임 내부 여백
Alignment: 왼쪽/중앙/오른쪽 정렬
Resizing: Hug Contents, Fixed, Fill Container

4. 실전 예시 – 반응형 버튼 만들기

텍스트 요소를 입력 후 아이콘 추가
두 개를 그룹으로 묶고 Auto Layout 적용
Padding을 16px, Spacing을 8px로 설정
Resizing을 ‘Hug contents’로 지정

이렇게 구성하면 텍스트가 길어져도 버튼이 자동 확장되고, 좌우 여백이 유지된 상태로 디자인이 정렬됩니다.

5. 중첩된 Auto Layout 구조

Auto Layout은 다층 구조로도 구성할 수 있습니다:

예: 카드 하나(세로 Auto Layout) × 3개를 가로 Auto Layout에 넣기
이렇게 하면 반복되는 UI 패턴도 빠르게 적용 가능
반응형 구조에서도 각 요소가 유연하게 재배치

6. Auto Layout의 고급 활용법

Wrap 옵션: 요소가 많을 경우 자동 줄바꿈
Fixed vs. Hug vs. Fill 차이 이해: 크기 자동 조절 방식
Instance 재사용: 컴포넌트를 Auto Layout 상태로 활용 가능

7. 마무리 – UI 디자인의 핵심 도구

Auto Layout 기능은 단순한 정렬 도구를 넘어, 유연한 반응형 UI 설계의 필수 요소입니다. 피그마를 활용하는 디자이너라면 반드시 숙지해야 할 핵심 기능이며, 특히 스타일 유지와 협업 효율 면에서 탁월한 효과를 발휘합니다. 다음 디자인부터는 Auto Layout으로 시간을 절약해보세요!

홍댕이 일상

[6편] 피그마 Auto Layout 기능 완전 정복 – 정렬, 간격, 반응형 디자인까지