피그마 핵심1) 오토 레이아웃 리사이징 Fixed, Hug, Fill 살펴보기

안녕하세요. 이번 포스팅에서는 지난번 카드 만들 때 슬쩍 사용했던 오토 레이아웃의 특별한 기능 Fixed, Hug, Fill을 살펴보려고 합니다. 리사이징의 개념을 이해하려면 부모-자식 관계를 먼저 설명해야 할 것 같습니다. 어떤 객체든 오토 레이아웃을 하면 프레임이 객체를 감싸는 형태로 변경됩니다. 이해를 위해 아래의 이미지를 참고해 주세요.
 

< 단일 객체 레이어>

< 단일 객체를 오토 레이아웃 했을 때 레이어 구조>

첫 번째 이미지의 텍스트, 벡터, 프레임 레이어를 살펴볼까요. 각각 개별 레이어로 되어 있습니다.
두 번째 이미지는 동일한 텍스트, 벡터, 프레임을 오토 레이아웃을 (단축키 : Shift+A) 적용한 예시입니다.

<  텍스트 오토 레이아웃 전과 후>

< 벡터 오토 레이아웃 전과 후>

벡터와 텍스트를 오토 레이아웃하면 상하좌우 패딩이 객체 바깥으로 자동 8로 세팅됩니다. 벡터와 텍스트의 자체 크기보다 폭 16, 높이 16 더 커진 상태입니다.
반면, 프레임은 오토 레이아웃 적용하면 포함관계가 아니라 프레임 자체가 오토 레이아웃으로 변경되어 바깥이 아니라 내부에 패딩이 생성됩니다. 따라서 프레임과 오토레이아웃 적용한 프레임의 크기는 변화가 없습니다.

<프레임 오토레이아웃>

---

개발 프로그래밍에서도 부모, 자식 이란 개념이 사용되고 있으니 디자인할 때부터 이 개념을 이해하면 구조를 짜기 수월합니다. 
 
객체를 감싼 프레임 = 부모 
프레임에 속한 객체 = 자식
 
 

< 부모 - 자식 관계 >

 
위 이미지에서는 부모라는 프레임 안에 벡터, 텍스트, 모양, 프레임, 오토 레이아웃이 포함되어 있습니다. 그럼 여기서 자식은 벡터, 텍스트, 모양, 프레임, 오토 레이아웃 전부를 뜻합니다. 오토 레이아웃의 안에 있는 객체들은 오토 레이아웃의 자식이 됩니다. 이렇게 각각의 포함관계를 이해하면서 리사이징을 해야 어느 부분 때문에 값이 다르게 나온 건지 확인할 수 있습니다.
 

---

부모-자식 관계에 대해서 이해를 하셨다면 이제 오토 레이아웃의 리사이징에 대해서 알아보겠습니다.
오토 레이아웃을 하면 우측 디자인 패널에서 프레임 속성> 크기를 변경할 수 있습니다.
자식 객체에 따라서 리사이징 옵션이 크게 2가지로 보입니다.
 

< 자식 - 오토 레이아웃, 텍스트는 3가지 옵션 >

첫 번째, 부모가 오토 레이아웃인데 자식 객체가 오토 레이아웃 혹은 텍스트라면 Fixed, Hug, Fill로 3가지 옵션을 제어할 수 있습니다.
 

< 자식 - 프레임, 벡터, 이미지는 2가지 옵션 >

두 번째, 부모가 오토 레이아웃인데 자식 객체가 프레임, 벡터, 이미지 라면 Fixed, Fill 2가지 옵션을 제어할 수 있습니다.
 

< 최상위 부모 오토 레이아웃은 2가지 옵션 >

세 번째, 부모인 오토 레이아웃은 Fixed, Hug 2가지 옵션을 제어할 수 있습니다.
 
굳이 저 부분을 외울 필요는 없으나 왜 옵션이 차이가 나는지는 알아볼 수 있습니다.
 
Fixed width / Fixed height = 폭 영역 고정 / 높이 영역 고정
Hug contents = 본인 레이어를 감싸는 영역 (오토 레이아웃 기본값)
Fill container = 부모 프레임에 크기를 맞춰서 스스로 영역을 늘리거나 줄임 (자식 객체가 여럿일 때는 부모에 맞춰서 영역 나눠서 균등하게 1/N  크기를 가져감)
 
모든 객체가 오토 레이아웃 내에 있다는 가정하에
Fixed 영역 고정은 부모, 자식 모든 객체에게 적용됩니다. 사각 바운딩 박스를 클릭 드래그해서 원하는 영역을 지정하면 자동 Fixed 됩니다.
Hug는 자식 부모 관계없이 오토 레이아웃과 텍스트에 적용됩니다.
Fill은 부모에 맞춰야 하기 때문에 자식 객체만 적용할 수 있습니다. 따라서 가장 최상위 부모는 Fill이 없습니다.
 
TIP. 오토 레이아웃에 속한 모든 객체 사각 바운딩 박스(영역)에 마우스 커서를 가져가서 alt / option 누르고 더블클릭 하면 Fixed, Hug > Fill 전환
Fixed, Fill > Hug로 전환은 바운딩 박스 더블 클릭
 

< 객체에 따른 오토 레이아웃 리사이징 속성값 >

 
 
리사이징은 아래 영상을 통해서 확인도 가능합니다.
 

 

---

지금까지 카드 UI를 통한 오토 레이아웃 리사이징에 대해서 알아보았습니다. 이번 영상에선 타이틀과 아바타, 시간을 묶었던 방식을 지난번 카드 영상 살짝 다르게 만들었습니다. 반드시 오토 레이아웃으로 하지 않아도 프레임에서도 리사이징이 가능합니다. 이 부분은 프레임 속성 편에서 다시 자세히 다루겠습니다. 봐주셔서 감사합니다. : )