[번역] 오토레이아웃 이해하기(Understanding Auto Layout)

작성일 : 2023-04-18

개요

해당 문서는 학습 목적으로 Apple 공식 문서인 🔗 Auto Layout Guide을 번역한 글입니다. 다소 오역이 있을 수 있어 잘못된 내용이 있을 수 있습니다. 문제가 되거나 오류가 있다면 댓글 부탁드립니다.

오토레이아웃(Auto Layout) 이해하기

Auto Layout은 뷰 계층 구조에 있는 모든 뷰의 크기와 위치를 해당 뷰에 적용된 제약 조건(Constraints)을 기반으로 동적으로 계산합니다. 예를 들어, 버튼이 image view의 수평 중앙(horizontal center)에 배치되도록 제약을 추가할 수 있고, 버튼의 위쪽 가장자리가 항상 Image 아래쪽에서 8포인트 아래에 있도록 할 수 있습니다. Image view의 크기나 위치가 변경되면 버튼의 위치도 그에 맞게 자동으로 조정됩니다.

설계에 대한 이러한 제약 기반 접근 방식(constraint-based approach)을 통해 내부 및 외부 변경 모두에 동적으로 응답하는 사용자 인터페이스를 구축할 수 있습니다.

외부 변경(External Changes)

super view의 크기나 모양이 변경되면 외부 변경이 발생합니다. 변경할 때마다 사용 가능한 공간을 최대한 활용하기 위해 뷰 계층 구조의 레이아웃을 업데이트해야 합니다. 다음은 외부 변화의 일반적인 원인입니다.

사용자가 창 크기를 조정합니다(OS X).
사용자가 iPad(iOS)에서 Split View를 시작하거나 종료합니다.
기기가 회전합니다(iOS).
활성 통화 및 오디오 녹음 막대가 나타나거나 사라집니다(iOS).
다양한 크기의 클래스를 지원하려고 합니다.
다양한 화면 크기를 지원하려고 합니다.

이러한 변경 사항은 대부분 런타임에 발생할 수 있으며 앱의 동적 응답이 필요합니다. 다양한 화면 크기 지원과 같은 기타 기능은 다양한 환경에 적응하는 앱을 나타냅니다. 화면 크기는 일반적으로 런타임 시 변경되지 않지만 적응형 인터페이스를 생성하면 앱이 iPhone 4S, iPhone 6 Plus 또는 iPad에서도 동일하게 잘 실행될 수 있습니다. 자동 레이아웃은 또한 iPad에서 Slide Over 및 Split View를 지원하기 위한 핵심 구성 요소입니다.

내부 변경(Internal Changes)

사용자 인터페이스의 보기 또는 컨트롤 크기가 변경되면 내부 변경이 발생합니다. 내부 변화의 일반적인 원인은 다음과 같습니다.

앱에 표시되는 콘텐츠가 변경됩니다.
이 앱은 국제화를 지원합니다.
이 앱은 Dynamic Type(iOS)을 지원합니다.

앱의 콘텐츠가 변경되면 새 콘텐츠에 이전 콘텐츠와 다른 레이아웃이 필요할 수 있습니다. 이는 일반적으로 텍스트나 이미지를 표시하는 앱에서 발생합니다. 예를 들어 뉴스 앱은 개별 뉴스 기사의 크기에 따라 레이아웃을 조정해야 합니다. 마찬가지로 사진 콜라주는 다양한 이미지 크기와 종횡비를 처리해야 합니다.

국제화는 앱이 다양한 언어, 지역 및 문화에 적응할 수 있도록 만드는 과정입니다. 국제화된 앱의 레이아웃은 이러한 차이점을 고려하고 앱이 지원하는 모든 언어와 지역에서 올바르게 표시되어야 합니다.

국제화 는 레이아웃에 세 가지 주요 영향을 미칩니다. 첫째, 사용자 인터페이스를 다른 언어로 번역하면 레이블에 다른 공간이 필요합니다. 예를 들어 독일어는 일반적으로 영어보다 훨씬 더 많은 공간이 필요합니다. 일본어는 자주 훨씬 적게 필요합니다.

둘째, 날짜와 숫자를 나타내는 데 사용되는 형식은 언어가 변경되지 않더라도 지역마다 다를 수 있습니다. 이러한 변경은 일반적으로 언어 변경보다 더 미묘하지만 사용자 인터페이스는 여전히 약간의 크기 변화에 적응해야 합니다.

셋째, 언어를 변경하면 텍스트 크기뿐만 아니라 레이아웃 구성에도 영향을 미칠 수 있습니다. 다른 언어는 다른 레이아웃 방향을 사용합니다. 예를 들어 영어는 왼쪽에서 오른쪽 레이아웃 방향을 사용하고 아랍어와 히브리어는 오른쪽에서 왼쪽 레이아웃 방향을 사용합니다. 일반적으로 사용자 인터페이스 요소의 순서는 레이아웃 방향과 일치해야 합니다. 버튼이 영어로 보기의 오른쪽 하단에 있는 경우 아랍어에서는 왼쪽 하단에 있어야 합니다.

마지막으로 iOS 앱이 “dynamic type”을 지원하는 경우 사용자는 앱에서 사용되는 글꼴 크기를 변경할 수 있습니다. 이것은 사용자 인터페이스에서 텍스트 요소의 높이와 너비를 모두 변경할 수 있습니다. 앱이 실행되는 동안 사용자가 글꼴 크기를 변경하면 글꼴과 레이아웃이 모두 적응해야 합니다.

예를 들어, 다음과 같은 함수가 있다고 가정해 봅시다.

Auto Layout 와 Frame-Based Layout 비교

사용자 인터페이스를 배치하는 데는 세 가지 주요 접근 방식이 있습니다. 프로그래밍 방식으로 사용자 인터페이스를 배치하거나 자동 크기 조정 마스크를 사용하여 외부 변경에 대한 일부 응답을 자동화하거나 자동 레이아웃을 사용할 수 있습니다.

전통적으로 앱은 뷰 계층 구조의 각 뷰에 대한 프레임을 프로그래밍 방식으로 설정하여 사용자 인터페이스를 배치했습니다. 프레임은 슈퍼뷰의 좌표계에서 뷰의 원점, 높이 및 너비를 정의했습니다.

사용자 인터페이스를 배치하려면 뷰 계층 구조의 모든 뷰에 대한 크기와 위치를 계산해야 했습니다. 그런 다음 변경 사항이 발생하면 영향을 받는 모든 보기에 대해 프레임을 다시 계산해야 했습니다.

여러 가지 면에서 보기의 프레임을 프로그래밍 방식으로 정의하면 최고의 유연성과 성능을 얻을 수 있습니다. 변경이 발생하면 문자 그대로 원하는 변경을 수행할 수 있습니다. 그러나 모든 변경 사항을 직접 관리해야 하므로 간단한 사용자 인터페이스를 배치하려면 설계, 디버그 및 유지 관리에 상당한 노력이 필요합니다. 진정한 적응형 사용자 인터페이스를 만들면 난이도가 훨씬 높아집니다.

자동 크기 조정 마스크를 사용하여 이러한 노력을 완화할 수 있습니다. 자동 크기 조정 마스크는 슈퍼뷰의 프레임이 변경될 때 뷰의 프레임이 변경되는 방식을 정의합니다. 이것은 외부 변화에 적응하는 레이아웃 생성을 단순화합니다.

그러나 자동 크기 조정 마스크는 가능한 레이아웃의 상대적으로 작은 하위 집합을 지원합니다. 복잡한 사용자 인터페이스의 경우 일반적으로 자체 프로그래밍 변경으로 자동 크기 조정 마스크를 보강해야 합니다. 또한 자동 크기 조정 마스크는 외부 변경 사항에만 적용됩니다. 내부 변경을 지원하지 않습니다.

자동 크기 조정 마스크는 프로그래밍 방식 레이아웃의 반복적인 개선일 뿐이지만 자동 레이아웃은 완전히 새로운 패러다임을 나타냅니다. 뷰의 프레임에 대해 생각하는 대신 관계에 대해 생각합니다.

자동 레이아웃은 일련의 제약 조건을 사용하여 사용자 인터페이스를 정의합니다. 제약 조건은 일반적으로 두 보기 간의 관계를 나타냅니다. 그런 다음 자동 레이아웃은 이러한 제약 조건을 기반으로 각 보기의 크기와 위치를 계산합니다. 이것은 내부 및 외부 변경 모두에 동적으로 반응하는 레이아웃을 생성합니다.

특정 동작을 생성하기 위해 일련의 제약 조건을 설계하는 데 사용되는 논리는 절차적 또는 객체 지향 코드를 작성하는 데 사용되는 논리와 매우 다릅니다. 다행히 자동 레이아웃을 마스터하는 것은 다른 프로그래밍 작업을 마스터하는 것과 다르지 않습니다. 두 가지 기본 단계가 있습니다. 먼저 제약 조건 기반 레이아웃의 논리를 이해하고 API를 배워야 합니다. 다른 프로그래밍 작업을 학습할 때 이러한 단계를 성공적으로 수행했습니다. 자동 레이아웃도 예외는 아닙니다.

이 가이드의 나머지 부분은 자동 레이아웃으로 쉽게 전환하는 데 도움이 되도록 설계되었습니다. 제약 없는 자동 레이아웃(Auto Layout Without Constraints) Chapter 에서는 자동 레이아웃 지원 사용자 인터페이스의 생성을 단순화하는 높은 수준의 추상화에 대해 설명합니다. 제약 조건 분석(Anatomy of a Constraint) Chapter 에서는 자동 레이아웃과 성공적으로 상호 작용하기 위해 이해해야 하는 배경 이론을 제공합니다. Interface Builder에서 제약 조건 작업(Working with Constraints in Interface Builder) Chapter에서는 자동 레이아웃을 디자인하는 도구에 대해 설명하고, 프로그래밍 방식으로 제약 조건 만들기(Programmatically Creating Constraints)과 오토 레이아웃 쿡북(Auto Laayout Cookbook) Chapter 에서는 API에 대해 자세히 설명합니다. 마지막으로 오토 레이아웃 쿡북은 다양한 수준의 복잡성을 가진 광범위한 샘플 레이아웃을 제시하고, 자신의 프로젝트에서 연구하고 사용할 수 있으며, Debugging Auto Layout은 문제가 발생할 경우 문제를 해결하기 위한 조언과 도구를 제공합니다.