Auto Layout

ProtoPie Studio의 Auto Layout은 정렬과 간격을 자동화하여 레이아웃 생성과 조정을 간소화합니다. 일반 컨테이너를 Auto Layout 컨테이너로 변환함으로써 디자인 과정 전반에 걸쳐 일관성과 유연성을 보장합니다.

참고: Auto Layout은 현재 베타 버전으로 제공되며 Studio Canvas 내에서 편집을 지원합니다. 인터랙션 지원은 개발 중이며 곧 출시될 예정입니다.

Fixed Layout & Auto Layout의 차이점

Fixed Layout과 Auto Layout은 디자인에서 정렬과 간격을 처리하는 방식이 다릅니다.

• Fixed Layout: 일관성을 유지하려면 수동 조정이 필요하며, 정확하지만 정적인 제어를 제공합니다.
• Auto Layout: 콘텐츠 변경에 따라 동적으로 조정되어 수동 작업을 줄이고 반응형 디자인을 가능하게 합니다.

Auto Layout 시작하기

컨테이너, 컴포넌트, 또는 여러 객체에 대해 Property 패널, 오른쪽 클릭 메뉴, 또는 간단한 단축키를 사용하여 Auto Layout을 활성화할 수 있습니다. 적용되면 Auto Layout이 기본 속성을 자동으로 할당합니다.

Auto Layout 적용 방법

다음을 통해 Auto Layout을 적용하실 수 있습니다:

• Property 패널: 레이어 혹은 컨테이너를 선택 후 Auto Layout 옵션을 체크합니다.
• 우클릭 메뉴: 우 클릭 후 "Add Auto Layout." 선택합니다.
• 단축키: Shift+A 사용합니다.

Auto Layout을 적용하면 다음과 같은 기본 속성이 할당됩니다:

• Direction: Vertical (수직)
• Resizing: Hug Contents for both width and height (너비와 높이 모두 내용 맞춤)
• Alignment: Top-Left (상단 왼쪽)
• Gap: 10px
• Padding: 10px (모든 면에 균일하게 10px 적용)

Property 패널에서 Auto Layout 표시

Auto Layout 옵션은 선택된 레이어 유형이나 그룹에 따라 속성 패널에 표시됩니다. 각 경우에 대한 작동 방식은 다음과 같습니다:

• 단일 컨테이너(Single Container): Auto Layout을 활성화하여 해당 컨테이너를 Auto Layout 컨테이너로 변환합니다.
• 메인 컴포넌트(Main Components): 컴포넌트에 Auto Layout을 적용하여 인스턴스 전반에서 일관된 동작을 유지합니다.
• 다중 객체(Multiple Objects): 여러 개의 객체를 선택한 후 Auto Layout을 추가하면, 선택된 객체들이 하나의 Auto Layout 컨테이너로 그룹화됩니다.

Auto Layout 제거 방법

Auto Layout을 비활성화하면 정렬 및 간격을 수동으로 제어할 수 있으며, 필요 시 Fixed Layout으로 전환할 수 있습니다.

Auto Layout을 제거하는 방법:

• Property 패널: Auto Layout 옵션을 체크 해제합니다.
• 우클릭 메뉴: "Remove Auto Layout"을 선택합니다.
• 단축키: Option+Shift+A (Mac) / Alt+Shift+A (Windows)를 사용합니다.

Auto Layout 주의사항

Auto Layout은 강력한 기능이지만, 이를 최대한 활용하려면 몇 가지 사항을 주의해야 합니다. Auto Layout이 특정 레이어와 상호작용하는 방식에 대한 중요한 포인트는 다음과 같습니다:

• 마스크 레이어(Mask Layers): 마스크 레이어에 Auto Layout을 적용하면 마스크 옵션이 Auto Layout으로 대체됩니다.
• 오디오 레이어(Audio Layers): Auto Layout은 오디오 레이어의 크기 조정이나 상호작용에 영향을 미치지 않습니다.
• Auto Layout은 단일 비컨테이너 레이어(single non-container layers)에 적용할 수 있지만, 단축키 또는 우클릭 메뉴를 통해서만 가능합니다. 속성 패널(Property Panel)에서는 접근할 수 없습니다.