오토 레이아웃(auto layout)은 내용과 배열 규칙에 따라 요소의 위치와 크기가 조정되는 방식이다. 여기서는 피그마의 기능을 다룬다. 버튼의 문구를 바꾸거나 카드 하나를 더 넣었을 때 주변 요소도 그 변화에 맞춰 움직이도록 설정한다.
- 내용에 맞춤(Hug contents): 글자의 너비가 40px이고 좌우 안쪽 여백이 각각 10px이라면, 다른 제한이 없는 버튼의 너비는 60px이 된다. 글자가 50px로 늘어나면 버튼도 70px로 커진다.
- 컨테이너 채움(Fill container): 부모 프레임의 사용 가능한 공간을 자식 요소가 채운다. 고정(Fixed)은 지정한 크기를 유지한다. 글이 길어질 때 카드가 커질지, 글이 다음 줄로 내려갈지는 이 설정과 텍스트 설정을 함께 본다.
- 안쪽과 사이: 패딩은 프레임 가장자리와 내용 사이의 여백이고, 갭은 요소 사이의 간격이다. 카드 바깥 테두리와 첫 문장 사이를 바꾸려다가 문장 사이만 벌리는 일이 생기면 두 값을 구분한다.
- 배열: 가로, 세로, 그리드 흐름을 선택할 수 있다. 줄바꿈과 그리드는 같은 방식이 아니므로 좁은 프레임에서 요소가 어디로 이동하는지 살핀다. (피그마: 오토 레이아웃 안내)
- 웹으로 옮길 때: 플렉스박스나 CSS 그리드로 비슷한 관계를 구현할 수 있지만 설정 이름이 그대로 웹 코드가 되는 것은 아니다. 디자인 인수인계에서는 완성 화면과 함께 내용이 늘어날 때의 규칙도 전한다.