title05

디자이너를 위한 프로토파이 팁 3 – 범위값 확인, GIF로 변환하기

이전편 보기 : 디자이너를 위한 프로토파이 팁 2 – Range 트리거

범위값은 어떻게 볼까?

지난 1,2편에서 반복적으로 나오는 범위(속성값)은 어떻게 구하는지 의문이 드실지도 모릅니다. 저도 처음엔 마우스로 개별 오브젝트를 움직이며 확인했는데요, 서치를 통해 좀 더 쉽게 알 수 있는 방법이 있어 소개하고자 합니다.

아래 예시화면을 통해 알아보겠습니다.

 

01

02 03

no1좌측 하단에 변수를 추가하는 Variable을 클릭합니다.

no2클릭하면 위와같은 화면이 나오게 되는데 우측상단 + 버튼을 클릭하여 옵션을 선택합니다.

** 옵션: 현재의 씬만 적용할지, 전체에 적용할지를 선택.

04 05

no1

Variable 이 추가된 후 마우스를 가져가면 우측에 아이콘이 나타나게 되는데 이를 클릭하여 활성화 시켜줍니다.

활성화된 후 Scene화면 좌측 상단에 우측과 같이 변수값이 표시됩니다.

06

no1

다시 우측 트리거 입력창으로 이동한 뒤 Detect 트리거를 생성시켜 값을 알고 싶은 레이어 혹은 오브젝트를 지정합니다.

 

07 08

no1우측에 나타나는 트리거 옵션창에서 속성을 정합니다.
(현재화면에서는 Scroll로 지정)

no2Detect 트리거에 Assign 리스폰스를 추가합니다.

09 10

no1Assign 리스폰스에서 좀전에 생성했던 변수를 선택한 뒤

no2아래 Formula 창을 클릭하여 활성화한 뒤 Input창 우측에 있는 버튼을 클릭해줍니다.

 

09 10

no1활성화된 후 우측 +버튼을 클릭하면 위와 같이 창이 활성됩니다. 이 때 Detect 트리거에 지정했던 레이어명을 선택합니다.

이 후 다시 위와 같은 속성값 기준을 선택할 수 있는 정보가 뜨는데 현재는 scroll 의 움직임 값을 알고자 함으로 scrolloffset 을 선택합니다.
위와 같이 적용하면 우측과 같이 범위값이 나타나게 됩니다.

** 속성에 대한 설명은 프로토파이 공식홈페이지 변수와 함수 부분에 보다 자세히 나와있습니다.

 

preview

 

결과물 효과적으로 공유하기 : GIF로 변환하기

결과물을 공들여 만든 후 다음으로 중요한 일은 결과물 공유라고 생각합니다. 프로토파이는 다행히도 작업물을 녹화할 수 있는 기능이 포함되어 있습니다.
최대 5분가량 녹화할 수 있고 MP4의 포맷으로 저장할 수 있는데, 간혹 녹화한 영상을 틀 수 없는 상황이 생기거나, 문서를 통해서만 공유하고자 할 때 문제가 될 수 있습니다.
이럴 때 결과물을 GIF형태로 변환하여 공유하는 방법을 소개하고자 합니다. 프로토파이 공식홈페이지에 해당 방법이 있긴 하나 저 또한 그랬고 모르고 계신 분들이 의외로 있어 홈페이지에 있는 안내와 함께 별도로 검색을 통해 찾은 방법을 추가하여 소개하고자 합니다.

 

gifski ( 1 ) Gifski
맥을 이용하는 사용자라면 앱스토어에서 해당 이름을 검색 후 다운받아 사용하시면 됩니다. Mp4파일을 드래그하여 해당앱에 포함시키면 별도의 옵션 설정 화면이 뜨는데 원하는 옵션을 선택 후 추출하시면 됩니다. 굉장히 간편하게 되어 있어 사용하시는데 큰 어려움이 없습니다.
ezgif (2)Ezgif
웹상에서 GIF로 변환할 수 있는 서비스입니다. 해당 사이트에 접속해서 변환하고자 하는 비디오파일을 드래그하여 놓으면
GIF로 변환 시킬 수 있습니다.
gipjy (3) GIPHY Capture
앱스토어에서 다운받아 사용할 수 있습니다. 저장방식은 이미지캡쳐와 비슷한데 해당 앱을 실행하고 변환되길 원하는 영역에 맞게 창의 맞추고 녹화하여 저장하는 방식입니다. Gifski와 사용법이 유사하고 간편하게 되어있어 손쉽게 이용하실 수 있습니다.

 

프로토타이핑의 중요성이 증대됨에 따라 관련된 툴 또한 다양해지고 있습니다. 그중에서도 프로토파이는 비교적 손쉽게 익히고 빠르게 적용할 수 있다는 점에서 다른 툴 보다 더욱더 매력적으로 느껴집니다. 프로토파이는 트리거 리스폰스의 조합 말고도 변수와 함수 등 다양한 기능을 활용하면 실제와 같은 앱을 만들 수 있는 툴입니다.
저도 아직 프로토파이를 알아가는 입장이지만 제가 처음 느꼈던 어려웠던 점을 저와 비슷한 상황에 처하고 있을 분들께 조금이나마 도움이 되기를 바랍니다.
꾸준히 관심을 두고 활용한다면 보다 설득력 있는 결과물을 만들 수 있을 것으로 생각됩니다.

 

– 가치디자인그룹 권두현

 

이전편 보기 : 디자이너를 위한 프로토파이 팁 1 – Chain 트리거
다음편 보기 : 디자이너를 위한 프로토파이 팁 3 – 범위값 확인하기 (업데이트 예정)

 

[참고 사이트]
https://www.protopie.io/
https://brunch.co.kr/@uxhaaz/38
https://medium.com/hyuk/%ED%94%84%EB%A1%9C%ED%86%A0%ED%8C%8C%EC%9D%B4-advanced-1-dff558326ea5

[관련글]
디자이너를 위한 프로토타이핑툴 프로토파이 리뷰 – 1부
디자이너를 위한 프로토타이핑툴 프로토파이 리뷰 – 2부
디자이너를 위한 프로토파이 팁 1 – Chain 트리거
디자이너를 위한 프로토파이 팁 2 – Range 트리거
디자이너를 위한 프로토파이 팁 3 – 범위값 확인하기

Share this:

Leave a comment