ProtoPie 업데이트: Smart Jumps
ProtoPie의 새로운 기능, Smart Jump 에 대해 알아보세요.
ProtoPie 6.1 업데이트*Brunch 내 오류로 인해 몇몇 gif는 사진으로 대체되었음을 알려드립니다.
Google이 온라인 검색에서 없어서는 안 되는 것처럼, ProtoPie는 hi-fi 프로토타입에 현실적인 인터랙션을 제작하는 데 없어서는 안 되는 툴로 자리잡았습니다. 하지만, 이러한 특장점은 양날의 검이 되기도 했 습니다. ProtoPie를 통해 on-page 마이크로인터랙션이 추가된 고도의 hi-fi 프로토타입을 제작할 수 있는 한편, 추가 response 없이는 scene 사이의 커스텀 transition을 쉽게 제작할 수 없었습니다.
Smart Jump를 소개합니다!ProtoPie 커뮤니티 및 feature requests를 통해, 많은 분들이 scene간에 간단한 transition을 제작하는 데 필요 이상의 시간이 소요된다고 의견 주셨는데요. ProtoPie 6.1 업데이트를 통해 이 복잡함에 종지부를 찍었습니다. 이제 Smart Jump를 통해, scene간에 transition을 보다 쉽게 제작할 수 있게 되었습니다. 뿐만 아니라, Figma 에서 제작된 프레임간의 인터랙션을 ProtoPie의 Jump response로 가져올 수 있게 되었습니다.
Smart Jump란?
Smart Jump는 Jump response 내 새로운 transition 종류로, 연결된 항목들에 자동으로 애니메이션을 추가하여 scene transition을 보다 빠르게 제작할 수 있도록 합니다.
Smart Jump를 통해 구현할 수 있는 인터랙션의 예시는 아래와 같습니다.
오버레이 확대
스켈레톤 로더
당겨서 새로고침
메뉴 길게 누르기
위 인터랙션 외에도 Smart Jump를 통해 여러 가지 인터랙션을 구현할 수 있습니다.
여기를 클릭하여 Jump response에 대해 더 알아보세요.
Smart Jump는 어떻게 작동되나요?
Figma의 Smart Animate처럼, Smart Jump는 scene 안에서 연결된 레이어 사이의 다른 부분을 인식하고, 그 사이에 자동으로 애니메이션을 추가합니다.
레이어간의 차이는 아래와 같은 속성의 변경을 포함합니다.
Position
Size
Rotation
Opacity
Radius
Fill
Border
Shadow
Scroll
레이어 체계 및 이름을 통해 ProtoPie는 어떤 레이어가 서로 연결되는지 확인할 수 있습니다. 예를 들어, scene A와 scene B에 동일한 아이콘이 각각 다른 포지션에 있습니다. Smart transition과 Jump response를 사용해서 scene A에서 scene B로 넘어가는 경우, 이동과 동시에 해당 아이콘에 자동으로 애니메이션이 추가가 됩니다.
ProtoPie 6.1 업데이트 전에는 동일한 효과를 구현하기 위해서 양쪽 혹은 한쪽 scene 에 response를 추가해야 했다면, 이제는 Jump response 하나면 충분합니다. 또한, 지속 시간, 지연 시간 및 easing의 조정을 통해 필요에 맞게 커스터마이징 할 수 있습니다.
Figma 인터랙션을 Jump response로 가져오기
Figma를 통해 click-through 프로토타입 제작을 시작했다면, ProtoPie를 통해 제작된 click-through 프로토타입을 hi-fi 프로토타입으로 완성시키세요. Figma에서 제작된 프레임간의 인터랙션을 ProtoPie로 임포팅하면 Jump responses로 자동 변환됩니다.
Smart Animate transition이 추가된 프레임의 경우, ProtoPie는 Smart transition과 Jump responses를 가져온 프레임에 균일하게 적용시킵니다. 따라서 이제는 고도의 인터랙션 제작 전, scene 사이에 transition을 재생성하지 않아도 됩니다. 이제 ProtoPie를 통해 hi-fi 프로토타입을 더 쉽고 빠르게 구현하는 데만 집중하세요.
ProtoPie가 처음인가요?
ProtoPie는 디자이너가 사용하기 가장 쉬운 hi-fi 프로토타이핑 툴입니다. 모바일, 데스크탑, 웹, 그리고 IoT의 UI/UX 디자인 아이디어를 hi-fi 프로토타입으로 구현해보세요. 코딩이나 엔지니어의 도움없이도 현실적이고 실제 프로덕트와 비슷한 프로토타입 제작을 통해, 인터랙션 디자인 아이디어를 발견하고, 검증하고, 테스트해 보세요.
