brunch

매거진 프로토파이 업데이트 소식

라이킷 5 댓글 4

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 이세호 Oct 16. 2018

프로토파이 3.9 업데이트

변수/함수, 네이티브키보드, to/by의 사용범위 확대 등

프로토파이 3.9 업데이트에서는 매우 큰 폭의 업데이트가 진행되었습니다.

조금 늦었지만 업데이트된 내용을 정말 아주 간단히 (바뀐것도 많고 활용도가 너무 넓어져서 모두 다루긴 무리..) 살펴보는 시간을 갖겠습니다.

3.9 업데이트 내용은 간단히 정리하면 다음과 같이 3가지로 요약됩니다.

1. to/by 사용범위 확대

2. 네이티브키보드와 Input / Focus / Return ( +Detect )

3. 변수와 함수 ( + Text(F), Assign, Detect )

공식 문서에도 3.9업데이트 내용에 대한 설명이 이뤄져있습니다만 최대한 기본기능을 이해하기 쉽도록 정리해보았습니다. Formula와.Variable에 관한 내용은 공식문서(링크)를 읽어보시면서 직접 만드시는게 제일 좋습니다.

본 문서에 링크된 pie파일은 모두 직접 만들었고 이해를 돕기 위해 디자인 요소를 배제하고 최소한의 기능을 사용하여 만들었습니다. 다만 변수값을 일부러 넣고 디버깅을 활성화하여 변화 값을 확인할 수 있도록 했습니다.

* 1,2,3에 삽입된 예제들에서는 3.9 신규기능인 Variable, Detect, Assign, Text(Formula)가 전체적으로 사용되었습니다.

1. to / by 사용 범위 확대

Rotate에서만 지원했던 to / by의 사용을 Opacity / Move / Radius 등 다양한 리스폰스에서도 지원하여, 특정한 트리거를 연속적으로 실행할때에 변화가 누적되도록 할 수 있게 되었습니다.

a) Tap -> Move to 0,50 : 한번 탭하면 (0,50)이라는 좌표로 이동합니다.

b) Tap -> Move by 0,10 : 한번 탭하면 x는 +0, y는 +50만큼 이동합니다.

3.8버전까지는 a만 가능했고, b를 할 수 없거나 복잡했었지만 이제 프로토파이 3.9에서는 a와 b를 모두 쉽게 사용할 수 있게 되었습니다.

Move, Opacity, Radius, Scroll

M-O-R-S에서 각각 to, by를 적용하면 나타나는 점진적 변화

사용된 3.9기능 ( Variable, Detect, Assign, M-O-R-S to/by )

*Detect와 Assign에 대한 설명은 2를 참고하세요

https://share.protopie.io/AViTMJLfqD7

mors - ProtoPie

This prototype was made with ProtoPie, a code-free and sensor-aided interaction prototyping tool for smart devices.

share.protopie.io

2. 네이티브의 키보드의 지원 + 관련 트리거들의 추가 및 기능개선

Framer와 비교하여 가장 큰 약점 중의 하나였던 네이티브 키보드의 지원으로 인하여 프로토파이로 제작가능한 프로토타입의 범위가 매우 높아졌습니다. 네이티브 키보드의 지원으로 인해 추가된 트리거들은 Focus(In/Out), Return이 있고, Text리스폰스(Formula)의 활용범위도 넓어졌습니다.

Focus는 Input창을 탭하여 입력이 가능하게 된 상태(Focus In)와 그 외 영역을 탭하여 포커스에서 벗어나는 상태(Focus Out)로 나뉘고, Return은 Focus In상태에서 엔터를 누를때 리스폰스를 실행합니다. Text는 원래 단순 텍스트값을 수정하는데 그쳤으나 3.9부터는 Formula를 이용해 변수를 포함한 값을 입력하거나 계산한 값을 입력하는 것이 가능해졌습니다.

Stop리스폰스는 기존에는 특정 레이어의 리스폰스를 정지하는 기능이었으나 3.9에서는 변수의 변화도 정지할 수 있도록 기능이 추가되었습니다. 더불어 Detect도 연관성 높은 트리거로 볼 수 있는데, 특정 개체의 속성이나 변수 값의 변화를 감지하여 리스폰스를 실행할 수 있습니다. PC키보드의 지원을 위한 Press도 추가되었습니다.

* Return과 Focus Out의 차이는 키보드의 Enter를 눌렀는지, 단순히 포커스에서 벗어난 것인지의 차이이지만 Focus Out과 Condition을 조합하면 Return과 비슷한 효과를 낼 수 있습니다.

Focus In / Out

Focus In이 되면서 입력버튼이 입력창처럼 곡률과 길이가 변하고 하단에서 상단으로 이동하도록

사용된 3.9 기능 ( Variable, Input, Focus(in/out), Text(Formula), Assign )

https://share.protopie.io/df4BsptJ5qQ

focusin_focusout - ProtoPie

This prototype was made with ProtoPie, a code-free and sensor-aided interaction prototyping tool for smart devices.

share.protopie.io

3. 함수(Formula)와 변수(Variable)

함수와 변수의 추가는 프로토파이가 기존의 디자이너 타겟의 프로토타이핑툴들과 가장 차이를 두는 부분입니다. 함수와 변수의 존재 덕분에 가변적인 변화에 대한 프로토타입을 기존보다 더 폭넓게 표현할 수 있게 되었습니다. 어렵다고 느끼실수도 있는데요, 정말 어려워서 못쓰시겠다면 안쓰시고 만드시면 됩니다. 더 표현하고 싶은 것을 좀 더 쉽게 해주기 위한 업데이트이므로 유저분들이 추가된 기능때문에 겁내실 일은 아닌것 같아요. 이미 함수와 변수 없이도 좋은 프로토타입을 만들 수 있었던 프로토파이입니다.

함수와 변수에 대해서는 할말이 너무 많아져서 모두 설명할 수는 없겠는데요.

공식문서(링크)를 참고하셔서 더 심화된 내용도 학습해보세요. Formula에 관해서는 다음 기회에 더 자세히 다루도록 하겠습니다.

아래와 같이 Formula를 통해 출력되는 값을 다양하게 가져갈 수 있습니다.

이미 Formula에 대한 Protopie 공식문서에 포함된 내용을 예제로 만든 것입니다만 입력값과 결과값이 보일 수 있게 만들었습니다. 주로 Text 리스폰스를 사용하였으며, Text 리스폰스에 입력한 Formula의 값에 따라 결과값이 어떻게 나타나는지 볼 수 있습니다. 또 Assign 리스폰스를 통해 변수값에 함수를 넣거나 값을 바꿀수 있습니다.

Formula / Variable

Text (Formula)에 입력한 값에 따라 노출되는 결과값

사용된 3.9 기능 ( Variable, Text(Formula), Assign )

https://share.protopie.io/3MpoWsrpwD7

variable_formula - ProtoPie

This prototype was made with ProtoPie, a code-free and sensor-aided interaction prototyping tool for smart devices.

share.protopie.io

이제 프로토파이로는 못할 것이 없다고 생각합니다. 더이상은 툴 탓을 할 수 없을 것 같아요.

더 강력한 툴로 거듭난 프로토파이 3.9가 앞으로도 더 많은 디자이너들의 사랑을 받았으면 좋겠습니다.

다음에는 Formula와 Variable에 활용에 대해 공식예제들을 뜯어보면서 활용법을 더 살펴보도록 하겠습니다.

감사합니다.

Cover Photo 'Pie!' by mazaletel