자동 애니메이트를 사용하여 마이크로인터랙션을 제작하는 방법에 대해 학습합니다.

한동안 XD는 푸시, 슬라이드, 디졸브와 같은 휴대폰의 기본 전환 기능을 모방한 기본 전환 유형만 제공했습니다. 이러한 서비스는 사용자 플로우의 기본적인 느낌을 표현하는 데 유용했습니다. 자동 애니메이트의 도입으로 애니메이션이 적용된 프로토타입을 통해 콘텐츠의 움직임을 시각화할 수 있습니다. 

자동 애니메이트를 사용하여 매력적이고 인터랙티브한 최종 사용자 경험을 위해 YouTube 스와이프/드래그 또는 리플 인터랙션과 같은 멋진 효과를 만들 수 있습니다. 

웹 사이트의 리플 인터랙션
웹 사이트의 리플 인터랙션
터치 지원 디바이스에서의 스와이프 및 드래그 효과
터치 지원 디바이스에서의 스와이프 및 드래그 인터랙션

애니메이션을 제작하려면 아트보드를 복제하고 크기, 위치, 회전 등의 오브젝트 속성을 수정하고 아트보드 사이에 자동 애니메이트 액션을 적용합니다. 그런 다음 이들 애니메이션을 미리보기 창, 웹 브라우저 또는 모바일 애플리케이션에서 재생 또는 녹화하고 공동 작업을 위한 검토 목적으로 관련자들과 공유할 수 있습니다. 이를 통해 전반적인 사용자 경험에 풍부한 레이어를 추가하는 동시에 프로토타입 스토리를 보다 효과적으로 전달할 수 있습니다.

프로토타입을 제작하기 전에 애니메이트하려는 오브젝트가 각 아트보드 사이에서 동일한 레이어 이름을 가져야 합니다. XD 13.0부터 자동 애니메이트는 특정 속성에서만 작동합니다. 자세한 내용은 지원되는 속성 및 지원되지 않는 속성을 참조하십시오.

  1. XD에서 애니메이션이 적용된 프로토타입을 제작하려면 프로토타입 모드에서 캔버스 상의 모든 아트보드를 선택하여 아트보드 사이의 와이어를 조회합니다.

  2. 원본 아트보드의 레이어에서 커넥터를 대상 아트보드로 드래그합니다. 첫 번째 요소를 연결하면 해당 요소의 아트보드가 홈 아트보드로 설정됩니다.

  3. 트리거 헤드업 디스플레이에서 다음 옵션을 설정합니다.

    • 트리거: 제스처를 드래그, 탭 또는 음성으로 설정합니다. 카드 드래그 효과를 시뮬레이션하려면 드래그를 선택합니다.
    • 액션: 자동 애니메이트로 설정합니다.
    • 대상: 대상을 두 번째 아트보드로 설정합니다.
    • 이징 효과: 드롭다운 목록에서 옵션을 선택합니다.
    자동 애니메이트 작업 과정
    자동 애니메이트 작업 과정

    A. 드래그에 대한 트리거 유형 B. 자동 애니메이트에 대한 액션 C. 대상 아트보드 D. 이징 옵션 

    고급 마이크로인터랙션을 디자인에 추가하고자 하십니까? After Effects에서 디자인을 향상시키십시오. 이 비디오를 통해 전반적인 작업 과정을 살펴보십시오.

    Adobe XD에서 After-Effects로 내보내기 (시청 시간: 1분)

  4. 데스크탑, 모바일 또는 웹의 지원되는 브라우저에서 변경 내용을 미리 보려면 데스크탑 미리보기 아이콘()을 선택합니다. 

    참고:

    XD는 자동 애니메이션이 적용된 아트보드를 미리 볼 때 스크롤 효과를 지원하지 않습니다.

  5. XD 데스크탑 앱에서 관련자들과 프로토타입을 공유하려면 공유를 클릭하고 검토 목적으로 공유(프로토타입의 경우) 또는 개발 목적으로 공유(디자인 사양의 경우)를 선택합니다. 프로토타입 및 디자인 사양 공유에 대한 자세한 내용은 프로토타입 및 디자인 사양 공유를 참조하십시오.

이 비디오를 통해 자동 애니메이트를 시작할 수도 있습니다.

시청 시간: 1분


예제

모범 사례

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책