본문 바로가기

UXUI design/Figma

[Figma] 컨스트레인트, 리사이징의 관계

컨스트레인트 
컨스트레인트는 오토레이아웃을 진짜 오토레이아웃으로 만들어주는 기능이다. 

 
 
 
부모컨테이너 안에있는 자식 컨테이너를 클릭하면 오른쪽 디자인패널에 다음과같이 되는 것을 확인 할 수 있다. 
이 말은  '오른쪽과 위쪽을 기준으로 고정해줘'란 의미다.
 
 
파란색 점선이, child 컨테이너가 parent 컨테이너에 가지고 있는 ‘제한’ 즉 컨스트레인트다. 
 

자식컨테이너가 부모컨테이너에 고정되어 움직이는 일종의 핀의 위치를 컨스트레인트라고 한다. 
 

파란점선이 자식컨테이너의 왼쪽과 위쪽에 가있는거 보이시죠. 자식컨테이너는 부모컨테이너의 사이즈가 변할때 부모컨테이너의 왼쪽과 위쪽을 기준으로 고정되어 움직인다는 뜻이다. 
-> 컨스트레인트는 다른말로 anker라고 할 수도 있다. 
 
 
즉, 정렬을 사용하는건 부모컨테이너 안에서 어떻 정렬할지를 정하는것뿐만아니라, 
컨스트레인트 즉 어디를 기준으로 고정해야하는지를 동시에 정할 수 있다는 뜻이다! 
 
 
컨스트레인트를 제대로 다루려면 리사이징을 이해해야한다. 

프레임 패널안에 이 값이 리사이징이다.

-> '가로도 자식 컨테이너에 맞추고 세로도 자식 컨테이너에 맞출게' 를 의미
 
 
프레임을 오토레이아웃으로 감싸는 순간, fixed 외 다른사이즈값이 생긴다. 이를 리사이징이라 부른다. 
부모와 자식의 리사이징 값에 따라 서로  영향을 받는다.

자식이 고정값(Fixed)라면 부모는 그것을 감쌀 수 있다. 즉 자식은 움직이지 않고 길이나 너비가 고정된 상태이기 때문에 감쌀 수 있다. 
 
 

겉보기에는 차이가 없으나, 컨테이너의 속성값이 다름.

 
 
자식 Fixed 부모 Hug —> 자식 컨테이너를 잡고 늘리면 부모는 그것을 감싸기(Hug) 때문에 따라간다. 

자식 Fill 부모 Fixed —> 자식 컨테이너는 부모컨테이너에 꽉 차도록 만들어졌기 때문에 부모컨테이너를 잡고 늘렸을 때, 부모컨테이너의 크기가 변하는 것에 따라 자식컨테이너도 부지런히 따라간다. 

정리하면, 보이는 디자인의 결과물에는 차이가 없을 수 있지만, 컨테이너의 속성값에는 차이가 있을 수 있다.

여러 개의 컨테이너들이 쌓이고 쌓이는 경우에는  내가 의도하지않은 레이아웃이 만들어질 수 있기 때문에 리사이징에 대해 잘 이해해야 한다.