디자이너 맥신, 성장일기

피그마의 핵심 ‘오토레이아웃’

• 개체를 패딩으로 감싸 컨테이너(여백)로 만들 때 쓰는 ‘오토레이아웃'
• 오토레이아웃에서는 일반적인 레이어의 앞 뒤 순서가 반대다.
• 하나의 컨테이너 (모든 코드 블록) = 개체의 크기 + 패딩(내부여백 값).
• 이 컨테이너를 쌓기 위해 필요한 오토레이아웃!

잊지말아요 :
(콘텐츠를 패딩으로 감싸 컨테이너를 만들어 주는 오토레이아웃)

‘컨스트레인트 Contraint’

하지만 반응형 웹사이트 처럼 실시간으로 같이 움직이는 레이아웃을 만들기 위해서는 오토레이아웃의 ‘규칙’을 만들어 줘야한다.

★ 부모 컨테이너의 크기가 변할 때, 자식 컨테이너는 어디를 기준으로 변할지 정할 수 있다.

★ 리사이징의 개념 ★ 

• 프레임은 기본적으로 크기가 고정. Fixed.
• 오토레이아웃으로 프레임을 감싸는 그 순간! Fixed외 다른 사이즈값이 생긴다 → 리사이징  ✅
• 부모의 사이즈 값에 따라 자식의 사이즈 값이 영향을 받는다.
• 자식의 사이즈 값에 따라 부모의 사이즈 값도 영향을 받는다.

• 자식이 Fixed면 부모가 Hug 감쌀 수 있다.
• 자식이 부모에 맞게 늘어나야한다면, 부모가 고정값Fixed으로 설정되어 있어야 한다.
• 부모가 고정되어 fixed 되어 있지 않으면 자식이 Fill로 되어 있을 때 계속 쫒아다닌다.
• 반대로 부모가 자식을 Hug 감싸기로 했다면 자식은 Fixed 고정됭 있어야 한다.
• 부모와 자식이 둘 다 fixed 일수도 있다. 

실제 만드는 웹사이트나 앱에는 수많은 컨테이너들이 있다. 그렇기 때문에 리사이징에 꼼꼼하게 신경을 쓰지 않으면 복잡한 움직임이 있을 때 내가 의도하지 않았던 레이아웃이 생길 수 있다.
→ 여러개의 컨테이너가 쌓였을 때는 리사이징을 반드시 잘 조정해야한다.