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

Range

이번에 다룰 Range는 트리거가 정한 범위값을 충족하면 리스폰스 할 수 있습니다. 트리거의 범위값 기준으로 리스폰스 한다라는 큰 틀은 Chain과 비슷하지만 리스폰스 옵션에서 트리거의 범위값과 리스폰스의 범위값을 계속해서 입력할 수 있었던 Chain과 달리 Range는 트리거에서 정한 범위값에서만 리스폰스 할 수 있기 때문에 한 번의 리스폰스 효과를 보실 수 있습니다.
아래의 예시를 통해 좀 더 Range 트리거에 대해 알아 보도록 하겠습니다.

우선, 트리거를 생성한 후 리스폰스의 기준이 될 범위값을 정합니다.

Range 트리거를 생성 후 레이어를 지정한 뒤,	우측 옵션창에서 속성과 리스폰스 할 기준인 범위를 입력합니다. 범위값에 대한 설명은 아래 참조.

 
트리거 범위값 입력은 아래와 같은 개념으로 이해하시면 됩니다.
** 예시는 트리거가 움직일 때 오브젝트의 크기가 변하도록 설정했습니다.  Origin은 Center로 설정되었습니다   

속성 기준값 이상일때	375 이상일 때 오브젝트의 크기가 변한다

속성 기준값 이하일때	375 이하일 때 오브젝트의 크기가 변한다

속성 기준값 사이에 들어올 때	200~550 사이로 들어올 때 오브젝트의 크기가 변한다

속성 기준값이 이하 또는 이상일 때	200이하 또는 550 이하일 때 오브젝트의 크기가 변한다

 
트리거 범위값이 정해지면 리스폰스 할 오브젝트혹은 레이어를 정하고 속성값을 설정합니다.

리스폰스(메뉴이동) 할 오브젝트를 선택합니다.	리스폰스할 때의 옵션을 선택합니다. ** Chian 트리거는 범위값을 통해 움직임을 가이드한다면 Range는  하단 애니메이션 옵션창을 통해 움직임에 대한 설정이 가능합니다.

위의 내용을 종합해보면 아래와 같습니다.

트리거할 때 ( 스크롤 범위값 250이상 일 때 ) 리스폰스 ( 상단메뉴가 Y값 0으로 이동 ) 한다.

Chain 효과와 같이 유기적인 움직임을 원한다면 추가로 Range를 생성해 기존과 다른 범위를 지정해야 합니다.

따로 또 같이

설명해 드린 Chain과 Range를 비교할 때 어떤 경우에 두 기능을 활용하면 좋은지 감이 오시나요?

사용하는 사용자의 작업 스타일과 프로토타이핑의 내용에 따라 다르겠지만 굳이 둘을 나뉘어 설명하자면 제 생각에는 Chain 트리거는 리스폰스에서 직접 범위값을 각각 설정할 수 있어 다양한 요소들과의 유기적인 모션에  장점이 있을 수 있는 반면, Range는 다양한 연결보다는 리스폰스의 애니메이션 옵션등으로 단발성 있는 효과에 장점이 있는 듯 합니다. 하지만 어디까지나 이 둘의 구현 방식에 기반해 따로 설명했을 때 이러한 점이 있다라고 하는 것이지 사용자에 따라 사용하는 방법과 조합에 따라 활용 방법은 훨씬 더 다양해질 수 있습니다.

가장 좋은 방법은 대부분의 툴이 그렇듯이 적절히 트리거를 조합하여 사용하는 것이 아닐까 생각합니다.

– 가치디자인그룹 권두현

이전편 보기 : 디자이너를 위한 프로토파이 팁 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 – 범위값 확인하기