목차
1Auto Layout이란?
2Width / Height 설정
3Hug / Fill / Fixed
4Padding & Gap
5Alignment & Direction
6Wrap 기능
7Frame 중첩
8실전 팁 & 단축키
1
Auto Layout이란?
Frame 또는 개체 간의 간격을 자동으로 잡아주는 기능으로,
요소를 추가·삭제해도 레이아웃이 알아서 재배치됩니다.
시각 예시 — 요소 추가 시 자동 확장
요소 2개
🔗 아이콘
텍스트
요소 추가 → 프레임 자동 확장 ✨
🔗 아이콘
텍스트
+ 추가됨
ShiftA 오토레이아웃 생성
AltShiftA 해제
💡 핵심 원칙: 높이는 고정하지 않고 위·아래 여백(Padding)으로 정하면 콘텐츠 양에 따라 자동으로 결정됩니다.
2
Width / Height 설정
| 속성 | 의미 | 활용 예 |
|---|---|---|
| Width | 너비 | 요소의 가로 크기 |
| min-width | 최소 너비 | 이 값 이하로 줄어들지 않음 |
| max-width | 최대 너비 | 이 값 이상으로 늘어나지 않음 |
Min / Max width 동작 예시
짧은 텍스트
보통 텍스트
긴 텍스트
💡 글자가 늘어나도 min-width가 버텨주고, max-width가 넘치지 않게 막아줍니다. 반응형 버튼 만들 때 핵심!
3
Hug / Fill / Fixed — 크기 모드
세 가지 크기 모드 비교
Hug
Frame
텍스트
콘텐츠 크기에 딱 맞게 줄어듦
→ 버튼, 태그, 뱃지
→ 버튼, 태그, 뱃지
Fill
Frame (부모)
텍스트
부모 프레임을 꽉 채움
→ 결제 버튼, 전체 너비 카드
→ 결제 버튼, 전체 너비 카드
Fixed
Frame (200px)
텍스트
크기 고정 — 변하지 않음
→ 아이콘, 썸네일, 프로필 사진
→ 아이콘, 썸네일, 프로필 사진
| 모드 | 동작 | 언제 사용? |
|---|---|---|
| Hug | 내부 콘텐츠에 맞게 수축 | 내용에 따라 크기가 변해야 할 때 |
| Fill | 부모 프레임 안을 가득 채움 | 부모 기준으로 꽉 채워야 할 때 |
| Fixed | 숫자 입력으로 크기 고정 | 정해진 크기가 있을 때 |
⚠️ 주의: 오토레이아웃 상태에서 마우스로 드래그하면 의도치 않게 Fixed로 바뀝니다. 크기 변경은 패널에서 수치로 입력하세요.
4
Padding & Gap
Padding — 프레임 내부 여백 / Gap — 요소 사이 간격
Padding
↕ 20px
↕ 20px
↔ 28px
↔ 28px
내용물
Gap
A
16px
B
16px
C
CtrlAltC 속성 복사
CtrlAltV 속성 붙여넣기
5
Alignment & Direction
방향(Direction) 및 정렬(Alignment) 예시
가로 방향 →
A
B
C
세로 방향 ↓
A
B
C
정렬 격자 (중앙 예시)
6
Wrap — 자동 줄바꿈
요소가 많아져 가로 공간이 부족하면 자동으로 다음 줄로 넘기는 기능.
CSS Flexbox의 flex-wrap과 동일한 개념입니다.
태그 리스트 Wrap 예시
태그 리스트
디자인
개발
UX리서치
마케팅 ↩
기획 ↩
↩ 공간 부족 시 자동으로 다음 줄
2열 카드 그리드
카드
카드
카드
카드
💡 Wrap 사용 시 부모 프레임 높이는 Hug로 설정하면 행이 늘어날 때 자동으로 프레임도 늘어납니다.
7
Frame 중첩 — 복합 레이아웃
오토레이아웃 Frame 안에 또 다른 Frame을 넣어 정교한 컴포넌트를 구성합니다.
바깥 Frame (Hug) + 안쪽 Frame (Fill) 조합
바깥 Frame — Hug (세로)
안쪽 A — Fill (가로)
😊
안쪽 B — Fill
본문 텍스트가 길어지면
프레임이 자동으로 늘어납니다 ✨
프레임이 자동으로 늘어납니다 ✨
CtrlD 자식 요소 복제
8
실전 팁 & 단축키
| 기능 | 설명 |
|---|---|
| Clip content | 프레임 밖으로 삐져나오는 콘텐츠를 숨김 |
| Tidy up | 이미 배치된 요소들의 간격을 균등하게 정리 (오토레이아웃과 비슷하지만 다른 기능) |
| Add auto layout | 여러 요소 선택 후 Shift+A → 자동으로 프레임으로 그룹화 |
단축키 전체
ShiftA 오토레이아웃 생성
AltShiftA 해제
CtrlShiftG 프레임 부수기
CtrlAltC 속성 복사
CtrlAltV 속성 붙이기
CtrlD 자식 요소 복제
AltCtrlShiftT Tidy up
AltShiftH 가로 간격 균등
AltShiftV 세로 간격 균등
핵심 개념 요약
Fixed · Hug · Fill 세 가지 크기 모드와
Padding / Gap의 수치 조합이 Auto Layout의 핵심입니다.
여기에 Wrap과 Frame 중첩을 더하면
어떤 반응형 레이아웃도 구현할 수 있어요.