오토 레이아웃

Figma의 Auto Layout은 자유로운 디자인 탐색과 HTML/CSS·SwiftUI 같은 개발 환경의 구조적 레이아웃 장점을 결합한 기능이다. 텍스트나 콘텐츠가 바뀌면 버튼과 주변 요소의 크기·위치가 자동으로 조정되어 반복적인 수작업을 줄인다. 또한 프레임 중첩을 통해 콘텐츠에 반응하는 복잡한 인터페이스와 재사용 가능한 컴포넌트를 만들 수 있다.

디자인과 개발 환경의 간극

• Figma의 기존 자유 배치 방식은 창의적인 탐색에는 유리하지만 반복 작업이 많았다.
• 버튼 문구를 수정하려면 텍스트 편집, 버튼 크기 조정, 인접 버튼 이동을 각각 수행해야 했다.
• HTML/CSS나 SwiftUI는 객체 간 구조와 관계를 표현하므로 콘텐츠 변경에 강하지만, 자유로운 시각적 실험에는 불편하다.
• Auto Layout은 CSS 박스 모델, 특히 flexbox의 핵심 개념을 Figma에 도입해 두 환경의 장점을 결합했다.
• 프레임의 속성으로 제공되므로 컴포넌트뿐 아니라 일반 프레임에도 적용할 수 있다.

콘텐츠에 따라 자동으로 변하는 레이아웃

• Auto Layout을 적용하면 내부 요소가 가로 또는 세로 방향으로 순서대로 배치된다.
• 컨테이너의 크기는 내부 요소들의 전체 크기에 맞춰 자동으로 결정된다.
• 프레임 자체에 패딩, 채우기, 선, 모서리 반경을 설정할 수 있어 버튼 제작에 별도 레이어가 필요하지 않다.
• “Buy”를 “Add to basket”으로 변경하면 버튼이 텍스트 길이에 맞춰 자동으로 늘어난다.
• 인접한 버튼이나 요소도 레이아웃 흐름에 맞춰 함께 이동한다.
• 요소 간 간격은 개별 요소가 아니라 컨테이너 수준에서 설정된다. 특정 요소 사이만 다르게 조정하려면 추가 작업이 필요하다.

리스트와 메뉴의 자동 재정렬

• 반복되는 UI 요소를 배치하는 리스트와 메뉴 제작에 특히 유용하다.
• 요소를 드래그해 순서를 바꾸면 나머지 요소가 자동으로 재배치된다.
• 항목을 하나씩 올바른 위치로 옮기던 반복적인 클릭 작업을 줄일 수 있다.
• 기존 컴포넌트 라이브러리와 디자인 시스템에도 적용할 수 있으며, Shift + A 또는 옵션 메뉴에서 활성화할 수 있다.

중첩 프레임으로 복잡한 인터페이스 구성

• 여러 Auto Layout 프레임을 HTML의 중첩된 div처럼 조합할 수 있다.
• 버튼, 카드, 리스트, 화면 전체를 계층적으로 구성하면서 각 영역이 콘텐츠 변화에 반응하도록 만들 수 있다.
• 콘텐츠를 수정하거나 요소를 다른 Auto Layout 프레임 안팎으로 이동하기 쉽다.
• 의도하지 않은 배치를 막기 위해 큰 이미지를 버튼 안에 넣는 등의 작업에는 안전장치가 작동한다.
• 실제로 원하는 작업이라면 macOS에서는 Command, Windows에서는 Ctrl 키를 눌러 안전장치를 무시할 수 있다.
• 콘텐츠 변형마다 별도 컴포넌트를 만들기보다, 다양한 콘텐츠를 수용하는 범용 컴포넌트를 제작할 수 있다.

향후 발전 방향

• Figma는 Auto Layout을 첫 출시로 보고, 향후 더 많은 기능을 추가할 계획이라고 밝혔다.
• 사용자는 플레이그라운드 파일, 동영상, 공식 문서를 통해 기능을 학습할 수 있다.
• 기능 사용 후 피드백과 개선 요청을 공유하도록 독려했다.

실무에서는 텍스트 길이가 달라지는 버튼, 반복 목록, 카드와 메뉴처럼 콘텐츠 변화가 잦은 UI부터 Auto Layout을 적용하는 것이 효과적이다. 이후 프레임을 중첩해 디자인 시스템 전반을 반응형이고 재사용 가능한 구조로 확장할 수 있다.