이전편 보기 : 디자이너를 위한 프로토파이 팁 2 – Range 트리거
범위값은 어떻게 볼까?
지난 1,2편에서 반복적으로 나오는 범위(속성값)은 어떻게 구하는지 의문이 드실지도 모릅니다. 저도 처음엔 마우스로 개별 오브젝트를 움직이며 확인했는데요, 서치를 통해 좀 더 쉽게 알 수 있는 방법이 있어 소개하고자 합니다.
아래 예시화면을 통해 알아보겠습니다.
좌측 하단에 변수를 추가하는 Variable을 클릭합니다. |
클릭하면 위와같은 화면이 나오게 되는데 우측상단 + 버튼을 클릭하여 옵션을 선택합니다. ** 옵션: 현재의 씬만 적용할지, 전체에 적용할지를 선택. |
Variable 이 추가된 후 마우스를 가져가면 우측에 아이콘이 나타나게 되는데 이를 클릭하여 활성화 시켜줍니다. 활성화된 후 Scene화면 좌측 상단에 우측과 같이 변수값이 표시됩니다. |
다시 우측 트리거 입력창으로 이동한 뒤 Detect 트리거를 생성시켜 값을 알고 싶은 레이어 혹은 오브젝트를 지정합니다.
우측에 나타나는 트리거 옵션창에서 속성을 정합니다. |
Detect 트리거에 Assign 리스폰스를 추가합니다. |
Assign 리스폰스에서 좀전에 생성했던 변수를 선택한 뒤 |
아래 Formula 창을 클릭하여 활성화한 뒤 Input창 우측에 있는 버튼을 클릭해줍니다. |
결과물 효과적으로 공유하기 : GIF로 변환하기
결과물을 공들여 만든 후 다음으로 중요한 일은 결과물 공유라고 생각합니다. 프로토파이는 다행히도 작업물을 녹화할 수 있는 기능이 포함되어 있습니다.
최대 5분가량 녹화할 수 있고 MP4의 포맷으로 저장할 수 있는데, 간혹 녹화한 영상을 틀 수 없는 상황이 생기거나, 문서를 통해서만 공유하고자 할 때 문제가 될 수 있습니다.
이럴 때 결과물을 GIF형태로 변환하여 공유하는 방법을 소개하고자 합니다. 프로토파이 공식홈페이지에 해당 방법이 있긴 하나 저 또한 그랬고 모르고 계신 분들이 의외로 있어 홈페이지에 있는 안내와 함께 별도로 검색을 통해 찾은 방법을 추가하여 소개하고자 합니다.
프로토타이핑의 중요성이 증대됨에 따라 관련된 툴 또한 다양해지고 있습니다. 그중에서도 프로토파이는 비교적 손쉽게 익히고 빠르게 적용할 수 있다는 점에서 다른 툴 보다 더욱더 매력적으로 느껴집니다. 프로토파이는 트리거 리스폰스의 조합 말고도 변수와 함수 등 다양한 기능을 활용하면 실제와 같은 앱을 만들 수 있는 툴입니다.
저도 아직 프로토파이를 알아가는 입장이지만 제가 처음 느꼈던 어려웠던 점을 저와 비슷한 상황에 처하고 있을 분들께 조금이나마 도움이 되기를 바랍니다.
꾸준히 관심을 두고 활용한다면 보다 설득력 있는 결과물을 만들 수 있을 것으로 생각됩니다.
– 가치디자인그룹 권두현
이전편 보기 : 디자이너를 위한 프로토파이 팁 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 – 범위값 확인하기