오토 레이아웃

Auto Layout 프레임 부분 제어

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

질문사항

Auto Layout이 적용된 프레임 안에서 특정 부분만 Auto Layout을 추가하거나 변경하고 싶습니다. 현재는 클릭하면 전체 Auto Layout 프레임이 선택되는데, 특정 부분만 제어할 수 있는 방법이 있을까요?

답변

Auto Layout이 적용된 프레임 안에서 특정 부분만 제어하고 싶을 때는 다음과 같은 방법을 사용할 수 있습니다.

중첩된 Auto Layout 사용:

가장 일반적이고 권장되는 방법입니다. 변경하고 싶은 '특정 부분'에 해당하는 레이어들을 그룹화(Ctrl/Cmd + G)한 다음, 그 그룹에 별도로 Auto Layout을 적용합니다.

예를 들어, 헤더 컴포넌트 안에 로고, 메뉴, 버튼이 있다면, 로고와 메뉴를 묶어 하나의 Auto Layout 프레임으로 만들고, 버튼은 또 다른 Auto Layout 프레임으로 만든 다음, 이 두 Auto Layout 프레임을 다시 상위 Auto Layout 프레임으로 묶는 방식입니다.

이렇게 하면 상위 Auto Layout 프레임 안에서 하위 Auto Layout 프레임의 속성(간격, 패딩, 정렬 등)을 독립적으로 제어할 수 있습니다.

레이어 선택 및 편집:

Auto Layout 프레임 내부의 특정 레이어를 선택하려면, 해당 레이어를 더블 클릭하거나, `Ctrl/Cmd` 키를 누른 상태에서 클릭하면 됩니다. 이렇게 하면 상위 Auto Layout 프레임이 아닌, 내부의 개별 레이어나 중첩된 Auto Layout 프레임을 선택할 수 있습니다.

선택된 내부 레이어의 속성(크기, 색상, 텍스트 등)은 자유롭게 변경할 수 있습니다.

`Absolute position` 활용 (제한적):

매우 특정하고 예외적인 경우에만 사용합니다. Auto Layout 프레임 내의 특정 요소를 선택하고 `Absolute position`을 적용하면, 해당 요소는 Auto Layout의 흐름에서 벗어나 자유롭게 위치를 지정할 수 있습니다.

주의: `Absolute position`은 Auto Layout의 장점(반응형 디자인, 유지보수성)을 상쇄시키므로, 꼭 필요한 경우에만 신중하게 사용해야 합니다.

핵심: Auto Layout은 '프레임' 단위로 작동합니다. 따라서 특정 부분만 Auto Layout의 영향을 받게 하려면, 그 부분을 별도의 Auto Layout 프레임으로 '묶어주는' 것이 중요합니다.