Intro

프로토파이는 스마트 디바이스를 위한 프로토타이핑 툴입니다. 프로토파이를 통해서 정교한 프로토타입을 코딩 한 줄 하지 않고도 쉽고 빠르게 만들 수 있습니다. 더욱이 실제 디바이스에서 프로토타입을 테스트해볼 수 있어 실제 사용환경을 시뮬레이션 해볼 수 있습니다.

Explore design solutions

개발자의 도움 없이도 다양한 인터랙션을 구현할 수 있습니다

Communicate designs

정교한 인터랙션을 팀원들에게 쉽게 설명할 수 있습니다

Research user feedback

개발 단계 이전에도 사용자의 피드백을 쉽게 받을 수 있습니다

Concept Model

interaction concept model

프로토파이의 개념 모델은 프로그래밍 언어보다는 자연상에서 물체가 움직이는 원리를 바탕으로 하고 있습니다. 오브젝트의 움직임이나 상호작용은 해당 상호작용을 유발하는 트리거, 상호작용의 결과를 보여주는 리스폰스, 상호작용의 대상이 되는 오브젝트로 구성됩니다. 프로토파이 역시 오브젝트, 트리거, 리스폰스를 조합하여 인터랙션을 기술하도록 만들어져 있습니다.

위의 예에서는 스크린에서 보여지는 오브젝트를 탭하는 동작은 트리거에 해당하고 탭한 오브젝트가 움직이는 변화는 리스폰스라고 할 수 있습니다.

interaction piece table

자연에서 원소들이 다양한 조합을 통해서 다양한 물질을 구성하는 것처럼, 인터랙션을 구성하는 인터랙션 피스(Interaction Piece)인 트리거와 리스폰스들을 조합하면 다양한 인터랙션을 만들어 낼 수 있습니다. 위의 표에서 좌측은 트리거를 우측은 리스폰스를 의미합니다. 가운데는 트리거와 리스폰스가 유기적으로 결합된 컴퍼넌트를 의미합니다.

Why ProtoPie?

프로토파이를 사용해야하는 다양한 이유가 있지만, 크게 4가지 장점을 꼽을 수 있습니다.

1. Low learning cost

프로토파이는 직관적으로 이해할 수 있는 개념 모델을 가지고 있고, 여타 그래픽툴과 유사한 UI를 가지고 있어 디자인작업에 익숙한 사람이라면 쉽게 활용할 수 있습니다.

2. Code Free

프로토파이는 코딩을 하지 않아도 정교한 프로토타입을 쉽게 만들 수 있습니다. 복잡한 코드나 함수 대신에 인터랙션 피스(트리거, 리스폰스)를 조합하면 다양한 인터랙션을 기술할 수 있습니다.

3. Multi-finger gestures & sensors

프로토파이는 화면상의 여러 개 포인트를 터치할 수 있습니다. 따라서 두 손가락 혹은 세 손가락을 사용한 인터랙션을 활용하는 프로토타입을 만들 수 있습니다. 또한, 스마트폰에 탑재되어 있는 다양한 센서를 활용할 수 있어서 단순히 디바이스의 스크린에서 보여지는 프로토타입을 넘어 디바이스간 통신이 필요한 프로토타입을 만들거나 서비스 디자인을 위한 프로토타이핑도 가능합니다.

4. Test on real phones

프로토파이는 프로토타입을 실제 스마트폰에서 테스트해볼 수 있습니다. 동시에 여러 개의 디바이스에서 동시에 프로토타입을 테스트해볼 수 있어, 팀 내에서 디자인 회의를 하거나 사용자조사를 할 때 등, 다양하게 활용할 수 있습니다.

Layer

프로토파이에서는 다른 디자인 툴을 사용했던 경험 그대로 레이어의 프로퍼티를 조절 할 수 있습니다. 사각형 레이어나 원형 레이어와 같은 벡터레이어를 메뉴바에서 쉽게 추가할 수 있고, 해당 레이어의 사이즈나 위치를 변경하는 방식이 기존 디자인 툴과 동일하기 때문에 빠르게 익힐 수 있습니다.

Layer Property

Position
캔버스상에서 레이어의 좌표를 설정합니다
Size
레이어의 크기를 설정합니다
Rotation
레이어의 각도를 설정합니다
Origin
레이어의 위치, 크기, 각도를 변경할 때의 기준점을 설정합니다
Radius
사각형 레이어 모서리의 둥글기를 설정합니다
Opacity
레이어의 투명도를 설정합니다. 레이어의 투명도를 0으로 설정하면 트리거에 반응하지 않습니다
Fill Color
레이어의 컬러와 컬러의 투명도를 설정합니다. 컬러의 투명도를 0으로 설정해도 트리거에 반응합니다
Border
레이어에 보더를 적용합니다.
Shadow
레이어에 쉐도우를 적용합니다.
Hit area
레이어의 터치 영역을 임의로 조절할 수 있습니다
Allow Touch to Affect Lower layers
레이어를 트리거에 반응하지 않도록 설정합니다
Use as Mask
벡터레이어만 가지는 속성으로 다른 레이어들을 벡터레이어 크기 만큼만 보여줄 수 있습니다

Video Layer

프로토파이는 동영상 레이어를 지원합니다.
20mb 이하의 mp4(H264) 포맷 비디오를 사용하실 수 있습니다.

Play Automatically
프로토타입이 실행됐을 때 자동으로 동영상을 재생합니다
Looping
동영상을 반복 재생합니다

Audio Layer

Audio 레이어를 지원합니다. wav, mp3, m4a 포맷을 사용할 수 있습니다.

Play Automatically
프로토타입이 실행됐을 때 자동으로 동영상을 재생합니다
Looping
오디오를 반복 재생합니다

Camera Layer

Smart Device의 camera를 사용할 수 있는 Layer입니다. Camera가 지원되지 않는 기기에서는 Place holder 영상으로 표시됩니다(예. 스튜디오의 프리뷰, 웹)

Auto Start
Scene이 시작할 때 Camera를 자동으로 실행합니다
Camera [Front]
전면 camera를 실행합니다
Camera [Rear]
후면 camera를 실행합니다

Text Layer

Text를 ProtoPie에서 바로 입력할 수 있습니다.

Font
폰트 패밀리를 선택할 수 있습니다. System Default를 선택하면 프로토타입를 실행하는 플랫폼의 기본 폰트로 보여지게 됩니다
Weight
폰트의 굵기를 조절 할 수 있습니다
Size
텍스트의 사이즈를 조절 할 수 있습니다
Alignment
폰트의 좌/우 혹은 상/하 정렬을 조절 할 수 있습니다
Line Spacing
폰트의 행간을 조절 할 수 있습니다

Missing Font

프로토파이에서 사용된 폰트가 설치되어 있지 않을 경우 우하단에 미씽폰트 정보가 표시됩니다. 미씽폰트 패널을 열어서 미씽폰트를 다른 폰트로 대체할 수 있습니다.

Missing font panel

Input Layer

Keyboard로 typing이 가능한 Input layer입니다.

Text Options: Text
Input Layer에 미리 typing되있는 text가 필요할 때 사용할 수 있습니다.
PlaceHolder
Input layer에 place holder를 설정할 수 있습니다. Place holder의 color는 Typing 되는 text color와 다르게 설정할 수 있습니다.
Keypad Options: Type
Mobile Keyboard의 type을 고를 수 있습니다. “Text”, “URL”, “E-mail”, “Number”, “Text Password”, “Number Password”를 지원합니다.
Keypad Options: Return
Mobile Keyboard의 Return key type을 고를 수 있습니다. “Go”, “Next”, “Send”, Search”, “Done”을 지원합니다. Auto Focus Out을 켜면 Return key를 눌렀을 때 자동으로 input layer에서 focus out합니다.
Keypad Options: Look
iOS에 한해서 Keyboard theme을 Dark/Light중에 선택할 수 있습니다.

Container

컨테이너는 다수의 레이어들을 그룹핑하여 한 번에 제어하거나 스크롤이나 페이징 인터랙션을 만드는 용도로 사용할 수 있습니다.

Relative Coordinates

일반적으로 레이어의 x,y좌표는 디바이스의 좌측 상단을 원점으로 좌표 체계를 가지지만, 컨테이너 안의 레이어는 컨테이너의 좌측 상단을 원점으로 좌표체계가 바뀌게 됩니다.

Relative Coordinates

Clip Sublayers

프로퍼티 패널의 클립 서브레이어를 켜면 컨테이너 영역만큼만 보이게 할 수 있습니다.

Clip Sublayers

Scroll / Paging

프로퍼티 패널에서 컨테이너의 스크롤 혹은 페이징 속성을 설정할 수 있습니다. 레이어 패널에서 컨테이너 안에 레이어를 넣어주는것 만으로 스크롤 또는 페이징이 가능합니다.

Scroll

세로 혹은 가로로 긴 레이어를 스크롤 합니다.

scroll interaction

Properties

Direction
레이어를 스크롤 혹은 페이징하는 방향을 설정합니다
Overscroll
오버스크롤 했을 때 Bounce효과를 켜고 끌 수 있습니다

Paging

손가락으로 화면을 수평, 수직으로 드래그할 때, 페이징 컨테이너 안의 레이어들이 페이징 컨테이너의 너비 혹은 높이 만큼 한 번에 움직입니다.

paging interaction

Properties

Direction
레이어를 스크롤 혹은 페이징하는 방향을 설정합니다
Overscroll
오버스크롤 했을 때 Bounce효과를 켜고 끌 수 있습니다

Touch Trigger

Smart device에서 보편적으로 사용되는 Touch 기반의 trigger입니다. Tap, Long press, Drag 등 가장 기본이 되는 트리거와 두 손가락을 사용하는 Pinch, Rotate 같은 멀티터치 제스쳐 기반의 트리거를 지원합니다.

Tap

레이어를 한번 탭했을 때 리스폰스를 실행시킵니다.

tap trigger
Tap
Move

트리거 프로퍼티

Number of Fingers
최대, 손가락 5개까지 동시에 터치가 가능합니다

Double Tap

레이어를 빠르게 두번 탭했을 때 리스폰스를 실행시킵니다.

doubletap trigger
Double Tap
Move

트리거 프로퍼티

Number of Fingers
최대, 손가락 5개까지 동시에 터치가 가능합니다

Touch Down

레이어에 손가락이 닿는 순간 리스폰스를 실행시킵니다.

touchdown trigger
Touch Down
Move

트리거 프로퍼티

Number of Fingers
최대, 손가락 5개까지 동시에 터치가 가능합니다

Touch Up

레이어에서 손가락이 떨어지는 순간 리스폰스를 실행시킵니다.

touchup trigger
Touch Up
Move

트리거 프로퍼티

Number of Fingers
최대, 손가락 5개까지 동시에 터치가 가능합니다

Long Press

레이어에 일정 시간동안 손가락이 닿아 있으면 리스폰스를 실행시킵니다.

longpress trigger
Long Press
Move

트리거 프로퍼티

Number of Fingers
최대, 손가락 5개까지 동시에 터치가 가능합니다
Pressing Time
손가락 끝으로 터치스크린을 누르고 있는 시간을 설정합니다

Fling

레이어를 스와이프 할 때 대상이 되는 레이어는 움직이지 않습니다.

fling trigger
Fling
Scale

트리거 프로퍼티

Direction
손가락이 움직이는 방향을 설정합니다

Pull

풀은 성공과 실패의 개념이 있는 트리거입니다. 레이어를 일정 거리 이상 혹은 일정 속도 이상으로 드래그 했을 때 성공으로 인정됩니다. 성공하게 될 경우 현재 레이어의 좌표에서 사용자가 입력한 거리(distance)만큼 이동하게 되고, 실패할 경우 원래의 제자리로 되돌아오게 됩니다.

pull trigger
Pull
Scale

트리거 프로퍼티

Direction
손가락 끝이 움직이는 방향을 설정합니다
Distance
풀이 성공했을 때 레이어가 이동할 거리를 설정합니다
Follow Over Pulling
레이어의 이동거리(distance)를 초과해서 드래그 하는 경우의 움직임을 정의합니다
Easing
레이어가 움직이는 가속도를 정의합니다

Drag

레이어를 드래그하여 움직이거나, 손가락의 이동 거리에 비례하게 사이즈와 각도를 조절할 수 있습니다.

drag trigger
Drag
Move

트리거 프로퍼티

Number of Fingers
최대, 손가락 5개까지 동시에 터치가 가능합니다

드래그 트리거와 조합되는 리스폰스의 프로퍼티

Direction
손가락 끝이 움직이는 방향을 설정합니다
Limit
레이어가 움직일 수 있는 한계점을 설정합니다
Ratio
레이어가 드래그 되는 거리와 손가락이 움직이는 거리의 비율을 설정합니다. 수치가 100일 때 1:1 비율로 움직이고 수치가 늘어날 수록 손가락의 움직임보다 레이어의 움직임이 커집니다

Pinch

두 손가락을 터치 스크린에 댄 상태로 오므렸다 펴는 동작으로 레이어의 사이즈를 조절할 수 있습니다.

pinch trigger
Pinch
Scale

핀치 트리거와 조합되는 리스폰스의 프로퍼티

Direction
손가락이 움직이는 방향을 설정합니다
Pivot
레이어의 크기나 각도가 변화할 때의 기준점을 설정합니다
Limit
레이어가 움직일 수 있는 한계점을 설정합니다

Rotate

두 손가락으로 레이어를 잡고 회전시킬 수 있습니다.

rotate trigger
Rotate
Rotate

로테이트 트리거와 조합되는 리스폰스의 프로퍼티

Pivot
레이어의 크기나 각도가 변화할 때의 기준점을 설정합니다

Conditional Trigger

사용자가 정의한 조건을 만족 시켰을 때만 리스폰스를 실행 되도록 만들 수 있습니다.

Chain

움직이는 레이어가 있을 때, 이 레이어의 변화에 따라 다른 레이어를 변화시킵니다.

chain trigger
Drag
Move
Chain
Scale

트리거 프로퍼티

Property
Layer attribute values as a reference for changing other layers

체인 트리거와 조합되는 리스폰스의 프로퍼티

Trigger’s Layer Mapping Range 1
체인의 타겟 레이어의 동작 범위를 입력합니다
Response’s Layer Mapping Range 2
체인의 타겟 레이어의 동작에 맞춰서 움직일 레이어의 범위 값을 입력합니다

Range

레이어의 프로퍼티가 변할 때 사용자가 정의한 조건을 만족 시킨 경우에만 리스폰스를 즉시 실행시킵니다. 사용자는 레이어의 좌표나 사이즈 같은 프로퍼티를 직접 정의한 값을 기준으로, 크거나 작거나 혹은 포함하거나 포함하지 않는 상황에 대한 조건을 정의 할 수 있습니다.

range trigger
Drag
Move
Range
Scale

트리거 프로퍼티

Greater than or equal to 1
타겟 레이어의 프로퍼티가 특정 값 이상일 때 실행됩니다
Less than or equal to 2
타겟 레이어의 프로퍼티가 특정 값 이하일 때 실행됩니다
Between 3
타겟 레이어의 프로퍼티가 특정 범위의 값 사이에 들어왔을 때 실행됩니다
Not between 4
타겟 레이어의 프로퍼티가 특정 범위의 값에 들어오지 않을 때 실행됩니다

Start

프로토타입이 실행되거나 씬이 전환 되었을 때 별도의 트리거 없이 자동으로 리스폰스가 실행됩니다.

onload trigger
Start
Move

트리거 프로퍼티

Start After Jump
이전 scene의 Jump Response에 transition을 사용할 경우 transition이 완료된 후에 Start trigger가 실행됩니다.
Start With Jump
이전 scene의 Jump Response에 transition을 사용할 경우 transition의 시작과 동시에 Start trigger를 실행합니다.
Restart Every Time
Scene이 실행될 때 마다 Start trigger를 실행합니다.

Detect

Layer Property 혹은 변수가 변할 때 Response를 실행합니다.

range trigger
Drag
Move
Detect
Scale

Mouse Trigger

Desktop에서 사용되는 Mouse를 위한 Trigger입니다. Mouse Over, Mouse Out을 사용해서 오브젝트위에 마우스가 올라갔을 때 반응하는 interaction을 만들 수 있습니다.

Mouse Over

마우스 이벤트입니다. 마우스가 오브젝트와 겹쳐졌을 때 리스폰스를 실행 시킵니다.

mouse over trigger
Mouse Over
Scale

Mouse Out

마우스 이벤트입니다. 마우스가 오브젝트를 벗어났을 때 리스폰스를 실행 시킵니다.

mouse out trigger
Mouse Out
Scale

Key Trigger

Press

External Keyboard와 Android의 Key가 눌렸을 때 Response를 실행합니다.

트리거 프로퍼티

Keyboard
0~1, A~Z, Space, Tab 등의 Key를 선택 할 수 있습니다.
Android
Android의 Back key와 Volume Up, Down key를 선택할 수 있습니다.

Input Trigger

키보드(smart device의 native keyboard 포함)를 통해 직접 입력 할 수 있는 Input Layer에서 사용가능한 Trigger입니다. 입력 후에 키보드에서 return key를 탭하거나 Input Layer에 Focus in 혹은 out 되는 시점에 동작하는 인터랙션을 만들 수 있습니다.

Focus

Input Layer에 커서가 focus in/out 됐을 때 response를 실행합니다. Input의 상태값에 따라 디자인을 다르게 만들 때 사용할 수 있습니다.

트리거 프로퍼티

Focus In
커서가 Focus In됐을 때 Response를 실행합니다.
Focus Out
커서가 Focus Out됐을 때 Response를 실행합니다.

Return

External Keyboard 혹은 Mobile Keyboard에서 Return key를 눌렀을 때 response를 실행합니다.

Sensor Trigger

디바이스의 센서를 사용할 수 있습니다. 디바이스 주변의 소리의 크기, 디바이스의 기울기 값 등을 활용하여 리스폰스를 제어하는 인터랙션을 만들 수 있습니다.

센서 트리거와 조합되는 리스폰스의 프로퍼티

Smoothness
센서의 값에 맵핑한 레이어의 움직임을 부드럽게 보정할 수 있습니다. 1은 아무런 보정을 하지 않은 기본 설정이고, 23 은 부드럽게 보정된 움직임을 표현해줍니다. 2 보다 3에 더 많은 보정이 가해집니다
Mapping Range - Device's Sensor 4
인터랙션을 실행시키고 싶은 센서의 범위 값을 입력합니다
Mapping Range - Response's Layer 5
센서의 값에 맞춰서 움직일 레이어의 범위 값을 입력합니다

Tilt

디바이스를 기울이는 각도에 따라 리스폰스를 실행 시킬 수 있습니다.

tilt trigger
Tilt
Move
tilt image

트리거 프로퍼티

Axis
디바이스의 회전이 발생하는 중심축을 선택합니다

Compass

디바이스의 나침반 기능을 이용해서 가리키는 방위에 따라 리스폰스를 실행 시킬 수 있습니다.

compass trigger
Compass
Rotate
compass niddle

Sound

디바이스 주변 소리의 크기에 따라서 리스폰스를 실행 시킬 수 있습니다.

sound trigger
Sound
Scale

3D Touch

아이폰의 터치 스크린을 누르는 강도(force)에 따라서 리스폰스를 실행 시킬 수 있습니다. 누르는 강도(force)의 값은 최저 0에서 최대 6.7까지 인식 가능합니다.

3dtouch trigger
3D Touch
Scale

Proximity

디바이스의 근접 센서를 사용할 수 있습니다. 근접 센서로 부터 멀어지거나, 가까워 질 때 리스폰스를 실행 시킵니다.

Proximity trigger
Proximity
Opacity

트리거 프로퍼티

Far to Near
디바이스와 가까워질 때 리스폰스를 실행시킵니다
Near to Far
디바이스와 멀어질 때 리스폰스를 실행 시킵니다

Receive

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

트리거 프로퍼티

Channel [ProtoPie Studio]
ProtoPie Studio 에 연결된 디바이스간에 메시지를 주고 받을 수 있습니다. Send 리스폰스와 Receive 트리거를 사용해서 두개 이상의 디바이스가 서로 상호작용하는 인터랙션을 만들 수 있습니다.
Channel [Android Broadcast]
하나의 Android 디바이스 내에서 다른 앱과의 인터랙션이 가능합니다. 자세한 내용은 여기서 확인할 수 있습니다.
Channel [Current Scene]
Scene 내에서 메시지를 주고 받을 수 있습니다. Send 리스폰스와 Receive 트리거를 사용하면 중복되는 인터랙션을 모듈화 시켜서 반복 작업을 줄일 수 있습니다.
Message
전송할 문자열을 정의합니다. 센드 리스폰스에서 정의한 문자열과 리시브 트리거에서 정의한 문자열이 동일할 때 디바이스간의 인터랙션을 실행 시킬 수 있습니다
Assign to Variable
Send response에서 message와 함께 특정 값을 함께 전달할 수 있습니다. 전달받은 값을 변수에 저장해서 사용하는게 가능합니다.

Response

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

Move

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

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

Scale

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

Size
레이어의 사이즈를 가로값width과 세로값height으로 조절합니다. (컨테이너의 사이즈를 조절 할 때는 컨테이너 안의 레이어들의 사이즈에는 변화가 없습니다.)
Factor
레이어의 사이즈를 퍼센트%로 조절합니다. (컨테이너의 사이즈를 조절할 때 컨테이너 안의 레이어들도 함께 사이즈가 조절됩니다.)
scale response

Rotate

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

Rotate To
레이어가 회전할 각도의 절대값을 설정합니다
Rotate By
레이어의 각도를 설정한 값만큼씩 증가 혹은 감소시킵니다
Direction
레이어가 회전하는 방향을 설정합니다
rotate response

3D Rotate

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

Rotate To
레이어가 회전할 각도의 절대 값을 설정합니다
Rotate By
레이어의 각도를 설정한 값만큼씩 증가 혹은 감소시킵니다
Direction
레이어가 회전하는 방향을 설정합니다
Pivot
레이어 회전의 기준점을 설정합니다
Perspective Depth
레이어가 3차원으로 회전할 때 왜곡의 정도를 설정할 수 있습니다. 숫자가 작아질 수록 왜곡이 커집니다
3d rotate response

Opacity

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

Change To
변경될 투명도의 값을 설정합니다
opacity response

Color

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

Fill
레이어의 컬러를 변경합니다.
Border
레이어의 보더 컬러를 변경합니다.
Shadow
레이어의 쉐도우 컬러를 변경합니다.
color response

Shadow

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

Shadow
shadow response

Border

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

Border
border response

Radius

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

Change To
변경될 둥글기 값을 설정합니다
radius response

Scroll

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

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

Reorder

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

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

Jump

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

Scene
이동할 Scene을 선택할 수 있습니다
Transition
Scene 이동을 할 때 트랜지션 효과를 줄 수 있습니다
Reset the selected scene
이동할 씬의 상태를 초기 상태로 되돌립니다. 이 옵션을 켜지 않으면 해당 씬에서 마지막으로 인터랙션이 일어난 상태로 이동하게 됩니다
jump response

Playback

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

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

Text

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

Change To
텍스트의 내용을 변경합니다
Size
텍스트의 사이즈를 변경합니다
Weight
텍스트의 굵기를 변경합니다
Alignment
텍스트의 좌/우 혹은 상/하 정렬을 변경합니다
Line Spacing
텍스트의 행간을 변경합니다
text response

Stop

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

Send

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

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

Focus

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

Focus In
선택된 input layer에 focus in 합니다.
Focus Out
선택된 input layer에 focus out 합니다.
focus response

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 을 손쉽게 만들 수 있습니다.

Condition

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

Greater than
타겟 레이어의 프로퍼티가 특정 값을 초과 할 때만 실행합니다
Greater than or equal to
타겟 레이어의 프로퍼티가 특정 값 이상일 때만 실행합니다
Less than
타겟 레이어의 프로퍼티가 특정 값 미만일 때만 실행합니다
Less than or equal to
타겟 레이어의 프로퍼티가 특정 값 이하일 때만 실행합니다
Equal to
타겟 레이어의 프로퍼티가 특정 값과 일치 할 때만 실행합니다
Not equal to
타겟 레이어의 프로퍼티가 특정 값과 일치하지 않을 때만 실행합니다
condition response

Timeline / Valueline

프로토파이에서는 트리거의 종류에 따라 리스폰스의 실행 범위를 타임라인과 밸류라인으로 구분해서 보여줍니다. 타임라인 혹은 밸류라인을 통해서 리스폰스들의 듀레이션과 스타트 딜레이, 맵핑 레인지를 시각적으로 확인 할 수 있고, 타임라인에 마우스오버 했을 때 보여지는 Bar(혹은 핸들)를 드래그하여 지속시간과 시작시점을 조정할 수 있습니다.

*컨티뉴어스 트리거에 사용되는 리스폰스들은 정해진 듀레이션이나 맵핑되는 값이 없기 때문에 별도의 타임라인이나 밸류라인을 가지지 않습니다.

Timeline

타임라인은 리스폰스들의 듀레이션, 딜레이, 리핏 설정을 시각화하여 표시해줍니다. 여러개의 리스폰스들이 함께 사용되는 마이크로인터랙션을 만들때 타임라인을 사용하면 더욱 효율적으로 각 리스폰스의 타이밍을 조정할 수 있습니다.

timeline image

Valueline

벨류라인은 트리거에 할당된 레이어와 리스폰스에 할당된 레이어의 동작 범위를 보여줍니다.

valueline image

Scene

두 개 이상의 화면을 가진 프로토타입을 만들 때 Scene을 추가할 수 있습니다. 또한, 복잡한 프로토타입에서 기능 단위로 Scene을 분리하면 프로토타입의 복잡도를 낮추고 인터랙션 패널의 가독성을 높일 수 있습니다.

scene list

Manage Scene

Scene panel에서 scene의 순서를 바꾸고 복제할 수 있습니다.

manage scene modal

Scene Transition

점프 리스폰스를 사용하면 scene간의 이동이 가능합니다. ios에서 default로 제공하는 transition효과를 사용할 수도 있고, 애니메이션 없이 즉시 scene을 이동을 할 수도 있습니다.

Recording

프리뷰에서 바로 프로토타입을 녹화할 수 있습니다.
녹화는 최대 5분까지 가능하고, 녹화가 완료하면 mp4(h264)파일로 저장됩니다.

scene list

Animation Curve

실제 사물들은 일정한 속도로 움직이는 경우가 많지 않습니다. 따라서 사람들은 일정한 속도로 움직이는 것 보다는 가속, 감속, 가감속이 들어가 있는 움직임을 더 자연스럽다고 느낍니다. Easing-Function과 Cubic-Bezier, Spring을 적절히 활용하면 자연스럽고 미려한 애니메이션을 만들 수 있습니다.

Easing Function

보편적으로 사용되는 가속도에 대한 프리셋입니다. 프로퍼티 패널에서 ease-in, ease-out, ease-in-out중에 선택할 수 있습니다.

EaseIn

  • easeInSine

  • easeInCubic

  • easeInQuint

  • easeInCirc

  • easeInElastic

  • easeInQuad

  • easeInQuart

  • easeInExpo

  • easeInBack

  • easeInBounce

easeOut

  • easeOutSine

  • easeOutCubic

  • easeOutQuint

  • easeOutCirc

  • easeOutElastic

  • easeOutQuad

  • easeOutQuart

  • easeOutExpo

  • easeOutBack

  • easeOutBounce

EaseInOut

  • easeInOutSine

  • easeInOutCubic

  • easeInOutQuint

  • easeInOutCirc

  • easeInOutElastic

  • easeInOutQuad

  • easeInOutQuart

  • easeInOutExpo

  • easeInOutBack

  • easeInOutBounce

Cubic-Bezier

네 가지 숫자를 조합하여 커스텀된 easing curve를 사용할 수 있습니다. 이 사이트에서 커스텀한 cubic-bezier값을 손쉽게 만들 수 있습니다.

*추후 studio 내에서 직접 Cubic-Bezier의 그래프를 직접 조작하면서 정의할 수 있는 기능을 제공할 예정입니다.

Example

  • Cubic-bezier
    ( 0.39, 0, 0.23, 1)

  • Cubic-bezier
    ( 0.71, 0.41, 0.32, 0.76)

Spring

스프링 커브는 레이어가 스프링처럼 튕기는듯한 애니메이션을 만들 수 있도록 해줍니다.

*추후 studio 내에서 직접 spring curve의 그래프를 직접 조작하면서 정의할 수 있는 기능을 제공할 예정입니다.

Example

  • 600, 16

  • 250, 19

Shortcuts

Overall

macOS Windows
Hide ProtoPie Command + H -
Hide Others Command + Option + H -
Toggle Full Screen Command + Control + F -
Minimize Window Command + M Ctrl + M
Toggle Layer Panel Command + Option + 1 Ctrl + Alt + 1
Toggle Interaction Panel Command + Option + 2 Ctrl + Alt + 2
Toggle Layer and Interaction Panels Command + Option + 3 Ctrl + Alt + 3
Toggle Formula Input Field Command + Return Ctrl + Enter

Manage a prototype

macOS Windows
New Command + N Ctrl + N
Open Command + O Ctrl + O
Close Command + W Ctrl + W
Save Command + S Ctrl + S
Save as Command + Shift + S Ctrl + Shift + S
Upload to Cloud Command + U Ctrl + U
Rename Command + R Ctrl + R
Edit Text Layer Command + Return Ctrl + Enter

Insert interaction elements

macOS Windows
Image Layer I I
Rectangle Layer R R
Oval Layer V V
Container Layer N N
Tap Trigger T T
Drag Trigger D D
Chain Trigger C C
Move Response M M
Scale Response S S
Opacity Response O O

Edit a prototype

macOS Windows
Undo Command + Z Ctrl + Z
Redo Command + Shift + Z Ctrl + Shift + Z
Copy Command + C Ctrl + C
Paste Command + V Ctrl + V
Paste with Interaction Pieces Command + Shift + V Ctrl + Shift + V
Duplicate Command + D Ctrl + D
Delete Delete Delete
Group Layers with Container Command + G Ctrl + G
Ungroup Layers from Container Command + Shift + G Ctrl + Shift + G
Collapse Command + [ Ctrl + [
Expand Command + ] Ctrl + ]
Unfold Sublayers Together Option + Click Alt + Click
Disable Smart Guide Cmmand + Drag Layer Ctrl + Drag Layer
Resize Layers with Center Pivot Option + Resize Layer Alt + Resize Layer
Drag Layers Perpendicularly Shift + Drag Layer Shift + Drag Layer
Increase Delay (+0.01s) Right Right
Increase Delay (-0.01s) Left Left
Increase Delay (+0.1s) Shift + Right Shift + Right
Increase Delay (-0.1s) Shift + Left Shift + Left
Increase Duration (+0.01s) Option + Right Alt + Right
Increase Duration (-0.01s) Option + Left Alt + Left
Increase Duration (+0.1s) Shift + Option + Right Shift + Alt + Right
Increase Duration (-0.1s) Shift + Option + Left Shift + Alt + Left

Run a prototype

macOS Windows
Run Prototype Command + R Ctrl + R
Toggle Preview Command + P Ctrl + P
Bring Preview to the Front Control + Tab Ctrl + Tab

Control a view

macOS Windows
Zoom In Command + =,
Z + click
Ctrl + =,
Z + click
Zoom Out Command + -,
Z + Option + click
Ctrl + -,
Z + Alt + click
Actual Size Command + 0 Ctrl + 0
Center Canvas Command + 1 Ctrl + 1
Panning Spacebar + Click Move Spacebar + Click Move
Language selector
TOP