디자인 요소를 일일이 수작업으로 정렬하는 것은 시간이 많이 걸리고 비효율적입니다. Figma의 Auto Layout 기능은 이러한 수고를 덜어주어, 빠르고 일관된 레이아웃 구성이 가능하도록 돕습니다. 이번 글에서는 Auto Layout의 기본 개념과 설정 방법을 자세히 다루겠습니다.
1. Auto Layout이란?
Auto Layout은 선택한 오브젝트에 패딩, 간격, 정렬 규칙을 설정하여, 오브젝트를 자동으로 배치하고 조정하는 기능입니다. 버튼, 카드, 리스트 등 다양한 UI 컴포넌트 제작 시 필수적으로 사용됩니다.
2. Auto Layout을 적용하는 방법
- 레이어 또는 프레임을 선택합니다.
- 오른쪽 패널에서 "Auto Layout" 버튼을 클릭하거나 단축키 Shift + A를 사용합니다.
- Auto Layout 속성이 추가된 것을 확인할 수 있습니다.
3. 주요 설정 항목
3.1 방향 설정
- Vertical (세로): 위에서 아래로 요소 배치
- Horizontal (가로): 왼쪽에서 오른쪽으로 요소 배치
3.2 간격(Spacing)
각 오브젝트 간의 간격을 숫자로 입력하거나 드래그하여 조절할 수 있습니다. 일관된 디자인을 위해 중요합니다.
3.3 패딩(Padding)
프레임 내부 경계와 콘텐츠 사이의 여백입니다. 상, 하, 좌, 우 각각 개별 설정이 가능합니다.
3.4 정렬(Alignment)
- Start: 왼쪽/상단 정렬
- Center: 중앙 정렬
- End: 오른쪽/하단 정렬
4. Auto Layout 적용 시 유의사항
- Auto Layout이 적용된 프레임은 직접 요소를 이동할 수 없습니다. 설정을 통해 위치를 조정해야 합니다.
- Auto Layout 안에 또 다른 Auto Layout을 중첩해 사용하면 복잡한 레이아웃도 깔끔하게 정리할 수 있습니다.
5. 실전 예시: 버튼 만들기
- 텍스트를 입력하고 선택합니다.
- Shift + A를 눌러 Auto Layout을 적용합니다.
- 패딩을 16px로 설정하고, 배경색을 지정합니다.
- 라운드 코너를 적용해 버튼을 완성합니다.
결론
Auto Layout은 UI 디자인의 효율성을 극대화하는 핵심 기능입니다. 작은 버튼부터 복잡한 대시보드까지 Auto Layout을 적극적으로 활용해보세요. 다음 글에서는 Auto Layout을 이용한 버튼과 카드 컴포넌트 실습을 진행합니다.