Constraints와 Auto Layout 차이: 카드 컴포넌트 실습

부모 프레임의 크기가 바뀔 때 요소를 어떻게 배치할지 정하려면 Constraints와 Auto Layout의 역할을 구분해야 합니다. Figma의 카드 컴포넌트를 예로 들어 위치 고정, 내용에 따른 크기 조절과 예외 배치를 설명합니다.

1. Constraints와 Auto Layout의 차이

Constraints는 일반 프레임 안의 요소가 부모 크기에 따라 어떻게 위치하거나 늘어날지 정하는 제약 조건입니다. 왼쪽·오른쪽 고정, 가운데 고정, Scale 등으로 가로와 세로 방향의 동작을 설정합니다.

Auto Layout은 자식 요소를 방향, 간격, 여백과 정렬 규칙에 따라 배치합니다. 내용이나 요소 수가 바뀌면 설정된 규칙으로 레이아웃이 조정됩니다.

일반적인 Auto Layout 자식 요소에는 크기 조절 속성을 사용합니다. 해당 요소에서 Ignore auto layout을 켜면 배치 흐름에서 제외되며 Constraints를 적용할 수 있습니다. 부모 프레임 안에는 그대로 남습니다.

2. 위치 제약과 크기 조절 속성

Hug, Fill, Fixed는 Auto Layout의 크기 조절 속성입니다. 가로와 세로에 각각 설정할 수 있으므로, 요소가 내용에 맞춰 커질지 부모의 남는 공간을 채울지 나눠서 결정하세요.

3. 카드 컴포넌트로 실습하기

1. 폭 320px의 프레임을 만들고 Auto Layout을 세로 방향으로 설정합니다. 카드 높이는 내용에 맞춰 늘어나도록 Hug로 설정하세요.
2. 제목, 설명과 버튼을 넣고 패딩 16px, 간격 8px을 지정합니다.
3. 제목과 설명은 가로를 Fill, 세로를 Hug로 설정해 폭에 맞춰 줄바꿈되게 합니다. 버튼은 가로를 Fill, 세로를 Hug로 설정하고 내부 여백을 줍니다.
4. 카드 폭을 375px로 바꾸고 설명을 여러 줄로 늘립니다. 카드 높이와 버튼 위치가 내용에 맞춰 조정되는지 확인하세요.
5. 같은 카드 프레임 안에 알림 배지를 추가하고 Ignore auto layout을 켭니다. Constraints를 오른쪽·위쪽으로 설정한 뒤 카드 폭을 바꿔 배지가 모서리와의 거리를 유지하는지 확인하세요.

4. 예상과 다른 배치가 나올 때

1. 레이어 패널에서 요소가 어느 프레임의 자식인지 확인합니다. 캔버스 위에 별도로 놓인 요소에는 카드 기준의 Constraints가 적용되지 않습니다.
2. 부모와 자식의 가로·세로 크기 조절을 따로 살펴봅니다. 텍스트의 폭과 높이 설정이 줄바꿈 의도에 맞는지 확인하세요.
3. Constraints가 필요한 요소는 일반 프레임의 자식이거나 Ignore auto layout이 켜져 있어야 합니다. 배치 흐름에 남을 요소에는 크기 조절 속성을 사용합니다.
4. 최소·최대 크기, 패딩과 간격 때문에 공간이 부족하지 않은지 살펴봅니다. 긴 문구와 빈 상태도 함께 넣어 보세요.
5. 폭을 줄이거나 늘려 같은 구성이 유지되는지 확인합니다. 문제가 생기는 요소의 설정부터 하나씩 바꾸면 원인을 찾기 쉽습니다.

공식 참고 자료

세부 동작은 Figma Auto Layout 공식 가이드에서 확인할 수 있습니다. Pixso에서도 간격과 크기 조절 규칙을 설정해 비슷한 카드 구조를 만들고 팀과 검토할 수 있습니다.