오토 레이아웃

오토 레이아웃 Fixed/Hug/Fill 기준

피그마 오픈카톡방2026. 3. 7.

질문사항

오토 레이아웃에서 `Fixed`, `Hug contents`, `Fill container` 기능을 언제 사용해야 하는지 명확한 기준을 알고 싶습니다.

오토 레이아웃의 `Fixed`, `Hug contents`, `Fill container`는 요소의 크기 조절 방식(Resizing)을 결정하는 중요한 속성입니다. 각 기능의 사용 시점은 다음과 같습니다:

Hug contents:

설명: 프레임 내부 콘텐츠의 크기에 맞춰 프레임의 크기가 자동으로 조절됩니다. 콘텐츠가 늘어나면 프레임도 늘어나고, 줄어들면 프레임도 줄어듭니다.

사용 시점:

텍스트 박스처럼 텍스트 볼륨에 따라 너비나 높이가 가변되어야 하는 경우.

버튼처럼 텍스트 라벨의 길이에 따라 버튼의 크기가 유동적으로 변해야 하는 경우.

내부 요소들의 총합 크기에 따라 외부 컨테이너의 크기가 자동으로 맞춰져야 할 때.

예시: `[아이콘] [텍스트]`로 구성된 버튼에서 텍스트 길이가 변할 때 버튼 전체의 너비가 자동으로 조절되도록 할 때.

Fixed width/height:

설명: 프레임의 너비 또는 높이가 고정된 값으로 유지됩니다. 내부 콘텐츠의 크기와 상관없이 지정된 크기를 가집니다.

사용 시점:

특정 컴포넌트나 섹션의 크기가 항상 일정해야 할 때 (예: 고정된 너비의 카드, 특정 높이의 헤더/푸터).

좌우 또는 상하 여백을 고정하고 싶을 때.

반응형 디자인에서 특정 브레이크포인트까지는 고정된 크기를 유지해야 할 때.

예시: 320px 너비의 모바일 화면에서 300px 너비의 카드 컴포넌트를 만들 때.

Fill container:

설명: 부모 프레임의 크기에 맞춰 자식 프레임이 사용 가능한 공간을 모두 채웁니다. 부모 프레임이 늘어나면 자식 프레임도 함께 늘어납니다.

사용 시점:

반응형 디자인에서 부모 프레임의 크기가 변할 때, 내부 요소가 그 공간을 채우며 유동적으로 크기를 조절해야 할 때.

레이아웃 내에서 특정 요소가 남은 공간을 모두 차지해야 할 때 (예: 좌측 메뉴바와 우측 콘텐츠 영역에서 콘텐츠 영역이 남은 너비를 모두 채우는 경우).

예시: 전체 화면 너비에 맞춰 늘어나는 배너 이미지, 그리드 시스템에서 컬럼이 부모 컨테이너의 너비를 채우도록 할 때.

이 세 가지 속성은 단독으로 사용되기도 하지만, 서로 조합하여 복잡한 반응형 레이아웃을 구현하는 데 활용됩니다.