프로토파이 Advanced 1.
조건부 인터랙션
슥 당기면 슈욱 커지는
“설명할 인터랙션이 복잡해질수록 의성어 의태어가 늘어난다. 몸짓까지 섞어가며 열심히 설명하지만 다른 사람들이 나와 같은 그림을 그리고 있는지는 잘 모르겠다.”
문제의 복잡한 인터랙션은 주로 상황에 따라 반응의 양상이 달라지는 것들이었다. 스크롤 위치에 따라 배경 이미지가 커지거나 작아지고, 특정 UI가 나타났다 사라지는 등 어떤 조건에 도달하거나 그렇지 못할 때에 서로 다른 결과가 나타나는 인터랙션을 설명할 때면 어떤 의성어 의태어가 적절할지부터 고민하고는 했다.
프로토파이는 이런 조건부 인터랙션을 구현하기 위해서 매우 참신한 방법을 제공한다. 상황에 따라 다양한 트리거/리스폰스를 적용할 수 있겠으나, Range와 Chain, 그리고 Condition을 활용하면 대부분의 조건부 인터랙션을 구현할 수 있다.
Range
먼저 Range를 살펴보자. Range 트리거는 특정 오브젝트 속성값의 일정한 범위를 조건으로 추가하여, 해당 조건을 만족하면 추가한 리스폰스를 실행한다.
예를 들어, 드래그 할 수 있는 오브젝트를 하나 만들었다고 상상 해보자. 여기에 Range 트리거를 추가하고 옵션으로 이 오브젝트의 ‘y값이 400 이상’ 이라는 조건을 입력한 후, Scale 리스폰스를 추가한다. 이렇게 하면 오브젝트를 드래그 하다가 y값이 400 이상이 되는 순간 오브젝트의 Scale 값이 변경된다.
Range 트리거에서 입력할 수 있는 조건은 A이상, A이하, A이상 그리고 B이하, A이하 혹은 B이상, 이렇게 총 4가지가 있다. 하나의 오브젝트에 Range 트리거를 여러 개 추가해서 사용하면 다이나믹한 인터랙션을 만들 수 있지만, 각 범위 조건에 따른 리스폰스가 서로 충돌하지 않는지 잘 확인해야 한다.
Chain
언뜻 보기에는 Range의 조건 중 ‘A이상 그리고 B이하’와 유사하지만 한 가지 다른 점이 있다. Range는 특정 범위를 만족하면 실행하는 리스폰스의 값을 추가하는 방식이지만, Chain에서는 리스폰스도 마찬가지로 ‘범위’를 추가한다.
Range에서 예로 들었던 드래그 오브젝트를 생각해 보자. 여기에 Range 대신 Chain 트리거를 추가하고 옵션으로 이 오브젝트의 y값을 참조하도록 선택한다. 그런 다음 Scale 리스폰스를 추가해보면 옵션이 조금 달라지는 것을 확인할 수 있다. Chain 트리거를 추가하고 나면, 범위 조건은 리스폰스에서 입력하게 된다. 왼쪽에 참조할 트리거의 범위를 입력하고, 오른쪽에 적용될 리스폰스의 범위를 입력한다.
이렇게 하면 특정 범위를 만족할 때에 리스폰스의 값이 한 번 적용되고 마는 Range와 달리, 트리거와 리스폰스가 각각 설정한 범위 내에서 서로 연동하며 유기적으로 움직인다.
Range에서 범위를 입력할 때에는 통상적으로 문자를 쓰는 방향과 동일한 가로 방향이지만, Chain에서 범위를 입력할 때에는 세로 방향으로 입력해야 하기 때문에 처음에는 다소 헷갈릴 수도 있다.
그리고 Chain은 Range와 달리 리스폰스 내에서 조건 범위를 추가할 수도 있는데, 조건을 입력하는 필드 아래에 + 버튼을 누르면 또 다른 입력 필드가 생성된다.
적용해보기
생소할 수 있는 개념이기 때문에 많은 연습이 필요할 것이다. 실제로 디자인에 적용해 보면서 Range와 Chain을 씹고 뜯고 맛보고 즐겨보자.
스크롤 값은 콘텐츠가 위로 올라갈 때 양수, 아래로 내려갈 때 음수가 된다. 일반적으로 알고 있는 y값과 반대이므로 조건을 입력할 때 주의하도록 한다.
그런데 여기서 의문이 한 가지 생길 수 있다. 특정값을 기준으로 그 이상일 때는 이렇게, 그 이하일 때는 저렇게 반응하게 만들 때, 매번 Range 트리거를 두 개씩 만들어야 할까? 좀 더 스마트한 방법은 없을까?
Condition
특정값을 기준으로 리스폰스에 분기를 주고자 할 때에 Condition을 사용할 수 있다. 위의 예시에서 사용한 Range를 Condition으로 고쳐보자.
우선 콘텐츠를 스크롤 할 때에 리스폰스가 실행되어야 하므로, Detect 트리거를 추가하고 스크롤 컨테이너의 스크롤 값을 참조하도록 한다. 그런 다음 리스폰스 목록 가장 아래에 있는 Condition을 선택하면 조건을 추가할 수 있다. Condition의 옵션을 살펴보면 Range의 그것과 상당히 유사하다는 것을 알 수 있다.
Condition에서는 ‘A 초과, A 이상, A 미만, A 이하, A와 같다, A와 같지 않다’ 의 총 여섯가지 조건을 입력할 수 있으며, 기준값 A에는 숫자를 비롯하여 각 오브젝트의 속성값이나 함수까지도 추가할 수 있다. 더불어 Range처럼 하단 + 버튼을 통해 복수의 조건을 더할 수도 있다.
다시 예시로 돌아와서 이전에 Range로 입력했던 내용들을 Condition으로 변경해보면, 콘텐츠의 스크롤 값이 419 이상일 때와 미만일 때, 830 이상일 때와 미만일 때를 Condition으로 추가하고 각 Condition 아래에 Opacity 리스폰스를 추가하면 된다.
모로 가도 서울만 가면 된다
Condition의 예시에서 볼 수 있듯이, 결과는 동일하지만 구현할 수 있는 방법은 얼마든지 달라질 수 있다. 어차피 프로토타이핑이란 원하는 바를 좀 더 정확하게 전달하기 위한 방법 중 하나에 불과하다. 일단 원하는 것을 표현하는 데에 집중하고, 어느정도 익숙해진 다음에 작업의 효율화를 위한 방법을 모색해 보도록 하자.
중급 과정의 첫 번째 차수에 과제로 제시했던 아래 인터랙션도 마찬가지다. Range, Chain, Condition 무엇이든 좋으니 일단 직접 만들어 보면서, 프로토타이핑이 ‘재미있다’는 사실에 많이들 공감했으면 좋겠다.
