오토 레이아웃

아이콘 가시성 제어 시 타이틀 고정

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

질문사항

피그마에서 헤더 컴포넌트를 만들고 있습니다. 왼쪽/오른쪽 아이콘의 가시성(visibility)을 불리언(Boolean) 프로퍼티로 제어하고 있는데, 아이콘을 켜고 끌 때마다 중간에 있는 타이틀의 위치가 자꾸 변동됩니다. 아이콘과 텍스트를 오토 레이아웃으로 묶고 `Fixed width`로 설정했음에도 불구하고, 타이틀의 위치를 고정시킬 수 있는 방법이 있을까요?

답변

아이콘의 가시성 변경 시 타이틀의 위치가 변동되는 문제는 오토 레이아웃(Auto Layout)에서 흔히 발생하는 상황입니다. 몇 가지 해결 방법이 있습니다:

타이틀을 `Absolute position`으로 설정:

타이틀 텍스트 레이어를 선택하고, 우측 디자인 패널의 `Auto Layout` 섹션에서 `Absolute position` 아이콘(사각형 안에 점선 원)을 클릭합니다.

이후 `Constraints`를 `Center` `Center`로 설정하여, 아이콘의 유무와 상관없이 타이틀이 항상 중앙에 위치하도록 합니다. 이 방법은 가장 간단하고 효과적입니다.

아이콘을 `Fixed width`로 설정하고 `Hidden` 처리:

아이콘을 숨길 때 `Layer` 패널에서 눈 아이콘을 클릭하여 숨기는 대신, 아이콘의 `Width`를 `Fixed`로 설정하고 `Boolean` 프로퍼티로 `Visible`을 제어합니다.

이때, 아이콘이 숨겨지더라도 해당 아이콘이 차지하던 공간은 유지되도록 `Auto Layout`의 `Gap` 설정을 조절하거나, 아이콘 자체를 `Fixed width`로 설정하고 `0`으로 줄이는 등의 방법을 사용할 수 있습니다. (이 방법은 `Absolute position`보다 복잡할 수 있습니다.)

아이콘을 감싸는 프레임에 `Fixed width` 적용:

왼쪽 아이콘과 오른쪽 아이콘을 각각 별도의 오토 레이아웃 프레임으로 감쌉니다.

이 프레임들에 `Fixed width`를 적용하고, 아이콘이 없을 때도 해당 프레임의 너비가 유지되도록 합니다.

이후 헤더 전체 오토 레이아웃에서 이 프레임들과 타이틀을 배치합니다.

가장 권장되는 방법은 1번, 타이틀을 `Absolute position`으로 설정하는 것입니다. 이 방법이 가장 직관적이고 유지보수가 용이합니다.