오토 레이아웃(auto layout)은 내용과 배열 규칙에 따라 요소의 위치와 크기가 조정되는 방식이다. 여기서는 [[피그마]]의 기능을 다룬다. 버튼의 문구를 바꾸거나 카드 하나를 더 넣었을 때 주변 요소도 그 변화에 맞춰 움직이도록 설정한다.

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

#도구 #디자인 #레이아웃