피그마 오토레이아웃 완전 정복 — 반응형 프레임의 기본

화면 크기가 바뀔 때마다 레이어를 하나하나 다시 배치해본 적이 있다면, 피그마 오토레이아웃을 아직 제대로 쓰고 있지 않다는 뜻이다. 텍스트 길이가 늘어나면 버튼이 깨지고, 리스트 아이템이 하나 늘어나면 간격을 손으로 맞춰야 하는 작업은 반응형을 흉내만 낸 정적 디자인일 뿐이다. 코드에서 flexbox가 하는 일을 디자인 툴 안으로 가져온 기능이라고 생각하면 이해가 훨씬 빠르다.

1. 오토레이아웃이 해결하는 문제부터 이해하자

오토레이아웃은 프레임 안의 요소를 방향, 간격, 정렬 규칙에 따라 자동으로 배치해, 콘텐츠가 바뀌어도 디자인이 스스로 반응하게 만드는 기능이다. 버튼의 텍스트 라벨이 짧을 때와 길 때 너비가 달라져야 하고, 카드 리스트에 항목이 추가되거나 삭제될 때 전체 높이가 자동으로 조정되어야 한다.

이런 상황에서 오토레이아웃이 없다면 디자이너는 매번 좌표를 손으로 계산해야 한다. 오토레이아웃 프레임을 만들면 패딩, 요소 사이 간격, 정렬 방식을 설정값으로 관리할 수 있어 콘텐츠 변화에 디자인이 자동으로 따라간다.

2. 방향, 정렬, 리사이징 속성

오토레이아웃 프레임은 수직, 수평, 그리드 세 가지 흐름 중 하나를 선택해 사용한다. 리스트나 피드처럼 위아래로 쌓이는 콘텐츠는 수직 흐름이 맞고, 버튼 그룹이나 내비게이션 아이콘처럼 옆으로 나열되는 콘텐츠는 수평 흐름이 맞다. 갤러리나 대시보드처럼 행과 열이 함께 필요한 레이아웃은 그리드 흐름을 쓰는 게 낫다. 수평 흐름에서는 줄바꿈 옵션을 켜서 넘치는 요소를 다음 줄로 넘길 수 있다는 점도 기억해두면 태그 목록 같은 컴포넌트를 만들 때 유용하다.

오토레이아웃의 진짜 힘은 리사이징 속성에서 나온다. 이 세 가지를 상황에 맞게 조합하지 못하면 오토레이아웃을 켜놓고도 여전히 수동으로 크기를 조정하게 된다.

3. 중첩 오토레이아웃으로 복잡한 화면 구성하기

오토레이아웃 프레임은 다른 오토레이아웃 프레임 안에 중첩할 수 있다. 카드 하나는 수직 오토레이아웃이고, 그 안의 버튼 그룹은 수평 오토레이아웃인 식으로 방향이 다른 흐름을 겹겹이 쌓으면 복잡한 화면도 유연하게 구성할 수 있다. 다만 중첩이 깊어질수록 각 프레임의 패딩과 간격 값을 어디서 관리하는지 헷갈리기 쉬우므로, 레이어 이름에 오토레이아웃 방향이나 역할을 표시해두면 나중에 구조를 다시 파악하기가 훨씬 수월하다.

4. 오토레이아웃 vs 고정 레이아웃, 언제 무엇을

모든 프레임을 오토레이아웃으로 만들 필요는 없다. 구조가 절대 바뀌지 않는 요소까지 오토레이아웃으로 묶으면 오히려 설정값을 관리하는 부담만 늘어난다.

5. 실무 체크리스트

오토레이아웃 프레임에 처음부터 컴포넌트를 얹는다면 피그마 컴포넌트 제대로 만들기 글에서 다룬 변형과 프로퍼티 설계를 함께 참고하면 좋다. 패딩이나 간격 값을 팀 전체가 공유하는 기준으로 관리하고 싶다면 디자인 토큰이란 무엇인가도 읽어보길 권한다. 오토레이아웃의 세부 옵션은 피그마 공식 가이드에서 최신 정보를 확인할 수 있다.

6. 마치며

오토레이아웃은 한 번 익히면 손이 편해지는 정도가 아니라, 디자인이 콘텐츠 변화에 스스로 반응하게 만드는 사고방식의 전환이다. 오늘 작업하던 화면 하나를 오토레이아웃 프레임으로 다시 짜보면서 hug와 fill의 차이를 직접 체감해보자.