Auto Layout 이란?
- Sketch - 2010 release
- Figma - 2016 release
- Adobe XD - 2016 release
과거에는 포토샵으로 디자인하고 어도비 플래시로 웹사이트를 제작하던 시절이 있었다. 그러나 오늘날에는 Figma, Adobe XD, Sketch 등 최신 UI/UX 도구들이 그 자리를 대체하고 있다. 이는 디자이너들의 전문적인 니즈를 충족할 수 있는 도구에 대한 갈망을, 이러한 툴들이 효과적으로 해소했음을 보여주는 사례라 할 수 있다.
특히 디자이너의 인터페이스 작업에서 작업 효율성과 일관성을 획기적으로 향상시킨 기능으로 AutoLayout과 Component 기능이 큰 역할을 했다. 이 기능은 디자이너의 작업방식에 개발자의 효율성 개념을 접목한 기능이다.
개발에서는 동일한 코드를 반복해서 작성하지 않는 DRY(Don’t Repeat Yourself) 원칙이 있다. 이 원칙은 전체 시스템의 일관성을 유지하고, 가독성을 높이며, 유지보수를 용이하게 하기위한 것이다. 동일한 코드를 여러 곳에서 관리해야 할 경우, 수정 범위가 넓어지고 오류 가능성도 증가하기 때문이다. 이 개념을 모든 UI/UX툴이 탑재하고 있다.
이러한 개념이 탑재되기 이전에는 Photoshop의 라이브러리 기능을 통해 일부 요소의 재사용이 가능했지만, 버튼 크기 변화와 같은 일부 속성만 반영될 뿐, 레이아웃 전체의 구조적인 변경까지는 적용되지 않았다. 예를 들어 버튼의 크기가 변한 경우, 주변 요소들의 위치를 수동으로 조정하고 마진과 패딩을 다시 설정해야 했다. 이러한 반복 작업은 디자이너의 부담을 가중시켰다.
그러나 AutoLayout과 Component 시스템은 이러한 한계를 극복했다. 버튼의 패딩이나 마진이 변경되어 크기가 달라지면, 설정된 AutoLayout 규칙에 따라 주변 요소들의 위치와 비율이 자동으로 조정된다. 이를 통해 수십, 수백 장의 인터페이스 화면을 일괄적으로 관리하고 수정하는 것이 가능해졌다. 결과적으로 디자이너의 작업 속도는 비약적으로 향상되었으며, 오류 가능성도 크게 줄어들었다.
이러한 변화는 UI/UX 디자이너의 역할이 단순히 ‘아름다운 화면을 설계하는 사람’이 아닌, 전체 시스템의 사용성과 브랜드 경험을 종합적으로 설계하는 전문가임을 더욱 부각시킨다. 툴의 변화는 곧 UI/UX 디자인의 본질적인 가치를 다시 한 번 강조하는 계기가 되었다.
Auto Layout 사용의 걸림돌
다만 AutoLayout은 개발 시스템의 개념을 그대로 디자인 툴에 적용한 기능이기 때문에, 디자이너가 처음 접했을 때 다소 낯설고 어색하게 느껴지는 것은 자연스러운 일이다. 실제로 Auto Layout의 기반은 CSS Flexbox개념에 뿌리를 두고 있다. Flex Box는 W3C CSS Working group 에서 2008년 처음 제안하였으며 2013년 W3C 후보권고안에 채택되었다. 단순히 웹 기술에만 머무르지 않고, Android(flexbox-layout), iOS의 SwiftUI 등 다양한 플랫폼에서 FlexBox와 유사하거나 비슷한 개념들이 자리잡혔다.
즉 AutoLayout을 학습한다는 것은 단순히 디자인 기능을 익히는 것을 넘어 개발적 사고방식에 입문하는 과정이라고 볼 수 있다. 자유롭게 요소를 배치하던 기존 방식과 달리, Auto Layout은 명확한 규칙과 구조를 기반으로 레이아웃을 설계한다 이러한 제약은 처음에는 불편하게 느껴질 수 있지만, 일정 수준 이상으로 익숙해지면 작업의 일관성, 생산성, 유지보수성 측면에서 압도적인 결과를 제공하는 도구가 된다.
복잡하게 느껴질 수 있는 진입 장병을 넘어서는 순간 Auto Layout 은 디자인 시스템 전체를 체계적으로 관리하고 확장할 수 있는 강력한 무기로 작용한다. 그렇기에 이 과정을 피하기보다는 하나의 전문 도구를 다루는 성장의 계리로 받아들이길 추천한다.
Auto Layout 사용방법
그렇다면 이러한 Auto layout은 어떻게 사용할까?
Sketch, Adobe XD, Figma 등 대부분의 UI/UX 디자인 툴에 유사한 방식으로 적용되며, 본 글에서는 Figma 인터페이스를 기준으로 Auto Layout의 기본 사용법을 소개한다.
- Width, Height 설정
- Fixed: 고정된 크기를 유지한다. 반응형이나 동적 변화에는 대응하지 않는다.
- Hug: 자식 요소의 콘텐츠 크기 및 마진에 맞춰 자동으로 크기를 조정한다.
- Fill: 부모 요소의 전체 너비 또는 높이를 채우도록 확장한다.
Auto Layout에서는 각 요소의 너비(Width)와 높이(Height)를 세 가지 방식으로 설정할 수 있다.
- flex 방향 설정
AutoLayout의 핵심은 자식 요소를 수평 또는 수직 방향으로 자동 정렬하는 데 있다. 이는 개발의 Flexbox개념과 유사하게 작동하며, 요소가 Auto Layout의 너비를 초과할 경우에는 줄바꿈되는 flex-wrap과 유사한 동작도 가능하다.
- 기타 기능
- 패딩: 부모와 자식 간 여백 설정
- 간격: 자식 요소 간 간격 조절
- 레이어 순서: 정렬 우선순위 지정
- 상대적 위치: 부모 기준으로의 위치 지정 등
글 만으로 접하는 경우 직관적으로 이해하기 어려울 수 있다. Figma 공식 Youtube 채널에서 Auto Layout 관련 영상을 참고하면 시각적으로 원리를 이해하고 빠르게 익히는데 큰 도움이 된다.
모두가 Auto Layout을 사용하는 그 날까지.
UI/UX 디자인의 핵심은 단순히 ‘예쁜 화면’을 만드는 것이 아니다. 비율과 구조, 일관성 있는 시스템 설계가 핵심이다. 하나의 컴포넌트만 변해도 전체 레이아웃에 이질감이 생길 수 있으며, Auto Layout은 이러한 변화에 유연하게 대응할 수 있는 기반을 마련해준다.
나아가 Auto Layout은 디자인 시스템 구축의 출발점이다. AutoLayout → Component → Design Token으로 이어지는 일관된 시스템을 만들기 위해서는, Auto Layout을 이해하는 것이 전제되어야 한다. 단지 편리함을 위한 기능이 아닌, 디자인의 논리와 규칙을 시각화하는 구조적 사고 도구인 셈이다.
Auto Layout을 이해하기 전과 후의 디자인 품질과 사고방식은 분명한 차이를 만든다. 따라서 가능한 Auto Layout을 활용하기를 권한다.
작성자
안녕하세요, 긴 글 읽어주셔서 감사합니다. 디자이너 정수영입니다. 디자인과 디자인 경영, 인터넷 IT기술에 대한 통찰과 학습을 위해 글을 쓰기 시작했습니다. 앞으로 디자인과 경영, UI/UX, Figma, Framer, No Code Web Builder 등 다양한 주제로 글을 쓸 예정입니다. 글에 대한 피드백이 있으시면 언제든 댓글이나 아래 이메일로 연락 주시면 감사하겠습니다. 더 좋은 글로 찾아올 수 있도록 노력하겠습니다. 감사합니다.
홈페이지: www.atomground.com
이메일: atom@atomground.com