오토 레이아웃(Auto Layout)

ProtoPie Studio의 오토 레이아웃은 정렬과 간격 조정을 자동화하여 레이아웃 생성 및 수정을 간소화하도록 설계되었습니다. 일반 컨테이너를 오토 레이아웃 컨테이너로 변환함으로써, 전체 디자인 프로세스에서 일관성과 유연성을 보장합니다.

고정 레이아웃(Fixed Layout)과 오토 레이아웃(Auto Layout)의 차이점

고정 레이아웃과 오토 레이아웃은 디자인에서 정렬과 간격을 처리하는 서로 다른 방식을 제공합니다.

• 고정 레이아웃: 일관성을 유지하기 위해 수동 조정이 필요하며, 정밀하지만 정적인 제어를 제공합니다.

• 오토 레이아웃: 콘텐츠 변경에 동적으로 반응하여 수동 작업을 줄이고 반응형 디자인을 가능하게 합니다.

오토 레이아웃 시작하기

속성 패널, 우클릭 메뉴 또는 간단한 단축키를 사용하여 컨테이너, 컴포넌트 또는 여러 오브젝트에 오토 레이아웃을 활성화할 수 적용할 수 있습니다. 오토 레이아웃을 적용하면 기본 속성이 자동으로 할당됩니다.

오토 레이아웃 적용 방법

다음 방법으로 오토 레이아웃을 적용할 수 있습니다:

• 속성 패널: 레이어 또는 컨테이너를 선택하고 오토 레이아웃 옵션을 체크합니다.

• 우클릭 메뉴: 마우스 우클릭 후 "오토 레이아웃 추가(Add Auto Layout)"를 선택합니다.

• 단축키: Shift+A 단축키를 사용합니다.

오토 레이아웃을 적용하면 다음과 같은 기본 속성이 할당됩니다:

• 방향(Direction): 세로(Vertical)

• 크기 조절(Resizing): 너비와 높이 모두 콘텐츠에 맞춤(Hug Contents)

• 정렬(Alignment): 좌측 상단(Top-Left)

• 간격(Gap): 10px

• 여백(Padding): 10px (모든 면에 동일하게 적용)

속성 패널에서의 오토 레이아웃 표시 기준

오토 레이아웃 옵션은 선택한 레이어 유형이나 그룹에 따라 속성 패널에 표시됩니다. 각 케이스별 작동 방식은 다음과 같습니다:

• 단일 컨테이너(Single Container): 컨테이너에 오토 레이아웃을 활성화하여 오토 레이아웃 컨테이너로 변환합니다.

• 메인 컴포넌트(Main Components): 컴포넌트에 오토 레이아웃을 적용하여 인스턴스 전반에 걸쳐 일관된 동작을 유지합니다.

• 여러 오브젝트(Multiple Objects): 선택한 여러 오브젝트에 오토 레이아웃을 추가하여 하나의 오토 레이아웃 컨테이너로 그룹화합니다.

오토 레이아웃 제거 방법

오토 레이아웃을 비활성화하면 정렬과 간격에 대한 수동 제어 상태로 되돌릴 수 있습니다. 이 기능을 통해 필요한 경우 언제든지 고정 레이아웃으로 다시 전환할 수 있습니다.

다음 방법으로 오토 레이아웃을 제거할 수 있습니다:

• 속성 패널: 오토 레이아웃 옵션 선택을 해제합니다.

• 우클릭 메뉴: "오토 레이아웃 제거(Remove Auto Layout)"를 선택합니다.

• 단축키: Option+Shift+A (Mac) / Alt+Shift+A (Windows)를 사용합니다.

오토 레이아웃 사용 시 저의사항

오토 레이아웃은 강력하고 유연한 기능이지만, 이를 최대한 활용하기 위해 염두에 두어야 할 몇 가지 사항이 있습니다. 오토 레이아웃이 특정 레이어와 상호작용하는 방식에 대한 중요 포인트는 다음과 같습니다:

• 마스크 레이어(Mask Layers): 마스크 레이어에 오토 레이아웃을 적용하면 마스크 옵션이 오토 레이아웃으로 대체됩니다.

• 오디오 레이어(Audio Layers): 오토 레이아웃은 오디오 레이어의 크기 조절이나 인터랙션에 영향을 주지 않습니다.

오토 레이아웃은 컨테이너가 아닌 단일 레이어에도 적용할 수 있지만, 단축키나 우클릭 메뉴를 통해서만 가능합니다. 속성 패널에서는 이 옵션에 접근할 수 없습니다.