레이아웃 규칙, 오토 레이아웃과 허그 · 필 · 픽스

 

피그마 기초 스터디로그 · 02

레이아웃 규칙
오토 레이아웃과 허그 · 필 · 픽스

1일차에서 프레임과 레이어를 배웠는데,
오늘은 그 안의 요소들을 자동으로 정리해주는 기능을 배웠어요.
이름부터 낯선 "허그·필·픽스"까지 정리해볼게요.

TODAY'S BASICS

오늘 배운 네 가지

1

오토 레이아웃

요소를 자동으로 정리해주는 기능

2

크기와 정렬

요소들의 기준선과 간격 맞추기

3

UI 요소

버튼처럼 재사용하는 조합 만들기

4

허그 · 필 · 픽스

크기가 반응하는 세 가지 방식

01 · AUTO LAYOUT

오토 레이아웃

요소를 자동으로 정리해주는 기능

오토 레이아웃을 켜면 요소들 사이 간격과 정렬을 자동으로 맞춰줘요.
하나씩 손으로 옮기지 않아도 알아서 줄이 맞아요.

적용 전 vs 후

BEFORE

A

B

C

→

AFTER (오토 레이아웃)

A

B

C

왜 중요한가

요소를 추가하거나 빼도 오토 레이아웃이 알아서 재배치해줘서, 간격을 매번 다시 맞출 필요가 없어요.

02 · SIZE & ALIGNMENT

크기와 정렬

요소들의 기준선과 간격 맞추기

오토 레이아웃 안에서 요소들을 어디 기준으로 맞출지(왼쪽·가운데·오른쪽, 위·중간·아래)를 정하는 게 정렬이에요.

정렬 예시 — 세로 중앙 정렬

 

아이콘과 텍스트가 항상 가운데 맞춰짐

왜 중요한가

정렬 기준이 없으면 요소 높이가 조금만 달라져도 삐뚤어 보이는데,
기준을 정해두면 크기가 바뀌어도 항상 깔끔하게 맞춰져요.

03 · UI ELEMENTS

UI 요소

버튼처럼 재사용하는 조합 만들기

버튼, 입력창 같은 UI 요소를 오토 레이아웃으로 만들어두면 여러 화면에서 그대로 재사용할 수 있어요.

버튼 UI 예시

더 알아보기

확인

왜 중요한가

버튼 안 글자만 바꿔도 오토 레이아웃 덕분에 버튼 크기가 자동으로 딱 맞게 조정돼요.
매번 새로 만들 필요가 없어요.

04 · HUG · FILL · FIXED

허그, 필, 픽스

크기가 반응하는 세 가지 방식

요소의 크기를 어떻게 정할지 고르는 세 가지 옵션이에요.
이걸 뭘로 고르냐에 따라 화면이 바뀔 때 요소가 다르게 반응해요.

세 가지 비교

HUG

텍스트

내용물 크기에
딱 맞게 줄어듦

FILL

 

부모 요소만큼
꽉 채움

FIXED

 

내용과 상관없이
고정된 크기

왜 중요한가

버튼 텍스트는 Hug로 글자 수에 맞게,
버튼을 감싸는 배경은 Fill로 화면 너비에 맞게 설정하는 식으로 조합해서 써요.

🧭 오늘의 정리

어제 배운 프레임과 레이어 위에, 오늘은 그 안의 요소들이 스스로 정리되는 규칙을 얹은 느낌이었어요.

오토 레이아웃 — 간격과 정렬을 자동으로 맞춰줘요

크기와 정렬 — 기준선을 정해야 깔끔하게 맞아요

UI 요소 — 버튼처럼 재사용 가능한 조합을 만들어요

허그 · 필 · 픽스 — 크기가 반응하는 방식을 골라요