Adobe XD에서 밀어 넘기기 제스처를 만드는 방법

Zhenya Rynzhuk는 고객 경험 향상을 위한 디자인 개념을 추구하여 클라이언트의 비즈니스 성장을 지원하는 디지털 디자인 전문가로, 처음부터 프로젝트를 진행하거나 다른 사람과의 공동 작업을 통해 디자인을 완성하기도 합니다.

원본 아트보드를 복제합니다. XD에서 아트보드를 복제하면 레이어 이름이 동일하게 유지되며, 이는 이후 단계에서 애니메이션이 제대로 작동하는 데 중요합니다.

새 아트보드에서 회전식 보기 사진 그룹을 그대로 유지합니다. 그런 다음 사용자가 회전식 보기에 포함된 사진을 밀어 넘길 때 이미지가 하나씩 들어오고 나가도록 시뮬레이션하기 위해 각 이미지를 두 번 클릭하고 속성 관리자에서 이미지의 크기와 위치를 수정합니다. 또한 Group 1에 있던 텍스트 레이어를 Group 2로 옮기고 텍스트를 변경합니다.

유저 인터랙션을 지정하기 위해 프로토타입 모드로 전환합니다. 첫 번째 아트보드에서 가운데 이미지를 두 번 클릭한 다음 와이어를 두 번째 아트보드로 드래그합니다. 그런 다음 트리거를 드래그로 설정하여 액션이 자동 애니메이트로 자동 설정되도록 합니다. 마지막으로 두 번째 아트보드에서 가운데 이미지의 와이어를 첫 번째 아트보드로 다시 드래그합니다. XD는 이전 설정을 기억하므로 이전과 동일하게 트리거가 드래그로 설정됩니다. 마지막으로 데스크탑 미리보기에서 인터랙션을 테스트합니다.

이와 같이 밀어 넘기기 제스처를 만들어 모바일 앱에서 실제와 같은 사용자 인터랙션을 시뮬레이션할 수 있습니다.

참고: 이 튜토리얼에 포함된 프로젝트 파일은 실습용으로만 사용합니다.