[UX UI figma] 피그마 오토 레이아웃 (Auto layout)

 

안녕하세요 PNcoding입니다 :)

 

오늘은 피그마의 핵심 기능 중 하나인 오토 레이아웃에 대하여 알아보도록 하겠습니다.

 

피그마를 아직 사용해 본 적 없으신 분들은 이 포스팅을 참고해 보세요!

https://pncoding.tistory.com/5

[UX UI figma] 피그마란?

---

 

오토 레이아웃?

피그마의 오토레이아웃은 UI 디자인을 보다 더 쉽고 효율적으로 작업하는 것을 도와줍니다.

오토 레이아웃을 사용하면 반응형 작업 시 레이아웃을 편하게 조정할 수 있으며, 반복되는 콘텐츠 작업 시에도 손쉽게 수정할 수 있습니다.

 

 

오토 레이아웃 생성

단축키는 Shift + A 입니다.

혹은 부모와 자식요소 레이어를 선택한 다음 마우스 우클릭 후 Add auto layout 을 눌러도 됩니다.

혹은 부모와 자식요소 레이어를 선택한 다음 우측 디자인 패널에서 Auto layout을 클릭하면 됩니다.

오토 레이아웃 생성

 

추가적인 단축키가 궁금하신 분은 이 포스팅을 참고해 주세요.

https://pncoding.tistory.com/34

[UX UI figma] 피그마 단축키

 

 

오토 레이아웃 기능 패널

1. 레이아웃 방향

 

기본적으로 Vertical(수평), Horizontal(수직) 방향을 지정해 줄 수 있었는데 2023년부터 Wrap이 추가되었습니다.

 

기본적으로 오브젝트들을 가로로 배치한 다음 오토 레이아웃을 지정하면 수평방향으로, 세로로 배치한 다음 오토 레이아웃을 지정하면 수직 방향으로 오토레이아웃이 생성됩니다.

하지만 배치를 어떻게 하던 수직, 수평을 바꿀 수 있으니 크게 신경 쓰지 않으셔도 됩니다.

 

그렇다면 새로 생긴 Wrap이라는 기능은 무엇일까요?

이 Wrap이라는 기능은 줄 바꿈을 해주는 기능입니다.

이렇게 오토 레이아웃을 지정한 다음 줄 바꿈을 지정해 주고 오토 레이어의 크기를 줄여주면 안의 오브젝트들이 자동으로 줄 바꿈이 적용되는 것을 확인할 수 있습니다.

크기를 줄이기 시작하니 초록색 오브젝트가 밑으로 밀려 내려갔습니다.

크기를 더 줄이니 보라색 오브텍트까지 밑으로 밀려 내려갔습니다.

 

이런 새로운 기능이 생김으로 인해 반응형 작업이 더 편하게 될 것 같네요 :)

 

반응형

 

2. 레이아웃 간격

오토 레이아웃을 생성한 뒤 오브젝트 들의 간격을 조절해 줄 수 있습니다.

직접 수치를 넣어 수정하거나 오브젝트 사이에 마우스 커서를 두어 드래그로 간격을 조절해 줄 수 있습니다.

 

3. 좌우, 상하 여백(padding 패딩) 간격

여백 간격은 글자와 사각형 오브젝트 사이의 간격을 의미한다고 보시면 됩니다.

좌우를 동일하게, 상하를 동일하게 넣어줄 수 있으며, 각각 다른 수치를 넣고 싶다면 간격 영역의 맨 오른쪽의 모서리가 떨어진 사각형 아이콘을 눌러서 지정하면 됩니다.

 

 

4. 프레임 내 정렬

 

오토 레이아웃 내 자식 요소의 정렬을 바꾸어 줄 수 있습니다.

 

 

 

---

 

 

오토 레이아웃 쉽게 사용하는 방법

처음 오토 레이아웃을 접하시는 분들은 이 기능을 언제 어떻게 사용하는지 몰라서 사용하지 못하거나, 또한 사용하고 나서 수정할 때 레이아웃이 다 꼬이는 경험을 했을 거예요.

 

그럴 때는 이러한 방법으로 활용하시면 좀 더 쉽게 오토 레이아웃을 활용하실 수 있을 거예요!

 

1. 간격을 넣을 곳을 미리 계획하여 덩어리로 묶어본다

2. 계획한 덩어리 기준 역순으로 오토 레이아웃을 생성해 준다

 

 

예시)

 

이런 레이아웃을 만들고 싶을 때 간격을 넣고 싶은 부분을 큰 순서대로 생각합니다.

 

 

이제 오토 레이아웃을 만들 때는 반대 순서로 만들어 주시면 됩니다.

 

 

 

---

 

 

항상 영역을 나누고 조립한다고 생각하면서 디자인 작업을 진행하시면 좀 더 편하게 오토 레이아웃을 적용하실 수 있을 거예요!

 

여러 레이아웃 작업을 연습하시면서 오토 레이아웃 적용을 해 보아요 :)