본문 바로가기
디자인 툴/Figma

[Figma] Auto layout / 피그마 - 오토 레이아웃

by yerica 2024. 5. 30.
Auto layout(오토 레이아웃)이란?


반응성과 유연성이 뛰어난 동적 레이아웃을 만들 수 있는 기능이다. 기본적으로 프레임 속성이 포함되어 있다.

프레임 내부 구성 요소들의 배열 방향, 간격, 패딩, 정렬 등 다양한 옵션을 설정할 수 있다.

내부 컨텐츠의 크기에 따라 프레임 크기가 자동으로 조정되게 설정하거나, 반대로 프레임 크기에 따라 컨텐츠의 크기를 조정되도록 설정할 수 있다.

<단축키>
- 오브젝트를 선택한 상태에서 Shift + A
- 프레임을 선택한 상태에서 Auto layout 패널의 추가(+) 아이콘 클릭하기
- 프레임이나 오브젝트를 선택한 상태에서 마우스 우클릭 후 Add auto layout 선택

 

프레임을 선택한 후 우측의 Auto layout 패널이 뜨는 것을 확인할 수 있다.

Individual padding 을 클릭하면 패딩의 간격을 좀 더 세밀하게 수치로 조정이 가능하다.

 


오토레이아웃의 형태 알아보기

 

 

사각형 도형을 한개를 만든 다음 오토레이어 단축키(shift+a)를 클릭하면 도형을 감싸는 투명한 프레임이 생긴다.

도형만 있는 모습(좌) 프레임이 생긴 모습(우)

 

프레임의 구분을 확실히 하기 위해 프레임에 색상을 부여한다.

 

도형을 선택후 ctrl+d를 누르면 복사가 되는데,
오토레이어의 방향이 아래를 향하고 있어 아랫방향으로 복사가 되었다.

 

지금부터 연보라색 사각형 도형을 컨텐츠라 명명하겠다.
핑크색 사각형들 사이에 보이는 핑크색 외각선은 Gab(갭) 이라 불리고, 프레임까지의 외각부분에 존재하는 파란색 외각선은 Padding(패딩) 이라 한다. 만약 컨텐츠의 내부에 하단 우측 사진 속 빨간 빗금처럼 여백이 생긴다면 이는 Margin(마진) 이라고한다.

갭과 패딩(좌) 마진(우)


컨테츠 추가 및 정렬방식

 

 

붉은색의 컨텐츠 상자를 만든 후, 기존 컨텐츠 박스 중간으로 드레그하면 자연스럽게 프레임의 크기가 조정되는 것을 확인 할 수 있다. 컨텐츠들은 위치를 조정하고 싶을때 키보드 이동키로 쉽고 빠르게 변환하는 것이 가능하다.

Auto layout 에서 컨텐츠들의 방향을 어떻게 설정하느냐에 따라 컨텐츠들의 위치와 프레임의 모습이 바뀐다.

vertical layout으로 설정하자 컨텐츠들이 수직으로 정렬된 모습
Horizontal layout으로 설정하자 컨텐츠들이 수평으로 정렬된 모습
Wrap 같은 경우에는 프레임 크기를 내가 어떻게 설정하느냐에 따라 자동으로 컨텐츠들이 정렬하는 모습

 


패딩과 갭의 사이즈 조절

 

 

기본적으로 패딩과 갭의 사이즈는 마우스로 드레그 하는 형식으로 간단히 조절 가능하다.
키보드 Alt를 함께 누르는 것을 통해 동시 조정 여부도 정할 수 있다.

그냥 사이즈를 조절했을 때
Alt 키를 누른 상태에서 조절할 때

 

프레임을 복제하여 두개를 같이 드레그하면, 프레임 사에의 간격 또한 조절 가능하다.

중간의 진한 핑크색 부분을 클릭하여 간격 조절

 

오토레이아웃의 9개의 점을 클릭하여 프레임 안에서 어느 방향으로 정렬할 것인지 정할 수 있다.

 

 

갭의 사이즈를 조절하는 방법이다.
숫자로 사이즈를 지정하거나, Auto로 프레임에 맞춰 자동으로 갭의 사이즈가 정해지게 할 수 있다.
이렇게 여백에 맞춰 컨테이너가 딱 맞게 변하는 것을 '스페이스 비트윈' 상태라고한다.
프레임의 넓이가 기준이 되어 컨텐츠의 간격이 변하는 것이지 갭이 기준이 되는 것이 아니라는 것을 알아야한다.

숫자로 지정(좌) Auto로 변경(우)

 

갭을 auto로 바꾸자, 아래와 같이 프레임 속 도형들 사이의 갭이 프레임에 맞춰 늘어나고 줄어드는 것을 볼 수 있다.

프레임 속 도형의 위치가 프레임에 맞춰 바뀌는 모습

 

Auto layout 옆의 점세개 부분을 클릭하면 layout의 세세한 부분을 조정할 수 있는 설정 창이 뜬다.
- Strokes : 프레임의 기준을 stroke의 중앙으로 할 것인지, 바깥 부분으로 할 것인지 설정할 수 있다.
코딩을 할 경우에는 1,2 픽셀로 오류가 발생할 수 있기 때문에 이를 included in layout으로 설정하는 것이 중요하다.
- Canvas stacking : 도형의 첫면을 어떠한 순서로 배치할 것인지를 정할 수 있다.
- Align text baseline : 두개의 글자가 존재할 때 배치를 어떻게 할 것인지 정할 수 있다. 

Canvas stacking
strokes

글자 두개를 쓴 다음, 드레그 하여 오토레이아웃(shift+a)을 설정하고 Align text baseline 을 체크하여 베이스 라인을 맞추는 모습

 

 

체크표시를 하면 박스가 이런 A 표시가 뜬다. 이걸로 사이 간격을 조절하거나 기준을 정할 수 있다.


오토레이아웃에 구애받지 않게 고정시키는 방법


우측 상단에 Absolute position을 클릭하면 거리를 기준으로 고정된다.
Constraints 속 방향이 기준이며, 프레임 사이즈가 늘거나 줄어도 x,y 축을 기준으로 그 자리에 고정된다.

프레임 크기를 늘거나 줄여도 고정되어있는 모습

Constraints를 좌측에서 우측으로 바꿨을 때 우측에 고정되는 모습

 

프레임의 auto layout을 좌측으로 고정시켜 아래와 같이 응용할 수 있다.


Fill, Fixed, Hug

 

내부 도형의 속성을 가로, 세로 모두 Fill container로 바꾼 뒤 프레임 크기를 조절해보면 프레임의 크기에 따라 도형의 모양이 바뀌는 것을 알 수 있다. 

오토레이어 해제 방법 : Shift + Alt + A

오토레이어(좌) 일반 프레임으로 전환(우) 아이콘이 바뀐 모습

오토레이아웃은 만드려고 하는 것의 가장 작은 단위부터 제작하며 들어가야 나중에 전체적으로 무언가를 만들려고 할 때 무너지지 않는다.
프레임이 Hug 속성이고 도형이 Fixed 이면 프레임의 크기에 따라 도형이 변하지 못하고 숨어버리는 현상을 볼 수 있다. 프레임이 Fixed이로 도형이 Fill 이면 프레임의 크기에 따라 도형의 크기가 변하는 것을 알 수 있다.

프레임 hug, 도형 fixed
프레임 fixed, 도형 fill

 

오토레이아웃을 클릭하고 다시 오토레이아웃을 설정하면 프레임을 감싸는 새로운 프레임이 생긴다.

 

이때부터 fill, hug, fixed 속성이 변하기 때문에 찬찬히 잘 조정해 주어야 한다.