[LEVEL 1] 03 - AutoLayout

[NeoSelf1]

issue #3

03. Auto Layout

Auto Layout을 사용하는 이유와 장점은 무엇인가요?

Auto Layout은 iOS와 macOS에서 사용되는 적응형 인터페이스를 구축하기 위한 핵심 기술입니다.

UI 레이아웃방식의 변천사

1. 수동 프로그래밍 (Frame-based Layout)

• 모든 뷰의 위치와 크기를 CGRect frame으로 직접 계산하고 지정
• 화면 회전이나 크기 변경 시 모든 프레임을 수동으로 재계산

  view.frame = CGRect(x: 10, y: 10, width: 100, height: 100)

2. Autoresizing Masks (iOS 2.0)

• 상위 뷰가 리사이즈될 때 하위 뷰들이 어떻게 변할지 규칙을 지정
• flexible width, height, margins 등의 옵션으로 간단한 반응형 레이아웃 구현
• 하지만, 복잡한 레이아웃이나 뷰 간의 관계 표현이 어려움

  view.autoresizingMask = [.flexibleWidth, .flexibleHeight]

3. Auto Layout (iOS 6.0)

• 제약 조건(Constraints)을 기반으로 한 선언적 레이아웃 시스템
• 뷰 간의 관계를 수학적 방정식으로 표현
• Interface Builder를 통한 시각적 편집 지원

####Auto Layout의 장점

• 다양한 화면 크기와 방향에 대응 가능
• 국제화(다국어) 지원 용이(지역화된 콘텐츠의 크기 변화에 유연하게 대응)
• 동적 콘텐츠(텍스트 크기) 대응 가능(Dynamic Type)
• 런타임에 콘텐츠 크기가 변하는 경우 자동 조정
• 유지보수 용이성

---

제약 조건(Constraints)의 우선순위(Priority)는 어떻게 동작하나요?

우선순위는 0부터 1000 사이의 값을 가지며, Auto Layout 엔진이 제약 조건을 해결할 때 어떤 제약 조건을 우선적으로 적용할지 결정하는 기준이 됩니다.
제약 조건의 우선순위:

• 1000 (Required): 반드시 만족해야 함**(필수 제약)**
• 750 (High): 높은 우선순위
• 500 (Medium): 중간 우선순위
• 250 (Low): 낮은 우선순위

####필수제약

• 우선순위가 1000으로 설정된 제약입니다.
  = 이는 반드시 만족되어야 하며, 만족되지 못할 경우 런타임 에러가 발생합니다.

####선호제약

• 우선순위가 1~999 사이인 제약입니다.
• 시스템에서 가능한 만족시키려고 하지만, 필요 시 위반합니다.
• 충돌 발생 시, 우선순위가 높은 제약 우선적으로 만족시킵니다.

---

Intrinsic Content Size란 무엇이며, 어떻게 활용되나요?

Intrinsic Content Size는 별도로 명시하지 않아도 자동으로 적용되는 개념이며, 뷰가 자신의 콘텐츠를 기반으로 계산된 자연스러운 크기를 의미합니다.
이는 개발자가 명시적으로 크기를 지정하지 않아도 뷰가 자동으로 적절한 크기를 동적으로 결정할 수 있게 해줍니다.
다만, Intrinsic Content Size만으로는 뷰의 위치를 결정할 수 없기 때문에, 추가적인 제약 조건을 통해 뷰의 위치를 지정해줘야 합니다.

구체적인 예시

• UILabel: 텍스트의 폰트, 길이에 따라 자동으로 너비와 높이 결정
• UIImageView: 이미지의 원본 크기를 기본 크기로 사용
• UIButton: 타이틀 텍스트와 이미지의 크기에 맞춰 자동 조정
• UISwitch: 시스템에서 정의된 고정된 크기 사용
• UITextField: 폰트 크기, 패딩, 보더 스타일 등을 고려하여 높이 자동계산됨, placeholder 문구나 입력된 텍스트의 길이에 따라 너비도 자동조정되나, 일반적으로 별도 제약을 통해 너비 추가

Content Hugging과 Compression Resistance 심화

각 뷰의 Content Hugging과 Compression Resistance는 1-1000 사이의 우선순위 값을 가지며, 기본값은 보통 250입니다.

Content Hugging (줄어듦 방지)

우선순위가 높을수록 뷰는 고유 크기를 유지하려 함
기본값보다 높은 우선순위를 설정하여 뷰가 늘어나는 것을 방지

label.setContentHuggingPriority(.defaultHigh, for: .horizontal)

높은 우선순위: 뷰가 자신의 고유 크기를 최대한 유지하려 함
낮은 우선순위: 다른 뷰에 의해 확장될 가능성이 높아짐

Compression Resistance (잘림 방지)

뷰가 최소 크기 이하로 줄어드는 것을 막음
텍스트의 일부가 생략되거나 잘리는 것을 방지

textField.setContentCompressionResistancePriority(.defaultHigh, for: .horizontal)

높은 우선순위: 뷰가 최소 크기 이하로 줄어드는 것을 방지
낮은 우선순위: 다른 뷰를 위해 크기가 조정될 수 있음

---

Ambiguous Layout과 Unsatisfiable Constraints는 무엇이며, 어떻게 해결하나요?

Ambiguous Layout은 뷰의 크기 또는 위치가 명확하게 정의되지 않은 상황과 같이 제약 조건이 모호한 경우입니다. 설령, 너비와 높이만 설정하고, x,y 좌표에 대한 제약을 설정하지 않았을 경우 수평위치가 모호한 레이아웃이 됩니다.
View Debug Hierarchy에서 보라색 에러 표시로 확인할 수 있습니다.
Unsatisfiable Constraints는 서로 상충되는 제약조건이 존재하여 동시에 만족시킬 수 없는 상황을 의미합니다. 이는 너비 제약 2개가 서로 다른 값으로 설정되어 있는 상황을 예시로 들 수 있습니다.
해결방법

1. 우선순위를 조정하는 방법이 있습니다. 이의 경우, 우선순위가 높은 제약조건만 수행합니다.
2. 레이아웃 문제를 시각적으로 분석할 수 있는 Debug View Hierarchy 기능을 사용해 충돌하는 제약 조건을 식별하고 우선순위 조정하거나 변경해 해결이 가능합니다.
3. 충분한 제약 조건 추가로 해결합니다.
   Debug View Hierarchy: 제약조건 시각화, 뷰 계층 구조 탐색, 런타임에서의 프레임과 바운드까지 확인이 가능함.

[mint3382]

저희 스터디에서 말했던 것처럼 사용자 인터페이스 레이아웃 잡는 방법의 변천사와 같이 적어주세요!
수동 프로그래밍 -> Autoresizing masks -> AutoLayout

[mint3382]

필수 제약과 선호 제약에 관한 내용도 적어주세요.

[mint3382]

LGTM👍

예시에는 UITextField도 있습니다!

[mint3382]

뷰의 크기 또는 위치가 명확하게 정의되지 않은 상황으로 View Debug Hierarchy에서 보라색 에러 표시로 확인할 수 있습니다.
충분한 제약 조건 추가로 해결합니다.

[NeoSelf1]

@mint3382 님, 말씀주신 03-Auto-Layout 관련하여 피드백 반영하여 업로드 완료했습니다! 확인 후, 노티주시면 머지하도록 하겠습니다!

[mint3382]

넵 확인했습니다! 👍