팀 프로젝트와 개인 프로젝트를 하며 마음에 걸렸던 기능이 있었다.
AutoLayout에 대해 이해해보고 싶은 마음이 커졌는데,
도대체 어떤 원리로 AutoLayout이 작동하는 걸까?
더불어 SnapKit를 모두 권하는데, 단지 편의성 때문에 사용을 하기에는 뭔가 아쉬웠다.
그래서 AutoLayout을 조금씩 파기 시작했다!

---

AutoLayout

오토 레이아웃은 뷰 계층에 존재하는 뷰의 사이즈와 위치를 동적으로 계산/조절하는 기능! [링크]
더 쉽게 말하면, 오토 레이아웃 덕분에 화면의 UI가 알아서 조절이 되다고 이해하면 되겠다.
오토 레이아웃을 포함해 UI를 그리는 방법은 3가지라 찾았는데, 하나씩 정리해 보고자 한다.

A. FrameBased Layout

단일 기종 사이즈를 활용해서 UI의 위치를 잡는 방법
위 이미지에서 볼 수 있듯, UIComponent의 frame에 값을 주는 방식이다!
UIComponent별로 frame 값을 제공하여 특정 위치에 배치 될 수 있도록 하는 형식인 셈

• Pros
  1. 값을 명확하게 제공해야 하기에 기종에 맞는 UI를 완벽하게 구성할 수 있다.

• Cons
  1. 다기종 스크린을 지원하지 않음
  2. orientation이 바뀌면 view의 크기가 조절되지 않음
  3. 무엇보다 엄청 귀찮겠다 !

위처럼 일일히 모든 View의 값을 지정해줘야 하다보니 문제가 많이 발생했다고 한다.
만일 데이터의 변화(길이 등)나 기타 인터페이스에 변화가 생기면 모든 View의 frame 값을 재계산해야한다.

개발자의 의도대로 모든 view의 위치를 잡을 수 있어 여러모로 유연하다고 볼 수 있으나,
실제 사용할 때는 테스트 기간을 정말 오래 두고 봐야하는 문제가 있다.

따라서 이를 개선하고자 autoresizingMask라는게 사용되었다고 한다!

AutoResizingMask는 view의 frame이 superView frame에 따라 함께 변경되는 구조.
예를 들어 핸드폰의 방향이 portrait, landscape으로 바뀌었을 때 view의 frame이 맞춰 변경되는 형식!
단, 휴대폰의 움직임, 전화나 알림이 오는 등 외부 자극에만 값이 바뀌고
앱 내 콘텐츠 길이의 변화, 동적 콘텐츠 지원 같은 내부 변화에는 영향이 없다고 한다.

콘텐츠 변화에 대해 선택적으로 (외부만 🙆🏻‍♂️, 내부는 🙅🏻‍♂️) 대응하는 부분을 보면,
상황에 따라 다르겠으나 Frame으로 값을 지정하는 방식은 그다지 선호되지 않겠다는 생각이 든다.

---

B. Size Class

Frame Based Layout을 개선한 방식으로 size만으로 규격을 잡는 형식 [참고 링크]

• 스크린의 크기나 방향(orientation)을 신경쓰지 않고, 알아서 size 하나로 모든 컴포넌트의 위치를 정리하는 방법!
• compact, regular 라는 값을 활용해서 스크린의 width와 height를 지정.
  애매하지만 어떤 방향이던 - 긴 방향이 regular, 짧은 방향이 compact를 담당.

위 내용만 보면 size도 상당히 쉬워보이지만, 실질적으로 사용이 되지 않는다고 한다!
Size를 사용하면 기기별 대응은 가능하지만 여전히 문제점이 있다고 하는데, 한번 깊게 알아봐야겠다.

---

C. AutoLayout

오토 레아아웃은 프레임 레이아웃처럼 값을 지정하는 형식이 아닌 View끼리의 관계
다른 말로 '너와 나의 거리가 얼마나 먼지'를 기준으로 frame을 잡는다고 이해하면 되겠다.

• 현재 Swift에서 사용되는 방식
• 제약(constraint과 anchor)을 통해 각 컴포넌트간의 관계를 지정하여 배치
  
  

다양한 제약들이 존재하는데 잠깐 배운 걸 소개하면 -

Positioning Anchor

• 흔히 사용하는 topAnchor, bottomAnchor, leadingAnchor, TrailingAnchor

Sizing Anchor

• 높이와 넓이를 담당하는 width, heightAnchor가 여기에.

Alignment Anchor

• 배치, 정렬을 담당하는 CenterXAnchor, CenterYAnchor이 해당 anchor에 포함되어 있다.

이외에 baseLineAnchor 등 다양한 제약들이 존재하며 내가 설정하고자 하는 View와의 관계를 맺어 간격을 둘 수 있다.