[Day 58] AutoLayout의 심화!!

😵 equalTo 다음이 왜 이렇게 어려웠을까

SnapKit으로 AutoLayout을 쓰다 보면
처음엔 equalTo가 제일 편하다.

$0.height.equalTo(100)

딱 떨어지고, 눈으로 봐도 이해가 쉽다.

근데 UI가 조금만 복잡해지면 이런 순간이 온다.

• 텍스트가 늘어날 수도 있고
• 기기 크기가 달라질 수도 있고
• 특정 상황에서는 커져도 되고, 작아져도 된다

이때 등장하는 게 바로

• lessThanOrEqualTo
• greaterThanOrEqualTo

그리고 이 친구들과 항상 같이 다니는 개념이 있다.

👉 priority, Hugging, Compression Resistance

🧩 lessThanOrEqualTo / greaterThanOrEqualTo는 “조건”이다

equalTo는 정답이고, less / greater는 조건이다.

equalTo

$0.height.equalTo(100)

무조건 100 이어야 한다!!

lessThanOrEqualTo

$0.height.lessThanOrEqualTo(100)

100 이하여야 한다 (작아지는건 괜찮다!)

greaterThanOrEqualTo

greaterThanOrEqualTo

100 이상은 돼야 한다 (커지는 건 괜찮다!)

❗ 여기서 중요한 점은 less / greater는 허용 범위를 말하는 제약이다.

🔍 언제 less / greater가 필요한가

최대 크기를 제한하고 싶을 때나, 최소 크기를 보장하고 싶을 때 사용을 한다.

최대 크기를 제한하고 싶을 때

$0.height.lessThanOrEqualTo(200)

콘텐츠가 적으면 작아지고 콘텐츠가 많아져도 200 까지만 허용하는! 위 코드는 최대 높이를 제한하는 것이다.

최소 크기를 보장하고 싶을 때

$0.height.greaterThanOrEqualTo(44)

위 코드는 버튼, 터치 영역, 최소 가독성 보장할 때 최소 높이를 보장하는 것이다.

🔥 equalTo + less / greater는 같이 써야 진짜 의미가 생겨요!

AutoLayout 심화의 핵심은 “고정 + 여지”를 같이 주는 것이다.

기본값 + 최대값

$0.height.equalTo(100)
$0.height.lessThanOrEqualTo(200)

위 코드는 보통은 100 그런데 어쩔 수 없으면 200 까지는 괜찮아! 라는 의미에요

기본값 + 최소값

$0.height.equalTo(100)
$0.height.greaterThanOrEqualTo(60)

위 코드는 보통은 100인데 줄어들어도 60 밑으로는 안돼! 라는 의미에요!

priority — AutoLayout의 협상 도구

여기서 priority가 등장한다.

$0.height.equalTo(100).priority(.high)
$0.height.lessThanOrEqualTo(200)

위 코드는 이렇게 읽어야 한다

1. 100이 가장 이상적
2. 안 되면?
3. 200까지는 양보 가능

equalTo는 희망사항, less / greater는 안전망

이라고 생각하면 된다!

priority 한 줄 정리 | priority | 의미 | |—|—| | .required (1000) | 절대 지켜야 함 | | .high (750) | 웬만하면 지켜라 | | .low (250) | 상황 봐서 양보 가능 |

🧠 Hugging & Compression Resistance는 “성향”이다

이제 진짜 헷갈리는 친구들.

Content Hugging Priority

“나 늘어나기 싫어”

• 높을수록 → 본래 크기 유지
• 낮을수록 → 늘어나기 쉬움

Compression Resistance Priority

“나 눌리기 싫어”

• 높을수록 → 줄어들기 싫어함
• 낮을수록 → 먼저 줄어듦

📦 예제로 이해해볼까?

Label이 두 개 나란히 있을 때

titleLabel.setContentHuggingPriority(.high, for: .horizontal)
valueLabel.setContentHuggingPriority(.low, for: .horizontal)

• titleLabel: 나 크기 유지할래!!
• valueLabel: 내가 늘어날게~

titleLabel.setContentCompressionResistancePriority(.high, for: .horizontal)
valueLabel.setContentCompressionResistancePriority(.low, for: .horizontal)

• titleLabel: “나 줄어들기 싫어”
• valueLabel: “내가 먼저 줄어들게”

개념 정리

개념	역할
equalTo	고정 값
lessThanOrEqualTo	최대값
greaterThanOrEqualTo	최소값
priority	어떤 제약을 우선할지
Hugging	늘어나기 싫은 정도
Compression	눌리기 싫은 정도

🐾 오늘의 마무리: 춘식이의 개발 일기

이걸 이해하니 레이아웃이 “계산”이 아니라 대화처럼 느껴지기 시작했다.

오늘도 오류 내며 자란 춘식이였습니다. 🐾
더 열심히 해서 좋은 iOS Developer가 되자!

혹시 이 글을 우연히 보게 되신 분이 있다면, 더 잘 만들 수 있는 팁이나 피드백은 언제든 환영입니다 :)