REAL Swift – “Auto Layout 이해하기”
REAL Swift – “Auto Layout 이해하기”
//apple_ref/doc/uid/TP40010853-CH7-SW1 오토 레이아웃을 공부하기 위해서 한글 번역 후, 정리한 포스트입니다.
오토 레이아웃 (Auto Layout) 이란?
Auto Layout은 뷰 계층 구조에 있는 모든 뷰의 크기와 위치를 해당 뷰에 적용된 제약 조건에 따라 동적으로 계산합니다. 예를 들어, 버튼이 이미지 뷰에서 수평으로 중앙에 오도록 제한하고 버튼의 위쪽 가장자리가 항상 이미지 아래쪽에서 8포인트 아래로 유지되도록 할 수 있습니다. 이미지 뷰의 크기나 위치가 변경되면 버튼의 위치가 그에 맞게 자동으로 조정됩니다.
이러한 제약 기반 설계 접근 방식을 통해 내부 및 외부 변경 사항에 동적으로 응답하는 사용자 인터페이스를 구축할 수 있습니다.
위는 제가 만들었던 FFMI, BMI 계산기 어플리케이션입니다. 아이패드 11에서 앱을 구동했을 때는 원했던 대로 화면이 보이는데, 오른쪽의 사진을 보면 요소들의 배치 상태가 원했던 것과는 거리가 멀어 보이는 것을 볼 수 있죠. 실제로 iOS 앱을 출시했을 때에 위와 같은 상황이 벌어진다면 사용자 입장에서는 상당히 불편할 것입니다. 게다가, 아이패드에서도 위의 화면을 정상적으로 ( – 보기 편하게 혹은 일정한 규칙에 의해서) 보이게 하도록 해 주는 것이 바로 오토레이아웃(Auto Layout) 입니다.
오토 레이아웃은 외부 및 내부 변경사항에 대해서 동적으로 응답하는 사용자 인터페이스를 구축할 수 있습니다.
이제는 위의 말이 어떤 의미인지가 이해가 됩니다. 그렇다면, 외부 및 내부 변경사항이란 무엇일까요?
외부 변경사항 – External changes
슈퍼뷰의 크기나 모양이 변경되면 외부 변경이 발생합니다. 변경할 때마다 사용 가능한 공간을 최대한 활용하도록 뷰 계층 구조의 레이아웃을 업데이트해야 합니다. 다음은 외부 변경의 몇 가지 일반적인 소스입니다.
- 사용자가 창 크기를 조정합니다(OS X).
- 사용자가 iPad(iOS)에서 Split View를 시작하거나 종료합니다.
- 기기가 회전합니다(iOS).
- 활성 통화 및 오디오 녹음 표시줄이 나타나거나 사라집니다(iOS).
- 다양한 크기의 클래스를 지원하려고 합니다.
- 다양한 화면 크기를 지원하려고 합니다.
이러한 변경 사항의 대부분은 런타임에 발생할 수 있으며 앱의 동적 응답이 필요합니다. 다양한 화면 크기 지원과 같은 다른 것들은 다양한 환경에 적응하는 앱을 나타냅니다. 화면 크기는 일반적으로 런타임 시 변경되지 않지만 적응형 인터페이스를 생성하면 iPhone 4S, iPhone 6 Plus 또는 iPad에서도 앱을 똑같이 잘 실행할 수 있습니다. 자동 레이아웃은 또한 iPad에서 Slide Over 및 Split View를 지원하기 위한 핵심 구성 요소입니다.
내부 변경사항 – Internal changes
내부 변경은 사용자 인터페이스의 뷰, 혹은 컨트롤 크기가 변경될 때 발생합니다.
- 앱에서 표시하는 콘텐츠가 변경될 때
- 국제화를 지원하는 앱일 때 (언어나 문화가 다른 곳에서 사용할 수 있게끔 지원하는 것을 국제화라고 합니다.)
- 다이나믹 타입(iOS)을 지원하는 앱일 때 (다이나믹 타입 – 사용자가 원하는 글씨 크기를 제공하는 것, 예컨대 눈이 안 좋은 사용자를 위한 확대 모드)
앱의 콘텐츠가 변경되면 새 콘텐츠에 이전 콘텐츠와 다른 레이아웃이 필요할 수 있습니다. 이것은 일반적으로 텍스트나 이미지를 표시하는 앱에서 발생합니다. 예를 들어 뉴스 앱은 개별 뉴스 기사의 크기에 따라 레이아웃을 조정해야 합니다. 마찬가지로 사진 콜라주는 다양한 이미지 크기와 종횡비( – 어떤 것의 가로와 세로의 비율)를 처리해야 합니다.
Auto Layout(오토 레이아웃) VS Frame-Based Layout(프레임 기반 레이아웃)
사용자 인터페이스 레이아웃에는 세 가지 주요 접근 방식이 있습니다.
- 프로그래밍 방식(programmatically)으로 UI를 레이아웃할 수 있고
- 자동 크기 조정 마스크를 사용하여 외부 변경에 대한 일부 응답을 자동화하거나
- 오토 레이아웃을 사용할 수 있습니다.
지금까지, 앱은 뷰 계층 구조의 각 뷰에 대한 프레임을 프로그래밍 방식으로 설정하여 UI를 배치했습니다. 슈퍼 뷰의 좌표계에서 뷰의 원점, 높이, 너비를 모두 정의하는 것입니다. 아래의 그림이 그것을 잘 나타내 줍니다.
슈퍼 뷰의 좌표에서, 너비는 어떻게… 높이는 어떻게… 등등을 모두 정해주는 것이 프로그래밍 방식의 레이아웃 방법입니다.
UI를 배치하려면 뷰 계층 구조의 모든 뷰에 대한 크기와 위치를 계산해야 했습니다. 그런 다음 변경 사항이 발생하면 영향을 받는 모든 보기에 대한 프레임을 다시 계산해야 했습니다. 예를 들면, 위에서 설명했던 경우와 같이 아이폰11에 최적화되어있는 어플리케이션을 아이패드에서 실행하는 경우입니다. 이러한 경우 프로그래머는 아이패드, 아이폰 등 모든 경우에 대한 경우를 계산하고 업데이트 해 주어야 합니다. 앞으로 새로운 기기가 출시되면, 그것에 대해서도 계산을 해 주어야 합니다.
여러 면에서 뷰의 프레임을 프로그래밍 방식으로 정의하면 가장 유연하고 강력한 기능을 제공합니다. 말 그대로 프로그래머가 원하는 그대로 UI를 만들 수 있으니까요. 하지만, 위에서 설명했듯이 새로운 기기가 출시되는 등의 변화가 생기면 그것에 모두 대응해야 하기 때문에, 설계, 디버그 및 유지 관리에 상당한 노력이 필요합니다. 진정한 적응형 UI를 만들기 위해서는, 난이도가 몇 배나 증가합니다.
autoresizing masks를 사용하여 이러한 노력을 완화할 수 있습니다. 그것은, 수퍼 뷰의 프레임이 변경될 때 뷰의 프레임이 변경되는 방식을 정의합니다. 이것은 외부 변화에 적응하는 레이아웃 생성을 단순화합니다.
그러나 autoresizing masks는 가능한 레이아웃의 비교적 작은 하위 집합을 지원합니다. 복잡한 사용자 인터페이스의 경우 일반적으로 고유한 프로그래밍 방식 변경으로 autoresizing masks를 보강해야 합니다. 또한 autoresizing masks는 외부 변경 사항에만 적용됩니다. 내부 변경을 지원하지 않습니다.
정리하자면, autoresizing masks 는 맨 처음의 프로그래밍 방식(programmatically)의 고생을 약간 덜 수 있다는 것입니다. 다만, 외부 변경 사항만 적용되는 등 프로그래밍 방식의 보강 버전 – 이라고 이해하면 좋을 것 같습니다.
위의 방법들과 차별화된 , Auto Layout – 오토 레이아웃 방식
autoresizing masks 는 프로그래밍 방식 레이아웃의 반복적인 개선에 불과하지만 오토 레이아웃은 완전히 새로운 패러다임을 나타냅니다. 뷰의 프레임에 대해 생각하는 대신, 뷰의 관계에 대해 생각합니다.
위의 사진을 보면 뷰의 프레임 ( – 너비는 어떻게.. 높이는 어떻게… 얼마나 떨어져 있는지..)에 대해가 아니라, 뷰를 이루는 각 요소들의 관계에 대해서 UI를 배치하고 있습니다.
오토 레이아웃은 일련의 제약 조건을 사용하여 UI를 정의합니다. 제약 조건은 일반적으로 두 보기 간의 관계를 나타냅니다. 그런 다음 자동 레이아웃은 이러한 제약 조건을 기반으로 각 보기의 크기와 위치를 계산합니다. 이렇게 하면 내부 및 외부 변경 사항에 동적으로 응답하는 레이아웃이 생성됩니다.
정리하자면, 오토 레이아웃은 뷰를 이루고 있는 요소들 (버튼, 이미지 뷰 등..)의 관계를 중심으로 UI를 배치한다는 것입니다. 예컨대 “이 버튼을 뷰의 정가운데에 배치하라” 와 같이 오토 레이아웃을 정의한다면 그 어플리케이션을 돌리는 기기가 아이폰이던, 아이패드이던 똑같이 정가운데에 배치될 것입니다.