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

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

핵심은 콘텐츠의 흐름에 따라 움직여야 할 요소와 부모의 특정 위치에 남아야 할 요소를 나누는 것입니다. Pixso의 UI 디자인 작업 공간에서도 같은 카드의 폭과 문구를 바꿔 배치 규칙을 비교할 수 있습니다. 아래의 Constraints, Hug, Fill, Ignore 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를 오른쪽·위쪽으로 설정한 뒤 카드 폭을 바꿔 배지가 모서리와의 거리를 유지하는지 확인하세요.

부모와 자식의 크기 설정을 따로 읽기

이 카드에서 가로 폭은 외부 레이아웃이 결정하고, 높이는 내용이 결정합니다. 따라서 카드 자체의 가로는 연습할 폭으로 지정하고, 세로는 내용에 맞춥니다. 제목과 설명은 카드 안쪽 폭을 사용하되, 줄 수가 늘어나면 아래쪽으로 커져야 합니다. 가로와 세로를 모두 고정하면 긴 설명이 아래 요소와 겹치기 쉽습니다.

버튼은 또 하나의 작은 Auto Layout 프레임입니다. 버튼 프레임의 가로는 카드 안쪽 폭을 채우고, 세로는 라벨과 위아래 여백을 담을 수 있게 설정합니다. 라벨 자체와 버튼 프레임을 구분해 선택하세요. 바깥 버튼의 폭을 바꾸려다가 글자 레이어만 늘리면 의도한 버튼 구조를 만들기 어렵습니다.

같은 축에서 부모는 자식 크기로 정하려 하고, 자식은 부모의 남은 공간을 채우려 하면 기준이 불분명해집니다. 예를 들어 카드의 가로를 내용에 맞추려는 상태에서 제목을 Fill로 설정했다면, 가로 폭을 누가 정해야 하는지부터 결정하세요. 폭을 지정한 카드 안에서 제목을 채우게 하는 것과, 짧은 라벨에 맞춰 배지 전체가 늘어나게 하는 것은 서로 다른 설계입니다.

같은 카드에 세 가지 내용 넣어 보기

오른쪽 위 배지는 콘텐츠 흐름에서 제외되므로 제목이 길어져도 자동으로 자리를 비켜 주지 않습니다. 모서리와의 거리만 유지한다고 겹침까지 해결되는 것은 아닙니다. 배지와 제목이 겹친다면 제목 영역에 필요한 공간을 확보하거나, 배지를 별도의 헤더 행에 넣어 함께 배치하세요. 읽을 내용이 있는 상태 라벨이라면 작은 장식용 점과 같은 방식으로 처리하지 않는 편이 좋습니다.

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

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

Pixso에서는 배치 의도를 유지하며 비교하기

Pixso에서 같은 제목, 설명, 버튼을 세로 흐름으로 배치하고 여백과 요소 간격을 설정해 보세요. 두 폭의 프레임을 나란히 두고 긴 제목과 짧은 제목을 각각 넣으면, 크기 변화에 따른 읽기 순서와 겹침을 팀과 비교하기 쉽습니다. 도구의 옵션 이름을 일대일로 옮기기보다 ‘본문은 길어질 수 있다’, ‘버튼은 본문 뒤에 온다’, ‘알림은 제목을 가리지 않는다’는 동작 기준을 먼저 맞추세요.

개발자에게는 카드 한 장의 고정 높이만 전달하지 말고, 실제 문구가 달라질 때 높이가 변하는 예도 함께 전달합니다. 화면 디자인의 자동 배치 설정과 브라우저의 반응형 구현은 별도 작업이므로 구현 화면에서도 같은 문구로 줄바꿈을 확인해야 합니다.

공식 참고 자료

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