프로토파이 Basic 2.
트리거와 리스폰스
트리거와 리스폰스의 종류
첫 번째 차수에서 살펴본 오브젝트를 본격적으로 조작하고 움직이게 하려면 트리거와 리스폰스에 대해 알아야 한다. 우리가 흔히 스마트폰 화면을 손가락으로 두드리고 문지르고 하는 것들이 트리거라면, 그때마다 화면 속의 내용들이 이리저리 바뀌고 움직이고 하는 것들이 리스폰스라고 할 수 있다.
우선 가장 일반적인 Tap과 Drag를 중심으로, 트리거와 리스폰스를 조합하여 인터랙션을 구현하는 기본적인 방법을 알아보려고 한다.
Tap + Move
이것은 특정 오브젝트를 탭 했을 때, 타겟 오브젝트가 움직이도록 하는 인터랙션이다. 준비한 오브젝트를 작업창에 잘 배치한 후, 작업창 우측에 보이는 add Trigger에서 Tap을 선택한다. 그런 다음 가장 오른쪽 패널에서 탭 할 오브젝트를 선택해 준다.
여기서 닭이 먼저냐 달걀이 먼저냐 같은 논쟁이 있을 수 있는데, 오브젝트를 먼저 선택한 후에 트리거를 추가하더라도 똑같이 적용되므로 선호하는 방식대로 선택하면 된다.
Tap 트리거를 추가한 후, 트리거 아래에 보이는 + 버튼을 통해 Response에서 Move를 선택한다. 리스폰스를 추가할 때에는 원하는 오브젝트가 타겟으로 설정되었는지 잘 확인하도록 한다.
리스폰스와 타겟 오브젝트를 선택했으면 상세 설정에서 이동할 좌표를 입력해 준다. 글로 설명하니 다소 장황하게 느껴지지만 실제로는 무척 간단한 과정이다.
Drag + Move
이것은 특정 오브젝트를 문지르면 손가락이 움직이는 방향으로 타겟 오브젝트를 이동시키는 인터랙션으로서 지도 서비스를 떠올리면 쉽게 이해할 수 있다. Tap + Move와 마찬가지 방법으로 Drag 트리거와 Move 리스폰스를 추가한다.
Tap 트리거에 Move 리스폰스를 추가했을 때와 달리 Drag 트리거에 Move 리스폰스를 추가하는 경우에는 Move 리스폰스의 옵션값이 조금 달라진다. 이동 방향과 거리 제한, 터치 이동 대비 오브젝트의 이동 비율 등을 옵션으로 설정할 수 있다.
Tap + Jump
가끔은 마이크로 인터랙션이 아니라 동선 확인 목적으로 프로토타이핑 툴을 찾을 때가 있다. 프로토파이는 이런 경우를 대비해서 Jump라는 멋진 방법을 마련해 두었다.
작업창 상단 Scene 메뉴를 통해 장면들을 추가하고 각 장면들 안에 원하는 화면을 채워준다. 모든 장면이 준비되었다면, Tap 트리거에 Jump 리스폰스를 추가하고, 리스폰스의 타겟 오브젝트로 다음 이동할 장면을 선택하면 된다. Jump 리스폰스의 옵션에서는 트랜지션 효과와 방향 등을 설정할 수 있다.
애니메이션 커브
인터랙션 디자인을 잘한다는 것은, 그리고 프로토파이를 능숙하게 다룬다는 것은, 트리거와 리스폰스를 얼마나 많이 알고 적용할 수 있는지 보다는, 얼마나 자연스럽게 보이도록 만들 수 있는지 여부에 달려있다 해도 과언이 아니다.
자연스러운 움직임이라는 것은 우리가 현실세계에서 일상적으로 마주하는 현상들과 얼마나 가까운가 하는 것으로도 이해할 수 있다. 그런 측면에서 오브젝트가 물리 법칙에 따라 움직일 때에 우리는 그것을 ‘자연스럽다’라고 느낀다.
물리 법칙에 따른 움직임은 애니메이션 커브를 통해 표현할 수 있다. 리스폰스의 옵션으로 설정할 수 있으니 일단 이것저것 바꿔가면서 움직임이 어떻게 달라지는지 감을 잡아 보는 것도 좋을 듯 하다.
개인적으로 선호하는 것은 Cubic-bezier 인데, 이것을 활용하면 구글 머티리얼 디자인에 등장하는 Arc motion을 간단히 만들어 볼 수 있다. Cubic-bezier는 아래 사이트에서 시뮬레이션을 지원한다.
실수를 부르는 몇 가지
이외에도 애니메이션과 관련하여 실수하기 쉬운 몇 가지 내용들을 눈여겨 보아야 한다. 대표적으로는 Origin과 To/By를 꼽을 수 있다.
Origin은 오브젝트의 좌표와 애니메이션 기준점을 결정하기 때문에, Origin을 변경했다면 예상했던 애니메이션과 결과가 달라질 수 있으니 주의해야 한다.
To와 By는 트리거가 입력될 때에 리스폰스를 한 번만 적용할 지, 입력될 때마다 매번 적용할 지를 결정한다. To는 한 번, By는 오브젝트의 현재 상태를 기준으로 매번 리스폰스를 실행하게 된다.
프로토파이가 제공하는 다른 트리거와 리스폰스도 위에서 언급했던 기본적인 인터랙션 구현 방법과 크게 다르지 않다. 아래에 있는 이번 차수의 과제를 직접 만들어 보면서 트리거와 리스폰스를 연습해 보는 건 어떨까?
