Size Class

사이즈 클래스는 대강의 사이즈를 나타낸다. Regular, Compact로 표현. 화면의 특정 길이에 따라서 제약을 추가하거나 무력화 할 수 있다.

아이패드와 iOS를 함께 사용하는 유니버셜 앱을 만들 때 하나의 스토리 보드로 구현하는 경우, 혹은 아이패드에서 split view를 대응하는 경우에 유용하다. (보통은 아이패드는 다른 스토리보드로 작업하는 경우가 더 많다.)

제약이나 요소를 선택 한 후 + 버튼을 눌러서 확인/설정이 가능하다.

Regular와 Compact에 대한 자세한 내용은 Apple Developer Degisn - Layout페이지 하단에서 확인할 수 있다. 각각의 기기가 가로/세모 모드에서 어떤 사이즈를 갖는지 나와있다.

Safe Area & Layout Margins

Safe Area

컨텐츠를 안전하게 보여줄 수 있는 영역

기기 별로 서로다른 safe area를 가지고 있다.
기기 크기 / 홈버튼 / 홈바 / 노치 등에 따라서 잘리지 않고 안전하게 보여줄 수 있는 영역을 나타낸다.

필요에 따라 Safe Area 변경도 가능하다. 가령 앱 안에 사이드 바나 툴바를 사용한다고 하면 additionalSafeAreaInsets 프로퍼티를 수정해서 safe area를 변경할 수 있다.

Layout Margins

컨텐츠와 뷰의 경계 사이의 간격을 나타낸다. 왼쪽은 margin을 동일하게 6으로 설정한 경우, 오른쪽은 각각 다른 값으로 설정한 경우이다.

제약을 추가할 때 Constrain to margins를 체크하면 margin을 기준으로 제약을 추가할 수 있다.

기본적으로 margin의 방향은 top, bottom, left, right로 설정되어 있지만, 언어의 방향을 따라(아랍어는 오른쪽에서 왼쪽으로 읽는다) directionalLayoutMargins 프로퍼티를 사용해서 top, bottom, leading, trailing로 설정할 수 있다.

MapView를 하나 올려두고 제약을 걸어보도록 하자. 맵킷이 올라갈 부모뷰와 관계를 맺어야 하기 때문에 SafeArea가 아닌 View를 기준으로 제약을 설정해야 한다.

동일하게 제약을 걸어주었지만, 왼쪽은 Constrain to margins를 체크하지 않았고, 오른쪽은 체크했다.

View에 기본적으로 margin이 걸려있다고 볼 수 있는데 뷰를 선택하고 size inspector를 보면 Default로 margin이 설정되어 있고, Language directional을 선택하여 보면 20씩 걸려 있는 것을 확인할 수 있다.

Safe Area & Layout Margins에 대해 조금 더 알아보고 싶다면 WWDC2018 - UIKit: Apps for Every Size and Shape을 참고해봐도 좋겠다.

Reference

Auto Layout Guide - Size Class Specific Layout
Apple Developer Degisn - Layout
Apple Developer - Positioning content relative to the safe area
Apple Developer - Positioning content within layout margins
WWDC2018 - UIKit: Apps for Every Size and Shape
야곰닷넷 - 오토레이아웃 정복하기