[피그마 오토레이아웃] 개념 & 원리 / 오토레이아웃 리사이징 (컨텐츠과 컨테이너는 상대적인 관계)

오토레이아웃 개념 원리

오토레이아웃은 진짜...
잘 모르는 상태에서 오토레이아웃 된 작업물을 접할 때 정말 혼란스럽다..

아무리 유튜브 또는 블로그를 찾아 공부한다고 해도 모르는 부분이 항상 있기 마련.
다시 정리해보는 시간을 가져본다.
원리를 이해하면 피그마 작업효율이 두 배 올라간다!

오토레이아웃 : 컨텐츠에 따라 자유롭게 변형되는 프레임
(피그마는 크기에 따라 사이즈가 유연하게 늘어나는 리사이징 기능을 제공한다.)

• 오토레이아웃의 목적 : 반응형 대응 디자인
• 버튼을 오토레이아웃으로 만들 때, 백그라운드 없이 '텍스트' 만을 가지고 오토레이아웃을 한다. 그러면 텍스트에 '프레임이 씌어져서' 백그라운드가 되어주기 때문에 필요 없음.
  
  
  

오토레이아웃 꿀팁 : 블록을 조합하듯 만들기, 요소를 덩어리 단위로 쪼개서 보고 가장 작은 단위부터 만들기

 

 

오토레이아웃 리사이징 (컨텐츠과 컨테이너는 상대적인 관계)

오토레이아웃 프레임에서 기준보다 바깥에 있으면 컨테이너, 안에 있으면 콘텐츠라고 본다면..
오토레이아웃 프레임 생성 시, 상위 프레임 사이즈가 조정될 때, 콘텐츠와 컨테이너가 어떻게 반응해야할지 설정하는 속성

• |ㅡ| Fixed width (모든 경우에 뜸)
• > < Hug (안에 컨텐츠가 있어야 만 뜸- 아래 예시 : 파란색, 베이지 박스에만 뜸)
• < > Fill container (밖에 컨테이너가 있어야 만 뜸)

오토레이아웃 리사이징 속성
1. Hug content : hug(감싸안다) + content(콘텐츠) :컨테이너가 콘텐츠를 감싸안는 속성임으로 안에 콘텐츠가 있어야 뜬다.
컨테이너에 hug contents를 적용하고 콘텐츠 상자를 늘리면 늘어나는 콘텐츠 상자 크기에 맞게 컨테이너가 감싸줌.
2. Fill container : Fill(채우다) + container(컨테이너) : 콘텐츠가 컨테이너를 채우는 속성, 즉 바깥에 컨테이너가 있어야만 뜬다.
콘텐츠에 fill container를 적용하고 컨테이너 상자를 늘리면... 그에 맞게 안의 콘텐츠가 컨테이너 상자를 채워줌.
3. Fixed Size : Fixed(고정하다) + Size(크기) : 컨테이너와 콘텐츠 모두 고정된 상태, 즉 고정임으로 상대적 개념이 아닌 모든 경우에 뜬다. (고정되어 늘려도 안변함)