Response

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

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

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

Shadow

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

Shadow

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

Border

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

Border Position

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

Radius

레이어의 모서리의 둥글기를 변경합니다.

Change To

변경될 둥글기 값을 설정합니다

Scroll

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

Scroll

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

Reorder

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

Reorder

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

Jump

Scene간 이동을 할 수 있습니다.

Scene

이동할 Scene을 선택할 수 있습니다

Transition

Scene 이동을 할 때 트랜지션 효과를 줄 수 있습니다

Reset the selected scene

이동할 씬의 상태를 초기 상태로 되돌립니다. 이 옵션을 켜지 않으면 해당 씬에서 마지막으로 인터랙션이 일어난 상태로 이동하게 됩니다

Playback

동영상 레이어와 오디오 레이어를 제어할 수 있습니다. 재생하거나 멈추고 특정 구간으로 점프 시킬 수 있습니다.

Play

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

Pause

동영상 혹은 오디오를 일시 정지합니다.

Seek

동영상 혹은 오디오를 특정 구간으로 점프시킵니다. M:SS 형식으로 원하는 구간을 입력할 수 있습니다

Text

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

Change To

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

Size

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

Weight

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

Alignment

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

Line Spacing

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

Stop

Progress bar나 Loader처럼 애니메이션이 진행 중인 레이어를 멈출 수 있습니다.

Send

디바이스간 인터랙션을 구현할 수 있습니다. 독립적으로는 사용이 불가능하고 리시브 트리거와 함께 사용되는 리스폰스입니다. 리시브 트리거에서 설정한 문자열과 센드 리스폰스의 문자열이 일치할 때 실행됩니다.

또한 센드 리스폰스와 리시브 트리거를 하나의 scene안에서 사용하면 여러번 사용되는 인터랙션을 모듈화시켜 반복작업을 줄일 수 있습니다.

Channel [Component]

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

Channel [ProtoPie Studio]

ProtoPie Studio 에 연결된 디바이스간에 메시지를 주고 받을 수 있습니다. Send 리스폰스와 Receive 트리거를 사용해서 두개 이상의 디바이스가 서로 상호작용하는 인터랙션을 만들 수 있습니다.

Channel [Android Broadcast]

하나의 Android 디바이스 내에서 다른 앱과의 인터랙션이 가능합니다. 자세한 내용은 여기서 확인할 수 있습니다.

Channel [Current Scene]

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

Message

전송할 문자열을 정의합니다. 센드 리스폰스에서 정의한 문자열과 리시브 트리거에서 정의한 문자열이 동일할 때 디바이스간의 인터랙션을 실행 시킬 수 있습니다

Assign to Variable

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

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: 사용자가 화면상의 가상 버튼을 눌렀음을 나타냅니다.

Focus

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

Focus In

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

Focus Out

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

Assign

Variable의 값을 overwrite할 수 있습니다.

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

Camera

Camera Layer를 조작 할 수 있는 response입니다.

Action [Start]

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

Action [Stop]

Camera를 중지합니다.

Camera [Current Camera]

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

Camera [Front Camera]

전면 camera를 실행합니다.

Camera [Rear Camera]

후면 camera를 실행합니다.

Camera [Switch]

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

Reset

현재 Scene, 레이어 혹은 변수를 초기상태로 되돌립니다. Scene 을 선택하여 scene 전체를 초기 상태에서 다시 시작하도록 하거나, 특정 layer 를 선택하여 reverse animation 을 손쉽게 만들 수 있습니다.

Background Blur

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

기본 효과
  • Extra Light

  • Light

  • Dark

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

  • Thin Material

  • Material

  • Thick Material

  • Chrome Material

Condition

리스폰스가 실행시키기 위한 조건을 정의합니다. 컨디션 피스에서 정의한 조건을 만족시킬 때, 컨디션 아래 나열된 리스폰스들이 실행 됩니다.

Greater than 

타겟 레이어의 프로퍼티가 특정 값을 초과 할 때만 실행합니다

Greater than or equal to 

타겟 레이어의 프로퍼티가 특정 값 이상일 때만 실행합니다

Less than 

타겟 레이어의 프로퍼티가 특정 값 미만일 때만 실행합니다

Less than or equal to 

타겟 레이어의 프로퍼티가 특정 값 이하일 때만 실행합니다

Equal to 

타겟 레이어의 프로퍼티가 특정 값과 일치 할 때만 실행합니다

Not equal to 

타겟 레이어의 프로퍼티가 특정 값과 일치하지 않을 때만 실행합니다