by
Dec 25. 2023
피그마의 오토 레이아웃을 글 하나로 마스터 하기
오토레이아웃을 마스터해보자
현존하는 툴 중에 UX/UI 디자인을 하기 위해서 가장 좋은 툴은 Figma이다. 지난 여러 개의 회사를 거쳐가면서 파워포인트, 일러스트레이터, 스케치 등등 정말 많은 툴을 써 왔지만, 단연코 그중 가장 최적화되어 있는 툴을 고르라면 자신 있게, 일말의 망설임 없이 피그마라고 대답 하겠다. 적어도 앞으로 5년은 이 형국이 변할 거라 생각되지 않는다. 많은 회사에서 팀 전체를 피그마를 중심으로 한 체제를 갖추었고, 한 개인이 아닌 팀 전체가 체제를 바꾼 다는 건 결코 쉬운 일이 아니기 때문이다.
피그마를 최고의 툴로 꼽는 이유는 수도 없이 많다. 디자인 시스템을 쉽게 통합할 수 있게 된 지원, 협업을 중심으로 짜인 워크 플로우, 디자이너뿐만이 아니라 PM, 엔지니어까지 참여할 수 있는 디자인 피드백 시스템, 따로 스펙을 만들지 않고 디자인이 바로 스펙이 될 수 있는 기능 등등 나열하자면 수 없이 많지만, 내가 매일매일 일상적으로 사용하는 기능은 바로 Auto layout이다. 그만큼 오토 레이아웃은 디자인을 쉽게 만들어 주고 효율성을 높여 준다.
오토 레이아웃이 뭐야?
오토 레이아웃은 말 그대로 자동적으로 레이아웃을 잡아 준다는 것이다. 여러 디자인 요소들을 몇 가지 법칙을 정해두면 자동적으로 레이아웃이 잡힌다. 요소들의 마진과 요소들 간의 스페이싱을 잡아두면 자동적으로 레이아웃을 잡아 준다. 아직을 이해가 가지 않더라도 뒤에서 더 알아보자.
왜 오토 레이아웃을 써야 하는 거야?
첫 번째로 시간이 절약된다. 디자인은 한번 한다고 완벽히 정해지는 일은 없다. 지속적으로 업데이트가 필요한데, 오토레이아웃을 잘 걸어둔 디자인 목업과 오토레이아웃을 걸어두지 않은 디자인 목업의 업데이트 차이는 많이 날 수밖에 없다. 만약 리스트 순서를 바꾼다고 하면 오토 레이아웃은 간단히 드래그 & 드롭으로 업데이트를 할 수 있는 반면, 그냥 일반 프레임으로 만든 디자인은 업데이트하는데 여러 단계를 거쳐야만 한다.
두 번째로 정렬 실수를 미연에 방지할 수 있다. 특히나 UI디자인을 하다 보면 오와 열은 항상 체크해야 한다. 디자이너의 눈은 상당히 날카로워서 3~4픽셀만 정렬이 안되어 있더라도 상당히 눈에 거슬린다. 하지만 오토 레이아웃을 사용하면 이미 정렬이 기본적으로 법칙으로 들어가 있기 때문에 정렬이 안되어 있을 걱정을 1도 하지 않아도 된다.
자, 이제 실제적으로 오토 레이아웃을 어떻게 사용하는지 알아보자.
오토 레이아웃은 3가지 방법이 있다.
1. 수직 정렬 : 디자인 오브젝트를 위에서 아래로 정렬한다.
2. 수평 정렬: 디자인 오브젝트를 왼쪽에서 오른쪽으로 정렬한다.
3. Wrap: 디자인 오브젝트를 프레임 크기에 따라서 다르게 결정한다.
오토 레이아웃의 순서를 결정하고 정렬 옵션을 선택할 수 있다.
디자인 오브젝트의 순서는 레이어의 순서에 따라 결정된다.
디자인 요소를 프레임 안에 어떻게 정렬시킬지 결정할 수 있다.
디자인 오브젝트 간의 간격과 마진을 설정할 수 있다.
디자인 오브젝트 간의 간격을 마이너스로 설정해서 오브젝트를 쌓을 수 있고, Absolute positioning을 통해서 오토 레이아웃에 영향을 받지 않고 독립적으로 포지셔닝할 수 있다.
정렬을 텍스트 기반으로 할 수도 있다.
실제로 현업에서 오토 레이아웃을 쓰는 방법
자, 이제 오토 레이아웃이 뭔지, 어떻게 서정하는 방법들이 있는지 알았으니 현업에서 이게 어떻게 사용되는지 한번 알아보자. 아래 모바일 스크린은 Header, Body, Footer로 나누어져 있고, 이들 각각은 오토 레이아웃이 걸려 있는 프레임으로 구성이 되어 있다. 또 이를 펼쳐 보면 예를 들어 Header는 Status bar, nav bar, chip bar 세 가지의 프레임으로 구성되어 있고, 이 각각의 컴포넌트는 또한 오토 레이아웃이 걸려 있다. 즉 오토 레이아웃 안에 또 오토 레이아웃이 걸려 있는 형태로 구성이 되어 있는 것이다. 사실 거의 모든 것에 오토 레이아웃이 걸려 있다고 봐도 무방하다. 모든 것에 오토 레이아웃을 거는 습관을 들인다면 확실히 빨라진 작업 속도와 깔끔하게 정렬된 디자인에 자기도 모르게 디자인 스킬이 향상된 것을 느낄 수 있을 것이다.
그럼 오토 레이아웃이 무조건 좋은 거야?
꼭 오토 레이아웃이 무조건 좋다고 할 수만은 없다. 초기에 디자인 옵션들을 익스플로러 하는 과정에서는 오히려 방해가 될 수도 있다. 디자인 오브젝트를 어디에 놓으려고만 하면 자꾸 오토 레이아웃이 걸려 내가 원하지 않는 곳에 오브젝트들이 정렬될 때도 있기 때문이다. 그럴 때는 오히려 방해가 된다. 그때는 어떤 정렬의 법칙을 규정하는 것보다 중요한 것이 디자인의 자유도를 확보하는 것이다. 말 그래도 '익스플로러' 아닌가. 오토 레이아웃은 어느 정도 디자인에 가닥이 잡혀 있을 때 한번 쭉 디자인 레이어들을 살펴보면서 오토 레이아웃을 걸어 주면 효과적이다.
Outro
앞에서 말했던 것처럼 피그마의 기능은 무궁무진하고, 오토 레이아웃은 그 기능 중 하나이다. 피그마를 마스터하면 디자인 스킬이 한껏 올라간 것을 경험할 수 있을 것이다. 사람들 간의 관계에서도 친구가 되려면 많은 시간을 함께 보내야 친구가 될 수 있는 것처럼, 툴도 마찬가지이다. 피그마와 많은 시간을 함께 보내보자. 그러면 어느새 피그마를 마스터한 본인의 모습을 발견할 수 있을 것이다.
Bonus.
본 글은 콜로소 온라인 강의 콘텐츠 중 일부로 작성되었습니다. 아무래도 글보다는 비디오 형태로 배우는 게 더 효과적인데요, 오토 레이아웃에 관련된 강의가 샘플로 오픈되었습니다.
이번에 콜로소와 함께 강의를 진행하면서 이와 같은 더 많은 배울 거리, 콘텐츠를 만들어 나가고 있습니다. 혹시 전체 강의가 궁금하신 분은 아래 링크를 통해서 확인하실 수 있습니다. https://bit.ly/3v2VQzw
