오늘의 목표
화면의 폭이나 콘텐츠 길이가 바뀌어도 UI가 유지되도록 배치 규칙 → 크기 규칙 → UI 요소 제작 → 검증까지 해보는 것.
| 개념 | 정리 |
|---|---|
| Auto Layout | 요소를 손으로 배치하지 않고 방향·간격·여백·정렬 규칙으로 배치 |
| Hug | 내용 크기에 맞춰 요소의 크기가 변함 |
| Fill | 부모 프레임의 남은 공간을 채움 |
| Fixed | 화면이나 내용이 변해도 정해진 크기를 유지 |
| 중첩 구조 | Auto Layout 안에 또 Auto Layout을 넣어 여러 규칙을 함께 적용 |
| 반응형 확인 | 내용 길이·프레임 폭·요소 개수를 바꿔도 구조가 유지되는지 점검 |
01. Auto Layout
Auto Layout이란?
프레임 안 요소의 방향 · 간격 · 여백 · 정렬을 규칙으로 정하는 기능이다.
직접 위치를 맞춰놓으면 텍스트가 길어지거나 요소가 추가될 때 다시 배치해야 하지만, Auto Layout을 사용하면 설정한 규칙에 따라 자동으로 재배치된다.
단축키
📍 [Shift + A]
4가지 규칙
| 항목 | 의미 | 오늘 쓸 값 |
|---|---|---|
| 방향 | 요소가 쌓이는 방향 (가로 / 세로) | 카드는 세로, 버튼은 가로 |
| 간격 | 요소와 요소 사이 거리 | 8 · 12 · 16 |
| 여백 | 프레임과 내부 요소 사이 거리 | 16 · 24 |
| 정렬 | 요소가 붙는 기준 위치 | 왼쪽 위 · 가운데 |
기억하기
방향은 순서, 간격은 사이, 여백은 가장자리, 정렬은 기준 위치.
Auto Layout은 중첩해서 사용한다
하나의 Auto Layout으로 모든 요소를 정리하는 것이 아니라, Auto Layout 안에 또 다른 Auto Layout을 넣어 구조를 만든다.
02. 크기를 정하는 3가지 규칙
Auto Layout 안에서는 요소의 너비와 높이를 Hug · Fill · Fixed 중 하나로 정할 수 있다.
| 규칙 | 의미 | 사용 예 |
|---|---|---|
| Hug | 내부 콘텐츠 크기를 따라감 | 버튼 너비, 카드 높이 |
| Fill | 부모의 남은 공간을 채움 | 카드 너비, 리스트 행 |
| Fixed | 지정한 크기를 유지함 | 아이콘, 이미지 |
어떻게 고를까?
내용에 따라 변한다 → Hug
텍스트가 길어지면 버튼도 길어져야 하는 경우.
부모에 따라 변한다 → Fill
모바일과 데스크탑에서 카드가 화면 너비에 맞게 늘어나야 하는 경우.
크기가 변하면 안 된다 → Fixed
아이콘이나 썸네일처럼 지정된 크기를 유지해야 하는 경우.
내용 따라 Hug / 부모 따라 Fill / 안 변하면 Fixed
정렬도 규칙이다
정렬은 단순히 화면을 보기 좋게 맞추는 기능이 아니다.
콘텐츠의 길이나 크기가 달라져도 요소가 붙어 있어야 하는 기준점을 정한다.
- 버튼 텍스트 → 가운데
- 카드 콘텐츠 → 왼쪽 위
- 리스트 항목 → 양 끝
텍스트가 길어졌을 때 정렬 기준까지 움직인다면 UI가 쉽게 무너진다.
03. UI 요소에 적용하기
앞에서 만든 규칙을 이용해 카드 3종 · 버튼 2종 · 리스트 1종, 총 6개의 UI 요소를 만든다.
제품 카드
제품 카드는 기본적으로
너비 Fill + 높이 Hug
로 설정했다.
제품명처럼 내용이 길어질 수 있는 부분은 Hug를 이용한다.
카드
└─ 세로 Auto Layout
ㅤㅤ├─ 이미지
ㅤㅤ└─ 제품 정보
ㅤㅤㅤㅤ ├─ 제품명
ㅤ ㅤㅤㅤ└─ 가격
제품명을 두 줄로 늘려도 카드 높이가 자동으로 늘어나는지 확인한다.
버튼
버튼은 사각형의 크기를 먼저 정하는 것이 아니라 텍스트 + 여백으로 크기를 만든다.
오늘 사용한 기준은
상하 12 / 좌우 24
버튼의 텍스트가 바뀌어도 같은 여백이 유지되어야 한다.
따라서 버튼은 보통 내용에 맞게 크기가 변하는 Hug를 사용할 수 있다.
버튼에서 확인할 것
텍스트를 짧게 또는 길게 변경했을 때도 좌우·상하 여백이 동일한가?
리스트
리스트는 전체를 먼저 만드는 것이 아니라 행 하나의 규칙을 먼저 만든다.
리스트
└─ 행
ㅤ ㅤ├─ 항목명
ㅤㅤ └─ 내용
행의 너비를 Fill로 설정하고 양 끝 정렬한 뒤, 완성된 행을 복제해서 리스트를 만든다.
이렇게 하면 새로운 행을 추가해도 동일한 간격과 구조를 유지할 수 있다.
04. UI가 제대로 만들어졌는지 점검하기
UI를 완성했다고 끝나는 것이 아니라 일부러 조건을 바꿔보면서 규칙이 유지되는지 확인한다.
① 내용 길이 바꾸기
제품명이나 설명을 길게 바꿔본다.
→ 텍스트가 밖으로 나가지 않는가?
→ 카드 높이가 자동으로 늘어나는가?
② 프레임 폭 바꾸기
같은 UI를 375px / 1440px 프레임에 넣어본다.
→ 화면 폭에 맞춰 요소가 자연스럽게 변하는가?
③ 요소 추가하기
리스트에 새로운 행을 추가한다.
→ 기존과 같은 간격이 유지되는가?
→ 전체 높이가 자동으로 늘어나는가?
막힐 때 확인할 것
| 문제 | 확인할 것 |
|---|---|
| Shift+A가 안 됨 | 현재 선택한 대상 |
| 크기가 안 따라옴 | Hug · Fill · Fixed |
| 텍스트가 밖으로 나감 | 텍스트 너비 규칙 |
| 순서가 뒤바뀜 | 레이어 순서 |
UI가 예상과 다르게 움직인다면 직접 크기나 위치부터 수정하기보다 어떤 규칙이 잘못 설정됐는지 먼저 확인한다.
⭐ 오늘 기억해둘 것
1. Auto Layout은 배치 규칙이다.
방향 · 간격 · 여백 · 정렬을 정하면 내용이 변해도 요소가 자동으로 다시 배치된다.
2. Hug · Fill · Fixed는 크기 규칙이다.
내용 → Hug / 부모 → Fill / 고정 → Fixed
무엇에 따라 크기가 변해야 하는지를 기준으로 선택한다.
3. 좋은 UI는 조건을 바꿔도 유지된다.
내용을 늘리고, 프레임 폭을 바꾸고, 요소를 추가했을 때도 구조가 유지되는지 확인한다.
화면을 그리는 것이 아니라, 화면이 변하는 규칙을 만든다.
