피그마를 처음 배울 때 자동 레이아웃을 건너뛰는 경우가 많다. 사각형 그리고, 텍스트 얹고, 색 칠하는 것부터 시작하다 보면 자동 레이아웃은 “나중에 배울 것”으로 밀리기 쉽다.
그런데 실무에 들어가면 이야기가 달라진다.
버튼 텍스트가 바뀌었는데 버튼 크기를 일일이 손으로 늘려야 한다. 리스트 아이템을 하나 추가했는데 아래 요소들을 전부 다시 정렬해야 한다. 이런 상황이 반복되면 자동 레이아웃 없이 작업한 대가를 치르는 것이다.
이 글은 자동 레이아웃을 처음 쓰는 사람부터, 쓰긴 쓰는데 제대로 쓰는지 모르겠는 사람까지 한 번에 정리한다.
자동 레이아웃이 뭔가
자동 레이아웃은 프레임 안의 요소들이 규칙에 따라 자동으로 정렬되고 크기가 조절되는 기능이다.
CSS의 Flexbox와 개념이 거의 같다. 개발자와 이야기할 때 “이거 flex로 구현하면 돼요”라고 말할 수 있는 구조가 자동 레이아웃이다.
자동 레이아웃이 적용된 프레임은 이렇게 동작한다.
- 안에 있는 요소가 늘어나면 프레임도 같이 늘어난다.
- 요소를 추가하면 자동으로 배치된다.
- 요소를 삭제하면 나머지가 알아서 채워진다.
- 패딩과 간격이 고정되어 있어서 수동으로 맞출 필요가 없다.
텍스트 내용이 바뀌어도, 언어가 바뀌어도, 요소가 늘어나도 레이아웃이 유지된다. 디자인 시스템을 만들거나 컴포넌트를 관리할 때 자동 레이아웃 없이는 제대로 된 구조를 만들기 어렵다.
자동 레이아웃 적용하는 방법
적용 방법은 간단하다.
방법 1 – 단축키 오브젝트를 선택하고 Shift + A를 누른다. 바로 자동 레이아웃이 적용된다.
방법 2 – 오른쪽 패널 오브젝트를 선택하면 오른쪽 디자인 패널에 Auto Layout 항목이 보인다. + 버튼을 클릭하면 적용된다.
자동 레이아웃이 적용되면 프레임 이름 옆에 작은 아이콘이 생긴다. 그리고 오른쪽 패널이 바뀐다.
자동 레이아웃 패널 구조 이해하기
적용하고 나면 오른쪽 패널에 여러 옵션이 생긴다. 하나씩 보자.
방향 (Direction)
수평(Horizontal) 또는 수직(Vertical) 중 하나를 선택한다.
- 수평: 요소들이 가로로 나열된다. 버튼 아이콘 + 텍스트 조합 등에 쓴다.
- 수직: 요소들이 세로로 쌓인다. 리스트, 카드 내부 구조 등에 쓴다.
Wrap 옵션도 있다. 요소가 넘치면 다음 줄로 자동으로 내려간다. 태그 목록, 뱃지 모음 같은 걸 만들 때 유용하다.
간격 (Gap)
요소 사이의 간격이다. 숫자를 입력하면 모든 요소 사이의 간격이 동일하게 유지된다.
Auto로 설정하면 요소들이 프레임 양쪽 끝으로 밀리면서 균등하게 배치된다. CSS의 justify-content: space-between과 같은 동작이다. 헤더에서 로고와 메뉴를 양쪽 끝에 배치할 때 이 방식을 쓴다.
패딩 (Padding)
프레임의 안쪽 여백이다. 상하좌우를 각각 설정할 수도 있고, 한꺼번에 설정할 수도 있다.
버튼을 만들 때 이게 핵심이다. 텍스트 길이가 달라져도 패딩이 고정되어 있으면 버튼 크기가 자동으로 따라온다. 텍스트를 수정할 때마다 버튼 크기를 손으로 조절할 필요가 없어진다.
크기 조절 방식 (Resizing)
자동 레이아웃 안의 각 요소, 그리고 프레임 자체의 크기를 어떻게 결정할지 설정한다.
세 가지 옵션이 있다.
Fixed – 크기를 고정한다. 내용이 바뀌어도 프레임 크기는 변하지 않는다.
Hug Contents – 안에 있는 내용에 맞게 크기가 결정된다. 텍스트가 늘어나면 프레임도 같이 늘어난다. 버튼, 배지, 태그처럼 내용이 크기를 결정하는 요소에 쓴다.
Fill Container – 부모 프레임의 나머지 공간을 채운다. CSS의 flex: 1과 같다. 좌우로 요소를 배치할 때 한쪽이 고정이고 다른 쪽이 남은 공간을 채워야 할 때 쓴다.
이 세 가지를 언제 쓰는지 모르면 자동 레이아웃이 왜 이상하게 동작하는지 이해하기 어렵다. Hug, Fill, Fixed – 이 세 개 개념을 먼저 잡는 게 자동 레이아웃의 핵심이다.
정렬 (Alignment)
자동 레이아웃 안의 요소들이 어디에 정렬될지 설정한다.
수직 방향 레이아웃이라면 좌/중앙/우 정렬을 선택한다. 수평 방향 레이아웃이라면 상/중앙/하 정렬을 선택한다.
아이콘과 텍스트를 가로로 나란히 둘 때 높이가 다르면 정렬이 어색해 보인다. 이럴 때 중앙 정렬로 맞추면 깔끔해진다.
실무에서 자주 만드는 것들 – 예시로 배우는 자동 레이아웃
예시 1 – 버튼
가장 기본이다.
- 텍스트를 먼저 만든다.
- 텍스트를 선택하고
Shift + A로 자동 레이아웃 적용. - 패딩 설정. (예: 상하 12, 좌우 20)
- 프레임 크기를 Hug Contents로 설정.
- 배경색, 모서리 둥글기 설정.
텍스트가 “확인”이든 “결제하기”든 “Submit”이든 버튼이 알아서 맞춰진다. 버튼 크기를 손으로 조절하는 건 이제 과거의 일이다.
아이콘 + 텍스트 버튼이라면? 아이콘과 텍스트를 둘 다 선택하고 Shift + A를 누른다. 방향은 수평, 정렬은 중앙, 간격은 8 정도. 여기에 패딩을 더하면 완성이다.
예시 2 – 리스트 아이템
SNS 피드, 알림 목록, 설정 메뉴 같은 반복되는 아이템 구조다.
- 아이템 하나를 먼저 만든다. (아이콘 + 텍스트 + 우측 화살표 등)
- 전체를 선택하고 자동 레이아웃 적용.
- 방향 수평, 정렬 중앙.
- 텍스트 영역은 Fill Container로 설정해서 남은 공간을 채우게 한다.
- 패딩 설정 후 완성.
이렇게 만든 아이템을 컴포넌트로 만들면, 텍스트 길이가 달라져도 레이아웃이 흐트러지지 않는다.
예시 3 – 카드 컴포넌트
이미지 + 텍스트 + 버튼이 세로로 쌓이는 구조다.
- 이미지 영역, 텍스트 영역, 버튼을 각각 만든다.
- 세 요소를 선택하고 자동 레이아웃 적용.
- 방향 수직, 간격 설정.
- 카드 전체 프레임에 패딩 추가.
- 카드 너비를 Fixed로 고정하고, 높이는 Hug로 설정.
이제 텍스트가 길어지면 카드 높이가 알아서 늘어난다. 같은 카드 여러 개를 만들어도 높이가 제각각이 되지 않는다.
예시 4 – 헤더 (로고 + 메뉴)
좌측에 로고, 우측에 메뉴 버튼이 있는 구조.
- 로고와 메뉴를 선택하고 자동 레이아웃 적용.
- 방향 수평.
- 간격을 Auto로 설정. (space-between 효과)
- 높이는 Fixed, 너비는 Fill Container 또는 Fixed로.
중간에 뭘 추가해도 양쪽이 자동으로 밀려서 자리를 잡는다.
자동 레이아웃 중첩 (Nested Auto Layout)
실무에서 레이아웃은 단순하지 않다. 자동 레이아웃 안에 자동 레이아웃이 들어가는 구조가 대부분이다.
예를 들어, 카드 그리드를 만든다고 하면.
- 카드 1개: 내부가 자동 레이아웃 (수직)
- 카드 가로 한 줄: 카드들이 자동 레이아웃 (수평)
- 전체 그리드: 줄들이 자동 레이아웃 (수직)
이런 식으로 레이어가 쌓인다. 중첩 구조를 이해하면 아무리 복잡한 레이아웃도 결국 자동 레이아웃의 조합으로 풀린다.
처음엔 복잡해 보이지만, 가장 작은 단위부터 자동 레이아웃을 적용하고 위로 쌓아 올라가는 방식이 맞다.
자동 레이아웃에서 특정 요소만 고정하기
자동 레이아웃 안에 있어도 특정 요소를 고정 위치에 두고 싶을 때가 있다. 예를 들어, 카드 위에 배지나 라벨을 겹쳐 올리는 경우.
해당 레이어를 선택하고 오른쪽 패널에서 Position → Absolute로 설정하면 된다. 자동 레이아웃의 흐름에서 벗어나서 부모 프레임 기준으로 자유롭게 위치를 잡을 수 있다.
이 기능을 모르면 “자동 레이아웃 쓰면 겹쳐 놓을 수가 없다”는 오해를 하게 된다. Absolute 포지션을 알면 자동 레이아웃의 활용 범위가 확 넓어진다.
자주 하는 실수
실수 1 – 그룹에 자동 레이아웃을 적용하려 한다 자동 레이아웃은 프레임에만 적용된다. 그룹을 선택하고 Shift + A를 누르면 자동으로 프레임으로 변환되긴 하지만, 처음부터 프레임으로 작업하는 습관을 들이는 게 낫다.
실수 2 – Hug와 Fill을 반대로 쓴다 버튼에 Fill을 쓰면 버튼이 부모 크기에 맞춰 늘어난다. 텍스트에 Hug를 쓰면 텍스트 크기가 내용에 맞게 고정된다. 어느 요소가 크기를 결정하고, 어느 요소가 따라오는지를 먼저 생각하면 덜 헷갈린다.
실수 3 – 자동 레이아웃 안에서 요소를 드래그로 위치를 바꾸려 한다 자동 레이아웃 안의 요소는 드래그로 위치를 바꿀 수 없다. 레이어 패널에서 순서를 바꾸거나, Absolute 포지션으로 설정해야 한다. 이걸 모르면 “왜 안 움직이지?”로 한참 고생한다.
개발 핸드오프에서 자동 레이아웃이 왜 중요한가
자동 레이아웃으로 만든 컴포넌트는 개발자가 구현하기 쉽다.
피그마에서 자동 레이아웃이 적용된 프레임을 선택하면, Inspect 탭에서 Flexbox 방향, 간격, 패딩 값이 그대로 나온다.
개발자 입장에서는 CSS로 옮기는 게 직관적이다. 자동 레이아웃 없이 손으로 배치한 디자인은 “이 간격이 몇 px이에요?”를 계속 물어봐야 한다.
자동 레이아웃으로 만든 컴포넌트는 그 질문이 줄어든다. 수치가 구조 안에 이미 녹아 있기 때문이다.
처음 쓴다면 이것부터
자동 레이아웃의 모든 옵션을 한꺼번에 외우려 하면 오래 못 간다.
오늘 당장 이것만 해봐라.
버튼 하나를 자동 레이아웃으로 만들어봐라. 텍스트 하나 만들고, Shift + A, 패딩 넣고, Hug로 설정. 그리고 텍스트를 바꿔봐라.
버튼이 따라오는 순간, 감이 온다. 그게 자동 레이아웃이 왜 필요한지를 알게 되는 순간이다.
마무리
자동 레이아웃은 처음엔 번거롭게 느껴진다. 그냥 사각형 그리고 올려두는 게 더 빠른 것 같은 느낌.
그런데 수정이 시작되면 달라진다. 텍스트 바꾸고, 아이템 추가하고, 화면 크기 조정하는 순간부터 자동 레이아웃으로 만든 것과 그냥 만든 것의 차이가 벌어진다.
자동 레이아웃은 처음 만드는 속도를 위한 기능이 아니다. 수정하고 유지하는 비용을 줄이는 기능이다.
한 번만 제대로 익혀두면, 그다음부터는 없이는 못 쓴다.
