피그마 강의 (4) 오토레이아웃 기능

1. 오토레이아웃의 정의

auto-layout, 즉 레이아웃을 자동으로 조정할 수 있는 기능이다.

우리가 보는 프레임(코드 블록)은 실제로 이렇게 구성되어 있는데, 

• 패딩(Padding): 코드 블록 안에 있는 개체와 함께 실제 블록의 사이즈가 되는 내부 여백
• 보더(Border): 코드 블록 내부 공간 바로 바깥의 가장자리. 실제 코드 블록의 테두리
• 마진(Margin) : 코드 블록 바깥의 여백이자 다른 코드 블록과의 간격

오토레이아웃은 개체를 패딩으로 감싸 컨테이너로 구현할 때 사용하는 기능이다. 

이런 식으로...

오토레이아웃은 간격에 맞게 컨테이너 (프레임)을 쌓을 수 있게 해준다. 

 

2. 오토레이아웃 사용법

개체를 우클릭하여 add auto layout을 선택하거나, shift+a를 누르면 오토레이아웃이 적용된다

Frame 1 옆에 보이는 저 아이콘은 오토레이아웃이 적용되었다는 의미이다.

오토레이아웃을 적용하면 텍스트개체 옆에 패딩이 적용되어 있는 모습을 확인할 수 있다. 

 

오토레이아웃을 적용하지 않고 그냥 Frame selection을 적용하면 상단 이미지처럼 패딩이 적용되지 않은 채 그냥 코드블록으로 전환된 개체를 확인할 수 있다. 

이미 만든 개체에도 오토레이아웃을 적용할 수 있다. 단, 그렇다고 패딩이 자동으로 적용되지는 않는다. 오토레이아웃 속성을 부여하는 것 뿐, 패딩은 자신이 직접 입력하여 적용시켜야 한다.

 

정리

오토레이아웃은 두 가지 방법으로 적용시킬 수 있다. 

1) 개체에 오토레이아웃을 바로 적용시키기. -> 패딩 자동으로 적용됨

2) 프레임에 오토레이아웃 속성을 부여하기. -> 속성만 부여. 

 

3. 오토레이아웃 패널 둘러보기

오토레이아웃 패널은 당연히, 개체가 아니라 개체 위에 오토레이아웃이 적용된 프레임을 선택해야 확인할 수 있다. 

 

Direction부터 살펴보겠다.

아래 방향은 오토레이아웃 내 들어있는 개체를 수직으로 정렬하는 것, 

오른쪽 화살표는 수평으로 정렬하는 것을 의미한다.

세 번째 아이콘은 감싸기를 의미하는데, 일정 위치까지는 수평으로 정렬되다가 일정 위치부터는 다음 줄로 넘어간다. 

(이 일정 위치가 어디부터인지는 잘 모르겠다.) 

 

Alignment는 오토레이아웃이 적용된 프레임의 크기가 변할 때, 프레임 내 들어있는 개체를 어떻게 정렬할지를 나타내는 기능이다. 

이렇게...

우측 상단의 파란 아이콘을 클릭하면 오토레이아웃이 해제되고 일반 아이콘으로 돌아간다. 

그 왼쪽 아이콘은 객체가 프레임 내에 딱 맞게 되도록 조절해주는 기능이다. 

우측 아이콘을 클릭하면 오토레이아웃의 고급기능으로 접근할 수 있다. 웬만하면 사용 안한다.

 

 

Gap은 객체 간 간격을 설정하는 기능을 의미한다. 전자는 객체 간 수평 간격을, 후자는 객체 간 수직 간격을 조정한다. 

Padding. 말그대로 패딩값을 적용해주는 기능이다. 우측의 선 네 개로 네모를 형성한 아이콘을 클릭하면 상하좌우 다 따로 패딩값을 설정할 수 있도록 해준다. 

 

Clip content. 프레임밖으로 넘어가는 객체가 보이지 않도록 해주는 기능이다. 

 

오토레이아웃은 만들어진 순서로 쌓이기 때문에, 개체를 bring to front하면 아래로 가게 된다.

복사를 해도 아래로 계속 붙여넣기가 된다.