오즈코딩스쿨 디자인 캠프 - 규칙을 한 번 정해두면 화면이 알아서 반응한다 — 오토레이아웃 (day12)

 

 

오늘 수업은 손이 정신없이 바빴다. 이론은 짧게 보고 대부분의 시간을 피그마 실습에 썼는데, 주제는 오토레이아웃 하나였다. 솔직히 중간에 다들 한 번씩 길을 잃었고 나도 그랬다. 그런데 헤매면서도 한 가지는 분명해졌다. 오토레이아웃은 화면의 모든 요소를 내가 손으로 붙잡는 게 아니라, 규칙을 한 번 정해두고 나머지는 피그마에 맡기는 일이라는 것.

본격적인 수업 전, 챙겨둔 도구 두 가지

오토레이아웃에 들어가기 전에 앞으로 두고두고 쓸 자료부터 챙겼다.

하나는 iOS 세이프 에어리어(Safe Area) 가이드다. 피그마 커뮤니티에 공개된 파일인데, 아이폰 모델별 화면 크기와 안전 영역이 정리되어 있다. 세이프 에어리어는 쉽게 말해 상단 노치나 다이나믹 아일랜드, 하단 홈 인디케이터처럼 시스템 UI가 차지하는 구역을 뺀, 콘텐츠를 안전하게 올려도 되는 영역이다. 이 영역을 모르고 디자인하면 실제 기기에서 내용이 노치 뒤로 숨거나 홈 인디케이터와 겹쳐 보인다. 모바일 화면을 만들 땐 이 가이드를 꼭 참고하기로 했다.

다른 하나는 크롬 확장 프로그램 두 개다.

• 멋진 스크린샷 및 스크린 레코더 — 지금 보이는 화면만, 스크롤 전체까지, 혹은 선택한 영역만 캡처할 수 있다. 화면 플로우를 영상으로 녹화하는 것도 된다. 레퍼런스 리서치할 때 직접 쓰는 프로덕트를 바로 캡처하기 좋다.
• 이미지 다운로더 — 지금 열려 있는 페이지에 박혀 있는 이미지 리소스를 한 번에 받아준다. 클론 디자인을 할 때 이미지를 하나하나 찾는 수고를 덜어준다.

오토레이아웃, 규칙을 한 번 정해두는 일

오토레이아웃은 '오토(자동) + 레이아웃(배치)', 말 그대로 자동으로 정렬해주는 기능이다. 내가 배치한 요소들을 정해둔 규칙에 따라 스스로 정렬하고, 내용이 바뀌면 크기나 간격이 알아서 반응하게 만든다. 개발을 아는 분들에겐 CSS의 플렉스박스(Flexbox)나 그리드(Grid)처럼 동작한다고 설명됐는데, 그래서 나중에 개발자와 소통할 때도 유용한 기능이라고 한다.

UI 디자인은 예술적인 디자인이라기보다 구조적인 디자인이다.

이 말이 오토레이아웃을 한 줄로 설명한다고 느꼈다. 요소를 일일이 손으로 옮기고 박스 크기를 맞추는 대신, 규칙을 딱 한 번 정해두면 피그마가 알아서 맞춰준다. 그래서 화면이 구조적으로 깔끔해지고, 무엇보다 수정 효율이 크게 올라간다.

오토레이아웃이 없을 때와 있을 때를 나란히 보면 차이가 분명하다.

상황오토레이아웃이 없을 때오토레이아웃을 쓸 때

버튼 텍스트가 길어지면	버튼 박스를 직접 늘려야 한다	버튼 크기가 자동으로 반응한다
카드 안 정보가 늘어나면	간격을 일일이 다시 맞춘다	간격·패딩이 유지되며 늘어난다
리스트 항목이 추가되면	아래 요소를 전부 밀어준다	아래 요소가 간격을 유지하며 밀려난다
화면을 수정할 때마다	전체 균형이 무너져 다시 잡는다	정해둔 규칙 안에서 알아서 정렬된다

이 대목에서 간호사로 일하던 때가 떠올랐다. 환자 상태가 바뀔 때마다 모든 걸 손으로 다시 점검하고 맞추는 일은 끝이 없고, 실수가 끼어드는 것도 늘 그 지점이었다. 그래서 표준 프로토콜이나 처방 세트처럼 한 번 정해두면 상황에 따라 알아서 굴러가는 구조가 얼마나 든든한지 몸으로 알고 있다. 며칠 전 수업에서 '사람을 바꾸지 말고 환경을 바꿔서 행동을 이끌라'고 배웠는데, 오토레이아웃도 결국 같은 결이다. 매번 손으로 붙잡는 대신, 규칙이라는 환경을 만들어두고 화면이 알아서 반응하게 하는 것.

오토레이아웃 패널, 여섯 가지만 보면 된다

오토레이아웃을 켜면 조절할 수 있는 속성이 여섯 가지다. 지금 다 외우기보다 실습하면서 익히면 된다고 했다.

속성무엇을 정하나핵심 옵션

방향	요소를 어느 방향으로 나열할지	세로, 가로 (그리드는 아직 베타)
리사이징	내용이 바뀔 때 크기가 어떻게 반응할지	픽스트, 허그, 필
얼라인먼트	프레임 안에서 요소를 어떻게 정렬할지	9방향 정렬, 오토
갭	요소 사이의 간격	숫자값, 오토
패딩	프레임 안쪽 여백	상하좌우 개별 설정
클립 콘텐츠	영역을 벗어난 요소를 자를지 보여줄지	오토레이아웃 무시와 함께 사용

방향에서 자주 쓰는 건 세로와 가로다. 그리드는 2023년에 나왔지만 아직 베타라 안정도가 높진 않다고 한다. 갭은 오토로 두면 바깥 부모 영역에 맞춰 간격이 알아서 벌어지고, 패딩은 커스텀을 누르면 상·하·좌·우를 따로 줄 수 있다.

제일 헷갈렸던 허그·필·픽스트

여섯 속성 중에서도 리사이징의 세 값이 가장 헷갈렸다. 여기엔 부모와 자식이라는 개념이 깔려 있다. 바깥 프레임이 부모, 그 안에 들어 있는 요소가 자식이다.

값의미누가 누구에 반응하나

허그(Hug)	자식을 감싸 안는다	자식 크기에 따라 부모가 바뀐다
필(Fill)	부모를 꽉 채운다	부모 크기에 따라 자식이 바뀐다
픽스트(Fixed)	크기를 고정한다	무엇이 바뀌어도 움직이지 않는다

허그는 '안아준다'는 말 그대로, 안에 있는 텍스트가 길어지면 부모 박스가 거기 맞춰 늘어난다. 픽스트는 반대로 텍스트가 얼마나 길어져도 꿈쩍하지 않는다. 필은 부모 영역을 꽉 채우도록 자식이 늘어나는 값이다.

여기서 꼭 기억할 포인트. 필은 자식 요소에만 줄 수 있다. 부모를 선택한 상태로 드롭다운을 열면 필이 아예 없고 허그만 나온다. 그래서 부모를 선택하고 엔터를 눌러 자식 요소를 선택한 다음, 우측 드롭다운에서 '필 컨테이너'를 줘야 한다. 이 순서를 모르면 필이 왜 안 먹는지 한참 헤매게 된다(내가 그랬다).

리사이징 옆에는 최소·최대값(Min·Max) 설정도 있다. 요소가 어느 크기 밑으로는 안 줄고 어느 크기 위로는 안 커지도록 한계를 거는 기능이다. 속성값에서 가로·세로 글자 양옆에 선이 그어져 있으면 민·맥스가 걸린 거고, 드롭다운 맨 아래 '리무브 민·맥스'로 한 번에 해제할 수 있다.

오늘 외운 단축키들

실습 내내 강사님이 "이건 진짜 많이 쓰게 된다"고 강조한 단축키들. 따로 정리해둔다.

동작단축키 (Mac / Windows)

오토레이아웃 만들기	Shift + A / Ctrl + Shift + A
오토레이아웃 해제	⌘ + Backspace / Ctrl + Backspace
요소 복제	Option + 드래그
같은 선상에 복제	Option + Shift + 드래그
맨 아래(가장 안쪽) 요소 바로 선택	⌘ + 클릭
자식 요소 선택	부모 선택 후 Enter
패딩·간격값 확인	Option + 마우스 호버
플러그인 열기	⌘ + K
문서 내 검색	⌘ + F / Ctrl + F
가운데 점(·) 입력	Option + Shift + 9

특히 Shift + A는 오늘 손에 붙도록 썼다. 요소들을 전체 선택하고 Shift + A를 누르면 바로 오토레이아웃으로 묶인다. 그리고 ⌘ + 클릭으로 맨 아래 요소를 바로 집는 건, 겹겹이 쌓인 화면에서 더블클릭으로 파고들지 않아도 돼서 생각보다 훨씬 자주 쓰게 됐다.

직접 만들어보며 익힌 것들

오늘은 개념을 듣고 바로 손으로 만들어봤다. 검색 UI, 체크리스트, 하단 내비게이션, 리스트까지. 막상 만들려니까 개념을 알아도 손이 안 따라줘서, 강사님이 같은 걸 몇 번이나 다시 시연해줬다.

가장 중요했던 원칙은 묶는 순서였다. 한 번에 다 묶는 게 아니라, 비슷한 속성을 가진 애들끼리 먼저 묶고(예: 텍스트끼리), 그다음에 아이콘과 함께 한 번 더 묶어서 바깥 박스를 만든다. 안에서 밖으로 차곡차곡 쌓아 올리는 식이다. 그래서 클론을 할 땐 바로 시작하지 말고 "이 화면을 어떻게 묶어 나갈지" 계획부터 세우라는 말이 계속 나왔다. 실제로 검색창 하나도, 텍스트와 돋보기 아이콘을 먼저 묶고 → 한 번 더 묶어 박스를 만들고 → 검색 텍스트를 필값으로 바꿔 입력 영역을 늘리고 → 알값 9999로 양 끝을 둥글리는 순서로 만들어졌다.

작업하면서 따로 챙긴 것들도 있다.

• 패더 아이콘(Feather Icons) 플러그인 — 아이콘을 가져올 수 있는 플러그인인데, 여기 아이콘은 벡터 선이 살아 있어서 두께를 조절할 수 있다. 외곽선만 따져 있는 다른 리소스는 두께 조정이 어렵다. ⌘ + K로 플러그인을 열어 쓴다.
• 언스플래시(Unsplash) 플러그인 — 이미지 프레임 안에 사진을 바로 넣을 때 사용했다.
• 아이콘은 꼭 바깥 프레임까지 — 아이콘을 가져올 땐 알맹이 벡터만 가져오면 안 되고 겉에 있는 영역(터치 영역)까지 같이 가져와야 한다. 이걸 놓치면 정렬이 자꾸 어긋난다.
• 말줄임표(턴케이트 텍스트) — 텍스트가 여러 줄로 길어질 때, 타이포그래피 옵션에서 '턴케이트 텍스트'를 켜고 맥스 라인을 지정하면 그 줄 수까지만 보이고 나머지는 '…'으로 처리된다. 리스트에서 제목이 길어져 정렬이 무너지는 걸 막아준다.

뱃지나 알림 숫자처럼 오토레이아웃을 무시하고 겹쳐 배치해야 하는 경우도 있었다. 이럴 땐 요소를 선택하고 우측 포지션 옵션의 아이콘을 눌러 오토레이아웃을 무시하고 원하는 위치에 둘 수 있다.

 

 

오늘은 솔직히 머리보다 손이 먼저 지친 날이었다. 개념은 짧은데 막상 묶고 풀고 필값 주고 하다 보면 자꾸 엉켰고, 워크보드를 보면 다들 비슷하게 헤매고 있었다. 그런데 이게 말로만 들어선 절대 안 잡히고 손으로 여러 번 만들어봐야 비로소 붙는 감각이라는 것도 알겠다.

오늘 배운 걸 한 줄로 줄이면, 오토레이아웃은 화면을 통제하는 게 아니라 규칙을 정해두고 화면을 믿는 일이다. 하나하나 붙잡으려 할수록 무너지고, 부모와 자식의 관계를 정해주면 알아서 반응한다. 허그와 필의 차이도 머리로는 이해했지만 아직 손끝까진 안 왔으니, 과제 시간에 검색창과 체크리스트, 카드를 다시 만들어보면서 그 차이를 몸에 새겨야겠다. 다음 화면을 그릴 땐 무작정 시작하지 말고, "이걸 어떤 덩어리로, 어떤 순서로 묶을까"부터 한 줄 적어두는 것으로 시작해봐야지.