[iOS/UIKit] Storyboard를 이용한 Auto Layout

 

 

AutoLayout은 UIKit에서 UI를 구성할 때 기본적이면서 제일 중요한 핵심적인 지식이다.

AutoLayout이 무엇인지, 왜 필요한지 알아보자!

 

 

💡 Auto Layout이란? 

오토레이아웃은 constraint를 사용해서 뷰의 크기, 위치, 간격등을 정의하여 크기가 바뀌거나 방향이 바뀔 때에도 설정한 제약을 만족시키도록 레이아웃이 자동으로 배치된다.

 

공식문서에서도 화면의 크기와 위치를 Constraints를 통해 동적으로 계산한다고 설명되어 있다.

 

즉 frame처럼 고정된 너비를 사용하는게 아니라 safeArea나 다른 객체로부터(Image, Label, StackView... 등등) 상대적으로 제약을 줘서 사용하도록 하는 것이다!

 

SwiftUI로 따지면 가로 영역의 너비에 padding값을 주고 .frame(width: .infinity)를 줘서 일정한 패딩값 이외의 너비를 꽉 채우도록 지정하게끔 하는 방식과 동일한 거 같다.

 

 

오토레이아웃을 적용하면 Constraints로 내가 설정한 제약조건을 확인할 수 있다.

 

 

 

❓왜 오토레이아웃이 중요할까?

오토레이아웃 적용하지 않고 만든 뷰의 모습

iOS 15Pro 기준

 

사용자의 기본정보를 보여주는 프로필 뷰가 있다고 가정하고 뷰를 만들어 보았다.

 

해당 뷰는 15pro를 기준으로 했을 때 오토레이아웃을 적용하지 않은 뷰이다. 이렇게만 봤을 땐 왜 오토레이아웃이 중요한지 잘 모를 수도 있다. 스토리 보드를 사용하지 않더라도 코드로 frame이나 offset값을 줘서 지정해 줄 수 있기 때문이다.

 

하지만 사용자의 기기가 모두 15pro일수는 없기 때문에 다른 기기의 비율에 맞춰 자동으로 레이아웃을 잡아주는 과정이 필요하다!

(SwiftUI는 동적이라 자동으로 해주는데,,,)

 

 

iOS 15pro max 기준

 

위 코드는 같은 UI를 15pro max로 확인해 볼 결과다. 오토레이아웃을 설정하지 않았기 때문에 15 pro에 맞춰진 frame 값이 적용되고 있는 걸 확인할 수 있었다.

 

frame은 고정된 값을 가지기 때문에 width: 150, height: 150값을150 값을 주게 되면 어떤 경우에서도 항상 150 값을 유지하게 된다.

하지만 앞서 말했듯 개발할 때 한 기기에 대해서만 개발을 하지는 않는다.

 

여러기기에 대한 대응이 필요하기 때문에 UIKit으로 UI를 개발할 때 오토레이아웃은 필수적이다.

 

 

오토레이아웃을 적용한 뷰의 모습

 

 

오토레이아웃을 뷰에 적용하면 이렇게 Constraints로 고정된 부분을 적용한 것이 보인다.

 

그리고 기기를 iOS15 pro max로 변경하거나 아이패드로 변경해서 확인해도 오토레이아웃을 적용한 너비만큼 적용되기 때문에 기기가 변경되어 레이아웃이 깨지는 일이 없다.

 

 

💡 Safe Area 

 

아이폰 x가 출시되면서 홈화면이 사라지고 노치가 생기게 되었다. 그래서 원래 배터리, 시간등을 표시하던 부분이 노치영역과 맞물리게 되면서 안전영역에 대한 개념이 생겨나게 되었다.

 

 

 

애플 공식홈페이지에서도 확인해 보면 safe area layout에 대한 개념이 iOS 11부터 적용되고 있다.

즉 이전 디스플레이에서는 신경쓸 필요가 없었던 노치 영역에 대한 대응을 하기 위해 생겨난 것이 안전영역이다!

 

이 사전지식을 이해하고 safe area가 무엇인지 다시 살펴보면 이해가 더 잘 갈 것이다.

safe Area는 화면의 상단영역이나 하단영역(노치나, 스테이터스바, 홈바 등)에 의해 가려지지 않도록 보장된 공간이다.

 

 

 

아이폰 15에서 보면 다이나믹 아일랜드랑 홈바가 있는 영역을 제외한 곳이 safe Area영역임을 확인할 수 있다!

 

그래서 AutoLayout을 safe Area에 맞게 배치되도록 Constraints를 설정하면 Safe Area가 기기마다 다르게 적용되더라도 자동으로 맞춰주기 때문에 같이 적용돼야 한다!

 

XCode9부터는 ViewController를 생성할 때 자동으로 safe Area가 설정되어 있기 때문에 따로 설정해주지 않아도 된다

 

 

---

 

🥊 개발도중 마주친 오류사항

1. 레이아웃 오류

 

이 빨간색이 의미하는 게 뭐지 했다가 다 오류라는 걸 알게 되었다. 빨간색 점 같은 걸 누르면 잘못 설정된 Constraints에 대해서 수정하거나 삭제할 수 있게끔 할 수 있다.

 

우선 나의 경우는 leading값이나, trailing값에 제약조건이 이미 설정이 되어 있는데, 또 다른 값으로 설정을 하려 해서 발생된 문제였다.

예를 들어 trailing값을 114로 오토레이아웃을 걸어뒀는데 117로 설정된 오토레이아웃이 또 있었던 것!

그럼 당연히 오류가 날 수밖에 없다 ㅎㅎ,,

 

어찌어찌 중복된 걸 줄이고, 값을 설정해 줬는데 아래와 같이 2번 safeArea가 화면 밖에 위치해 있는 문제가 발생했다.

 

2. SafeArea가 화면 밖에 위치해 있음

 

 

safe area가 잘못 설정되어 있는 경우 중 대부분이 Constraints가 잘못 설정되어 있는 경우였다.

나의 경우도 마찬가지였다. safe Area를 확인해 보면 원하지 않는 오른쪽 영역이 포함되어 있었다.

 

left, right값이 0으로 설정되어야 safe area가 고정된 위치가 생성되는데 나의 경우는 trailing 값을 40만큼 더 주었기 때문에 오른쪽 영역에서 40만큼이나 safe area가 벗어나게 된 것이었다.

 

 

📍 해결방법

 

trailing값이 지정된 범위를 벗어나게 설정되어 있었기 때문에 위와 같이 safeArea가 범위를 벗어나게 위치한 것이므로 trailing값을 0으로 줘서 모두 수정해 주었더니 safe area가 기기 내에 잘 위치해 있는 것을 볼 수 있다!

 

잘 적용된 모습

 

 

 

마무리

오토레이아웃을 그리는 방법 중에 코드로 구현하는 방법도 있고 스토리보드로 구현하는 방법도 존재한다.

나는 그중에 스토리보드로 구현하는 방법을 시도해 보았는데, 이제껏 swiftUI로 개발하다가 스토리보드를 만지니 시간도 오래 걸리고 마음대로 뷰 배치가 되지 않아 짜증이 났다,,

 

swiftUI는 stack이 쌓이는 개념이라 기기간 비율에 의해 동적으로 뷰가 변경되기 때문에 따로 오토레이아웃을 설정해주지 않아도 돼서

view를 생성하는 데에 큰 어려움이 없었다.

 

근데 스토리보드 만지다가 15 pro로 보면 괜찮은데 15 promax로 보면 레이아웃이 다 깨져있고 아주 환장이였다.

오히려 코드로 구현하는 게 더 빠를 거 같았다. 그래서 UI구성할 때 스토리보드보다 코드로 레이아웃 구성하는 분들이 더 많은 이유가 아닐지,,,

(아무튼 UI개발하는 데에는 SwiftUI가 참 좋은 거 같다 ㅎㅎ)

 

---

참고

https://developer.apple.com/documentation/uikit/uiview/2891102-safearealayoutguide

https://babbab2.tistory.com/134

https://babbab2.tistory.com/133?category=932180