반응형

[최종 수정일 : 2017.11.20]

원문 : https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/index.html

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

오토 레이아웃(Auto Layout)은 뷰에 배치된 제약사항에 따라 뷰의 계층 구조에서 모든 뷰의 크기와 위치를 동적으로 계산합니다.

예를 들어, 버튼이 이미지 뷰와 수평 중심으로 배치하도록 제약사항을 줄수 있고 버튼의 상단 가장자리가 항상 이미지의 하단에 8포인트가 남도록 할 수 있습니다. 만약 이미지 뷰의 크기나 위치가 변경되면, 버튼의 위치가 자동으로 일치하도록 조정됩니다.

외부 변화(External Changes)

여러분의 슈퍼뷰(superview)의 크기와 모양이 변할때 외부 변화(External Changes)가 발생합니다. 각각의 변화로, 여러분의 뷰 계층 구조의 레이아웃을 사용가능한 공간을 최대한 활용해서 업데이트해야 합니다. 다음은 외부 변화의 몇가지 일반적인 예(sources) 입니다.

  • 사용자가 윈도우(window)의 크기를 변경한다(OS X)
  • 사용자가 iPad에서 Split View로 진입하거나 해제한다(iOS)
  • 기기를 회전한다(iOS)
  • 통화를 하거나 오디오 녹음 바가 나타나거나 사라진다(iOS)
  • 다른 크기의 클래스를 지원하고자 한다
  • 다양한 화면 크기를 지원하고자 한다

이러한 대부분의 변경사항은 실행중에 발생할수 있고, 여러분의 앱에서 동적으로 반응해야 합니다. 그 외에, 다양한 화면 크기를 지원하는것 같이, 다른 환경에 적응하는 앱을 표현합니다. 일반적으로 실행중에 화면 크기가 변경되지 않으며, 반응형 인터페이스로 만들면 iPhone 4S, iPhone 6 Plus, iPad 에서도 동일하게 실행할 수 있습니다. Auto Layout은 iPad에서 Slide Over 와 Split View를 지원하는 핵심 구성요소이기도 합니다.

내부 변화(Internal Changes)

내부 변화는 사용자 인터페이스(user interface) 변경으로 뷰나 컨트롤의 크기가 변경할때 발생합니다.

다음은 외부 변화의 몇가지 일반적인 예(sources) 입니다.

  • 앱에서 표현하는 콘텐츠(content)가 변경된다
  • 앱이 국제화(Internationalization)를 지원한다
  • 앱이 동적 타입을 지원한다(iOS)

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

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

국제화(Internationalization)는 레이아웃에 대한 3가지 핵심 효과를 가지고 있습니다. 첫번째로, 사용자 인터페이스를 다른 언어로 변역할때, 라벨(labels)의 공간이 다르게 필요합니다. 예를 들어, 독일어는, 일반적으로 영어보다 많은 공간이 필요합니다. 일본어는 종종 더 작은 공간이 필요합니다.

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

마지막으로, 여러분의 앱이 동적 타입을 지원하면, 사용자가 앱에서 사용하는 폰트 크기를 변경 할 수 있습니다. 사용자 인터페이스에서 텍스트 요소의 높이와 넓이가 모두 변경 할 수 있습니다. 앱이 실행 중에 사용자가 폰트 크기를 변경하면, 폰트와 레이아웃이 모두 적용되어야 합니다.

오토 레이아웃 대 프레임 기반의 레이아웃(Auto Layout Versus Frame-Based Layout)

사용자 인터페이스를 배치하는데는 크게 세가지 방법이 있습니다. 프로그래밍 방식으로 사용자 인터페이스를 배치할 수 있으며, 외부 변화(external change)에 대한 일부 응답을 자동화 하기 위해 Autoresizing이나 Auto Layout을 사용할 수 있습니다.

전통적으로, 앱의 뷰 계층구조에서 각각의 뷰에 대해 프로그래밍 방식으로 프레임(frame)을 설정하여 사용자 인터페이스를 배치했습니다.


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

여러가지 방법으로, 프로그래밍 방식으로 뷰의 프레임을 정의하면 유연성과 성능이 향상됩니다. 변경 사항이 발생하면, 문자 그대로 여러분이 원하는데로 변경할 수 있습니다. 하지만 모든 변경 사항을 여러분 스스로 관리해야하기 때문에, 단순히 사용자 인터페이스를 배치하려면 설계, 디버그와 유지관리에 상당한 노력이 필요합니다. 진정한 적응형 사용자 인터페이스를 만드는 것은 크기 순서대로 난이도가 증가합니다.

오토리사이즈(autoresizing) 마스크(masks)를 사용하여 이러한 노력을 경감하는데 도움이 됩니다. 오토리사이즈(autoresizing) 마스크(masks)는 슈퍼뷰의 프레임이 변경될때 뷰의 프레임이 변경되는 방법을 정의 합니다. 이렇게하면 외부 변화(external changes)에 맞게 레이아웃을 간단하게 만들 수 있습니다.

그러나, 오토리사이즈(autoresizing) 마스크(masks)는 상대적으로 가능한 레이아웃의 서브세트(subset)를 지원합니다. 복잡한 사용자 인터페이스의 경우에, 일반적으로 자체 프로그래밍 방식을 변경해서 오토리사이즈(autoresizing) 마스크(masks)를 추가해야합니다. 추가적으로, 오토리사이즈(autoresizing) 마스크(masks)는 외부 변화(External Changes)에만 적용됩니다. 내부 변화(internal change)를 지원하지 않습니다.

비록 오토리사이즈(autoresizing) 마스크(masks)는 프로그래밍적인 레이아웃으로 반복적인 개선일뿐이지만, 오토 레이아웃(Auto Layout)은 완전히 새로운 패러다임을 나타냅니다. 뷰의 프레임에 대해서 생각하는 대신에, 그 관계에 대해서 생각합니다.

오토 레이아웃(Auto Layout)은 일련의 제약조건(constraints)을 사용해서 사용자 인터페이스를 정의합니다. 제약조건(constraints)은 일반적으로 두개의 뷰(views)간의 관계를 나타냅니다. 오토 레이아웃(Auto Layout)은 이러한 제약조건(constraints)를 기반으로 각각 뷰의 크기와 위치를 계산합니다. 이렇게함변 내부(internal)와 외부 변화(external changes) 모두에 대해 동적으로 응답하는 레이아웃을 제공합니다.


특정 동작을 만들기 위해 제약조건(constraints) 설정을 설계하는데 사용되는 로직(logic)는 절차적(procedural) 또는 객체 지향(object-oriented) 코드를 작성하는데 사용된 로직(logic)와는 매우 다릅니다. 다행히, 오토 레이아웃(Auto Layout)을 익히는 것은 다른 프로그래밍 작업을 익히는 것과 다르지 않습니다. 두 가지 기본 단계가 있습니다: 먼저 제약조건 기반(constraint-based) 레이아웃의 로직을 이해해야 하고, 그런 다음 API를 배워야 합니다. 여러분은 다른 프로그래밍 작업을 배울때 이러한 단계를 성공적으로 수행했었습니다. 오토 레이아웃(Auto Layout)도 예외는 아닙니다.

이 가이드의 나머지 부분은 오토 레이아웃(Auto Layout)으로 쉽게 전환 할 수 있도록 구성(designed)되었습니다. 제약사항 없는 오토 레이아웃(Auto Layout Without Constraints) 챕터(chapter)에서는 오토 레이아웃(Auto Layotu) 기반의 사용자 인터페이스 생성을 단순화 하는 고수준(high-level)의 추상화를 설명합니다. 제약사항 구조(Anatomy of a Constraint) 챕터(chapter)는 스스로 오토 레이아웃(Auto Layout)과 성공적으로 상호작용하기 위해 이해해야하는 배경 이론을 제공합니다. 인퍼테이스 빌더에서 제약 조건 다루기(Working with Constraints in Interface Builder)는 오토 레이아웃(Auto Layout) 설계 도구를 설명하고, 프로그래밍으로 제약조건 만들기(Programmatically Creating Constraints)와 오토 레이아웃 다루기(Auto Layout Cookbook) 챕터(chapters)에서는 API에 대해서 자세히 설명합니다. 마지막으로, 오토 레이아웃 다루기(Auto Layout Cookbook)는 다양한 수준의 복잡성을 제공하는 광범위한 샘플 레이아웃이 있으며, 여러분의 프로젝트에서 공부하고 사용 할 수 있고, 오토 레이아웃 디버깅하기(Debugging Auto Layout)은 문제가 발생할 경우에 문제를 해결하기 위한 조언과 도구를 제공합니다.

반응형
Posted by 까칠코더
,