[iOS Programming] 4. 오토레이아웃(autoLayout)

오토레이아웃은 여러 아이폰 및 아이패드 등 다양한 기기-다양한 화면 크기에서도 UI를 안정적으로 일관되게 구성할 수 있도록 해주는 핵심 기능이다. 특히 다양한 디바이스가 존재하고 사용자의 인터페이스 사용 방식이 복잡해진 현재의 모바일 환경에서는 오토레이아웃의 역할이 매우 중요하다.

 

---

⬛️ 오토레이아웃의 필요성

하나의 iOS 앱은 iPhone SE처럼 작은 화면부터 iPad Pro와 같은 대형 화면까지 다양한 디바이스에서 실행된다. 또한, 모바일 환경은 가로/세로 회전과 분할 화면 등 다양한 환경 변화가 빈번히 일어나기에 이에 잘 대응해야한다. 각각의 화면에서 UI가 적절하게 보여지기 위해서는 레이아웃이 유연하게 대응할 수 있어야 하며, 이를 위해 등장한 것이 오토레이아웃이다. 

 

오토레이아웃 이전에는 오토리사이징이 존재했지만, iOS 6 이후 오토레이아웃을 사용하면서 오토리사이징은 잘 사용하지 않는다. 

오토레이아웃과 오토리사이징을 동시에 적용할 수도 있다.

 

🔹 오토리사이징(autoResizing)

• 예전 방식으로, 슈퍼뷰 크기에 따라 하위 뷰의 크기나 위치를 자동 조정하는 방식
• 고정 여백 설정과 비례 크기 조절이 가능하지만, 복잡한 UI에는 적합하지 않음
• iOS 6 이후 오토레이아웃이 도입되면서 점차 사용 빈도가 줄어들고 있음

🔹 오토레이아웃(autoLayout)

• 뷰 간의 상대적인 제약조건(Constraints)을 통해 동적으로 레이아웃을 구성하는 방식
• 다양한 화면 크기, 방향, 디바이스에 대응 가능한 반응형 UI를 만들 수 있음
• Auto Layout은 인터페이스 빌더와 코드 양쪽에서 모두 적용 가능하며, 더욱 정밀한 UI 제어가 가능

---

⬛️  오토레이아웃의 핵심 개념

하나의 View에 대하여 어떠한 화면의 크기에 대해서도 좌측상단좌표(left, height)와 크기(width, height)를 계산할 수 있으면 Satisfiable layout이라고 하는데, 화면상의 모든 View가 Satisfiable layout이면 이 화면은 오토레이아웃을 만족하게된다.

즉, View의 크기(너비, 높이)와 이웃 View와 간격으로 Satisfiable Layout를 이루는 것을 오토레이아웃.

이때의 이웃은 가장 가까운 이웃(Default)을 말하는데 가까운 이웃이 없는 경우는 부모 뷰를 이웃으로 본다. 

 

🔹 주요 용어 및 속성

• leading / trailing / left / right: 오토레이아웃의 정의에 필요한 속성이자 UI의 방향성과 관련된 개념이다.                                    중동국가에서는 leading = right, trailing = left 이고 그 외 국가에서는 leading = left, trailing = right 이다.  즉, 그 외 국가에 속하는 우리나라의 경우엔 leading속성은 뷰의 왼쪽을 뜻하고 trailing은 뷰의 오른쪽을 뜻한다.
• Safe Area: iOS 11 이후 도입된 개념으로, 상태바, 네비게이션 바, 홈 인디케이터 등 시스템 UI 요소를 침범하지 않도록 제한된 뷰 영역을 말한다. Apple이 safe area 밖에 View를 배치하지 말 것 을 권고하면서 나온 영역으로, 앱의 가장 중요한 디폴트 영역인 상단 탑바나 하단바 등등 주요 영역에 사용자 지정 뷰들이 침범하지않도록 만들어둔 공간이다. 사용자 지정 뷰들은 이 Safe Area안에서만 존재하게된다.

 

🔹 제약조건과 여백 계산 (Constraints & Spacing)

오토레이아웃에서 레이아웃을 결정짓는 가장 중요한 구성요소는 제약조건(Constraints)이다. 이 제약조건을 통해 뷰 간의 상대적 관계를 정의하게 되며, 여백(margin)이나 크기(size), 위치(position) 등을 세밀하게 제어할 수 있다.

 

오토레이아웃에서 Constraint(제약조건)은 단순히 뷰의 위치나 크기를 정하는 것 이상으로, 뷰 간의 관계를 수식 형태로 정확하게 표현하는 도구이다. 이 제약조건을 통해 여백(margin), 상대적 위치, 크기 비율까지 모두 조정할 수 있다.

오토레이아웃에서의 제약 조건은 다음과 같은 수학적 표현으로 구성된다.

item1.attribute1 = multiplier × item2.attribute2 + constant

 

📌 제약조건 예시: 두 뷰 사이 여백 설정

RedView.leading = 1.0 × BlueView.trailing + 8.0

 

이 수식은 RedView의 leading(왼쪽) 위치가 BlueView의 trailing(오른쪽) 위치보다 8pt 만큼 오른쪽에 있다는 의미이다.

즉, 두 뷰 사이의 수평 여백이 8pt가 되도록 제약이 설정된 것이다.

RedView	제약을 적용할 뷰 (Item 1)
.leading	적용할 속성 (Attribute 1)
1.0	배수 계수 (Multiplier)
BlueView	기준이 되는 뷰 (Item 2)
.trailing	기준 뷰의 속성 (Attribute 2)
+8.0	고정 여백 값 (Constant)

이런 방식으로 뷰 사이 간격, 위치 정렬, 비율 설정 등을 세밀하게 지정할 수 있다.

---

⬛️  오토레이아웃 도구 소개 (Xcode Interface Builder 기준)

1) Align Tool

• 여러 뷰를 수평 또는 수직 방향으로 정렬할 때 사용
• 정렬 축과 기준 뷰를 설정하여 간단하게 레이아웃을 맞출 수 있음
• 원하는 뷰들을 선택하고 Align Tool을 클릭
• 아래와 같은 팝업에서 적절한 제약조건을 선택 후 더함

 

2) Pin Tool (Add New Constraints)

• 뷰의 여백, 고정된 너비/높이, 비율 제약 등을 설정할 수 있는 도구
• Pin tool은 뷰의 상대적 위치와 크기에 대한 제약 조건을 적용
• 설정 후 빨간 점선으로 표시된 제약은 아직 완전히 적용되지 않은 상태이며, Update Frames나 Resolve Auto Layout Issues를 통해 반영해야 한다.

 

3) Resolve Auto Layout Issues

• 제약조건 충돌, 누락, 불완전 적용 등의 문제를 해결하는 데 사용
• 일반적인 자동 레이아웃 문제를 해결하기위한 여러 가지 옵션을 제공 
• 상단은 현재 선택된 뷰, 아래쪽 옵션은 모든 뷰에 영향
• 주요 기능:
  • Clear Constraints: 해당 제약조건을 모두 지움, 모든 제약조건을 제거
  • Add Missing Constraints: 필수 제약조건을 자동으로 추가, 추가적으로 제약 조건들을 자동으로 생성
  • Reset to Suggested Constraints: 현재 적용된 제약 조건들을 지우고 필요한 제약 조건들을 자동으로 생성하는 옵션, Xcode가 제안하는 기본 제약조건으로 재설정
  • Update Constraint Constants: 현재의 Constraint에서 UIView의 이동후 이 동값에 대한 상수를 적용하고자 하는 경우,뷰의 현재 위치와 크기에 맞춰 상수 값 업데이트

---

⬛️  상대적 콘텐츠 크기 제어

🔹 콘텐츠(뷰 객체) 크기

: 뷰 객체의 너비와 높이

• 원칙적으로는 Constraint를 적용하여 크기를 설정하여야 함
• 일부 뷰 객체는 디폴트로 크기가 정해지는 것도 있음

🔹 고유 콘텐츠 크기 (Intrinsic Content Size)

: 뷰 객체가 표시할 내용을 기반으로 뷰의 크기가 어느 정도될 지에 대한 정보

• 라벨의 고유 콘텐츠 크기는 표시할 텍스트 크기에 기반을 둔다
• 이미지 뷰의 고유 콘텐츠 크기는 직접 선택한 이미지 크기이다
• UILabel, UIButton, UIImageView 등은 콘텐츠 자체의 크기를 기준으로 기본 크기를 결정한다
• 예: UILabel은 텍스트 길이에 따라, UIImageView는 이미지의 원본 해상도에 따라 intrinsic size가 달라진다

🔹 상대적 콘텐츠 크기

• 여러 개의 뷰 객체가 동시에 크기가 변경되어야 하는 경우 콘텐츠의 크기
• 각 뷰 객체는 크기 변경에 대한 우선 순위가 있어 이에 따라 크기가 변경됨

---

⬛️  콘텐츠 크기의 우선 순위

🔹 허깅 우선순위 (Hugging Priority)

• 뷰가 "지금보다 더 커지지 않으려는 정도"를 의미
• 늘어나기 싫어하는 우선순위 (낮으면 잘 늘어난다, 고무밴드와 같다)
• 크기에 대한 설정이 없는 뷰 객체는 가장 낮은 우선 순위를 갖는다
• 우선순위 값이 높을수록 늘어나기 싫어하므로 뷰는 현재 크기를 유지하려고 하며, 다른 뷰가 확장되도록 유도

🔹 압축 저항 우선순위 (Compression Resistance Priority)

• 뷰가 "지금보다 작아지지 않으려는 정도"를 의미
• 줄어들기 싫어하는 우선순위 (낮으면 잘 줄어든다, 스프링과 같다)
• 크기에 대한 설정이 없는 뷰 객체는 가장 낮은 우선 순위를 갖는다
• 이 값이 높을수록 크기압축에 더욱 저항하므로 뷰는 크기가 줄어드는 것을 거부하고, 대신 다른 뷰가 줄어들게 됨

 

---

⬛️  Stack View

제약조건 없이도 간단한 레이아웃을 잡을 수 있는 방법이 있다. 바로 UIStackView를 활용하는 것이다.

📌 StackView란?

StackView는 여러 뷰들을 일렬로 정렬하고 자동으로 간격과 정렬을 조절해주는 컨테이너 뷰이다.

복잡한 제약 없이도 기본적인 레이아웃을 빠르게 잡을 수 있어서 자주 사용된다.

스택 뷰는 복잡한 제약 조건을 도입하지 않고도 자동 레이아웃의 기능을 쉽게 활용할 수있는 방법을 제공해주는 유용한 도구인 것이다. 

안드로이드의 LinearLayout과 유사하다

 

✅ StackView의 주요 속성

axis (UIStackView only)	오리엔테이션 지정: 정렬 방향 (horizontal 또는 vertical)
alignment	오리엔테이션의 수직 방향에서 자식 뷰들의 위치-정렬방식 지정
distribution	자식 뷰들을 오리엔테이션 방향에 따라 분배 방법 지정, 공간 분배 방식 (fill, fillEqually 등)
spacing	distribution에서 자식 뷰들 사이의 간격, 자식 뷰 간의 간격

 

 

---

⬛️  StackView 실습: 로그인 화면 만들기

로그인화면 구성도

 

✔︎ 1단계: 기본 구성

1. UILabel(Login ID), UITextField, UILabel(Password), UITextField, UIButton(OK)를 스토리보드 뷰컨트롤러의 적절한 위치에 놓기
2. Login ID, UITextField 두 컴포넌트를 나란히 배치하고 동시에 선택하여 Editor > Embed In > StackView를 적용 -> 이러면 라벨과 텍스트필드가 하나의 스택뷰 컨테이너에 포함되어짐
3. StackView의 배경색을 노란색으로 설정
4. 위 과정과 마찬가지로 Password, UITextField를 동시에 선택한 후 StackView를 적용 & StackView 배경색을 노란색으로 변경
5. 위 1~4 과정을통해 만들어진 두 개의 StackView와 OK버턴을 동시에 선택한 후 이들에 대하여 또하나의 StackView를 적용 -> 이러면 2개의 스택뷰와 하나의 버튼 컴포넌트를 포함하고있는 하나의 스택뷰가 존재할 것이다. 이 최상위 스택뷰의 배경색을 파란색으로 설정해주어 색으로 구분해주자.

 

✔︎ 2단계: 바깥 최상위 StackView에 속성 적용

• Alignment: Fill
• Distribution: Fill
• Spacing: 10
• Constraint 설정: Add New Constraints(Pin Tool)에서 좌우 여백 20으로 설정, Align Tool에서 수직 & 수평 중앙 정렬(Horizontally&Vertically in Container값 0으로 설정)

이처럼 스택뷰를 통해 이전처럼 복잡한 제약 조건을 도입하지 않고도 자동 레이아웃의 기능을 쉽게 활용할 수 있어, 훨씬 간단하게 구조를 잡을 수 있다

 

✔︎ 3단계: 내부 2개의 StackView에 각각 속성 적용

• Alignment: Fill
• Distribution: Fill
• Spacing: 10

1.  

 

✔︎ 4단계: Login ID와 Password 라벨 너비를 동일한 크기로 정렬

Login ID를 Ctrl+Drag -> Password에서 Drop

 

 

 

✅ 결과 화면

 

 

---

마무리

오토레이아웃은 단순한 레이아웃 도구를 넘어서, 다양한 화면 환경에 최적화된 유연하고 반응형 UI를 구성할 수 있게 해주는 핵심 기술이다.

제약조건과 우선순위를 적절히 조합하고, 다양한 실습을 통해서 이 autoLayout을 어떻게 적용할 수 있는지 잘 익혀두는 것이 중요할 것 같다.