[Xocde] 빗나간 아이폰5 해상도 예상, 그리고 자동 레이아웃 기능

(참고) 이 글은 도움말이나 튜토리얼이 아닌 자동 레이아웃에 대한 간단한 기능 소개와 약간 사설 수준의 글입니다.

아이폰5가 나오기 이전, 레티나 디스플레이와 관련된 글을 쓰면서 아이폰의 해상도 비율 변경은 없을거라는 식으로 추측을 했던 적이 있었다.

관련 링크: 레티나 디스플레이 찬양(?)

하지만 이 예상은 아이폰5가 정말 세로로 길게 출시되면서 완전히 깨져버렸다. 해상도의 가로:세로 비율이 완전히 달라져 버린 것이다.

위 링크의 글을 쓸 때도 이야기 했지만 이는 레티나가 2배 해상도화 해서 해상도 파편을 없애려는 시도 때문이었다. 개발툴인 Xcode의 인터페이스 빌더에서 해상도에 맞는 별도의 레이아웃 조율 기능을 제공하지 않았기 때문이기도 했다.

정확히 버전이 얼마였는지 기억나지 않지만, 아이폰5와 iOS 6 가 릴리즈 될 시점이었을 것이다. 함께 릴리즈된 Xcode 에 자동 레이아웃(Auto Layout) 기능이 생겼다.

이 기능은 기본적으로 활성화 되어 있어서 새로운 인터페이스 빌더에 익숙하지 않은 사람에게는 약간의 불편함을 주기도 했다. 뭐 어쨌건 이 기능은 끌 수도 있기에 호환성은 여전히 유지되었다.

중요한 것은 이 자동 레이아웃 기능에 대해서다. 이름 처럼 정말 자동으로 해 주는 것일까?

자동 레이아웃 기능은 뷰와 뷰 안의 서브뷰들 사이의 위치와 크기의 관계성을 어느 정도 편하게 디자인 할 수 있도록 고안된 기능이다. 위의 경우 단순히 스토리보드(Storyboard)의 기본 뷰에다 버튼 3개를 위, 아래, 그리고 가운데에 크기를 크게 해서 3가지 서브뷰를 배치해 놓은 상태이다. 각 버튼 사이 그리고 버튼과 메인뷰 사이에는 작은 T자 모양의 선이 보이는데 이것이 바로 그 기능을 시각적으로 표시한 것이다.

기존에 보이지 않던 Constraints 항목을 보면 레이아웃과 크기의 연관성을 정리한 항목이 많이 나타난다. 각 항목을 클릭해 보면 어떤 부분은 어디서 어디 만큼 위치하며 어떤 부분이 크기가 고정되는지 늘어나는지가 나타나있다.

실제로 실행시켜 보면 어떻게 될까.

아무런 코드를 넣지도 않았고 아무런 설정을 추가하지도 않았다. 보시다 싶이 화면을 회전시켜도 꽉 차게 의도한 모양으로 변경되는 것이 확인된다. 만약 자동 레이아웃 기능이 없었고 별 다른 설정을 하지 않았다면 오른쪽 부분이 비고 아랫쪽은 잘리는 증상이 나타났을 것이다.

업데이트 되기 전의 Xcode 였다면 위 레이아웃은 아이폰4S 이하의 표준(?) 디스플레이에만 해당하는 것이기에 아이폰5에서는 레터박스(빈공간)이 나타나게 된다. 하지만 자동 레이아웃 기능을 사용하면 아이폰5의 해상도에서도 정확하게 동작한다.

기존의 경우 서브뷰의 배치와 사이즈와 관련된 부분을 인터페이스 빌더에서 일일이 설정해 주어야 했었다. 귀찮은 것은 둘 째 치더라도, 복잡한 레이아웃을 만드려면 서브뷰(UIView)를 깔고 여기에다 원하는 컨트롤을 배치하는 식으로 몇 가지 트릭이 있어야만 회전 등에 대응 할 수가 있었는데 어느 정도 선 까지 자동으로 해 주는 기능으로 구현이 되었다.

물론 완벽하진 않다. 의도한 대로 자동으로 설정되진 않는다. 즉 복잡한 UI라면 구현하는 이가 직접 이 Constraints를 수정하거나 추가하는 등으로 레이아웃을 정해 주어야 한다. 그렇다고 하더라도 기존에 비해 좀 더 직관적으로 수정하거나 테스트 해 볼 수 있기에 편한 것에 이견이 없다.

당연하겠지만 기존의 뷰 배치와 크기 속성을 조절해 주는 탭도 내용이 완전히 바뀌었다. 아직은 뭐가 뭔지 확실하게는 모르겠지만 결국 레이아웃의 배치를 절대적인 수치가 아닌 상대적인 수치 기준으로 바뀌었다.

결과적으로 이제 아이폰은 어떠한 해상도로 등장하여도 UI 파편화를 해결 할 수 있도록 되었다. 과거의 예측은 더 이상은 통용 할 수 없는 것이 되어버렸고 차세대 아이폰의 화면 변화를 예측하기도 힘들게 되어버렸다.

당연하겠지만 자동 레이아웃 기능은 맥용 앱을 개발할 때도 그대로 사용 할 수 있다. 과연 맥과 iOS 사이는 떨어질 수 없는 관계이다.

예전에 안드로이드 앱 개발에서 손을 땐 뒤로 안드로이드 UI 개발 방법이 어떻게 바뀌었는지 모른다. 하지만 주변 개발자들이 하는 일을 볼 때 여전히 XML을 코딩해야 제대로 된 UI를 만들 수 있는 것 같다. 비쥬얼 툴과 비교하기엔 차원이 다른 것 같지만, 여전히 Xcode의 인터페이스 빌더가 더 진화된 툴이 아닐까 생각된다.

자동 레이아웃 기능은 인터페이스 빌더와 함께 코코아 프레임워크 차원의 코드 지원에서도 추가된 기능이다. 인터페이스 빌더 만의 능력이 아니라는 것이지만 역시나 애플 답다고나 할까...