Responses

리스폰스는 트리거에 의해 발생된 인터렉션의 결과가 되는 피스입니다. 트리거와 조합하는 방식에 따라 서로 다른 프로퍼티를 가집니다.

Move

레이어의 위치를 이동시킵니다.

Move

레이어가 이동할 좌표를 설정합니다

Scale

레이어의 사이즈를 조절합니다.

Size

레이어의 사이즈를 가로값width과 세로값height으로 조절합니다. (컨테이너의 사이즈를 조절 할 때는 컨테이너 안의 레이어들의 사이즈에는 변화가 없습니다.)

Factor

레이어의 사이즈를 퍼센트%로 조절합니다. (컨테이너의 사이즈를 조절할 때 컨테이너 안의 레이어들도 함께 사이즈가 조절됩니다.)

Rotate

레이어를 설정한 각도로 회전시킵니다.

Rotate To

레이어가 회전할 각도의 절대값을 설정합니다

Rotate By

레이어의 각도를 설정한 값만큼씩 증가 혹은 감소시킵니다

Direction

레이어가 회전하는 방향을 설정합니다

3D Rotate

레이어를 3차원으로 회전시킵니다.

Rotate To

레이어가 회전할 각도의 절대 값을 설정합니다

Rotate By

레이어의 각도를 설정한 값만큼씩 증가 혹은 감소시킵니다

Direction

레이어가 회전하는 방향을 설정합니다

Pivot

레이어 회전의 기준점을 설정합니다

Perspective Depth

레이어가 3차원으로 회전할 때 왜곡의 정도를 설정할 수 있습니다. 숫자가 작아질 수록 왜곡이 커집니다

Opacity

레이어의 투명도를 변경합니다.

Change To

변경될 투명도의 값을 설정합니다

Color

레이어의 컬러를 변경합니다.

Fill

레이어의 컬러를 변경합니다.

Border

레이어의 보더 컬러를 변경합니다.

Shadow

레이어의 쉐도우 컬러를 변경합니다.

Radius

사각형인 레이어의 모서리를 변형할 수 있습니다. 네 개 모서리를 동시에 변형할 수도 있으며, 각각 한 개씩 변형할 수도 있습니다.

Radius To

해당 모서리가 갖는 값을 입력합니다.

Radius By

현재 모서리의 값에서 더하거나 감해야 하는 값을 입력합니다.

Border

레이어에 border를 적용하거나 수정할 수 있습니다.

Border Position

Border는 Layer 윤곽의 내, 중앙 또는 외부에 배치될 수 있다.

Shadow

레이어에 shadow를 적용하거나 수정할 수 있습니다.

Shadow

선택한 좌표와 Blur를 기준으로 Shadow를 설정할 수 있습니다.

Background Blur

하단 오브젝트에 블러 효과를 줍니다.

기본 효과

Extra Light
Light
Dark

Material 효과 (웹 및 iOS 13 이상에서만 활성화 되며, Light와 Dark모드를 각각 지원합니다.)

Ultra Thin Material
Thin Material
Material
Thick Material
Chrome Material

Reorder

레이어의 순서를 변경합니다. 레이어가 컨테이너 안에 있는 경우 컨테이너 내에 위치하는 레이어들끼리만 순서가 변경됩니다.

Reorder

레이어가 배열된 순서를 바꿉니다

Scroll

레이어를 특정 위치로 스크롤합니다.

Scroll

레이어를 스크롤해서 이동할 거리값을 입력합니다

Jump

현재 Scene에서 다른 Scene으로 이동합니다.

Scene이 전환될 때, 애니메이션이 자동으로 적용되도록 설정할 수 있습니다. Smart Transition을 통해, 동일한 이름과 계층을 사용한 레이어가 변경될 때 애니메이션을 추가할 수 있습니다. Smart Jump와 관련한 더 자세한 사항은 다음 페이지를 참고해주십시오.

Scene

특정 Scene으로 이동합니다.

Transition

Scene이 이동할 때 전환 효과를 줍니다.

Instant
Smart
Fade
Pop
Slide In
Slide Out
Flip

Reset the current scene

Scene이 이동되면, 선택된 Scene의 설정은 초기화됩니다. 이 옵션이 활성화되지 않는다면, 해당 Scene은 마지막으로 설정한 상태 그대로 유지됩니다.

Send

디바이스간 인터랙션을 구현할 수 있습니다. 독립적으로는 사용이 불가능하고 리시브 트리거와 함께 사용되는 리스폰스입니다. 리시브 트리거에서 설정한 문자열과 센드 리스폰스의 문자열이 일치할 때 실행됩니다.
또한 센드 리스폰스와 리시브 트리거를 하나의 scene안에서 사용하면 여러번 사용되는 인터랙션을 모듈화시켜 반복작업을 줄일 수 있습니다.

Channel [Component]

Component와 message를 주고 받을 수 있습니다. Channel에서 component를 선택하면 현재 scene 안에 있는 component를 선택할 수 있고 선택한 component와 상호작용하게 만들 수 있습니다. Components 페이지에서 자세한 사용법을 확인 할 수 있습니다.

Channel [ProtoPie Connect/Studio]

ProtoPie Connect/Studio 에 연결된 디바이스간에 메시지를 주고 받을 수 있습니다 (ProtoPie Connect 또한 동일한 방식으로 작동합니다).

Channel [Current Scene]

Scene 내에서 메시지를 주고 받을 수 있습니다. Send 리스폰스와 Receive 트리거를 사용하면 중복되는 인터랙션을 모듈화 시켜서 반복 작업을 줄일 수 있습니다.

Message

전송할 문자열을 정의합니다. 한 기기에 표시되는 Receive 트리거 내 메시지가 Send 리스폰스 내의 메시지와 일치해야 기기 간 인터랙션이 이루어집니다.

Assign to Variable

Message와 함께 특정 값을 전달할 수 있습니다. 받는 쪽에서는 전달받은 값을 변수에 저장해서 사용할 수 있습니다.

Link

웹사이트나 url scheme을 열 수 있습니다.

URL

웹사이트 URL을 열 수 있습니다. ios는 in-app browser로 열 수도 있습니다.

e.g. https://protopie.io
e.g. https://www.google.com/search?q=protopie

URL scheme을 입력하면 iOS, Android의 기본앱을 열거나 써드파티 앱을 실행할 수 있습니다.

e.g. mailto:hello@protopie.io
e.g. tel:+1-212-555-1234
e.g. whatsapp://send?text=[[hello]]
e.g. fb://feed
e.g. slack://open?team={TEAM_ID}

Formula

Formula를 사용해서 url을 동적으로 입력할 수 있습니다.

e.g. "https://www.google.com/search?q=" + `Input 1`.text
e.g. "https://www.amazon.com/s/field-keywords=" + `keyword`.text

Text

텍스트의 속성이나 내용을 변경 할 수 있습니다. 텍스트 리스폰스는 듀레이션을 가지지 않습니다.

Change To

텍스트의 내용을 변경합니다

Size

텍스트의 사이즈를 변경합니다

Weight

텍스트의 굵기를 변경합니다

Alignment

텍스트의 좌/우 혹은 상/하 정렬을 변경합니다

Line Spacing

텍스트의 행간을 변경합니다

Media

이미지, 비디오, 로티 레이어의 콘텐츠를 수정합니다. 요금제에 따라 로컬 파일에서 미디어를 가져올 수도 있고, 엔터프라이즈 사용자의 경우 자체 호스팅 URL에서 미디어를 가져올 수도 있습니다.

지원되는 형식:

이미지: PNG, JPG, JPEG, BMP, GIF, SVG, WebP
비디오: 최대 100MB까지의 MP4(H.264), WebM, MOV 파일
로티: 프로토파이는 표현식을 사용하는 로티 파일을 지원하지 않습니다.

지원되는 미디어 파일에 대해 자세히 알아보세요.

Source

이미지, 비디오, 로티를 장치에서 선택하거나 (self-hosted URL) 자체 호스팅 URL에서 가져와야 합니다.

Start Delay

응답을 시작하는 데 소요되는 시간 지연을 입력하세요.

Focus

선택한 Input layer에 커서를 focus in/out 합니다.

Focus In

선택된 input layer에 focus in 합니다.

Focus Out

선택된 input layer에 focus out 합니다.

Camera

Camera Layer를 조작 할 수 있는 response입니다. 또한 이를 통해 프로토타입 내에서 QR 코드를 스캔할 수 있습니다(자세히 보기).

Action [Start]

Camera를 실행합니다. 전면 카메라와 후면카메라 중 선택해서 실행할 수 있습니다.

Action [Stop]

Camera를 중지합니다.

Camera [Current Camera]

마지막으로 선택되어 있던 camera를 실행합니다.

Camera [Front Camera]

전면 camera를 실행합니다.

Camera [Rear Camera]

후면 camera를 실행합니다.

Camera [Switch]

마지막으로 선택되어 있던 방향과 반대 방향의camera를 실행합니다.

QR 코드 스캐너

프로토타입 내에서 QR 코드를 스캔할 수 있습니다.

URL 즉시 실행

QR 코드를 스캔하여 웹 브라우저에서 링크를 실행할 수 있습니다.

지속적인 추적

QR 코드 내에 저장된 값을 모니터링할 수 있습니다.

Playback

오디오, 동영상, Lottie 레이어에 적용할 수 있습니다. 레이어를 재생 혹은 정지시키거나, 원하는 지점을 찾아 재생할 수도 있습니다.

Play

동영상 혹은 오디오를 재생합니다

Pause

오디오, 동영상, Lottie 파일을 정지 시킵니다.

Seek

오디오, 동영상, Lottie 파일의 특정 지점을 찾아 재생할 수 있습니다. [-분:-초] 형식으로 원하는 시간을 입력하십시오.

수식을 이용하면 재생하고자 하는 지점을 자유롭게 이동할 수 있습니다. 자세한 사항은 다음 예제를 참고해주십시오.

Volume

영상 또는 오디오 파일의 볼륨을 제어합니다.

Volume To

오디오 또는 영상 레이어의 볼륨을 조정합니다.

Vibrate

기본적인 진동과 Android, iOS에서 지원하는 Haptic Feedback을 사용할 수 있습니다. Google의 Developer Documentation과 Apple의 Human Interface Guideline에서 각 Haptic Feedback의 정확한 설명과 예제를 확인할 수 있습니다.

iOS

Default: 기본 진동입니다.
Notification - Success: 입금 혹은 차량 잠금해제와 같은 동작이나 어떠한 작업이 완료되었음을 나타냅니다.
Notification - Warning: 입금 혹은 차량 잠금해제와 같은 동작이나 어떠한 작업에서 경고가 발생했음을 나타냅니다.
Notification - Failure: 입금 혹은 차량 잠금해제와 같은 동작이나 어떠한 작업이 실패했음을 나타냅니다.
Impact - Light/Medium/Heavy: 시각적 경험을 보완하는 물리적인 효과를 제공합니다. 예를 들어 어떤 객체가 제자리에 들어가거나 두개의 객체가 충돌했을 때 실제로 "쿵" 하는듯한 물리적인 효과를 줄 수 있습니다.
Selection - Selection: 선택 항목이 변경되고 있음을 나타냅니다. 예를 들어 사용자가 휠을 스크롤하는 동안 가볍게 두드리는 효과를 줄 수 있습니다. 이 피드백은 선택이나 확인 등의 1회성 피드백이 아니라 지속적인 움직임을 전달하는 용도에 적합합니다.

Android

Default: 기본 진동입니다.
Keyboard Press: 사용자가 가상 버튼 혹은 소프트웨어 키보드의 키를 눌렀음을 나타냅니다.
Keyboard Tap: 사용자가 소프트웨어 키보드의 키를 눌렀음을 나타냅니다.
Long Press: 사용자가 어떤 오브젝트를 롱프레스 했을 때 해당 액션이 완료되었음을 나타냅니다.
Virtual Key: 사용자가 화면상의 가상 버튼을 눌렀음을 나타냅니다.