디자이너를 위한 프로토파이 팁 1 – Chain트리거

디자이너를 위한 프로토파이 팁 1 – Chain트리거

디자이너를 위한 프로토파이 팁 1 – Chain트리거
Category
Share Story

알고 하는 것과 모르고 하는 것의 차이

디자인툴등을 사용하다 보면 각각의 툴 자체에 수많은 기능들이 있지만 웬지 모르게 쓰던 기능들만 주로 사용하게 되는 자신을 발견하곤 합니다.
실제로 하나의 툴에 익숙해지다 보면 점차 쓰던 기능들 만을 사용하여 작업을 하거나, 효율적인 방법이 있음에도 불구하고 개인적인 작업 스타일이 있어 애써 돌고 돌아 작업하는 일명 ‘노가다’의 상황과도 마주치게 되곤 합니다.

프로토파이 또한 여러가지 기능이 포함되어 있고, 사용하는 사용자에 따라 동일한 결과물도 누구는 A의 방법을, 누구는 B의 방법을 사용하며 작업하게 될 것입니다.
처음 툴을 사용하는 사용자는 사용 방법에 대해 이것저것 시도해 보다 작업의 공수가 늘어나는 경우도 있는데 기능에 대한 개념만 조금 일찍 잡혀 있더라도 이러한 공수를 효율적으로
관리할 수 있지 않을 까 생각합니다.

저 또한 프로토파이를 사용하면서 기능에 대한 개념만 조금 일찍 알았더라면 좀 더 효율적인 방법으로 결과물을 구현할 수 있었을 텐데 라는 아쉬움이 남을때가 많았습니다.
비슷해 보이는 기능이지만 어떤 상황에서 쓰냐에 따라 작업의 공수를 줄이거나 늘릴수도 있다는것을 경험했기 때문입니다.

그래서 이번 글은 프로토파이에서 자주 쓰이는 기능이지만 비슷해 보이는 두 기능의 차이점과 구현 방식에 대해 짚어보도록 하겠습니다. 이 글이 프로토타이핑을 제작할 때 조금이나마 도움이 되었으면 합니다.

 

interaction_example_01 interaction_example_02
*이미지 출처: dribble *이미지 출처: dribble

 

Chain과 Range : “ 이건뭐고 이건뭐지? “

처음 프로토파이를 사용할 때 가장 어려웠던 부분 중 하나가 유기적으로 연결되어 있는 인터랙션을 표현할 때 였습니다. 프로토파이에는 이런 유기적인 인터랙션을 구현하는 대표적인 기능인 Chain과 Range 트리거가 있습니다. 이 두 트리거를 적절히 사용한다면 웬만한 유기적인 인터랙션은 대부분 구현 가능하다고 할 수 있습니다.

처음 사용할 때 리서치를 통해 툴 기능에 대한 정보를 찾아봤는데 프로토타이핑에 대한 경험이 부족했던 탓인지 Chain과 Range 두 기능이 비슷해 보이기도하고 헷갈리기도해 이해하기가 조금 어려웠던 부분이 있었습니다. 그 경험을 떠올려 Chain과 Range 기능에 대해 소개하고자 합니다.

먼저 저의 경험에서도 그랬듯이 처음 두 기능을 접했을 때 비슷한 부분이 있어 헷갈리시는 경우도 있을겁니다. 그럼 우선 같은 UI를 Chain트리거와 Range 트리거를 사용하면 각각 어떤 결과물이 나오는지 확인 해보겠습니다.

** 프로토파이의 기본 사용방법은 이전 포스팅(디자이너를 위한 프토토타이핑툴 프포토파이 리뷰)에 자세히 설명되어 있으니 참고하시기 바랍니다.

Chain 트리거 사용 Range 트리거 사용
01_chain 02_range

 

Chain 과 Range를 활용하여 해당 UI 를 구현해 보았습니다. 스크롤 할 때 상단영역이 나타나는 것은 동일한데 Chain 트리거는 다시 스크롤을 하면 사라지는 반면 Range 트리거는 다시 스크롤을 해도 없어지지 않습니다.  왜 이런 결과가 나오는지 각각의 구현방식을 짚어보며 알아보도록 하겠습니다.

 

Chain 

Chain 트리거를 표현하자면, “ 물건 하나의 움직임에 그와 연결되어 있는 다른 여러 물건들도 따라 움직이는 것 ” 이라고 표현 할 수 있겠습니다.
위 예시화면에서도 보면 콘텐츠 영역이 스크롤 할 때 상단메뉴가 화면내로 이동하고 다시 반대의 경우 상단메뉴가 없어지는것을 볼 수 있습니다. 이는 트리거와 리스폰스가 각각의 범위로 연결되어 있기 때문입니다. 예를 들어 트리거의 범위가 10px 이동했을 때 리스폰스도 5px 이동한다 라고 정의를 내렸기 때문인데요,

위 예시를 활용하여 Chain트리거의 구현방법에 대해 알아보고 개념을 잡아가도록 하겠습니다.

우선  트리거를 생성한 후 리스폰스의 기준이 될 속성을 선택합니다.

01

 

02 03

no1Chain 트리거를 생성 후 레이어를 지정한 뒤,

Scroll 할 때 상단 메뉴 이동이기 때문에 트리거에 스크롤되는 레이어를 지정합니다.

no2우측 옵션창에서 트리거의 움직임 속성을 선택합니다.

움직임의 속성은 하고자 하는 인터랙션의 방향에 따라 X값 이동, Y값 이동 등 목적에 맞게 설정하면 됩니다. 해당 예시는 스크롤 할 때 상단 메뉴를 움직이게 하는 것이므로 속성을 Scroll로 지정했습니다.

 

리스폰스 생성 후 트리거의 범위와 이에 따라 반응할 리스폰스의 범위를 설정합니다.

04

 

05 06

no3트리거(스크롤) 할 때, 리스폰스(메뉴이동) 해야하기에  Move 리스폰스에  메뉴 레이어를 지정합니다.

 

no4우측 옵션창에서 메뉴이동이 스크롤 움직임의 어느지점에서 일어나도록 하는지 범위값을 입력합니다.

범위값에 대한 설명은 아래 참조

 

위에서 설명했듯이 Chain은 트리거와 리스폰스가  각각의 범위로 연결되어 있다고 말씀드렸는데요, 아래 예시를 통해 결과를 확인해 보겠습니다.

** 범위값 입력 구성요소

 

07 08

noA트리거의 이동 ( 스크롤 ) 범위 지정
트리거가 이 정도 움직일 때.

noA트리거 ( 스크롤 ) 의 범위가 200 ~ 250  지점일 때

noB리스폰스의 이동 ( X,Y ) 범위 지정
리스폰스는 이렇게 움직인다.

**하단 + 를 통해 범위값을 추가 입력할 수 있습니다.

noB리스폰스 ( 상단 메뉴 ) 는 트리거가 200일 때  Y값 -58 지점에서 트리거가 250일 때  ‘Y값 0으로 이동한다’ 라고 범위값을 지정합니다.

**트리거가 정한 범위값 200이전 250이후에도 리스폰스의 Y값은 200에서 -58,  250에서 0으로 계속 설정됩니다.

01_chain

트리거 ( 스크롤 200~250 범위에서)  할 때, 리스폰스 ( 상단 메뉴는 Y값 -58에서 0으로 이동 ) 한다.

또한, Chain 트리거는 여러가지의 리스폰스를 구성하여 동시에 다양한 인터랙션을 구현할 수 있습니다.
스크롤에 따라 변하는 progress bar를 아래와 같이 추가해 설명 해보도록 하겠습니다.

10

no3트리거에 반응 할 오브젝트를 만든 후 (Progress bar) 리스폰스를 추가하여 지정합니다.

** 현재는 Scale, Opacity 리스폰스 추가.

11 12

no3리스폰스는 트리거가 200일 때, width값 60에서 트리거가 1180일 때, width값 375만큼 커진다로 설정합니다.

no4트리거(스크롤 범위)가 0~249일 때, 리스폰스는 opacity 0% 이고, 250~1180일 때는 opacity 100%로 변한다로 설정합니다.

위와 같이 설정이 완료되면 아래와 같이 나타나게 됩니다.

a_001

chain_progress

 

 

이와 같이 Chain은 트리거와 리스폰스 범위의 연결 혹은 약속이라고 보시면 되겠습니다.
범위 값을 통해 리스폰스 할 시점과 움직임의 속도까지 제어해 나갈 수 있고, 여러 요소들과 함께 사용하기에 좋은 기능인 것 같습니다.
다음 글에서 설명할 Range와는 다르게 리스폰스에 직접 범위를 입력해 다양한 요소들의 결합과 유기적인 움직임을 가능하게 해주는 기능이라고 생각하시면 되겠습니다.

 

– 가치디자인그룹 권두현

다음편 보기 : 디자이너를 위한 프로토파이 팁 2 – Range 트리거
음편보기 : 디자이너를 위한 프로토파이 팁 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 – 범위값 확인하기