[iOS] 오토레이아웃(AutoLayout)

 

UIkit을 이용해 화면을 그리는 데 있어서 가장 중요한 것이 뭐라고 누가 묻는다면 나는 AutoLayout이라고 할 정도로 굉장히 중요한 개념이다. 그러나 처음 접한 뉴비들에겐 절단기 수준(?)으로 낯설고 어려울 수 있다. 그래서 제대로 정리해보려고 한다.
(만약 피그마의 오토레이아웃을 해봤다면 비슷하다!)

 

 

1. 오토레이아웃이란?

 오토레이아웃이란 제약 조건(Constraints)에 따라 뷰 계층 구조에 있는 모든 뷰의 크기와 위치를 동적으로 계산하는 것이다.

처음 접하는 사람의 입장에선 '이게 무슨 소리야?'라고 하고 있을 것이다. 아래 사진을 한번 봐보자.

 

 

 

위의 사진은 같은 화면을 스토리보드에서 각각 아이폰15 프로와 아이폰se 3세대 화면에서 그렸을 때의 모습이다. 화면의 크기에 따라 내가 추가한 뷰객체들이 잘리는 모습을 볼 수 있다. 오토레이아웃은 이런 문제를 해결하기 위한 툴이다.

 

다시 말하자면, 오토레이아웃은 화면의 크기에 따라서 지정한 값을 계산해 뷰객체의 크기와 위치를 지정하는 것이다. 

 

앱 화면을 따라 구현해본 예시

 

위의 사진과 같이 아이폰15 프로에서 아이폰se 3세대로 기기가 바뀌어도 개발자가 의도한 대로 화면에 뷰객체들이 나올 수 있게 하는 것이 오토레이아웃이다. 

 

 

 

2. 제약 조건

 

 위에서 오토레이아웃은 제약조건을 이용해 뷰객체의 위치나 크기를 정하는 것이라고 하였다. 그렇다면 어떻게 제약조건을 지정하는지 실습해 보자.

 

우선 뷰객체 하나를 만들고 아무렇게 화면 위에 위치시킨다.

 

 

제약조건 추가 버튼

그 후 뷰객체를 선택하고 스토리보드 오른쪽 하단에 있는 제약조건 추가 버튼을 눌러준다.

 

 

 

그럼 위와 같이 제약조건을 설정할 수 있는 창이 나타난다. 여기에 임의대로 값을 변경해 보자.

 

 

만일 위, 아래, 왼쪽, 오른쪽 값을 건드렸다면 빨간 선이 나타났을 것이다. 빨간 선은 제약조건이 그쪽 방향으로 설정되었다는 의미이며, 하나 추가할 때마다 아래에 추가버튼(add 4 Constraints)의 값이 바뀔 것이다. 그럼 한번 추가버튼을 눌러보자.

 

 

 

그럼 화면의 위, 아래, 왼쪽, 오른쪽으로부터 100씩 떨어져서 뷰객체가 자동으로 크기 및 위치를 변경했을 것이다. (참 쉽죠..?) 올바르게 제약조건이 설정되면 위의 사진처럼 파란색으로 선이 표시가 될 것이다.

 

 

 

오토레이아웃 잘못 설정했을 때

만약 오토레이아웃을 잘못 설정했다면 위와 같이 빨간색으로 표시가 된다.

 

 

그럼 잘못 값을 수정하려면 어떻게 해야 할까?

Xcode의 오른쪽 인스펙터 버튼을 눌러 6번째 버튼(사진 맨 위 각도기 버튼)을 눌러보자. 그리고 조금만 밑으로 내려오면 Constraints라고 되어있고 Horizontal, Vertical이라고 쓰인 부분 밑에 내가 설정한 제약조건이 있다. 여기서 내가 수정하고 싶은 부분을 Edit을 눌러서 값을 변경해 주면 된다.

 

 

 

뷰객체의 크기를 일정하게 하고 싶다면 Width, Height를 설정해 주면 된다. 그럼 어떤 화면이든 설정한 크기로 지정이 된다.

 

 

만약에 내가 지금까지 설정해 둔 제약조건들을 한 번에 제거하고 싶다거나, 선택한 뷰객체의 제약조건들을 다 제거하고 싶다면

 

제약조건을 설정하는 버튼 옆에 있는 버튼을 눌러서 Clear Constraints를 누르면 된다.

여기서 주의사항!

버튼을 누르면 두 개의 Clear Constraints가 나오는데,

위는 Selected View의 제약조건 제거 버튼이다. 즉, 내가 선택한 뷰객체들의 제약조건들만 제거하고,

아래는 All Views In View Controller의 제약조건 제거 버튼으로, 내가 지금 작업한(선택한) 화면 하나 전체의 제약조건들을 제거한다.

 

3. 정렬 제약조건

 

정렬 제약조건은 뷰객체끼리의 정렬을 조정한다든가, 화면 정가운데에 위치시킨다든가 할 때 사용한다.

제약조건 설정 버튼 왼쪽에 있는 버튼을 누르면 

위와 같은 형태로 설정할 수 있게 나타난다. 위의 사진대로 체크를 하고 제약조건을 추가하면 화면 정중앙에 위치시킬 수 있다.

그 위에 지금 설정이 불가한 제약조건들은 뷰객체를 여러 개 선택하고 활성화되고, 그들끼리의 제약조건을 설정하는 옵션이다.

 

화면 정중앙 제약조건 설정

 

 

 

 

4. 오토레이아웃 에러 해결

 

만약 오토레이아웃 에러가 난다면??? 
여러 가지 방법이 있지만 2가지 방법을 소개하려고 한다.

 

 

1. Document Outline확인

 

스토리보드 왼쪽 하단에 있는 Show Document Outline 버튼을 누른다.

outline

그럼 위와 같이 아웃라인이 보일 텐데, 피그마나 포토샵의 레이어와 같다고 생각하면 된다. 여하튼 위의 사진을 보면 오른쪽 위의 빨간색 화살표가 있는데 눌러보면

왜 제약조건이 에러가 나서 제대로 적용이 안되었는지 나온다. (빨간색들만 해결해 줘도 된다!!)

 

 

 

2. WTF? 사이트 이용하기

 

두 번째 방법은 WTF 사이트를 이용하는 것이다.

 

https://www.wtfautolayout.com

WTF Auto Layout?

 

 

사이트에 접속해서 에러 메시지 입력하고 Go! 버튼을 누르면

 

어떻게 해결해야 하는지 방법을 알려준다!!