앱 화면이나 웹 시안처럼 «내용이 바뀌어도 모양이 유지되어야 하는» 디자인은 프레임과 오토 레이아웃으로 짜 두면 편리합니다. 버튼 글자가 길어지면 버튼이 알아서 늘어나고, 화면 폭이 바뀌면 요소들이 정해 둔 규칙대로 따라 움직입니다. 처음 설정하는 데 조금 시간이 들지만, 수정이 잦은 디자인일수록 들인 시간 이상을 돌려받게 됩니다.
프레임 만들기
프레임은 대지 안에 넣는 작은 상자입니다. 버튼과 카드, 목록 한 줄 같은 단위를 프레임으로 만들어 두면 그 안의 요소를 한 덩어리로 다룰 수 있습니다. F를 누르고 대지 안을 끌면 새 프레임이 만들어지고, 이미 그린 요소들을 고른 뒤 ⌥⌘G를 누르면 그 요소들을 감싸는 프레임이 만들어집니다.
프레임을 고르면 인스펙터에 자르기 끔 · 자르기 켬이 나타납니다. 켜 두면 프레임 밖으로 나간 내용이 잘려 보이므로, 카드 안에 사진을 넣거나 스크롤 영역을 흉내 낼 때 유용합니다.
오토 레이아웃
프레임을 고르고 인스펙터의 오토 레이아웃 설정을 누르면 큰 창이 열립니다(⇧A로 바로 켜도 됩니다). 오른쪽에서 오토 레이아웃 켬을 고르면 프레임 규칙이 나타나며, 왼쪽 미리보기에서 결과를 확인하면서 값을 정한 뒤 확인을 누르시면 됩니다. 미리보기 안의 요소를 끌면 순서도 바꿀 수 있습니다.
규칙은 생각보다 단순합니다. 배치 방식에서 요소를 가로로 늘어놓을지, 세로로 쌓을지, 격자로 둘지 고르고, 넘칠 때 줄바꿈을 할지 정합니다. 그다음 요소 사이 간격과 프레임 안쪽 여백(위·오른쪽·아래·왼쪽, 또는 네 방향 같게)을 정하고, 주축 정렬(시작·가운데·끝·사이·둘레·고르게)과 교차축 정렬(시작·가운데·끝·늘이기·기준선)로 요소가 어디에 모일지 고르면 됩니다. 정렬은 미리보기의 아홉 구역을 눌러서 고를 수도 있어, 말로 생각하기 어려울 때는 원하는 자리를 직접 누르는 편이 빠릅니다.
마지막으로 프레임 크기를 가로·세로 각각 고정할지 맞춤으로 둘지 정하십시오. 맞춤으로 두면 안의 요소가 커질 때 프레임도 함께 커지므로, 글자 길이에 따라 늘어나는 버튼이 완성됩니다. 오토 레이아웃을 끄고 싶을 때는 같은 창에서 끔을 고르거나 ⌥⇧A를 누르시면 됩니다.
제약
요소를 고르고 인스펙터의 제약 설정을 누르면, 대지 크기가 바뀔 때 이 요소가 어디에 붙어 따라갈지 정할 수 있습니다. 가로는 왼쪽·오른쪽·양쪽·가운데·비율, 세로는 위·아래·양쪽·가운데·비율 중에서 고르며, 아무 칸도 켜지 않으면 제자리에 머뭅니다. 예를 들어 화면 오른쪽 위의 닫기 단추는 «오른쪽·위»로, 가로로 꽉 차는 상단 막대는 «양쪽»으로 두면 화면 폭을 바꿔도 제자리를 지킵니다. 프레임 안의 요소는 오토 레이아웃 창의 제약 칸에서도 정할 수 있습니다.
레이아웃 그리드
대지나 프레임을 고르고 인스펙터의 레이아웃 그리드 +를 누르면 격자·열·행 그리드를 깔 수 있습니다. 개수와 사이 간격, 여백, 색을 정하면 요소를 그리드에 맞춰 정렬하기 쉬워지며, ⌃G(윈도우는 Ctrl⇧4)로 보이기·숨기기를 바꿀 수 있습니다. 모바일·태블릿·데스크톱 화면을 대지 여러 개로 나란히 두고 같은 그리드로 맞춰 가면 반응형 시안도 깔끔하게 정리됩니다.