어도비 XD에서 밀어 넘기기 제스처 만드는 방법

모바일 앱에서 매끄러운 사용자 경험 디자인은 매우 중요한 요소입니다. 본 튜토리얼에서는 디자이너 신시아 퐁(Cynthia Fong)이 어도비 XD에서 제냐 린주크(Zhenya Rynzhuk)의 디자인 에셋을 이용해 밀어 넘기기 제스처를 프로토타이핑하고, 앱을 라이브하기 전에 회전식 사진 보기와 같은 핵심 요소가 제대로 작동하는지 확인하는 과정을 살펴봅니다.

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

잠시 이 동영상을 보고 퐁의 작업 프로세스를 살펴보십시오. 단계는 아래에서 볼 수 있습니다.

시작하기 전에

퐁은 독자가 이 기법을 직접 사용해볼 수 있도록 린주크가 제작한 디자인 요소를 활용한 아트보드를 제공했습니다. 이 샘플 파일을 활용하거나 여러분이 직접 만든 파일을 이용해 연습해보세요.

1단계: 대상 설정

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

2단계: 포커스 변경

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

3단계: 와이어 연결 및 애니메이트

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

밀어 넘기기

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

참고: 이 튜토리얼에 포함된 프로젝트 파일은 실습 용도로만 사용하시기 바랍니다.