오토 레이아웃타이포그래피레이아웃 & 그리드

그리드 오토레이아웃 텍스트 적용 방식

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

질문사항

피그마에서 텍스트로 그리드 오토레이아웃을 구성할 때, 칸 안에 들어가는 개별 텍스트 요소에도 오토레이아웃을 적용하나요, 아니면 텍스트 전체를 묶어서 오토레이아웃을 적용하나요?

답변

텍스트와 그리드 오토레이아웃을 구성할 때는 일반적으로 중첩된 오토레이아웃(Nested Auto Layout) 방식을 사용합니다.

개별 텍스트 요소: 텍스트 블록 내에서 여러 줄의 텍스트나 아이콘과 텍스트가 함께 있는 경우, 이들을 묶어 개별 오토레이아웃 프레임으로 만듭니다. 예를 들어, 제목과 부제목이 함께 있다면 이 둘을 묶어 세로 방향의 오토레이아웃 프레임으로 만듭니다.

텍스트 그룹 전체: 이렇게 개별 오토레이아웃이 적용된 텍스트 요소들을 포함하여, 그리드의 한 칸에 들어갈 전체 텍스트 그룹을 다시 하나의 오토레이아웃 프레임으로 묶습니다. 이 프레임은 그리드 칸의 제약 조건(예: `Fill container`)에 따라 크기가 조절되도록 설정할 수 있습니다.

그리드 컨테이너: 마지막으로, 이 텍스트 그룹 오토레이아웃 프레임들을 포함하는 상위 그리드 컨테이너에도 오토레이아웃을 적용하여 전체 레이아웃을 유연하게 만듭니다.

이 방식은 텍스트 내용이 변경되거나 요소가 추가/삭제될 때 전체 레이아웃이 자동으로 조정되어 효율적인 디자인 작업을 가능하게 합니다.