여러분의 요청을 듣고 저희가 반영했습니다! 여러분의 요청을 분명하게 들은 뒤, 커뮤니티에서 가장 많이 요청된 기능 중 하나인 Auto Layout를 마침내 소개하게 되어 정말 기쁩니다.
이번 릴리스는 여러 단계에 걸친 Auto Layout 배포의 시작을 알리며, 첫 번째 릴리스는 베타로 출시됩니다. 이 단계에서는 디자인 요소에 auto layout을 적용하고 Figma에서 auto layout 속성을 가져오는 데 집중합니다. 이를 통해 중요한 사용자 불편을 해소하고 생산성을 높이며, 보다 원활한 Figma-to-ProtoPie 내보내기를 지원해 더 빠르고 효율적인 디자인 워크플로를 가능하게 합니다.
앞으로 내년에 출시될 후속 릴리스에서는 Auto Layout이 프로토타이핑까지 확장되어, 디자인과 인터랙션 요구를 완전히 통합한 솔루션을 제공할 예정입니다. 아래에서 이번 베타 릴리스의 자세한 내용과 이것이 디자인 프로세스를 어떻게 향상시킬 수 있는지 살펴보세요.
개요
디자인에서 Auto Layout이란?
ProtoPie에서 Auto Layout은 어떻게 작동하나요?
Figma에서 Auto Layout을 가져오려면?
자주 묻는 질문
다음은 무엇인가요?
디자인에서 Auto Layout이란?
Auto layout은 정의된 규칙과 관계에 따라 컨테이너 안의 요소를 자동으로 조정하고 배치하는 디자인 기능입니다. 디자이너는 패딩, 간격(gap), 방향, 크기 조정 옵션, 정렬과 같은 요소의 속성을 지정하여 반응형 디자인을 만들 수 있습니다.
가장 일반적인 사용 사례는 다음과 같습니다:
동적 콘텐츠 조정: 텍스트 박스, 이미지 프레임, 폼 필드처럼 콘텐츠가 추가, 삭제 또는 크기 조정될 때 간격과 정렬을 자동으로 조정합니다.
일관된 간격과 정렬: 카드, 목록, 그리드와 같은 표준화된 레이아웃을 만들 때 특히 유용하도록 컴포넌트 전반에서 패딩, 간격, 정렬을 일정하게 유지합니다.
컴포넌트 기반 디자인: Auto Layout을 사용하면 버튼이나 내비게이션 바 같은 개별 컴포넌트를 쉽게 업데이트할 수 있으며, 컴포넌트 인스턴스가 디자인 전반에서 일관되게 자동 조정되도록 할 수 있습니다.
Auto Layout으로 동적 레이아웃을 쉽게 조정하고 만들 수 있습니다.
ProtoPie에서 Auto Layout은 어떻게 작동하나요?
ProtoPie Studio에서 Auto Layout은 특정 레이아웃 설정에 따라 컨테이너 안에서 요소가 배치되는 방식을 자동으로 조정해 반응형 디자인을 만드는 데 도움을 줍니다.
ProtoPie에서 Auto Layout을 적용하는 방법은 여러 가지가 있습니다:
1. 속성 패널 사용:
컨테이너를 선택한 다음 속성 패널에서 Auto Layout 옵션을 선택합니다.
2. 컨텍스트 메뉴 사용:
아무 오브젝트(단일 또는 다중)를 선택한 다음 마우스 오른쪽 버튼을 클릭하고 Auto Layout 추가를 선택합니다. 그러면 오브젝트가 자동으로 컨테이너로 이동하고 Auto Layout이 적용됩니다.
3. 단축키 사용:
아무 오브젝트(단일 또는 다중)를 선택한 다음 Shift + A를 눌러 Auto Layout을 적용합니다.
4. 메뉴 바 사용:
아무 오브젝트를 선택한 다음 메뉴 바에서 오브젝트 → Auto Layout 추가를 클릭합니다.
Auto Layout을 제거하려면 속성 패널에서 Auto Layout 옵션의 선택을 해제하거나 컨테이너를 마우스 오른쪽 버튼으로 클릭한 다음 Auto Layout 제거를 선택합니다.
Auto Layout이 활성화되면 다음 작업을 할 수 있습니다:
레이아웃 방향 설정: 속성 패널에서 가로 또는 세로 정렬을 선택합니다.
하위 항목 순서 변경: 레이어 패널에서, 키보드 화살표를 사용하거나, 캔버스에서 직접 하위 항목을 정렬합니다.
하위 항목 크기 조정 제어: 하위 항목이 부모 컨테이너를 채우도록 자동으로 크기가 조정되게 할 수 있습니다.
항목 간 간격 조정: 고정 간격을 설정하거나, 항목이 사용 가능한 공간에 맞게 자동으로 조정되도록 할 수 있습니다.
💡 참고: 마스크 레이어, 단일 비컨테이너 레이어 또는 오디오 레이어를 사용하는 경우에는 속성 패널에 Auto Layout 옵션이 표시되지 않습니다.
ProtoPie에서 지원되는 Auto Layout 속성은 무엇인가요?
ProtoPie Studio에서 레이어에 Auto Layout을 적용할 수 있도록 지원하는 속성은 다음과 같습니다:
크기 조정
방향
정렬
패딩
간격
지원되는 Auto Layout 속성에 대해 자세히 알아보려면 문서를 확인해 보세요.
방향, 정렬, 패딩 등 원하는 Auto Layout 컨트롤을 사용자 정의하세요.
Figma에서 Auto Layout을 가져오려면?
이번 릴리스로 ProtoPie는 Figma의 핵심 Auto Layout 속성 대부분을 지원하게 되었으며, Figma에서 디자인을 가져올 때 주요 Auto Layout 설정이 유지됩니다. 하지만 ‘strokes’, ‘canvas stacking’, ‘align text baseline’과 최대/최소 크기 조정 옵션 같은 일부 고급 기능은 아직 ProtoPie에서 지원되지 않습니다.
💡원활한 가져오기 경험을 위한 팁:
최적의 성능을 위해 가져오는 동안 데스크톱에서 Figma와 ProtoPie를 열어 둔 상태로 보이게 유지하세요.
Figma의 최상위 프레임을 ProtoPie Studio로 가져오면, 해당 프레임은 씬으로 변환되며 Auto Layout 설정을 포함한 원래 속성이 모두 제거됩니다. 따라서 Figma의 최상위 프레임에 Auto Layout이 적용되어 있어도 ProtoPie Studio로는 그대로 전달되지 않으며, 씬에서 제외됩니다.
Figma 가져오기에 대해 더 알아보기.
Figma에서 ProtoPie로 내보내기.
자주 묻는 질문
Q. Auto Layout을 인터랙션과 함께 사용하고 Preview 창이나 ProtoPie Player 앱에서 미리 볼 수 있나요?
인터랙션은 Auto Layout 기능의 초기 베타 릴리스에서 지원되지 않습니다. 이 단계에서는 Auto Layout이 디자인 요소와 Figma에서의 가져오기에 집중하여 워크플로 효율을 높입니다. Auto Layout이 적용된 레이어에 트리거와 리스폰스를 추가할 수는 있지만, Preview 창에서 Auto Layout 내부의 레이어를 이동하거나 크기를 조정해도 다른 레이어는 캔버스에서처럼 함께 이동하거나 크기를 조정하지 않습니다.
하지만 프로토타이핑 및 인터랙션을 위한 Auto Layout은 내년에 출시될 예정이니, 업데이트를 기대해 주세요.
Q. 인터랙션 패널에서 Auto Layout 옵션이 보이지 않는 이유는 무엇인가요?
Auto Layout 옵션은 특정 조건에서만 속성 패널에 표시됩니다. 표시되는 경우와 표시되지 않는 경우는 다음과 같습니다:
Auto Layout 옵션 은 속성 패널에 표시됩니다:
단일 컨테이너를 선택하여 적용할 때.
메인 컴포넌트를 선택하여 적용할 때.
두 개 이상의 레이어를 선택하여 적용할 때.
Auto Layout 옵션 은 속성 패널에서 사용할 수 없습니다:
마스크 레이어를 선택할 때.
컨테이너가 아닌 단일 레이어를 선택할 때.
오디오에는 Auto Layout을 적용할 수 없으므로 오디오 레이어를 사용할 때.
Auto Layout 옵션이 보이지 않는다면, 현재 선택 항목이 이러한 지원되지 않는 경우 중 하나에 해당하는지 확인해 보세요. 더 알아보기.
다음은 무엇인가요?
이것은 시작에 불과합니다. 이번 첫 베타 릴리스에서는 Auto Layout이 디자인 요소와 Figma 가져오기를 강화하여, Auto Layout 속성을 가져오고 ProtoPie에서 직접 편집할 수 있게 함으로써 워크플로를 간소화하고 생산성과 내보내기 속도를 높입니다. 앞으로 내년에 출시될 다음 단계에서는 Auto Layout이 프로토타이핑으로 확장되어, 디자인과 인터랙션 워크플로를 모두 향상시키는 더욱 강력하고 매끄러운 통합을 제공할 예정입니다.
여러분의 피드백은 Auto Layout의 미래를 만드는 데 매우 중요합니다. 커뮤니티에 참여해 의견을 나누고, 질문하고, 다가올 업데이트 소식을 받아보세요.
