iOS: 오토 레이아웃의 대한 이해

이 글은 Auto Layout Guide: Understanding Auto Layout 문서를 번역한 글입니다. 학습을 위해 일부 내용을 첨삭하여 원문과 동일하지 않을 수 있습니다.

 

오토 레이아웃은 해당 뷰에 적용된 제약 조건에 따라 뷰 계층 구조에 있는 모든 뷰의 크기와 위치를 동적으로 계산한다.

이러한 제약 기반 접근 방식을 사용하면 내부 및 외부 변경에 동적으로 응답하는 사용자 인터페이스를 구축할 수 있다.

 

외부 변경

슈퍼 뷰의 크기나 모양이 변경되면 외부 변경이 발생한다. 외부 변화의 일반적인 원인은 다음과 같다.

• 사용자가 창 크기를 조정 (OS X)
• 사용자가 iPad (iOS)에서 Split View에 들어가거나 나감
• 기기가 회전 (iOS)
• 통화 활성화 및 오디오 녹음 막대가 나타나거나 사라짐 (iOS)
• 다양한 크기 클래스를 지원하려고 할 때
• 다양한 화면 크기를 지원하려고 할 때

이러한 변경의 대부분은 런타임에 발생할 수 있으며 앱의 동적 응답이 필요하다. 오토 레이아웃은 iPad에서 Slide Over 및 Split View를 지원하기 위한 핵심 구성 요소이기도하다.

 

내부 변경

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

• 앱에 표시되는 콘텐츠 변경
• 앱이 국제화를 지원
• 앱이 동적 유형 (iOS)을 지원

앱의 콘텐츠가 변경되면 새 콘텐츠에 이전 콘텐츠와 다른 레이아웃이 필요할 수 있다. 이는 일반적으로 텍스트 또는 이미지를 표시하는 앱에서 발생한다.

 

국제화는 앱이 다양한 언어, 지역 및 문화에 적응할 수 있도록 하는 프로세스이다. 국제화된 앱의 레이아웃은 이러한 차이를 고려해야 하며 앱이 지원하는 모든 언어 및 지역에서 올바르게 표시되어야 한다.

 

국제화는 레이아웃에 세 가지 주요 효과가 있다. 첫째, 사용자 인터페이스를 다른 언어로 번역할 때 레이블에는 다른 공간이 필요하다. 독일어는 일반적으로 영어보다 훨씬 더 많은 공간이 필요하고, 일본어는 훨씬 덜 필요하다.

 

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

일본의 연호에 iOS 개발자가 관심을 가져야 하는 이유

 

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

 

마지막으로 iOS 앱이 동적 유형을 지원하는 경우 사용자는 앱에서 사용되는 글꼴 크기를 변경할 수 있다. 이렇게 하면 사용자 인터페이스에서 텍스트 요소의 높이와 너비를 모두 변경할 수 있다. 앱이 실행되는 동안 사용자가 글꼴 크기를 변경하면 글꼴과 레이아웃이 모두 조정되어야 한다.

접근성 지원, 개발자의 빠른 성장을 도와줍니다.

 

오토 레이아웃 vs 프레임 기반 레이아웃

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

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

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

 

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

 

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

 

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

 

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

 

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

특정 동작을 만들기 위해 제약 조건 집합을 설계하는 데 사용되는 논리는 절차적 또는 객체지향 코드를 작성하는 데 사용되는 논리와 매우 다르다.