🔥 오토 레이아웃 vs 컨스트레인트

✅ 오토 레이아웃이 뭔데?
피그마의 '오토 레이아웃(Auto Layout)'은 자동 정렬 + 자동 사이징 기능이 합쳐진 것.

📦 예를 들어보자.

🔸 포토샵/일러에서 버튼 만들었다고 해봅시다.
텍스트 예: “버튼”

그 뒤에 사각형 그리고 가운데 정렬하고, 여백 맞춰서 배치했죠?

👉 근데 텍스트 바꾸면 (예: "긴 텍스트 버튼")
➡️ 네모 박스 너비 다시 늘려야 하고
➡️ 가운데 정렬도 다시 해줘야 하고
➡️ 귀찮고 오류나기 쉬움.

🔸 피그마에서는?
오토 레이아웃 적용하면,
✔️ 텍스트를 바꿔도 → 박스 자동으로 늘어나
✔️ 여백도 지정해놓으면 → 항상 균일함
✔️ 가운데 정렬? 걱정 노노. 알아서 딱 됨.

🧠 한 줄 요약:

오토 레이아웃은 ‘내용에 따라 자동으로 크기와 정렬이 바뀌는 프레임’을 만드는 기능.

🔧 예시 써보자:

텍스트 하나 씀: "버튼"

그 텍스트 선택 → Shift + A 누르면 오토 레이아웃 적용됨 (기본 패딩 생김)

오른쪽 패널에서 패딩, 방향, 정렬 방식 설정 가능

텍스트 바꿔도 → 박스가 자동 반응!

📌 어디에 자주 씀?

버튼

태그

네비게이션 바

카드 UI

리스트 뷰

반복되는 컴포넌트

🔥 오토 레이아웃 vs 컨스트레인트

공통점:
→ 둘 다 "자동으로 레이아웃 반응" 하게 만드는 기능임.

차이점:

🎯 한 줄로 구분하자면:

오토 레이아웃은 내용에 반응하는 레이아웃이고,
컨스트레인트는 부모 프레임에 반응하는 위치 제어다.

🎨 직관적인 예제

오토 레이아웃:
버튼 만들 때 → 텍스트 넣고 Shift + A 누르면
➡️ 텍스트 길이 바뀌어도 버튼이 자동으로 커짐
➡️ 내부 여백(padding), 정렬(direction) 등 조정 가능

컨스트레인트:
상단에 네비게이션 바 있음
➡️ 그 안에 로고는 왼쪽에 고정
➡️ 메뉴는 오른쪽에 고정
➡️ 전체 프레임 사이즈가 바뀌어도 → 둘 다 자리 유지

(이건 Constraints: Left, Right, Top 등으로 설정해줌)

🧠 꿀팁 요약

오토 레이아웃 = 내용 바뀌면 모양도 자동 바뀜 (ex: 버튼, 리스트)

컨스트레인트 = 부모 크기 바뀌어도 자식이 그 위치에 따라감 (ex: 반응형 웹 UI)