[UI DESIGN] 피그마 오토 레이아웃의 기초 이해하기

[티끌] 오토 레이아웃 개념 이해하기

 

안녕하세요 티플의 디자이너 나태진입니다 :)

저는 오늘 초기에 간편한 디자인 시스템 구축을 위한 기능, 오토 레이아웃의 간단한 개념과 기본적인 설정에 대해 알아보겠습니다.

 

---

🖌️  오토 레이아웃 기능 소개

 

피그마를 처음 사용하면서 버튼이나 레이아웃을 짜면서 매번 상하좌우 여백을 직접 조정하면서 맞추게 됩니다.

저의 경우, 직접 조정하면서 맞추는 기간이 꽤 길었는데요.

오토 레이아웃을 설정함으로써 이러한 과정을 생략할 수 있습니다.

특히 버튼이나 리스트, 팝업과 같이 콘텐츠 기능에 따라 프레임 안에서 텍스트가 변경되는 경우는 더 편리하게 사용할 수 있습니다. 

이번 글에서는 위 예시에서 대표격인 버튼을 통해 오토 레이아웃에 대해 알아보겠습니다!

일반 조정 기능을 활용한 버튼 / 오토 레이아웃을 활용한 버튼

 

보통 이런 버튼에는 유형이 나뉘어지는데요.

헤더에 사용되는 큐레이션 태그나 일반적인 페이지 연결에 사용되는 다양한 버튼 등등 

많은 버튼의 틀 안에서도 오토 레이아웃을 적용할 수 있습니다. 

 

---

🖌️  간격 조정 및 기본 정렬

 

 

우선 원하는 버튼의 크기 만큼 프레임을 생성하고 텍스트를 넣어줍니다.

 

 

버튼과 텍스트를 그룹화한 후

우측 디자인 패널에서 오토 레이아웃을 활성화해줍니다.

 

활성화하면 우측 이미지처럼 기본 세팅이 되어있는데 살펴보세요!

 

 

 

뜯어서 살펴보면,

파란 박스의 화살표들은 레이아웃 안에서의 정렬입니다.

직관적으로 세로 방향 화살표는 레이아웃에서 요소들을 세로 방향으로

가로 방향 화살표는 요소들을 가로 방향으로 정렬합니다. 

 

또, 빨간 박스는 레이아웃에서 텍스트, 아이콘, 이미지 등등 모든 것들의 간격입니다.

보통 행간, 자간으로 쓰이며 입력한 값만큼의 px크기로 조정됩니다.

 

세로 방향 정렬 / 행간 20px

이렇게 세로 / 행간 20px로 유지된 채로 생성됩니다.

 

가로 방향 정렬 / 자간 10px

반대로 가로로 전환하고 수치를 정정하면 자동적으로 변환됩니다.

 

 

🖌️  전체 정렬

위 예시를 보면 버튼 안에서 아이콘과 텍스트가

전혀.. 정렬되어 있지 않고 난장판입니다.

전체 정렬은 이런 상황에서 쓰이는 기능인데

 

현재는 우측 초록 박스처럼 기본 설정인 좌측상단 정렬에 맞줘져 있고 

이마저도 적용이 되어 있지 않습니다.

전체 정렬과 함께 앞선 2개의 기능을 한번에 사용해 이동 버튼을 만드려면..

 

 

 

가로정렬, 간격 10px, 전체 중앙 정렬이 적당한 것 같아요!

 

위와 같은 버튼이 생성되었습니다.

 

 

🖌️  Hug 와 Fix width

위에 표시된 수치에 대한 설정 방식입니다.

설정한 오토 레이아웃에서 여백을 설정하는 것인데 Hug 와 Fix width는 이를 정하는 방식입니다.

쉽게 Hug는 자동, Fix width는 수동으로 이해하면 편합니다!

 

 

 

디자인 패널의 상단 프레임에서 상하좌우 여백을 모두 Hug로 설정하면 

초기 설정해둔 값들을 유지하면서 그대로 프레임 자체가 늘어납니다.

 

 

반대로 Fixed width는 앞서 말했듯 수동입니다.

간격을 직접 수치로 입력해야 하면 입력하지 않고 계속해서 텍스트를 추가한다면

위처럼 프레임 안에서 잘려 나갑니다.

 

 

---

 

🖌️  마치며

 

오토 레이아웃은 여러운 기능이 아닌 초기에 설정하고 가는 단계라 짚고 넘어가면 좋은 부분이라 생각됩니다.

이를 통해 더 편리한 디자인 시스템을 구축하고 빠르게 디자인을 만들어 나갈 수 있는 환경이 만들어지는데

도움이 되었으면 좋겠습니다!

 

감사합니다😄