출시 버전

4

분 소요

ProtoPie 5.0: 인터랙션 녹화와 라이브러리로 오해를 놓치지 마세요

더 이상 인터랙션 스펙 덱은 필요 없습니다! 인터랙션 녹화본을 활용해 단순한 인계를 넘어가고, 인터랙션 라이브러리로 전반에 걸쳐 일관성을 확보하세요.

Fredo Tan, Head of Growth

프로토타이핑 워크플로가 얼마나 더 쉬워질지 상상해 보세요…

  • …라이브러리를 만들고 서로 다른 프로토타입은 물론 팀 전체에서 상호작용을 쉽게 재사용할 수 있다면.

  • …당신은 더 이상 힘들게 상호작용 명세 문서를 만들 필요가 없습니다. 링크만 보내면 엔지니어가 필요한 모든 상호작용 사양을 갖게 됩니다. 단순한 핸드오프를 넘어서는 방식입니다.

오늘, 우리는 디자이너의 가장 대담한 상상을 실현하는 완전히 새로워진 ProtoPie 5.0을 출시했습니다. 이번 업데이트에는 두 가지 주요 기능이 포함되어 있습니다:

  • 상호작용 녹화, 그 이상의 핸드오프

  • 상호작용 라이브러리

상호작용 녹화, 그 이상의 핸드오프


Interaction specs shown in web browser


엔지니어에게 필요한 모든 상호작용 사양을 한 페이지에서 확인할 수 있습니다.

엔지니어가 녹화를 따라가게 하기만 하면 됩니다. 매우 간단합니다.

결국 핵심은 이것입니다.

프로토타입에서 어떤 상호작용이든 녹화하여 상호작용 녹화를 만들 수 있습니다. 상호작용의 흐름을 바탕으로 ProtoPie는 엔지니어가 여러분의 상호작용 디자인을 구현하는 데 필요한 모든 상호작용 사양을 생성합니다.


Interaction spec of navigation app gif


상호작용 녹화만 엔지니어와 공유하세요.

지속 시간, 지연, 이징, 레이어 속성을 떠올려 보세요. 모두 여기에 들어 있습니다. 이 예시 상호작용 녹화를 사용해 보세요.

설명할 것이 전혀 없습니다

이것은 단순한 핸드오프를 훨씬 넘어섭니다. 각 트리거와 응답의 모든 동작과 세부 사항을 담은 시각적 문서와 함께 프로토타입을 쉽게 공유할 수 있습니다. 모두 여러분이 설계한 사용자 여정에 기반합니다.

해석의 여지를 남기지 않습니다. 각 상호작용을 의도, 맥락, 정확성을 담아 전달할 수 있습니다.

상호작용 녹화에 대해 자세히 알아보세요.

상호작용 라이브러리


ProtoPie studio showing team library panel


ProtoPie의 새로운 라이브러리로 자신만의 상호작용 디자인 시스템을 만들어 보세요.

이전 업데이트에서 우리는 컴포넌트와 중첩 컴포넌트를 도입했습니다. 다음 논리적인 단계는 바로 이러한 컴포넌트를 통합하고 프로토타입은 물론 팀 전체에서 쉽게 재사용하는 것입니다.

누구나 자신만의 상호작용 라이브러리를 만들 수 있습니다. 왼쪽의 컴포넌트 패널에서 모든 상호작용 라이브러리를 찾을 수 있습니다.

라이브러리 유형은 3가지입니다.

팀 라이브러리(Pro & Enterprise 요금제만 해당)

팀의 모든 편집자는 팀 라이브러리를 만들 수 있으며, 다른 편집자를 초대하여 팀 라이브러리를 수정할 수 있습니다. 팀 라이브러리의 컴포넌트는 팀의 모든 편집자가 사용할 수 있습니다.


Team interaction library for components


팀 구성원을 초대해 팀 라이브러리를 함께 수정하고 상호작용을 표준화하세요.

개인 라이브러리(모든 요금제)

클라우드의 개인 공간에서 개인 라이브러리를 만들 수 있습니다. 개인 라이브러리의 컴포넌트는 본인만 사용할 수 있습니다.

공개 라이브러리(모든 요금제)

공개 라이브러리의 모든 컴포넌트를 사용할 수 있습니다. 공개 라이브러리는 누구나 사용할 수 있는 표준 라이브러리 역할을 합니다. 현재 제공되는 첫 두 공개 라이브러리는 Material Design과 iOS 상호작용 라이브러리입니다.

라이브러리는 어떻게 만들까요?

컴포넌트 패널의 팀 라이브러리 또는 개인 라이브러리 섹션 오른쪽에 있는 + 버튼 중 아무거나 클릭하면 새 상호작용 라이브러리를 만들 수 있습니다. 라이브러리 이름을 지정하고 선택적으로 설명을 추가한 다음, 만들기 버튼을 클릭하여 라이브러리를 생성하세요.

자세히 보기로 상호작용 라이브러리 사용 방법을 알아보세요.

기존 컴포넌트 내보내기

여러분 중 많은 분들이 이미 Pie 파일 어딘가에 기존 컴포넌트를 저장해 두셨을 것입니다. 새 라이브러리로 내보내기 옵션을 사용하면 이 로컬 컴포넌트들을 한 번에 모두 상호작용 라이브러리에 넣을 수 있습니다.


Seven examples of components


컴포넌트를 새 라이브러리로 내보내고 다른 프로토타입에서 상호작용을 재사용하세요.

상호작용 디자인 시스템

아마도 Figma, Sketch, 또는 Adobe XD의 라이브러리를 사용하는 정적인 디자인 시스템을 이미 갖고 있을 것입니다. ProtoPie의 상호작용 라이브러리를 사용하면 이를 기반으로 자신만의 상호작용 디자인 시스템을 구축할 수 있습니다.

상호작용을 표준화하고 전반적인 프로토타이핑 속도를 높이세요.

자세히 알아보기로 상호작용 라이브러리에 대해 더 알아보세요.

기타 기능 및 개선 사항

  • 컴포넌트 인스턴스 교체

  • 컴포넌트 가이드

  • 레이어를 붙여넣을 때 더 나은 배치

  • 가져올 때 가져오기 크기가 기기 밀도에 맞게 조정

  • 수식 입력 필드의 레이어 블록 개선