오토 레이아웃

오토 레이아웃 일부 간격 변경

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

질문사항

오토 레이아웃이 적용된 전체 레이어에서 특정 부분만 오토 레이아웃을 해제하지 않고 간격을 변경할 수 있는 방법이 있나요?

네, 오토 레이아웃이 적용된 프레임 내에서 특정 부분의 간격만 조절하는 방법은 여러 가지가 있습니다. 전체 오토 레이아웃을 해제할 필요는 없습니다.

Nested Auto Layout (중첩 오토 레이아웃) 사용:

간격을 조절하고 싶은 특정 요소들을 그룹화(Ctrl/Cmd + G)한 후, 해당 그룹에 다시 오토 레이아웃을 적용합니다.

이렇게 하면 상위 오토 레이아웃은 유지하면서, 중첩된 오토 레이아웃 내에서 요소들의 간격을 독립적으로 조절할 수 있습니다.

`Space Between` (간격 벌리기) 활용:

오토 레이아웃 프레임의 `Distribution` 설정에서 `Space Between`을 사용하면, 프레임의 양 끝에 요소들을 배치하고 그 사이의 간격을 균등하게 분배할 수 있습니다.

특정 요소들 사이에만 간격을 주고 싶다면, 해당 요소들을 그룹화하여 하나의 단위로 취급한 후 `Space Between`을 적용할 수 있습니다.

`Absolute Position` (절대 위치) 사용:

오토 레이아웃 프레임 내의 특정 요소를 선택하고 `Absolute Position`을 활성화하면, 해당 요소는 오토 레이아웃의 흐름에서 벗어나 자유롭게 위치를 지정할 수 있습니다.

이 경우, 해당 요소는 오토 레이아웃의 간격 계산에 포함되지 않으며, 수동으로 위치와 크기를 조절해야 합니다. (주의: 반응형 디자인 시 제약이 있을 수 있습니다.)

`Negative Spacing` (음수 간격) 또는 `Gap` 조절:

오토 레이아웃의 `Gap` 값을 조절하여 전체 요소 간의 간격을 변경할 수 있습니다.

만약 특정 요소만 다른 간격을 원한다면, 해당 요소를 포함하는 중첩 오토 레이아웃을 사용하는 것이 가장 일반적이고 유연한 방법입니다.

가장 권장되는 방법은 중첩 오토 레이아웃을 활용하여 구조를 명확히 하고 유연성을 확보하는 것입니다.