Auto Layout으로 반응하는 UI 만들기

Auto Layout은 '정리 잘하는 보이지 않는 손'이다

피그마를 처음 배울 때 가장 많이 하는 작업은 사각형을 그리고, 텍스트를 얹고, 위치를 눈대중으로 맞추는 일입니다. 처음에는 그럭저럭 괜찮아 보입니다. 그런데 버튼 문구가 확인에서 무료로 시작하기로 바뀌는 순간 문제가 생깁니다. 버튼 배경은 그대로인데 글자가 삐져나오고, 카드 제목이 두 줄이 되자 아래 설명과 겹치고, 리스트 아이템 하나를 추가했더니 전체 간격을 다시 맞춰야 합니다.

Auto Layout은 이런 귀찮은 정리 작업을 피그마가 대신 하도록 만드는 기능입니다. 쉽게 말해 "이 요소들은 가로로 놓고, 사이 간격은 12px로 유지하고, 안쪽 여백은 위아래 10px, 좌우 16px로 잡아 줘"라고 규칙을 정해 두는 방식입니다. 그러면 텍스트가 길어지거나 요소가 추가되어도 레이아웃이 자동으로 밀리고 늘어나며 정리됩니다.

개발자에게는 CSS의 flexbox와 비슷한 개념이라고 설명할 수 있습니다. 기획자에게는 표나 문서에서 셀 안의 내용이 늘어나면 칸이 같이 늘어나는 것과 비슷하다고 볼 수 있습니다. 디자이너에게는 버튼, 카드, 리스트, 폼을 안정적으로 만드는 실무 기본기입니다.

Auto Layout을 제대로 이해하면 피그마 작업 속도가 확 달라집니다. 버튼 하나를 수정하려고 배경 박스를 다시 늘릴 필요가 없고, 카드 리스트의 간격을 하나하나 손으로 재지 않아도 됩니다. 화면이 커지거나 작아질 때 어떤 요소가 늘어나고, 어떤 요소는 고정되어야 하는지도 훨씬 명확해집니다.

Auto Layout을 적용하는 가장 작은 예제

가장 간단한 예제는 텍스트 하나로 버튼을 만드는 것입니다. 먼저 화면에 로그인이라는 텍스트를 입력해 봅시다. 텍스트 레이어만 선택한 상태에서 Shift + A를 누르면 피그마가 텍스트를 감싸는 프레임을 만들고 Auto Layout을 적용합니다. 이때 새로 생긴 프레임이 버튼의 몸통이 됩니다.

오른쪽 디자인 패널을 보면 Auto Layout 영역이 나타납니다. 여기에서 방향, 간격, 패딩, 정렬을 조정할 수 있습니다. 지금은 텍스트가 하나뿐이라 대단한 변화가 없어 보이지만, 이 버튼 안에 아이콘을 추가하면 Auto Layout의 효과가 바로 드러납니다. 아이콘과 텍스트 사이 간격을 8px로 지정하면, 아이콘을 바꾸거나 텍스트 길이가 달라져도 두 요소 사이 간격은 계속 유지됩니다.

여기서 중요한 관점은 "그림을 그린다"가 아니라 "규칙을 만든다"입니다. Auto Layout은 요소의 현재 위치만 맞추는 기능이 아닙니다. 앞으로 내용이 바뀌었을 때도 깨지지 않게 만드는 규칙입니다.

단축키 박스: Auto Layout 시작과 해제

• Auto Layout 적용: Shift + A

• Auto Layout 해제: Shift + Alt + A 또는 Mac에서 Shift + Option + A

• 선택한 요소 복제: Ctrl + D 또는 Mac에서 Command + D

• 여러 요소를 선택한 뒤 Auto Layout을 적용하면, 선택된 요소들을 감싸는 Auto Layout 프레임이 만들어집니다.

방향: 가로로 쌓을 것인가, 세로로 쌓을 것인가

Auto Layout에서 가장 먼저 정할 것은 방향입니다. 피그마의 Auto Layout은 기본적으로 자식 요소들을 한 방향으로 차례차례 배치합니다. 방향은 크게 가로 방향과 세로 방향으로 이해하면 됩니다.

가로 방향은 버튼 안의 아이콘과 텍스트, 탭 메뉴, 카드 안의 썸네일과 설명 영역처럼 좌우로 나란히 배치할 때 사용합니다. 예를 들어 🔍 검색 버튼을 만든다면 아이콘과 텍스트가 가로로 놓여야 합니다. 이때 부모 프레임의 Auto Layout 방향을 가로로 설정하면 됩니다.

세로 방향은 입력 폼, 리스트, 카드 내부 정보처럼 위에서 아래로 쌓이는 구조에 사용합니다. 회원가입 화면을 떠올려 봅시다. 제목이 있고, 이메일 입력창이 있고, 비밀번호 입력창이 있고, 가입 버튼이 아래에 있습니다. 이런 구조는 세로 Auto Layout에 잘 맞습니다.

실무에서는 가로와 세로를 한 번만 쓰는 경우보다 중첩해서 쓰는 경우가 훨씬 많습니다. 화면 전체는 세로로 쌓고, 그 안의 헤더는 가로로 배치하며, 카드 내부는 다시 세로로 쌓는 식입니다. 처음에는 복잡해 보이지만, 실제로는 "큰 상자 안에 작은 상자들이 들어 있다"고 생각하면 쉽습니다.

간격과 패딩: 바깥 거리와 안쪽 여백을 구분하자

Auto Layout에서 초보자가 가장 헷갈리는 개념이 간격과 패딩입니다. 둘 다 여백처럼 보이지만 역할이 다릅니다.

간격은 Auto Layout 안에 들어 있는 자식 요소들 사이의 거리입니다. 버튼 안에서 아이콘과 텍스트 사이가 8px이라면 이것은 간격입니다. 카드 리스트에서 카드와 카드 사이가 16px이라면 이것도 간격입니다.

패딩은 부모 프레임의 테두리와 그 안의 내용 사이에 있는 안쪽 여백입니다. 버튼에서 글자와 버튼 배경 가장자리 사이의 여유 공간이 패딩입니다. 입력창에서 placeholder 텍스트와 테두리 사이의 여백도 패딩입니다.

버튼을 예로 들어 봅시다. 로그인 텍스트를 감싸는 Auto Layout 프레임에 좌우 패딩 16px, 상하 패딩 10px을 주면 버튼다운 모양이 됩니다. 텍스트가 무료로 시작하기로 바뀌어도 좌우 여백 16px은 유지됩니다. 이것이 Auto Layout 버튼의 가장 큰 장점입니다.

피그마에서는 웹 CSS처럼 마진 값을 개별 요소에 직접 주는 방식보다는, 부모 Auto Layout의 gap과 padding으로 여백을 관리하는 경우가 많습니다. 그래서 실무에서는 "이 버튼의 좌우 패딩은 얼마인가요?", "리스트 아이템 간격은 몇 px인가요?"처럼 말하는 습관을 들이면 좋습니다.

팁 박스: 간격을 정할 때는 숫자 체계를 만들자

실무 UI에서는 4, 8, 12, 16, 24, 32처럼 일정한 간격 단위를 자주 사용합니다. 모든 여백을 감으로 맞추면 화면이 금방 지저분해집니다. 작은 요소 내부는 8~12px, 버튼 좌우 패딩은 16~20px, 섹션 사이 간격은 24~32px처럼 기준을 정해 두면 팀원과 대화하기도 쉬워집니다.

정렬: 어디를 기준으로 줄 세울 것인가

Auto Layout의 정렬은 요소들이 부모 프레임 안에서 어느 위치를 기준으로 놓일지 결정합니다. 가로 Auto Layout에서는 위, 가운데, 아래 정렬이 중요하고, 세로 Auto Layout에서는 왼쪽, 가운데, 오른쪽 정렬이 중요합니다.

예를 들어 아이콘과 텍스트가 들어 있는 버튼을 생각해 봅시다. 아이콘 높이는 20px이고 텍스트 줄 높이는 24px일 수 있습니다. 이때 정렬을 가운데로 맞추면 아이콘과 텍스트가 자연스럽게 한 줄에 놓입니다. 정렬이 어긋나면 아이콘이 위로 뜨거나 아래로 내려가 보여 버튼이 어설퍼집니다.

헤더에서는 정렬이 더 중요합니다. 왼쪽에는 뒤로가기 아이콘, 가운데에는 제목, 오른쪽에는 설정 버튼이 있을 수 있습니다. 이때 각 요소가 세로 가운데에 정렬되어야 헤더가 안정적으로 보입니다.

피그마의 오른쪽 패널에서 9개 점처럼 보이는 정렬 컨트롤을 사용하면 부모 프레임 안에서 자식 요소들의 기준 위치를 정할 수 있습니다. 처음에는 대부분 가운데 정렬을 많이 씁니다. 버튼, 입력창, 탭, 리스트 아이템은 가운데 정렬이 기본적으로 안정적입니다. 반면 본문 텍스트가 많은 카드나 폼 영역에서는 왼쪽 정렬이 자연스럽습니다.

단축키 박스: 자주 쓰는 정렬 단축키

• 왼쪽 정렬: Alt + A 또는 Mac에서 Option + A

• 오른쪽 정렬: Alt + D 또는 Mac에서 Option + D

• 위쪽 정렬: Alt + W 또는 Mac에서 Option + W

• 아래쪽 정렬: Alt + S 또는 Mac에서 Option + S

• 가로 가운데 정렬: Alt + H 또는 Mac에서 Option + H

• 세로 가운데 정렬: Alt + V 또는 Mac에서 Option + V

Auto Layout 안에서는 수동 정렬보다 부모 프레임의 정렬 설정이 우선하는 경우가 많습니다. 단축키로 맞췄는데 다시 움직인다면, 오른쪽 패널의 Auto Layout 정렬 값을 확인해 보세요.

Hug contents, Fixed, Fill container 이해하기

Auto Layout을 배우다가 가장 많이 막히는 지점이 바로 크기 조정 옵션입니다. 피그마에서는 요소의 너비와 높이를 어떻게 정할지 선택할 수 있습니다. 핵심은 세 가지입니다. Hug contents, Fixed, Fill container입니다.

Hug contents는 내용물을 꼭 끌어안는 방식입니다. 텍스트가 짧으면 프레임도 작아지고, 텍스트가 길어지면 프레임도 늘어납니다. 버튼, 태그, 작은 배지처럼 내용 길이에 따라 크기가 달라져야 하는 UI에 잘 맞습니다. NEW, 인기, 무료 배송 같은 태그를 만들 때 Hug contents를 쓰면 문구 길이에 따라 배경이 자연스럽게 늘어납니다.

Fixed는 크기를 고정하는 방식입니다. 아이콘 버튼, 썸네일 이미지, 프로필 아바타처럼 일정한 크기를 유지해야 하는 요소에 사용합니다. 예를 들어 프로필 이미지는 이름이 길어져도 40×40px을 유지해야 합니다. 이런 요소가 Hug로 되어 있으면 예측하기 어렵고, Fill로 되어 있으면 부모 크기에 따라 갑자기 늘어날 수 있습니다.

Fill container는 부모가 가진 남은 공간을 채우는 방식입니다. 리스트 아이템에서 왼쪽에는 아이콘이 있고 오른쪽에는 텍스트 영역이 있을 때, 텍스트 영역이 남은 가로 공간을 모두 사용하도록 만들고 싶다면 Fill container를 씁니다. 입력창도 마찬가지입니다. 화면 너비가 넓어지면 입력창도 같이 넓어져야 하므로 Fill container가 어울립니다.

이 세 가지는 Auto Layout의 언어입니다. 버튼이 이상하게 늘어난다면 Hug인지 Fill인지 확인하세요. 입력창이 화면 너비를 따라가지 않는다면 Fixed로 되어 있는지 확인하세요. 카드 안의 설명 영역이 아이콘을 밀어내고 있다면 어떤 요소가 Fill을 차지하고 있는지 살펴보면 됩니다.

버튼 만들기: 텍스트가 바뀌어도 깨지지 않게

이제 실무에서 가장 많이 쓰는 버튼을 만들어 보겠습니다. 버튼은 Auto Layout을 이해하기에 가장 좋은 예제입니다. 왜냐하면 버튼은 거의 항상 내용 길이에 반응해야 하기 때문입니다.

먼저 시작하기라는 텍스트를 만듭니다. 텍스트 레이어를 선택하고 Shift + A를 눌러 Auto Layout을 적용합니다. 오른쪽 패널에서 방향은 가로, 정렬은 가운데로 둡니다. 패딩은 좌우 16px, 상하 10px 정도로 설정합니다. 배경색은 앞 장에서 정한 Primary 색상을 사용하고, 모서리 반경은 8px 정도로 둡니다.

이제 버튼 텍스트를 무료로 시작하기로 바꿔 봅니다. Auto Layout이 제대로 적용되어 있다면 버튼 배경이 텍스트 길이에 맞춰 자연스럽게 늘어납니다. 이때 버튼 프레임의 너비가 Hug contents로 되어 있어야 합니다. 만약 버튼이 늘어나지 않고 글자가 넘친다면 너비가 Fixed로 고정되어 있을 가능성이 큽니다.

아이콘이 있는 버튼도 같은 방식입니다. 버튼 안에 아이콘을 넣고 텍스트 왼쪽에 배치합니다. 버튼의 Auto Layout 방향을 가로로 두고, 아이콘과 텍스트 사이 간격을 8px로 설정합니다. 아이콘은 Fixed 20×20px, 텍스트는 Hug contents로 두면 안정적입니다.

버튼이 화면 전체 너비를 차지해야 하는 경우도 있습니다. 회원가입 화면 하단의 가입하기 버튼이 대표적입니다. 이때 버튼 자체의 너비는 Fill container로 바꾸고, 버튼 안의 텍스트는 가운데 정렬합니다. 부모 프레임에 좌우 패딩이 24px 있다면 버튼은 그 안에서 가능한 너비를 채웁니다.

입력창 만들기: 라벨, 안내 문구, 에러 메시지까지 버티는 구조

입력창은 버튼보다 조금 더 복잡합니다. 단순히 사각형 하나와 텍스트 하나로 끝나지 않기 때문입니다. 실무 입력창에는 라벨, 입력 영역, 도움말, 에러 메시지가 함께 붙는 경우가 많습니다.

예를 들어 이메일 입력 필드를 만들어 봅시다. 바깥에 세로 Auto Layout 프레임을 하나 만듭니다. 이 프레임 안에는 이메일 라벨, 입력 박스, 안내 문구가 위에서 아래로 들어갑니다. 라벨과 입력 박스 사이 간격은 8px, 입력 박스와 안내 문구 사이 간격은 6px 정도로 둘 수 있습니다.

입력 박스 자체는 또 하나의 Auto Layout 프레임입니다. 방향은 가로, 정렬은 가운데, 패딩은 좌우 14px, 상하 12px 정도로 설정합니다. 안에는 placeholder 텍스트인 example@email.com이 들어갑니다. 필요하다면 오른쪽에 삭제 아이콘이나 확인 아이콘을 넣을 수도 있습니다.

이때 입력 박스는 부모 너비를 따라가야 하므로 Fill container가 적합합니다. 반면 라벨과 안내 문구는 내용만큼만 높이를 가지면 되므로 Hug contents로 두는 것이 자연스럽습니다. 입력 필드 전체는 화면 안에서 가로로 늘어날 수 있어야 하므로 너비는 Fill container, 높이는 Hug contents로 설정하는 경우가 많습니다.

에러 메시지를 추가할 때도 Auto Layout의 힘이 드러납니다. 입력창 아래에 이메일 형식이 올바르지 않습니다.라는 텍스트를 넣으면, 부모 세로 Auto Layout이 자동으로 아래 요소를 밀어냅니다. 수동으로 만들었다면 에러 메시지가 버튼과 겹칠 수 있지만, Auto Layout 구조에서는 필요한 만큼 공간이 늘어납니다.

태그와 배지 만들기: 짧은 문구에 강한 Hug contents

태그와 배지는 Auto Layout의 Hug contents를 연습하기 좋은 요소입니다. 인기, 마감 임박, 무료 배송, 신규 업데이트처럼 문구 길이가 제각각이기 때문입니다.

태그를 만들 때는 텍스트를 입력하고 Auto Layout을 적용한 뒤, 좌우 패딩 10~12px, 상하 패딩 4~6px을 줍니다. 배경색은 연한 색으로, 텍스트는 그보다 진한 색으로 설정하면 읽기 쉽습니다. 모서리 반경을 충분히 크게 주면 알약 모양 태그가 됩니다.

중요한 점은 태그 프레임의 너비를 Hug contents로 두는 것입니다. 태그가 Fixed로 되어 있으면 인기는 너무 넓어 보이고, 신규 업데이트는 글자가 답답해 보일 수 있습니다. 여러 태그를 한 줄에 배치할 때는 태그들을 감싸는 부모 프레임을 가로 Auto Layout으로 만들고 간격을 8px로 설정하면 됩니다.

최신 피그마의 Auto Layout에서는 여러 요소가 한 줄에 다 들어가지 않을 때 다음 줄로 넘어가게 만드는 Wrap 기능도 사용할 수 있습니다. 태그 목록처럼 길이가 제각각인 요소를 자연스럽게 줄바꿈하고 싶을 때 유용합니다. 단, Wrap을 쓸 때도 각 태그는 Hug contents로 두는 것이 관리하기 쉽습니다.

카드 만들기: 내용이 늘어나도 균형을 유지하는 구조

카드는 실무 UI에서 정말 자주 등장합니다. 상품 카드, 게시글 카드, 알림 카드, 대시보드 카드 등 형태는 달라도 원리는 비슷합니다. 카드 안에는 이미지, 제목, 설명, 태그, 가격, 버튼 같은 요소가 들어갑니다. 이 요소들을 수동으로 배치하면 내용이 조금만 바뀌어도 금방 깨집니다.

가장 기본적인 세로 카드부터 만들어 봅시다. 카드 프레임을 만들고 Auto Layout 방향을 세로로 설정합니다. 패딩은 16px, 요소 간격은 12px 정도로 둡니다. 카드 안에는 썸네일 이미지, 제목, 설명, 하단 정보 영역이 들어갑니다.

썸네일 이미지는 카드 너비를 채우되 높이는 고정하는 경우가 많습니다. 따라서 너비는 Fill container, 높이는 Fixed로 설정합니다. 제목과 설명은 너비를 Fill container로 두면 카드 안에서 자연스럽게 줄바꿈됩니다. 카드 전체 높이는 내용에 맞춰 늘어나야 하므로 Hug contents가 적합합니다.

하단 정보 영역은 가로 Auto Layout으로 만들 수 있습니다. 왼쪽에는 가격이나 날짜, 오른쪽에는 작은 버튼이나 아이콘을 둡니다. 양쪽 끝으로 벌리고 싶다면 간격 값을 단순 숫자가 아니라 Space between 방식으로 설정할 수 있습니다. 그러면 왼쪽 요소는 왼쪽에, 오른쪽 요소는 오른쪽에 붙고 가운데 남은 공간이 자동으로 벌어집니다.

카드의 핵심은 중첩입니다. 카드 전체는 세로 Auto Layout이고, 카드 안의 하단 영역은 가로 Auto Layout입니다. 하단 영역 안의 버튼은 또 Auto Layout 버튼일 수 있습니다. 이렇게 작은 규칙들이 겹치면서 큰 화면 구조가 안정적으로 만들어집니다.

중첩 Auto Layout: 실무 화면은 상자 안의 상자다

Auto Layout을 처음 배울 때는 "왜 이렇게 프레임이 많아지지?"라는 생각이 들 수 있습니다. 하지만 실무 화면은 원래 여러 상자가 겹쳐진 구조입니다. 헤더, 본문, 리스트, 카드, 버튼 영역은 각각 다른 규칙을 가져야 합니다. 다른 규칙을 가진 요소들을 하나의 Auto Layout에 억지로 넣으면 오히려 더 복잡해집니다.

예를 들어 회원가입 화면을 구성해 봅시다. 화면 전체 프레임은 세로 Auto Layout입니다. 위에는 헤더가 있고, 가운데에는 폼 영역이 있으며, 아래에는 하단 버튼 영역이 있습니다. 화면 프레임의 좌우 패딩은 24px, 상하 패딩은 24px 정도로 설정할 수 있습니다.

헤더는 가로 Auto Layout입니다. 왼쪽에는 뒤로가기 아이콘, 가운데 또는 왼쪽에는 제목이 있습니다. 아이콘은 Fixed, 제목은 Fill container로 두면 제목 영역이 남은 공간을 차지합니다. 헤더 높이는 Hug contents 또는 Fixed로 정할 수 있습니다.

폼 영역은 세로 Auto Layout입니다. 이메일 필드, 비밀번호 필드, 비밀번호 확인 필드를 위에서 아래로 쌓습니다. 각 필드 사이 간격은 16px 정도로 유지합니다. 폼 영역의 너비는 Fill container, 높이는 Hug contents로 두면 입력 필드들이 화면 너비를 따라갑니다.

하단 버튼 영역도 Auto Layout으로 관리합니다. 버튼은 Fill container로 두고, 하단 영역은 Hug contents로 둘 수 있습니다. 화면 높이가 커졌을 때 버튼을 아래쪽에 붙이고 싶다면, 화면 전체 Auto Layout에서 본문 영역이 Fill container로 남은 세로 공간을 차지하도록 설정하는 방식이 좋습니다. 이렇게 하면 위쪽 폼은 자연스럽게 자리 잡고, 버튼은 하단에 안정적으로 위치합니다.

팁 박스: 중첩 Auto Layout을 읽는 순서

복잡한 화면을 볼 때는 가장 바깥 프레임부터 읽으세요. "화면 전체는 세로인가?", "헤더는 가로인가?", "본문 리스트는 세로인가?", "각 리스트 아이템은 가로인가?" 순서로 보면 구조가 훨씬 쉽게 이해됩니다. Auto Layout은 한 번에 다 이해하는 기능이 아니라, 바깥 상자에서 안쪽 상자로 내려가며 읽는 기능입니다.

리스트 만들기: 하나를 잘 만들고 복제하자

리스트는 Auto Layout이 빛나는 대표적인 패턴입니다. 알림 목록, 채팅 목록, 설정 메뉴, 상품 목록처럼 같은 구조가 반복되기 때문입니다. 리스트를 잘 만드는 요령은 리스트 아이템 하나를 먼저 안정적으로 만든 다음, 그 아이템들을 세로 Auto Layout으로 쌓는 것입니다.

알림 리스트 아이템을 예로 들어 봅시다. 아이템 전체는 가로 Auto Layout입니다. 왼쪽에는 알림 아이콘이 있고, 오른쪽에는 텍스트 묶음이 있습니다. 아이콘은 Fixed 40×40px로 둡니다. 텍스트 묶음은 세로 Auto Layout으로 만들고, 제목과 설명을 위아래로 배치합니다. 텍스트 묶음은 Fill container로 두어 남은 가로 공간을 사용하게 합니다.

아이템 전체에는 좌우 패딩 16px, 상하 패딩 14px을 줍니다. 아이콘과 텍스트 묶음 사이 간격은 12px 정도가 적당합니다. 제목이 길어져 두 줄이 되어도 텍스트 묶음의 높이가 늘어나고, 아이템 전체 높이도 함께 늘어납니다. 아래 아이템은 자동으로 밀려납니다.

이제 이 아이템을 여러 개 복제한 뒤, 전체를 감싸는 리스트 프레임에 세로 Auto Layout을 적용합니다. 리스트 아이템 사이 간격을 0으로 두고 각 아이템 아래에 구분선을 넣을 수도 있고, 간격을 8px로 두어 카드형 리스트처럼 보이게 할 수도 있습니다.

여기서 중요한 것은 리스트 아이템 내부의 Auto Layout과 리스트 전체의 Auto Layout을 구분하는 것입니다. 아이템 내부는 "아이콘과 텍스트가 어떻게 배치되는가"를 담당하고, 리스트 전체는 "아이템들이 어떤 간격으로 쌓이는가"를 담당합니다.

화면 레이아웃 만들기: Fill container를 두려워하지 말자

초보자는 Fill container를 무서워하는 경우가 많습니다. 적용했더니 요소가 갑자기 커지고, 옆 요소를 밀어내고, 예상과 다르게 화면을 차지하기 때문입니다. 하지만 Fill container는 반응형 UI를 만들기 위해 꼭 필요한 옵션입니다.

가로 방향 Auto Layout에서 Fill container는 남은 가로 공간을 채웁니다. 예를 들어 검색창과 필터 버튼이 나란히 있는 헤더를 생각해 봅시다. 필터 버튼은 내용만큼만 크기를 가지면 되므로 Hug contents가 적합합니다. 검색창은 남은 공간을 모두 차지해야 하므로 Fill container가 맞습니다.

세로 방향 Auto Layout에서는 Fill container가 남은 세로 공간을 채울 수 있습니다. 화면 전체에서 상단 헤더와 하단 버튼은 필요한 높이만 차지하고, 가운데 콘텐츠 영역이 남은 공간을 채우게 만들 수 있습니다. 이렇게 하면 기기 높이가 달라져도 콘텐츠 영역이 자연스럽게 늘어나고 줄어듭니다.

단, Fill container는 부모가 Auto Layout일 때 의미가 있습니다. 부모가 일반 프레임이면 Fill container 옵션이 보이지 않거나 기대한 대로 동작하지 않을 수 있습니다. 따라서 어떤 요소를 Fill로 만들고 싶은데 잘 되지 않는다면, 먼저 부모 프레임에 Auto Layout이 적용되어 있는지 확인해야 합니다.

자주 발생하는 깨짐과 해결 방법

Auto Layout은 강력하지만 처음부터 마음대로 움직여 주지는 않습니다. 특히 기존에 손으로 배치한 화면에 Auto Layout을 적용하면 레이어 순서, 크기 옵션, 정렬 설정 때문에 예상과 다르게 보일 수 있습니다. 당황하지 말고 원인을 하나씩 확인하면 됩니다.

Auto Layout 문제가 생겼을 때는 무작정 드래그하지 않는 것이 좋습니다. 드래그로 해결하려 하면 규칙이 더 꼬입니다. 대신 "부모는 어떤 방향인가?", "자식 사이 간격은 얼마인가?", "이 요소는 Hug, Fixed, Fill 중 무엇이어야 하는가?"를 확인하세요. 대부분의 문제는 이 세 질문 안에서 해결됩니다.

문제 해결 박스: Auto Layout이 이상할 때 5초 점검법

• 부모 프레임에 Auto Layout이 적용되어 있는가?

• 방향이 가로인지 세로인지 맞는가?

• 간격과 패딩을 혼동하고 있지 않은가?

• 늘어나야 하는 요소는 Fill container인가?

• 고정되어야 하는 아이콘과 이미지는 Fixed인가?

반응형 카드 리스트 만들기

이번에는 카드 여러 개가 화면 너비에 따라 자연스럽게 배치되는 구조를 생각해 봅시다. 예를 들어 강의 목록 화면을 만든다고 해보겠습니다. 각 카드에는 썸네일, 강의 제목, 설명, 가격 태그가 들어갑니다.

먼저 카드 하나를 Auto Layout으로 만듭니다. 카드 전체는 세로 방향입니다. 패딩은 16px, 간격은 12px입니다. 썸네일은 너비 Fill container, 높이 Fixed 120px로 둡니다. 제목과 설명은 너비 Fill container로 두고, 카드 전체 너비는 220px처럼 Fixed로 시작해도 좋습니다.

이제 카드 3~6개를 복제합니다. 복제한 카드들을 모두 선택한 뒤 Auto Layout을 적용합니다. 부모 프레임의 방향을 가로로 두고 간격을 16px로 설정합니다. 여기까지 하면 한 줄 카드 리스트가 됩니다.

카드가 화면 너비를 넘어갈 때 다음 줄로 내려가게 만들고 싶다면 Auto Layout의 Wrap 기능을 사용할 수 있습니다. Wrap을 켜면 자식 요소들이 한 줄에 모두 들어가지 않을 때 다음 줄로 넘어갑니다. 카드 간 가로 간격과 세로 간격을 함께 조정하면 반응형 카드 그리드처럼 사용할 수 있습니다.

카드 리스트에서 주의할 점은 카드의 너비 기준입니다. 모든 카드가 같은 너비를 유지해야 한다면 카드 너비를 Fixed로 두는 것이 안정적입니다. 반대로 부모 너비에 맞춰 카드가 유연하게 늘어나야 한다면 Fill container를 활용할 수 있습니다. 초보 단계에서는 먼저 Fixed 카드 너비로 구조를 익힌 뒤, Fill과 Wrap을 조합해 보는 순서가 좋습니다.

회원가입 폼으로 전체 흐름 연결하기

앞에서 배운 내용을 하나의 화면으로 묶어 보겠습니다. 회원가입 화면은 Auto Layout 연습에 아주 좋습니다. 헤더, 안내 문구, 입력 필드, 체크박스, 버튼이 모두 들어가기 때문입니다.

먼저 모바일 프레임을 하나 만들고 화면 전체에 세로 Auto Layout을 적용합니다. 좌우 패딩은 24px, 상하 패딩은 24px, 요소 간격은 24px 정도로 설정합니다. 화면 전체의 너비와 높이는 기기 프레임에 맞춰 Fixed로 둡니다.

맨 위에는 헤더를 넣습니다. 헤더는 가로 Auto Layout입니다. 뒤로가기 아이콘은 Fixed 24×24px, 제목 텍스트는 Fill container로 둡니다. 제목을 가운데 정렬할지 왼쪽 정렬할지는 서비스 성격에 맞게 정하면 됩니다.

그 아래에는 안내 문구 영역을 넣습니다. 회원 정보를 입력해 주세요 같은 제목과 짧은 설명을 세로 Auto Layout으로 묶습니다. 텍스트들은 너비 Fill container로 두어 작은 화면에서도 줄바꿈이 자연스럽게 일어나도록 합니다.

다음은 폼 영역입니다. 이메일, 비밀번호, 비밀번호 확인 입력 필드를 각각 Auto Layout으로 만든 뒤, 이 필드들을 세로 Auto Layout 부모 안에 넣습니다. 필드 사이 간격은 16px로 통일합니다. 각 입력 박스는 Fill container로 두어 화면 너비를 따라가게 합니다.

약관 동의 영역은 가로 Auto Layout입니다. 체크박스는 Fixed, 약관 문구는 Fill container로 둡니다. 약관 문구가 길어져 두 줄이 되어도 체크박스 크기는 유지되고, 텍스트만 자연스럽게 줄바꿈됩니다.

마지막으로 하단 버튼을 배치합니다. 가입하기 버튼은 Fill container로 두고, 버튼 내부 텍스트는 가운데 정렬합니다. 버튼 위아래 여백은 부모 Auto Layout의 간격과 패딩으로 관리합니다. 화면이 길어졌을 때 버튼을 아래로 보내고 싶다면, 폼 영역 또는 중간 콘텐츠 영역이 남은 세로 공간을 차지하도록 Fill container를 적용합니다.

이 화면을 완성한 뒤 프레임 높이를 조금 늘리거나 줄여 보세요. Auto Layout이 잘 적용되어 있다면 요소들이 겹치지 않고, 필요한 영역이 자연스럽게 늘어나거나 줄어듭니다. 반대로 어딘가 깨진다면 그 지점이 바로 연습 포인트입니다.

Auto Layout을 잘 쓰는 사람의 작업 습관

Auto Layout은 버튼을 빨리 만드는 기능이기도 하지만, 더 크게 보면 작업 방식을 바꾸는 기능입니다. 잘 쓰는 사람은 처음부터 모든 것을 완벽하게 만들려고 하지 않습니다. 먼저 레이어를 대략 배치하고, 반복되는 묶음을 찾고, 그 묶음에 Auto Layout을 적용합니다.

화면을 만들 때는 작은 요소부터 시작하는 것이 좋습니다. 버튼, 태그, 입력창처럼 작은 UI를 안정적으로 만든 다음, 그것들을 카드나 폼으로 묶고, 다시 화면 전체 구조로 묶습니다. 이렇게 하면 문제가 생겼을 때 어느 상자에서 깨졌는지 찾기 쉽습니다.

또 하나의 습관은 수동 위치 조정을 줄이는 것입니다. Auto Layout을 적용한 뒤 요소를 억지로 드래그해서 맞추려 하면 규칙과 손작업이 충돌합니다. 간격은 gap으로, 안쪽 여백은 padding으로, 늘어나는 방식은 Hug·Fixed·Fill로 해결하는 습관을 들이세요.

마지막으로 레이어 이름을 정리해 두면 좋습니다. Frame 123이 아니라 Button / Primary, Input / Email, Card / Course, List / Notification처럼 역할이 보이는 이름을 붙이면 나중에 Components를 만들 때도 훨씬 수월합니다. 다음 장들에서 다룰 Components와 Variants는 Auto Layout으로 잘 짜인 구조 위에서 진짜 힘을 발휘합니다.

핵심 요약

• Auto Layout은 요소를 손으로 맞추는 대신 방향, 간격, 패딩, 정렬 같은 규칙으로 배치하는 기능입니다.

• 가로 방향은 버튼, 헤더, 리스트 아이템에 자주 쓰이고, 세로 방향은 폼, 카드 내부, 화면 전체 구조에 자주 쓰입니다.

• 간격은 요소 사이 거리이고, 패딩은 부모 프레임 안쪽 여백입니다. 두 개념을 구분해야 레이아웃이 안정됩니다.

• Hug contents는 내용만큼 크기가 변하고, Fixed는 크기를 고정하며, Fill container는 부모의 남은 공간을 채웁니다.

• 버튼, 입력창, 태그, 카드, 리스트는 Auto Layout으로 만들면 텍스트 길이나 화면 크기 변화에 훨씬 잘 대응합니다.

• 실무 화면은 중첩 Auto Layout으로 구성됩니다. 화면 전체, 헤더, 폼, 카드, 버튼 영역이 각각 자기 규칙을 가져야 합니다.

• Auto Layout이 깨졌을 때는 드래그로 고치기보다 부모 방향, gap, padding, Hug·Fixed·Fill 설정을 먼저 확인해야 합니다.

실습 과제

과제 1. 내용 길이에 반응하는 버튼 3종 만들기

텍스트만 있는 기본 버튼, 아이콘이 왼쪽에 있는 버튼, 화면 전체 너비를 채우는 버튼을 각각 만들어 보세요. 모든 버튼에는 Auto Layout을 적용하고, 텍스트를 확인, 무료로 시작하기, 계정 만들고 바로 시작하기로 바꿔 보며 버튼이 자연스럽게 반응하는지 확인합니다.

완성 기준은 명확합니다. 기본 버튼은 Hug contents로 텍스트 길이에 따라 늘어나야 합니다. 전체 너비 버튼은 부모 프레임 안에서 Fill container로 가로 공간을 채워야 합니다. 아이콘은 늘어나지 않도록 Fixed 크기를 유지해야 합니다.

과제 2. 반응형 카드 리스트 만들기

강의 카드 또는 상품 카드를 1개 만듭니다. 카드 안에는 썸네일, 제목, 설명, 태그, 가격 또는 버튼을 넣습니다. 카드 전체는 세로 Auto Layout으로 구성하고, 썸네일은 Fill container와 Fixed height를 조합해 만듭니다.

카드를 6개 복제한 뒤 부모 프레임에 Auto Layout을 적용합니다. 가로 방향으로 배치하고 gap을 16px로 설정하세요. 가능하다면 Wrap을 켜서 화면 너비가 부족할 때 카드가 다음 줄로 내려가도록 만들어 봅니다. 카드 제목을 일부러 길게 바꿨을 때 카드 내부 요소가 겹치지 않는지도 확인합니다.

과제 3. 회원가입 폼 화면 만들기

모바일 프레임 안에 회원가입 폼을 만듭니다. 화면 전체는 세로 Auto Layout으로 구성하고, 헤더, 안내 문구, 입력 필드 3개, 약관 동의 영역, 하단 버튼을 포함합니다.

각 입력 필드는 라벨, 입력 박스, 안내 또는 에러 메시지를 포함하는 세로 Auto Layout으로 만듭니다. 입력 박스는 Fill container로 설정합니다. 약관 동의 영역은 체크박스와 긴 문구가 들어간 가로 Auto Layout으로 만들고, 문구가 두 줄이 되어도 체크박스가 찌그러지지 않게 설정합니다.

마지막으로 프레임 높이를 늘리거나 줄여 보세요. 버튼이 겹치지 않고, 입력 필드가 화면 너비를 따라가며, 긴 텍스트가 자연스럽게 줄바꿈된다면 이번 장의 핵심을 제대로 이해한 것입니다.