Protopie Connect

6

분 소요

ProtoPie Connect 입문 1: Studio에서 여러 Pie가 서로 대화하도록 Send와 Receive 사용하기

여러 Pie 간에 Send와 Receive를 사용하여 진정한 멀티스크린 경험을 만드는 방법을 알아보세요.

Jeff Clarke, UX Designer & ProtoPie Educator

소개

ProtoPie는 프로토타입에서 데이터를 주고받는 데 사용할 수 있는 Send and Receive라는 메시징 시스템을 사용합니다. 이미 씬과 컴포넌트 사이에서 명령과 정보를 앞뒤로 주고받는 데 Send and Receive를 사용하는 데 익숙할 수도 있습니다.

하지만 프로토타입 간에도 Send and Receive를 사용할 수 있다는 사실을 알고 계셨나요? 이는 멀티스크린 경험을 손쉽게 구축할 수 있게 해 주는 독보적인 핵심 기능입니다!

Studio에 기본 내장

어느 정도까지는 이 기능이 이미 ProtoPie Studio에 기본으로 내장되어 있습니다. Studio만으로도 다음과 같은 제한 사항이 있지만 두 개의 서로 다른 Pie가 서로 통신하게 만들 수 있습니다:

  • Studio가 데스크톱에서 실행 중이어야 합니다

  • 두 개를 초과하는 Pie가 서로 상호작용하게 할 수 없습니다.

  • 이 기능은 클라우드가 아니라 컴퓨터 로컬에서만 작동합니다.

  • Pie 간 통신으로 제한됩니다. Studio만으로는 물리적 장치와의 통합이 불가능합니다.

ProtoPie Connect와 함께라면 훨씬 더 강력해집니다!

ProtoPie Connect를 더하면 이러한 모든 제한이 사라집니다. 세 개 이상의 Pie를 사용하고 싶으신가요? 가능! 노트북, 휴대폰, 태블릿을 한꺼번에 사용하고 싶으신가요? 가능! 모든 Pie를 하나의 화면에 함께 표시하고 싶으신가요? 가능! 물리적 하드웨어와 상호작용하고 싶으신가요? 가능! 또한 엔터프라이즈 구독자라면 이 모든 것을 클라우드에서도 작동하게 할 수 있습니다!

엄청나게 좋아 보이죠? 맞습니다! 계속 읽으며 작동 원리를 알아보세요.

배우게 될 내용

이 튜토리얼에서는 다음 내용을 다룹니다:

소요 시간: 30분 이내

Send and Receive: ProtoPie 소통의 초석

먼저 Send and Receive 복습해 보겠습니다. 이미 작동 방식을 알고 계실 수도 있지만, 잠시 함께 살펴보죠. Send and Receive를 완전히 이해하는 것은 멀티스크린 경험을 구축하고, 이후 Connect를 사용하는 데 매우 중요합니다.

Send and Receive는 개념적으로 매우 단순합니다. 원하는 메시지를 보내기 위해 Send Response를 사용합니다. 보낸 메시지에는 필요에 따라 약간의 정보를 첨부할 수 있습니다. 그런 다음 다른 곳에서 Receive Trigger를 사용해 해당 메시지를 듣고 그에 맞게 응답합니다.

예를 들어, Send and Receive의 일반적인 용도는 컴포넌트를 초기 상태로 재설정하는 것입니다. 컴포넌트는 독립적으로 구성되어 있으므로, 메인 씬에서 컴포넌트 복사본에 Reset 응답을 그냥 사용하면 완전히 초기화되지 않습니다. 메인 씬에서의 바깥쪽 크기, 위치, 불투명도 등만 재설정되고, 컴포넌트 내부의 레이어는 그렇지 않습니다. 이를 우회하기 위해, 컴포넌트가 명령을 듣도록 설정해 두고, 해당 명령을 받으면 여러 응답을 실행하여 컴포넌트를 초기 상태로 되돌리게 할 수 있습니다.


The main scene sends a message, and the component receives it and acts accordingly

채널이 중요합니다

메시지를 보낼 때는 특정 채널을 통해 보냅니다. 해당 메시지를 듣도록 설정된 Receive 트리거는 반드시 같은 채널을 사용해야 합니다. 그렇지 않으면 메시지가 “들리지” 않습니다.


The channels must match

다음 표는 주어진 Receive 채널에 대응하는 Send 채널을 보여줍니다.


Matching Send and Receive channels

튜토리얼의 나머지 부분에서는 다른 하나의 채널에 집중할 텐데, 이는 여러 Pie가 서로 통신하는 주요 메커니즘입니다. 바로 “ProtoPie Studio.”입니다.


ProtoPie Studio Channel

ProtoPie Studio” 채널로 메시지를 보내면 다른 Pie가 이를 “듣고” 응답할 수 있습니다. ProtoPie Connect를 사용하면 이러한 메시지를 다른 Pie뿐 아니라 물리적 장치로도 전달하여 완전한 몰입형 하드웨어/소프트웨어 경험을 구현할 수 있습니다.

직접 확인해 보겠습니다!

두 개의 Pie 이야기

첫 번째 예제에서는 ProtoPie Connect를 사용하지 않고도 두 개의 Pie가 서로 통신할 수 있다는 것을 보여드립니다. 예를 들어, 평면도가 있는 태블릿 기반 제어판과 조명 수준을 제어하는 것을 시뮬레이션하는 모바일 앱이 있는 스마트 홈 경험을 시뮬레이션해 보겠습니다.


Separate tablet and mobile Pie files

시작할 Pie

작업할 Pie는 두 개입니다. 둘 다 다운로드하여 ProtoPie Studio에서 열어 보세요:

[태블릿 앱 Pie] [모바일 앱 Pie]

튜토리얼

아래 영상과 함께 따라 해 보세요.

이제 Connect와 함께!

지금은 Studio를 실행한 상태에서만 이 경험을 실행할 수 있습니다. 하지만 이 두 개의 Pie를 Connect에 불러오면, 다양한 방식으로 경험을 미리 볼 수 있고, 더 많은 Pie를 경험에 추가할 수 있습니다.

이 데모에서는 위에서 작업한 Pie를 계속 사용할 예정이며, 데모 중간쯤에 세 번째 Pie를 추가할 것입니다. 여기에서 다운로드할 수 있습니다:

[데스크톱 앱 Pie]

아래 영상과 함께 따라 해 보세요.

영상

이건 시작에 불과합니다! ProtoPie Connect를 사용해 여러 가지 것들과 Pie를 통합하는 방법을 알아보려면 ProtoPie Connect 소개 2/7: IFTTT와의 첫 통합으로 계속 진행하세요!

완성된 Pie

이 튜토리얼에서 사용한 모든 Pie 파일의 완성본은 다음과 같습니다.