---

이 페이지에서 컨텐츠 = UI 컴포넌트라고 이해하면 됩니다.

6월 말, G밸리에서 무료로 교육해주는 프로그램인 Case-Study에 합격을 했다.
해당 교육에서 실무에 관련된 지식 뿐만이 아니라 탄탄한 기초 지식을 쌓을 수 있다고 생각했기 때문이다.
1주차 과제로 Xcode와 Swift의 여러 가지 중요한 요소를 조사해야 했는데, 이 글은 오토레이아웃에 대해 조사하면서 정리한 내용이다.

---

AutoLayout이란?

뷰 계층 구조에 있는 모든 뷰의 크기와 위치를 해당 뷰에 적용된 제약 조건(Constraint)에 따라 동적으로 계산하는 레이아웃 시스템.

• 오토레이아웃을 통해 내부 및 외부 변경 사항에 동적으로 응답하는 사용자 인터페이스를 구축할 수 있다.

내부 변경 사항

사용자 인터페이스의 뷰 또는 컨트롤의 크기가 변경될 때 발생한다.

1. 앱에서 표시하는 컨텐츠 변경

• 앱의 컨텐츠가 변경되면 새 컨텐츠는 이전 컨텐츠와 다른 레이아웃이 필요하다.
• 새로운 데이터를 받아오는 경우, 이미지나 텍스트가 달라질 수 있다.
  

2. 앱의 국제화 지원

• 앱은 다양한 언어, 지역 및 문화에 적응할 수 있도록 국제화를 지원한다.
• 다른 언어로 번역이 되거나 날짜와 숫자가 달라지면 label에 필요한 공간이 달라지게 된다.
• 영어권은 왼쪽에서 오른쪽 방향의 레이아웃을 사용하고, 아랍권은 오른쪽에서 왼쪽 방향의 레이아웃을 사용한다.
  

3. 앱의 동적 유형 지원

• iOS 사용자는 앱에서 사용되는 글꼴 크기를 변경할 수 있다.

외부 변경 사항

슈퍼 뷰의 크기나 모양이 변경될 때 발생한다.

1. 화면 회전

• 사용자가 화면을 회전할 경우, 슈퍼 뷰의 너비와 높이가 달라지게 된다.
  (회전이 되지 않도록 설정할 수도 있다.)
  

2. 통화 및 오디오 녹음 막대 표시

• 전화가 오거나 오디오 녹음 중인 경우, 슈퍼 뷰의 특정 위치가 가려진다.
  

3. 다양한 크기의 화면

• iOS 기기는 다양한 만큼 크기도 다양하다.
  작은 기기는 너비와 높이가 작고, 큰 기기는 너비와 높이가 크다.

---

AutoLayout 설정 전에 중요한 것!

Safe Area

• 기종에 따른 Safe Area
  
  
• iOS 11부터 topLayoutGuide, bottomLayoutGuide대신 safe area 를 사용하기 시작했다.
  (iPhone X부터 상단의 노치가 생기는 동시에 홈 버튼이 사라졌기 때문에 바뀌었다.)
• 애플은 safe area 밖에 컨텐츠를 배치하지 말 것을 권고한다.
• 컨텐츠가 safe area 밖을 벗어나게 되면, 노치에 가려지거나 상단에 배치된 시간과 아이콘이 가려질 수 있다.
• View Controller의 경우, Navigation / Tab Bar가 있으면 해당 부분을 제외한 영역이 safe area가 된다.
• 일반적으로 컨텐츠는 safe area 내부 영역에 배치된다.
  safe area 영역 밖으로 배치하고 싶은 경우, superview에 제약 조건을 설정할 수 있다.

Superview

• 사용자가 보는 화면의 가장 큰 뷰를 의미한다.
  추가해준 UIView 내부 컨텐츠의 제약 조건 대상이 superview면, 컨텐츠를 포함하는 뷰를 의미한다.
• 최상위 뷰의 바로 아래 컨텐츠는 오토레이아웃을 superview에 설정해 주면, safe area 밖에 컨텐츠를 배치할 수 있다.

---

AutoLayout 설정하기

• 클론 코딩에서 작성한 오토레이아웃의 일부
• 오토레이아웃을 설정한 컨텐츠를 선택하고 size inspector를 보면 다음과 같이 나와있다.

Constraints

• 가장 위의 Constraints 바로 밑 이미지를 보면, 파란 선이 그어진 것을 확인할 수 있다.
  • 현재 선택한 콘텐츠의 오토 레이아웃 방향을 나타내는 것이다.
  • 가장 왼쪽은 height, 가장 아래쪽은 width에 관련된 제약 조건이다.
  • 사각형의 왼쪽 모서리은 leading, 오른쪽 모서리는 trailing에 관련된 제약 조건이다.
  • 위쪽 모서리는 top, 아래쪽 모서리는 bottom, 중간은 Center Y에 관련된 제약 조건이다.
  • 파란 선의 개수와 이미지 밑의 Horizontal, Vertical의 목록 수가 일치하는 것이 보인다.
  • Horiontal은 수평과 관련된 제약 조건, Vertical은 수직과 관련된 제약 조건들이 표시되어 있다.

설명

• Leading Sapce to: Superview, Equals: 10
  → Superview와 Leading(왼쪽)으로 10만큼 떨어뜨리는 제약 조건을 설정 한다.

• Trailing Space to: profile~, Equlas: 5
  → profile~와 Trailing(오른쪽)으로 5만큼 떨어뜨리는 제약 조건을 설정 한다.

• Align Center Y to: profile~
  → profile~와 현재 컨텐츠의 Y(축 위치) 중앙 값을 같게 하는 제약 조건을 설정 한다.

• Width Equals: 80
  → 현재 컨텐츠의 너비를 80으로 고정한다는 제약 조건을 설정 한다.
  

Constraints 종류

• 방향은 총 4가지가 있다.
  • Top: 위쪽
  • Bottom: 아래쪽
  • Leading: 왼쪽(아랍권은 오른쪽)
  • Trailing: 오른쪽(아랍권은 왼쪽)
    
    
• 관계(Relation)는 총 3가지가 있다.
  • Equal: 동등
    • 컨텐츠의 제약 조건 중 간격 n의 제약이 있을 경우, n이 변하지 않음을 나타낸다.
  • Less Than or Equal: 작거나 동등
    • 컨텐츠의 제약 조건 중 간격 n의 제약이 있을 경우, 화면의 크기가 작아지거나 컨텐츠의 크기가 커지질 때, n의 크기가 작아질 수 있음을 나타낸다.
  • Greater Than or Eqaul: 크거나 동등
    • 컨텐츠의 제약 조건 중 간격 n의 제약이 있을 경우, 화면의 크기가 커지거나 컨텐츠의 크기가 작아질 때, n의 크기가 커질 수 있음을 나타낸다.
      
      
• 간격(Constant)의 타입은 CGFloat 이다.
  • 음수, 소수점 설정이 가능하다.
  • 컨텐츠의 제약 조건
    • Top에서 음수 → 위쪽 방향, 양수 → 아래쪽 방향으로 컨텐츠가 이동한다.
    • Bottom에서 음수 → 아래쪽 방향, 양수 → 위쪽 방향으로 컨텐츠가 이동한다.
    • Leading에서 음수 → 왼쪽 방향, 양수 → 오른쪽 방향으로 컨텐츠가 이동한다.(아랍권은 반대)
    • Trailing에서 음수 → 오른쪽 방향, 양수 → 왼쪽 방향으로 컨텐츠가 이동한다.(아랍권은 반대)
      

Priority

• 화면에서 컨텐츠끼리 겹치는 상황이 발생할 가능성이 있을 경우 우선순위를 설정해 주어야 한다.
• 보통 UILabel과 Y좌표가 겹치는 컨텐츠가 있는 경우(텍스트에 따라 크기가 변경되기 때문에),
  여러 컨텐츠가 들어 있는 Stack View에서 외부 제약 조건을 설정해 줄 때 발생한다.
  

Hugging Priority

우선 순위가 높으면 자신의 크기가 유지되고, 낮으면 크기가 늘어난다.

• 크기를 변경시키고 싶지 않은 컨텐츠는 이 우선순위를 높여준다.
• Stack View에서 원하는 방향으로 정렬시키고 싶은 경우, 반대 방향 가장 끝의 컨텐츠의 우선 순위를낮춰준다.
  

Compression Resistance Priority

우선 순위가 높으면 자신의 크기가 유지되고, 낮으면 크기가 줄어든다.

• 크기를 변경시키고 싶지 않은 컨텐츠는 이 우선순위를 높여준다.
• Stack View의 외부 제약 조건에 따라, 크기가 줄어들 일이 생기는 경우, 줄어들어도 큰 상관이 없는 컨텐츠의 우선 순위를 낮춰준다.