디자이너를 위한 프로토파이 팁 3 – 범위값 확인, GIF로 변환하기
디자이너를 위한 프로토파이 팁 3 – 범위값 확인, GIF로 변환하기
이전편 보기 : 디자이너를 위한 프로토파이 팁 2 – Range 트리거
범위값은 어떻게 볼까?
지난 1,2편에서 반복적으로 나오는 범위(속성값)은 어떻게 구하는지 의문이 드실지도 모릅니다. 저도 처음엔 마우스로 개별 오브젝트를 움직이며 확인했는데요, 서치를 통해 좀 더 쉽게 알 수 있는 방법이 있어 소개하고자 합니다.
아래 예시화면을 통해 알아보겠습니다.
 |
 |
|
|
** 옵션: 현재의 씬만 적용할지, 전체에 적용할지를 선택. |
좌측 하단에 변수를 추가하는 Variable을 클릭합니다.
클릭하면 위와같은 화면이 나오게 되는데 우측상단 + 버튼을 클릭하여 옵션을 선택합니다. |
 |
|
Variable 이 추가된 후 마우스를 가져가면 우측에 아이콘이 나타나게 되는데 이를 클릭하여 활성화 시켜줍니다. 활성화된 후 Scene화면 좌측 상단에 우측과 같이 변수값이 표시됩니다. |
다시 우측 트리거 입력창으로 이동한 뒤 Detect 트리거를 생성시켜 값을 알고 싶은 레이어 혹은 오브젝트를 지정합니다.
 |
 |
|
|
|
우측에 나타나는 트리거 옵션창에서 속성을 정합니다.
Detect 트리거에 Assign 리스폰스를 추가합니다. |
 |
|
|
|
Assign 리스폰스에서 좀전에 생성했던 변수를 선택한 뒤
아래 Formula 창을 클릭하여 활성화한 뒤 Input창 우측에 있는 버튼을 클릭해줍니다.
|
|
|
|
이 후 다시 위와 같은 속성값 기준을 선택할 수 있는 정보가 뜨는데 현재는 scroll 의 움직임 값을 알고자 함으로 scrolloffset 을 선택합니다. ** 속성에 대한 설명은 프로토파이 공식홈페이지 변수와 함수 부분에 보다 자세히 나와있습니다. |
활성화된 후 우측 +버튼을 클릭하면 위와 같이 창이 활성됩니다. 이 때 Detect 트리거에 지정했던 레이어명을 선택합니다.
결과물 효과적으로 공유하기 : GIF로 변환하기
결과물을 공들여 만든 후 다음으로 중요한 일은 결과물 공유라고 생각합니다. 프로토파이는 다행히도 작업물을 녹화할 수 있는 기능이 포함되어 있습니다.
최대 5분가량 녹화할 수 있고 MP4의 포맷으로 저장할 수 있는데, 간혹 녹화한 영상을 틀 수 없는 상황이 생기거나, 문서를 통해서만 공유하고자 할 때 문제가 될 수 있습니다.
이럴 때 결과물을 GIF형태로 변환하여 공유하는 방법을 소개하고자 합니다. 프로토파이 공식홈페이지에 해당 방법이 있긴 하나 저 또한 그랬고 모르고 계신 분들이 의외로 있어 홈페이지에 있는 안내와 함께 별도로 검색을 통해 찾은 방법을 추가하여 소개하고자 합니다.
 |
( 1 ) Gifski 맥을 이용하는 사용자라면 앱스토어에서 해당 이름을 검색 후 다운받아 사용하시면 됩니다. Mp4파일을 드래그하여 해당앱에 포함시키면 별도의 옵션 설정 화면이 뜨는데 원하는 옵션을 선택 후 추출하시면 됩니다. 굉장히 간편하게 되어 있어 사용하시는데 큰 어려움이 없습니다. |
 |
(2)Ezgif 웹상에서 GIF로 변환할 수 있는 서비스입니다. 해당 사이트에 접속해서 변환하고자 하는 비디오파일을 드래그하여 놓으면 GIF로 변환 시킬 수 있습니다. |
 |
(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 – 범위값 확인하기
