드래그 제스처로 자동 애니메이트 기능을 사용하여 디자인 및 프로토타입을 제작하는 방법에 대해 학습합니다.

자동 애니메이트를 통해 몰입형 애니메이션 전환으로 프로토타입을 쉽게 제작할 수 있습니다. 아트보드를 간단히 복제하고 크기, 위치, 회전 등의 오브젝트 속성을 수정하고 자동 애니메이트 액션을 적용하여 아트보드 간 애니메이션 전환을 만들 수 있습니다. 자동 애니메이트를 사용하려면 애니메이트하려는 오브젝트가 각 오브젝트 간 동일한 레이어 이름을 가져야 합니다.

자동 애니메이트 작동 방식

이전까지는 디자이너가 다양한 아트보드에 걸쳐 프로토타입 인터랙션을 연결하기 위해 여러 전환 방식을 사용해야 했습니다.  자동 애니메이트 기능을 통해 디자이너는 XD를 사용하여 두 아트보드 사이에서 다음과 같이 마이크로인터랙션을 제작할 수 있습니다.

  • 아트보드 간 오브젝트 복제
  • 크기, 위치, 회전 등의 속성 수정. 지원되는 속성에 대한 자세한 내용은 자동 애니메이트에 대해 지원되는 속성을 참조하십시오.
  • 프로토타입 모드로 전환
  • 새로운 전환으로 자동 애니메이트 추가
  • 데스크탑 또는 모바일에서 프로토타입 미리보기

을 사용하여 전환을 트리거하는 방식과 마찬가지로 드래그를 자동 애니메이트와 결합하여 아트보드 사이의 마이크로인터랙션을 지정할 수 있습니다. 자동 애니메이트를 사용하는 전환 도중 새 오브젝트는 페이드 인되고 삭제된 오브젝트는 페이드 아웃됩니다.

참고:

현재 자동 애니메이트는 웹 브라우저에서 지원되지 않으므로 자동 애니메이트가 포함된 프로토타입은 웹 상에서 디졸브됩니다.

자동 애니메이트와 결합된 드래그 제스처 작동 방식

Adobe XD는 단순한 클릭 동작으로 실행되는 기존 애플리케이션을 뛰어넘어 시간, , 드래그음성과 같은 다양한 프로토타이핑 옵션을 제공합니다.

드래그 제스처를 사용하여 카드나 화면을 드래그하는 방식과 유사하게 사용자 경험을 시뮬레이션할 수 있습니다. 트리거 목록에서 드래그를 선택하면 XD는 자동으로 액션자동 애니메이트로 전환합니다.

참고:

현재 드래그 제스처 미리보기는 데스크탑 및 모바일에서만 지원됩니다.

  1. 프로토타입 모드에서 대상 아트보드에 있는 동일한 오브젝트의 위치를 수정하고 트리거드래그로 설정합니다.

  2. 오브젝트의 시작 및 종료 위치는 드래그의 방향을 결정합니다. 첫 번째 아트보드의 오브젝트가 왼쪽에 있고 두 번째 아트보드의 동일한 오브젝트의 위치가 오른쪽이라면 미리보기 창 또는 모바일 앱에서 왼쪽부터 오른쪽으로 드래그합니다. 마찬가지로 오른쪽에서 왼쪽 또는 위에서 아래로 드래그 이벤트를 만들 수 있습니다.

  3. 데스크탑 또는 모바일에서 변경 내용을 미리 보려면 미리보기 아이콘()을 선택합니다.

     

    드래그 제스처 작동 방식
    드래그 제스처 작동 방식

온보딩 워크플로에 대해 드래그 제스처를 사용하여 자동 애니메이트 전환 제작

  1. 프로토타입 모드에서 캔버스 상의 모든 아트보드를 선택하여 아트보드 사이의 와이어를 조회할 수 있습니다.

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

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

    • 트리거: 제스처를 드래그로 설정합니다.
    • 액션: 자동 애니메이트로 설정합니다.
    • 대상: 대상을 두 번째 아트보드로 설정합니다.
    • 이징 효과: 드롭다운 목록에서 옵션을 선택합니다.
    자동 애니메이트 작업 과정
    자동 애니메이트 작업 과정

    A. 드래그에 대한 제스처 유형 B. 자동 애니메이트에 대한 액션 C. 대상 아트보드 설정 D. 이징 옵션 선택 
  4. 데스크탑 또는 모바일에서 변경 내용을 미리 보려면 데스크탑 미리보기 아이콘()을 선택합니다.

    자동 애니메이트 작업
    자동 애니메이트 작업

자동 애니메이트 전환 녹화

  1. XD 데스크탑 앱에서 오른쪽 상단에 있는 공유 아이콘을 클릭하고 비디오 녹화를 선택합니다.

  2. 미리보기 모드에서 녹화 버튼()을 사용하여 애니메이션을 녹화합니다.

데스크탑 및 모바일에서 프로토타입 링크 공유 및 검토

데스크탑 앱에서 오른쪽 상단에 있는 공유를 클릭하고 프로토타입 게시 또는 디자인 사양 게시를 선택합니다. 프로토타입 및 디자인 사양 공유에 대한 자세한 내용은 프로토타입 및 디자인 사양 공유를 참조하십시오.

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

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