Adobe XD Auto-Animate

어느새 이런 것까지 준비한 어도비의 성실함

어도비가 하면 다를 줄 알았지

어도비 XD가 처음 등장했던 때는 이미 벡터 드로잉과 프로토타이핑에 있어서 어느 정도 시장이 정리된 이후였다. 어도비가 하면 뭔가 다르겠지 하면서 기대했었지만, 막상 뚜껑을 열어보니 다른 툴에서 가능한 수준 혹은 그 이하였으며. 디자인과 프로토타이핑이 가능한 올인원 툴을 표방했지만, 이미 디자인 임포트 기능과 플러그인 등으로 주류 프로세스가 정리된 터라 예상보다 임팩트가 크지 않았다.


그래도 어도비는 어도비

하지만 역시는 역시인건지, 올 가을 Adobe MAX 2018에서 보여준 업데이트 내용은 생각보다 놀라웠다.

프로토타입 탭에서 아트보드 간 전환을 위한 트리거에 음성(!)과 드래그 제스쳐가 추가되었고, 각종 UI kit과 플러그인, 앱 integration을 보다 쉽게 활용할 수 있게 되었다. 하지만 무엇보다 관심이 갔던 내용은 바로 Auto-Animate 라는 기능이었다.

아트보드에서 아트보드로 이동할 때에, 동일한 오브젝트의 상태값 변경 사항을 자연스럽게 연결하여 애니메이션 효과를 주는 것인데, 쉽게 말해서 키노트의 Magic Move 같은 기능이라고 보면 된다.


Auto-Animate 활용편

Auto-Animate를 활용하면 그저 장면 전환으로 플로우를 보여주던 이전에 비해서, 보다 실감나는 인터랙션을 만들 수 있겠다는 기대감에 몇 가지를 시도해 보았다.


1. 드래그 & 탭

드래그와 탭 제스쳐를 시험해 보기 위해서 가장 최근에 만들었던 극장 좌석 예매 인터랙션을 어도비 XD로 컨버팅 해 보았다.

위의 프로토타입은 상영관을 묘사해서 직접 좌석을 선택할 수 있도록 하는 컨셉으로, 크게 스크린, 좌석, 정보 표시의 세 영역으로 구분된다.

영상 클립을 넣을 수 있다면 좋겠지만, 아직 지원하지 않는 관계로 스틸컷으로 대체하기로 하고, 가장 핵심인 좌석 영역을 만드는 데에 신경을 쏟기로 했다.

프레이머로 만들 때에는 배열과 반복문으로 좌석을 붙여 나갔지만, 어도비 XD에는 ‘반복 그리드’ 라는 신박한 기능이 있다. 오브젝트나 오브젝트 그룹을 가로/세로 중 원하는 방향으로 반복해서 그릴 수 있는 기능이다. 하지만 이 좋은 기능을 다 만들고 나서 알게 되었다는 게 함정… 😅

단, 같은 크기로만 그려지기 때문에 원근감을 표현하려면, 각 열에 해당하는 좌석을 그린 다음 그룹으로 묶고(⌘ + G) 반복 그리드를(⌘ + R) 선택한 후, 가로 방향으로 드래그한다.

정보 영역에 텍스트까지 입력해 주면 일단 첫번째 준비는 끝났다. 완성된 아트보드를 복사해서 스크린과 좌석 영역의 위치를 적당히 좌우로 옮겨주면 된다.

이제 프로토타입 탭으로 이동해서, 첫번째 아트보드를 선택하고 두번째 아트보드와 링크를 연결한다. 트리거에는 새롭게 추가된 ‘드래그’를 선택하고, 액션 역시 새로 추가된 ‘자동 애니메이트’를 선택한다.

그리고 나서 프리뷰를 확인해 보면(⌘ + ↩︎) 전에 없던 효과가 적용된 것을 확인할 수 있다. 그저 드래그 하는 것일 뿐인데, 꽤나 만족스럽다.

그렇게 왼쪽, 중앙, 오른쪽 좌석을 드래그와 자동 애니메이트로 연결해 주고, 마지막으로 디자인 탭에서 좌석 선택 화면을 그려준다. 자동 애니메이트는 아트보드와 아트보드를 연결하는 것으로 효과를 만들어 내기 때문에 단위 인터랙션 별로 아트보드를 준비해야 한다. 따라서 추가해야 할 아트보드는 총 4개가 된다.

  1. 좌석(열)을 탭하고 나서, 나머지 좌석(열)이 사라진 장면
  2. 선택한 좌석(열) 기준으로 앞에 있는 좌석(열)들을 표시하는 장면
  3. 첫 번째 좌석을 선택한 장면
  4. 두 번째 좌석을 선택한 장면

연결되는 아트보드 사이에 같은 오브젝트만 연결된다는 점에 주의하면서, 적절히 오브젝트를 복붙해 가면서 디자인을 완성한다. 처음 만든 아트보드를 계속 복사하면서 오브젝트를 수정/삭제/추가 하는 방법을 추천한다.

디자인을 완성하고 나면, 프로토타입 탭에서 나머지 인터랙션을 추가한다. 탭하면 나머지 좌석이 사라지고, 곧바로 앞 좌석(열)들이 나타나기 때문에 순서대로 탭과 시간 트리거를 적용하고, 나머지 좌석 선택 장면들은 탭 트리거를 적용한다. 액션은 당연히 모두 자동 애니메이트.

이렇게 드래그와 탭을 활용한 인터랙션이 완성되었다. 완벽하게 원하는 인터랙션은 아니지만, 컨셉을 충분히 보여줄 수 있는 프로토타입인 듯 하다. 이제 프리뷰를 보면서 뿌듯해 하면 된다. 어도비 XD는 프리뷰에서 바로 mp4로 내보내기를 지원하므로 원한다면 얼마든지 있어보이는 영상으로 가공할 수 있다.

GIF Brewery 3의 오버레이 기능을 활용해서 디바이스 목업을 입혀 보았다. 작업 파일은 아래 링크에서 확인할 수 있다.


2. 3D rotate 애니메이션

드래그와 탭 제스처를 만들다 보니, 어도비 XD에서 어디까지 표현할 수 있을지 궁금해졌다. 이런 것도 가능할까 싶어서 3D rotate 애니메이션을 만들어 보기로 했다.

간단한 코딩으로 디바이스 기울기를 확인하여 이모티콘을 변경하거나 확대/축소 하는 프로토타입인데, 아쉽게도 어도비 XD에서는 디바이스 기울기를 확인하는 트리거를 지원하지 않으므로, X/Y 축으로 기울인 장면을 직접 그려야 했다.

우선 정면 기준으로 인터페이스를 그리고, 기울기를 시뮬레이션 하는 느낌을 주기 위해 배경에는 축과 눈금을 그렸다. 눈금은 뒤늦게 깨달았던 반복 그리드로 쉽게 그릴 수 있었다.

Y축 기준으로 왼쪽으로 한 번, 오른쪽으로 한 번 회전하고, X축 기준으로 앞쪽으로 다시 한 번 회전하는 애니메이션을 만들 예정이므로, 추가해야 할 아트보드는 총 6장이 된다. (아래 목록의 아트보드 5에서 다시 아트보드 4로 링크를 연결한다면 마지막 아트보드 6은 생략할 수 있다.)

  1. 왼쪽으로 회전하고, 이모티콘이 변경된 장면
  2. 정면으로 복귀하고, 이모티콘이 원래대로 되돌아온 장면
  3. 오른쪽으로 회전하고, 이모티콘이 변경된 장면
  4. 정면으로 복귀하고, 이모티콘이 원래대로 되돌아온 장면
  5. 앞쪽으로 회전하고, 이모티콘이 확대된 장면
  6. 정면으로 복귀하고, 이모티콘이 원래대로 축소된 장면

왼쪽과 오른쪽으로 회전한 장면은 소실점 가이드 라인을 임의로 그려서 적당히 오브젝트를 변형했고(오브젝트 더블 클릭-자유변형), 앞쪽으로 회전하는 장면은 왼쪽/오른쪽 회전 장면을 토대로 어림잡아 조절했다. rotate XYZ 기능이 있었다면 정말 간단히 끝낼 수 있었을텐데… 😅

여기서 한 가지 주의해야 할 점은, 오브젝트를 더블 클릭해서 각 모서리들의 x,y 값을 수정해 버리면 이전 아트보드의 오브젝트와는 다른 것으로 인식하기 때문에 자동 애니메이트가 적용되지 않는다는 것이다. 이럴 때에는 수정하기 전에 변경할 오브젝트를 패스로 변환해야 한다. (⌘ + 8)

재미삼아 왼쪽과 오른쪽으로 회전한 장면을 드래그 트리거로 연결해 보았다. 이것만으로도 충분히 이전 버전보다 훌륭한 퍼포먼스를 보여준다.

하지만 좀 더 있어보이는 장면을 연출하기 위해 모든 아트보드를 시간 트리거로 연결하여 한 호흡의 애니메이션으로 만들고, 디바이스의 X/Y축 기울기를 실시간으로 표시하는 듯 한 효과도 추가해 보기로 했다.

숫자가 카운트 되는 애니메이션은 여러가지 방법으로 만들 수 있겠지만, 미리 숫자들을 나열하고 위아래로 움직이는 방법으로 간단하게 표현할 수 있다.

아트보드에 rotateX/Y 값을 텍스트로 추가하고, 위 아래로 움직여가며 카운트 애니메이션을 만들어 보았다. 숫자가 추가되니 왠지 더욱 그럴듯한 장면이 되었다. 작업 파일은 아래 링크에서 확인할 수 있다.


실무에서 통할까?

열심히 노력하고 있는 듯 하지만, 아직 갈 길이 멀다. 인터랙션을 테스트 할 목적이라면 프로토파이나 프레이머를 따라가기 어렵고, 디자인 작업에 있어서도 스케치나 피그마에 비해 특별한 장점을 찾기란 쉽지 않다.

하지만 어도비 XD의 장점은 바로 가벼움에 있다. 복잡하지 않은 한 두 장면의 심플한 인터랙션은 이번 업데이트를 통해 쉽고 재미있게 만들어 볼 수 있고, 스케치에서 작업한 아트보드를 바로 복붙하여 동선을 확인하는 것도 매우 간편하다.

작년에 온라인으로 진행된 설문 결과에서 볼 수 있듯이 스케치가 압도적인 지지를 받고 있고, 실제로도 주변의 많은 디자이너들이 ‘스케치 + 제플린’ 조합을 선호하고 있다. 하지만 계속해서 유의미한 진전을 보여주고 있는 어도비 XD는, 아마도 그 이름(Adobe)처럼 흙벽돌을 차곡차곡 쌓아올려 집을 만들 듯이 성실하게 다음 단계를 준비하고 있을 것이다.

다음엔 또 어떤 걸 준비하고 있을까?