드라이버 소스 (Driver Sources)
먼저 아트보드에서 애니메이션을 작동시키기 위한 오브젝트를 선택해야 한다. 이를 드라이버 소스라고 부른다. 드라이브 패널에는 드래그 되거나 스크롤되는 오브젝트 등이 드라이버 소스로 자동 표시된다.
우리는 오늘 아트보드 내의 ‘Driver Source’ 라는 사각형을 좌우로 드래그하면 ‘Animated Object’라는 원의 크기가 커졌다 작아졌다하는 인터랙션을 만들 것이다.
먼저 아래 그림처럼 빈 아트보드에 사각형을 하나 만들고 이름을 ‘Driver Source’라고 변경하자.
그 다음 상단 메뉴바에서 ‘드라이버(Driver)’ 아이콘을 클릭해 보면…
그림처럼 드라이버 패널에 아무것도 표시되어 있지 않을 것이다. 그럼 이제 드라이버를 만들어 보자. 아트보드 내의 외로운 사각형을 수평으로 드래그 되는 주인공으로 만들어 주자.
선택한 사각형을 드래그되는 사각형으로 만들어 주는 순간 드라이버 패널에 레이어가 생기는 것을 확인할 수 있다.
드라이버 속성 (Driver Properties)
드라이버 소스를 만들었다면 이제 이걸로 다른 오브젝트들의 속성을 제어할 수 있다. 이제 아트보드에 다음과 같이 원을 하나 추가하고 이 원의 이름을 ‘Animated Object’라고 바꿔주자.
그 다음 캔버스 상단 드라이버 패널에서 ‘Animated Object’ 레이어의 오른쪽에 있는 파란색 ‘+’ 아이콘을 클릭 후 ‘스케일(Scale)’을 선택한다.
그럼 아래 그림과 같이 스케일에 대한 속성만을 담당하는 레이어가 추가된다.
이제 아트보드 내의 ‘Driver Source’ 사각형을 오른쪽으로 100px 이동한다. 여기서는 인스펙터에서 위치 값을 지정해 보도록 하겠다. 캔버스 오른쪽에 있는 인스펙터 패널의 ‘X 포지션’ 인풋창에 ‘+100’을 입력하면 된다.
다시 드라이버 패널을 보자. 맨 위의 ‘Driver Source X’를 보면 자동으로 드라이버 커서가 우리가 입력한 X 위치만큼 이동해 있는 것을 알 수 있다. 우리가 ‘Driver Source’ 사각형을 오른쪽으로 이만큼 드래그 했을 때의 모습인 것이다.
그 다음 캔버스의 아트보드로 돌아가 ‘Animated Object’의 크기를 원하는 만큼 키워준다. 참, 그리고 한 가지 주의할 점은 원의 크기를 조절할 때 인스펙터에서 ‘스케일(Scale)’의 값으로 크기를 조절해야 한다는 점이다.
드라이버 패널을 보면 ‘Animated Object’ 의 타임라인에 자동으로 키프레임이 생성된 것을 알 수 있다.
그리고 이제 미리보기에서 사각형을 좌우로 드래그 해본다.
드라이버의 개념이 이해되는 순간을 맞이할 것이다. 오른쪽이 아닌 왼쪽으로 사각형을 드래그 해보면 원이 아무런 반응이 없음을 알 수 있다. 다시 아트보드에서 ‘Driver Source’ 사각형을 선택한 다음 드라이버 패널의 첫 번째 프레임으로 돌아가자. 그리고 이번엔 왼쪽으로 사각형을 이동시켜 보자.
드라이버 패널에서도 ‘Driver Source’ 사각형의 X 위치값이 바뀐 것을 알 수 있다.
‘Driver Source’ 사각형을 왼쪽으로 드래그하면 ‘Animated Object’가 작아지게 해 보자. 아래 동영상처럼 보이면 재대로 만든거다.
오늘은 여기까지…
드라이버를 활용하면 웹이나 애플리케이션의 인트로 애니메이션을 매우 효율적으로 만들 수 있다. 또한 바로 바로 애니메이션을 확인해 가며 작업을 진행할 수 있기 때문에 아이디어의 발전 뿐만 아니라 결과물을 통한 개발자와의 커뮤니케이션에 있어서도 매우 큰 도움이 된다.
