오토 레이아웃

오토 레이아웃 숫자-텍스트 들여쓰기

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

질문사항

Auto Layout에서 숫자와 텍스트를 함께 배치할 때, 숫자에 맞춰 좌측 정렬하면 텍스트가 들여쓰기 되지 않아 시각적으로 정렬이 맞지 않습니다. 텍스트를 안쪽으로 들여쓰면서 Auto Layout을 유지하는 방법이 있을까요?

Auto Layout에서 숫자와 텍스트를 함께 배치하면서 텍스트를 들여쓰기 하는 방법은 여러 가지가 있습니다. 핵심은 레이어 구조를 잘 활용하는 것입니다.

중첩된 Auto Layout 사용:

먼저, 들여쓰기 하고 싶은 텍스트 레이어만 별도의 Auto Layout 프레임으로 묶습니다. (예: `Text Wrapper`)

`Text Wrapper` 프레임에 `padding-left` 값을 주어 들여쓰기를 구현합니다.

이후, 숫자 레이어와 `Text Wrapper` 프레임을 다시 상위 Auto Layout 프레임으로 묶어 전체를 정렬합니다.

이렇게 하면 숫자는 좌측에 정렬되고, 텍스트는 `Text Wrapper`의 패딩 값만큼 들여쓰기 됩니다.

빈 프레임(Spacer) 활용:

숫자 레이어와 텍스트 레이어를 Auto Layout으로 묶습니다.

텍스트 레이어 앞에 `width` 값을 가진 빈 프레임(또는 `Rectangle`)을 추가하여 스페이서 역할을 하게 합니다. 이 스페이서의 `Fill`은 투명하게 설정합니다.

이 방법은 간단하지만, 텍스트가 길어져 여러 줄이 될 경우 스페이서가 텍스트의 첫 줄에만 영향을 미치므로, 텍스트 전체를 들여쓰기 하는 데는 한계가 있습니다.

개별 패딩 및 정렬 조정:

경우에 따라서는 텍스트 레이어 자체에 `padding-left`를 적용하고, 상위 Auto Layout의 정렬 방식을 조정하여 시도해볼 수도 있습니다. 하지만 이 방법은 복잡한 구조에서는 예상치 못한 결과를 초래할 수 있습니다.

가장 유연하고 권장되는 방법은 중첩된 Auto Layout을 사용하여 텍스트에만 별도의 패딩을 적용하는 것입니다.