텍스트 하나 바꿨을 뿐인데, 버튼 크기가 틀어지고 카드 레이아웃이 무너진 경험이 있으신가요? 저는 그 상황을 수십 번 반복하다가 오토 레이아웃을 제대로 배웠습니다. 배우고 나서 든 첫 번째 생각은 "왜 이걸 이제야 알았지"였습니다. 피그마 오토 레이아웃이 실무에서 어떻게 작동하는지, 직접 겪어보니 무엇이 달라지는지 솔직하게 풀어보겠습니다.
패딩과 갭, 이 두 가지가 레이아웃의 전부다
오토 레이아웃(Auto Layout)을 처음 켰을 때 패널에 낯선 숫자들이 쭉 나열돼 있어서 당황했던 기억이 납니다. 그런데 막상 뜯어보면 개념은 단순합니다. 오토 레이아웃의 핵심을 구성하는 요소는 딱 두 가지입니다.
첫 번째는 패딩(Padding)입니다. 패딩이란 프레임의 테두리와 내부 콘텐츠 사이의 여백을 말합니다. 상하좌우 각각 설정할 수도 있고, 가로·세로를 묶어서 한 번에 설정할 수도 있습니다. 버튼 컴포넌트를 만들 때 텍스트 양쪽에 일정한 여백이 유지되게 하고 싶다면 바로 이 패딩 값을 고정해두면 됩니다. 텍스트가 아무리 길어져도 패딩은 흔들리지 않습니다.
두 번째는 갭(Gap)입니다. 갭이란 오토 레이아웃 프레임 안에 들어 있는 자식 요소들 사이사이의 간격을 의미합니다. 아이콘과 텍스트를 나란히 배치한 버튼을 생각해보면, 이 둘 사이의 거리가 바로 갭입니다. 예전에는 아이콘 위치를 픽셀 단위로 수동 조정했는데, 갭 하나로 그 작업이 사라졌습니다. 제가 직접 써봤는데, 이 두 개념만 제대로 이해해도 오토 레이아웃 기본기는 갖춰졌다고 봐도 무방합니다.
방향(Direction) 설정도 빠질 수 없습니다. 자식 요소들을 가로로 나열할지, 세로로 쌓을지를 결정하는 값인데, 이것이 CSS의 플렉스박스(Flexbox)에서 flex-direction 속성과 정확히 1:1로 대응됩니다. 플렉스박스란 웹 개발에서 요소들을 유연하게 정렬하고 배치하는 CSS 레이아웃 모델을 가리킵니다. 이 연결고리 덕분에 개발자가 피그마 파일을 열었을 때 레이아웃 구조를 별도 설명 없이도 바로 읽어낼 수 있습니다.
Fill Container와 Hug Contents, 조합이 반응형을 만든다
오토 레이아웃을 처음 배울 때 가장 헷갈렸던 부분이 크기 조절 방식이었습니다. 세 가지가 있는데 각자 역할이 다릅니다.
- Fixed: 크기를 고정값으로 지정합니다. 콘텐츠가 늘어나도 프레임 크기는 변하지 않습니다.
- Fill Container: 부모 프레임의 너비나 높이에 맞춰 자동으로 늘어납니다. CSS의
flex: 1과 동일한 개념입니다. - Hug Contents: 내부 콘텐츠 크기에 딱 맞게 프레임이 줄어들거나 늘어납니다. 텍스트 길이에 따라 버튼 폭이 자동 조정되는 원리가 바로 이겁니다.
저는 반응형 카드 레이아웃을 구현하면서 이 세 가지를 조합해 썼습니다. 카드 자체는 Fill Container로 부모 컬럼에 꽉 차게 설정하고, 카드 안의 제목 텍스트는 Hug Contents로 내용에 맞게 처리했습니다. 그리고 이미지 영역처럼 고정 비율이 필요한 부분만 Fixed로 잡았습니다. 그때 느낀 건, 이 세 가지가 서로 맞물려 돌아가는 구조를 한 번 손에 익히면 그 다음부터는 반응형 설계가 생각보다 훨씬 직관적이라는 점이었습니다.
UX 디자인 업계 전반에서 컴포넌트 기반 설계가 표준으로 자리 잡고 있는 만큼(출처: Nielsen Norman Group), 이 크기 조절 방식을 제대로 쓰는 것은 선택이 아니라 필수에 가깝습니다. 디자인 시스템(Design System)이란 버튼, 카드, 입력 폼 등 반복 사용되는 UI 요소들을 일관된 규칙으로 정리해둔 체계를 말합니다. 이 디자인 시스템을 오토 레이아웃 없이 유지보수하는 건, 솔직히 이건 예상 밖이었습니다만, 생각보다 훨씬 고통스러운 일입니다.
버튼 컴포넌트에서 팀 규칙이 된 이유
제가 오토 레이아웃을 팀 표준으로 밀어붙이게 된 결정적인 계기는 버튼 컴포넌트 작업이었습니다. 디자인 시스템에서 버튼 하나를 만들면 그 변형이 기본만 해도 수십 가지가 됩니다. 크기별로 Small·Medium·Large, 상태별로 Default·Hover·Disabled, 아이콘 유무까지 조합하면 금방 50개가 넘습니다.
오토 레이아웃 없이 이걸 관리하면 어떻게 될까요. 텍스트 하나를 "확인"에서 "확인하기"로 바꾸는 순간, 버튼 프레임 크기를 손으로 늘리고, 주변 여백을 다시 확인하고, 같은 변형의 나머지 버튼들도 일일이 점검해야 합니다. 저는 그 시절에 실제로 그렇게 했습니다. 돌이켜보면 시간 낭비도 낭비였지만, 실수가 생각보다 자주 났습니다. 어떤 변형은 패딩이 달라져 있고, 어떤 건 정렬이 틀어져 있는 식으로요.
컨스트레인츠(Constraints)와 오토 레이아웃을 함께 쓰면 더 정교한 설계가 가능합니다. 컨스트레인츠란 부모 프레임의 크기가 바뀔 때 자식 요소가 어느 방향을 기준으로 위치를 유지할지 지정하는 기능입니다. 오토 레이아웃이 내부 정렬과 간격을 담당한다면, 컨스트레인츠는 외부 위치 고정을 담당합니다. 이 둘을 병행해서 쓰면 반응형 시나리오에서 발생하는 예외 케이스를 상당수 사전에 차단할 수 있습니다.
결국 저희 팀은 모든 신규 컴포넌트에 오토 레이아웃을 기본 적용하는 것을 규칙으로 정했고, 디자인 수정 속도가 체감상 두 배 이상 빨라졌습니다. Figma 공식 문서에서도 컴포넌트 설계 시 오토 레이아웃 우선 적용을 권장하고 있습니다(출처: Figma Help Center).
Wrap 기능과 개발자 협업, 여기서 진짜 차이가 난다
오토 레이아웃에서 Wrap 기능은 한 줄에 다 들어가지 않는 자식 요소들을 다음 줄로 자동으로 내려보내는 기능입니다. 이것이 CSS에서 flex-wrap: wrap 속성과 정확히 같은 개념입니다. flex-wrap이란 플렉스 컨테이너 안의 아이템이 한 줄을 넘칠 경우 줄바꿈을 허용하는 설정으로, 태그 목록이나 칩(Chip) UI처럼 개수가 유동적인 요소에 필수적으로 쓰입니다.
제 경험상 이 Wrap 기능이 개발자와의 커뮤니케이션을 크게 바꿔놓았습니다. 이전에는 "이 부분은 태그가 많아지면 두 줄로 내려가야 해요"라고 말로 설명해야 했습니다. 그런데 Wrap이 적용된 피그마 파일을 건네면 개발자가 보는 순간 "아, flex-wrap이네요"라고 바로 읽어냅니다. 언어가 같아지는 순간입니다. 피그마의 오토 레이아웃 체계가 CSS 플렉스박스와 1:1 대응되도록 설계된 덕분에 가능한 일입니다.
다만 한 가지 아쉬운 점은, 중첩 오토 레이아웃(Nested Auto Layout)이 깊어질수록 디버깅이 까다로워진다는 것입니다. 중첩 오토 레이아웃이란 오토 레이아웃 프레임 안에 또 다른 오토 레이아웃 프레임이 들어 있는 구조를 말합니다. 카드 안에 헤더 영역이 있고, 헤더 안에 또 아이콘과 텍스트가 나란히 배치된 구조라면 이미 3단 중첩입니다. 이 상태에서 어떤 요소의 크기가 예상과 다르게 나오면 어느 레이어에서 문제가 생겼는지 찾는 데 시간이 꽤 걸립니다. 저는 이럴 때 가장 바깥 프레임부터 Fill/Hug/Fixed 설정을 하나씩 확인해 들어가는 방식으로 디버깅하는데, 이 습관을 들이고 나서부터는 훨씬 빨리 원인을 찾게 됐습니다.
오토 레이아웃은 배우는 데 하루면 충분하지만, 실무에서 능숙하게 쓰려면 실제 컴포넌트를 여러 개 만들어보는 시간이 필요합니다. Shift+A 단축키 하나로 적용할 수 있으니, 다음 작업부터는 프레임을 만들고 나서 바로 이 단축키를 눌러보시길 권합니다. 작업 방식이 달라지는 경험을 직접 해보시면 그 차이가 훨씬 선명하게 느껴질 것입니다.