오토 레이아웃

디자인 도구는 원래 좌표 위에 그림을 놓는 프로그램이었습니다. 상자를 하나 그리면 가로 몇, 세로 몇 하는 값으로 굳었고, 안에 든 글자가 길어지든 짧아지든 상자는 처음 그린 크기 그대로 있었습니다.

그래서 글자 한 줄을 고치는 일에 늘 손으로 하는 뒤처리가 붙어 왔습니다. 버튼 안 글자를 저장에서 변경 사항 저장으로 바꾸면 글자가 상자 밖으로 삐져나오니 상자를 늘리고, 늘어난 만큼 옆 취소 버튼을 밀고, 두 버튼을 감싸던 카드 높이도 다시 맞춰야 했습니다. 같은 버튼이 열 화면에 있으면 이 일을 열 번 했고, 한두 곳은 어긋난 채로 남았습니다.

비용은 대화에까지 번졌습니다. 지현이 문구 하나만 바꿔 달라고 하면 민서가 "그거 스무 군데예요" 라고 답했고, 고쳐야 할 문구를 그대로 두는 선택이 쌓였습니다. 손이 많이 간다는 이유로 판단이 밀린 겁니다.

오토 레이아웃은 그 뒤처리를 도구가 대신하게 만든 기능입니다. 요소를 좌표에 붙박아 두는 대신 순서와 규칙으로 놓게 한 겁니다. 지금은 피그마처럼 브라우저에서 함께 편집하는 도구를 비롯해 어디에나 이름만 조금씩 다른 형태로 들어 있습니다.

여러 요소를 하나의 틀로 묶고 그 틀에 네 가지를 지정하면, 내용이 바뀔 때마다 도구가 그 값대로 배치를 다시 계산합니다.

1. 방향 — 묶인 요소를 가로로 세울지 세로로 쌓을지 정합니다. 가로를 고르면 요소가 왼쪽부터 한 줄로 서고, 새 요소를 넣으면 맨 뒤에 붙으면서 나머지가 그만큼 밀립니다.
2. 간격 — 요소와 요소 사이를 얼마나 띄울지 한 번만 정합니다. 12로 두면 항목이 세 개든 아홉 개든 모든 사이가 12로 유지되고, 16으로 바꾸면 여덟 군데가 한꺼번에 벌어집니다.
3. 안쪽 여백 — 틀의 테두리와 내용 사이 거리입니다. 위아래 8, 좌우 16으로 정해 두면 글자가 두 배로 길어져도 글자 양옆에는 늘 16이 남습니다. 버튼이 글자 길이와 상관없이 같은 인상을 유지하는 건 이 값 덕분입니다.
4. 크기 규칙 — 틀이 셋 중 하나로 행동합니다. 내용에 맞춤은 안에 든 것만큼만 커지고, 고정은 지정한 값을 지키고, 채움은 바깥 틀이 내주는 만큼 늘어납니다. 버튼은 내용에 맞춤, 카드 너비는 고정, 카드 안 본문은 채움으로 두는 조합이 흔합니다.

틀 안에 틀을 넣을 수도 있습니다. 버튼 두 개를 가로 틀로 묶고, 제목과 본문과 그 버튼 틀을 다시 세로 틀로 묶으면 카드 한 장이 됩니다. 본문이 두 줄에서 네 줄로 늘어나면 세로 틀이 높이를 다시 재고, 그 카드가 들어 있던 목록도 밀려 내려갑니다. 사람이 만지는 값은 여전히 간격 하나뿐입니다.

정한 규칙은 웹에서 쓰는 배치 방식과 거의 그대로 대응해서, 가로·간격 12로 짜 둔 틀이 구현에서도 같은 개념으로 옮겨집니다. 그래서 핸드오프, 즉 디자인을 개발에 넘기는 과정에서 간격 값을 일일이 적어 줄 일이 줄어듭니다.

같은 모양이 내용만 달리해 반복되는 자리에는 거의 전부 들어갑니다.

가장 작은 단위는 버튼과 태그입니다. 글자가 두 자든 여덟 자든 안쪽 여백이 같아 모양이 흐트러지지 않습니다. 그 위는 목록과 카드입니다. 알림 목록에 항목이 3개일 때와 11개일 때를 둘 다 만들어 보려면, 없을 때는 화면을 두 장 그리고 있을 때는 항목을 복사해 붙이면 끝납니다.

언어를 바꿔 볼 때 차이가 가장 크게 드러납니다. 한국어 시안을 영어로 바꾸면 글자 수가 보통 1.5배에서 2배로 늘어나는데, 틀이 따라 늘어나면 그대로 쓰고 안 늘어나면 스무 화면을 다시 그려야 합니다. 화면 너비를 375에서 1280으로 끌어 보며 반응형 디자인, 즉 화면 크기에 따라 배치가 바뀌는 설계가 버티는지 확인하는 자리도 마찬가지입니다.

반복 부품을 만들 때는 사실상 전제 조건입니다. UI 컴포넌트, 그러니까 여러 화면에 똑같이 들어가는 재사용 부품의 원본에 오토 레이아웃이 걸려 있어야 인스턴스, 즉 원본을 가져다 쓴 복제본이 각자 다른 글자를 담고도 같은 모양을 지킵니다. 원본에 걸려 있지 않으면 복제본마다 손으로 폭을 맞추게 되고, 색과 간격을 한 벌로 정리해 둔 디자인 시스템이 있어도 실제 파일은 제각각으로 흩어집니다.

"이 카드 오토 레이아웃이 안 걸려 있어서 글자 늘어나니까 다 깨지네요."

좌표로 그려 둔 시안이라 내용이 바뀌면 손으로 다시 맞춰야 한다는 지적입니다.

"버튼은 내용에 맞춤으로 두고 좌우 여백만 16으로 잡아 주세요."

버튼 너비를 고정하지 말고 글자 길이에 따라 늘어나게 하되 여백만 고정하자는 요청입니다.

"오토 레이아웃으로 짜 두면 구현도 값 그대로 받을 수 있어요."

시안의 간격과 정렬 규칙이 코드로 거의 그대로 옮겨진다는 뜻입니다.

페이지덱에서는 문구를 고칠 때마다 이 기능의 유무가 드러납니다. 지현이 결제 버튼 문구를 지금 결제하기에서 카드로 결제하기로 바꾸자고 하면, 민서는 시안을 열어 글자만 고칩니다. 버튼이 늘어나고 옆 버튼이 밀리고 둘을 감싼 영역의 높이가 다시 잡히는 것까지 도구가 처리하니, 한 시간짜리 일이 5분으로 끝납니다.

반대로 예전에 좌표로 그려 둔 화면은 티가 납니다. 태오가 "여기 간격이 12인가요 14인가요" 하고 묻는 화면이 대개 그런 쪽입니다.

오토 레이아웃을 걸어 두면 반응형이 저절로 된다고 이해하는 경우가 많습니다. 틀을 넓히면 안에 든 요소가 알아서 자리를 잡으니 그렇게 보일 만합니다. 하지만 이 기능은 지정한 규칙대로 다시 계산할 뿐입니다. 가로로 묶어 둔 요소는 폭이 좁아져도 가로로 남아서, 375 너비에서는 세로로 쌓여야 할 항목이 찌그러진 채 한 줄로 버팁니다. 좁은 화면용 배치는 따로 만들어야 하고, 이걸 모르면 넓은 화면에서만 확인한 시안이 그대로 구현돼 모바일에서 글자가 잘립니다.

지금 급하니 나중에 걸겠다는 판단도 자주 어긋납니다. 좌표로 그리는 쪽이 당장 빠른 건 사실입니다. 다만 나중에 거는 작업은 이미 흩어진 요소를 어떤 순서로 묶을지 하나씩 풀어야 해서 처음부터 거는 것보다 비쌉니다. 스무 장 그린 뒤에 돌아가느니 첫 장에서 잡고 가는 편이 결국 짧습니다.