또 다른 ProtoPie 업데이트를 소개할 시간입니다! 몇 달 전 ProtoPie 4.0에서 컴포넌트를 소개한 이후, 그때부터 가장 많이 받은 주요 기능 요청 중 하나가 바로 중첩 컴포넌트였습니다. 물론 중첩 컴포넌트를 도입해 컴포넌트를 기반으로 계속 확장하는 것은 매우 자연스러운 일입니다. 자, 그럼 시작해볼까요!
흥미로운 사실: 우리는 ProtoPie 5.0에서 인터랙션 라이브러리를 출시했습니다.
중첩 컴포넌트 외에도 ProtoPie 4.3에는 다른 훌륭한 기능들이 가득합니다. 자동완성 Send/Receive 메시지와 씬 및 컴포넌트 패널을 고정할 수 있는 옵션 덕분에 컴포넌트를 다루고 씬과 컴포넌트 사이를 전환하는 일이 훨씬 쉬워집니다. 또한 iOS용 시스템 상태 표시줄 지원과 배경 블러는 여러분의 프로토타입을 더욱 현실감 있게 만들어줄 것입니다.
지금 바로 ProtoPie 4.3을 시작해보세요. 여러분을 기쁘게 해드릴 이런 변화들을 확인하실 수 있을 것입니다. 아래에서 가장 중요한 몇 가지를 살펴보겠습니다.
중첩 컴포넌트 소개
몇 달 전 컴포넌트를 출시한 후, 이제 중첩 컴포넌트를 활용할 수 있습니다.
먼저, 컴포넌트란 무엇일까요? 컴포넌트는 프로토타입 전반에서 재사용할 수 있도록 저장해 둔 레이어와 인터랙션의 묶음입니다. 어떤 레이어와 인터랙션의 조합이든 컴포넌트로 만들 수 있습니다. 컴포넌트를 사용하면 불필요한 반복 작업을 줄이고, 씬별 가독성을 높이며, 궁극적으로 프로토타이핑 작업 흐름을 더 빠르게 만들 수 있습니다.
이제 ProtoPie에서는 한 컴포넌트 안에 다른 컴포넌트를 넣어 사용할 수 있어, 수많은 컴포넌트가 있는 프로토타입을 만들 때 더 큰 유연성을 제공합니다.
보시다시피 Month Drop Down 컴포넌트 안에 여러 컴포넌트를 사용하고 있습니다.
중첩 컴포넌트를 사용한 예제 프로토타입입니다.
컴포넌트 계층 구조의 어느 단계에서든 중첩 컴포넌트를 덮어쓸 수 있습니다. 상위 컴포넌트가 하위 컴포넌트를 덮어쓸 수 있으며, 그 반대도 가능합니다. 아마 이미 사용 중인 디자인 도구의 컴포넌트에서 익숙하게 접하던 방식일 것입니다.
ProtoPie에서 컴포넌트를 사용하는 데 익숙하다면 Send 응답과 Receive 트리거도 잘 알고 계실 것입니다. 컴포넌트는 씬과 분리되어 있으므로, Send 응답과 Receive 트리거는 원래 컴포넌트와 컴포넌트 밖 객체 간의 상호작용을 만들기 위해 사용되었습니다.
중첩 컴포넌트 도입 이후 몇 가지 변경 사항이 있습니다. 이제 Inside Pie에서 아래 채널 중 하나를 선택할 수 있습니다:
Parent — 상위 컴포넌트가 있으면 상위 컴포넌트, 없으면 씬입니다.
Child Component — 현재 컴포넌트 안에 있는 모든 하위 컴포넌트입니다.
Current Scene — 컴포넌트가 사용되는 씬입니다.
Current Component — 오직 현재 컴포넌트만 해당하며, 하위 컴포넌트는 포함하지 않습니다.
컴포넌트에서 Send 응답과 Receive 트리거를 사용할 때 선택할 수 있는 채널입니다.
문서에서 컴포넌트 사용 방법에 대해 더 알아보세요.
이와 관련해 궁금한 점이 있다면 언제든지 연락해 주세요. 어떻게 도와드릴 수 있을지 알려주시면 감사하겠습니다!
iOS용 배경 블러
iOS와 iPadOS에서 유명한 블러 효과를 구현할 수 있도록, iOS Background Blur라는 새로운 레이어와 Background Blur라는 응답을 추가했습니다.
iOS 13 및 iPadOS 13에서는 Apple의 Human Interface Guidelines를 기반으로 한 13가지 블러 효과를 모두 사용할 수 있습니다. iOS 12, iPadOS 12 및 그 이하 버전에서는 기본 블러 효과 3가지만 사용할 수 있습니다.
이제 ProtoPie 4.3에서 iOS용 Background Blur를 사용할 수 있습니다.
예제를 확인해보세요.
시스템 상태 표시줄
스마트 기기에서 프로토타입을 더욱 현실감 있게 만들기 위해, iOS와 Android 모두에서 시스템 상태 표시줄을 활용할 수 있는 기능을 추가했습니다. 씬별로 시스템 상태 표시줄의 콘텐츠와 배경 색상도 조정할 수 있습니다.
이제 더 이상 Sketch, Figma 또는 Adobe XD에서 먼저 가져온 정적인 상태 표시줄로 이를 흉내 낼 필요가 없습니다.
씬 및 컴포넌트 패널 고정 옵션
중첩 컴포넌트를 도입한 후에는 아마 컴포넌트를 훨씬 더 많이 사용하게 될 것입니다. 그러면 씬과 컴포넌트 사이를 더 자주 전환하게 되겠지요. 이제 씬 패널과 컴포넌트 패널을 모두 고정하여, 씬과 컴포넌트의 개요를 한눈에 확인하고 두 사이를 훨씬 더 빠르게 전환할 수 있습니다.
씬 패널과 컴포넌트 패널이 모두 고정된 상태입니다.
기타 기능 및 개선 사항
Send/Receive 메시지 자동완성
픽셀 단위 스냅
Color 응답에서 수식 지원
새로운 기기 프레임, 예: iPhone 11 Pro 및 Google Pixel 4
컴포넌트와 해당 씬의 탐색 버튼
인터랙션 복제
그나저나, 원격 근무를 하면서 프로토타이핑 효율을 극대화하는 방법에 관한 저희 글은 읽어보셨나요?
