디자이너 Cynthia Fong은 프로토타입에서 동적으로 변하는 인터랙티브한 이미지를 만들어 디자인을 테스트합니다. 이 튜토리얼에서는 Fong이 Adobe XD에서 모바일 앱에 대한 아이디어를 실현하는 방법을 소개합니다.

Adobe Studio 팀의 디자이너로 있는 Cynthia Fong은 다른 사람들에게 영감을 불어넣고자 하는 열정을 그녀의 모든 크리에이티브 프로젝트에 쏟고 있습니다.

필요 항목

샘플 파일은 튜토리얼의 학습 내용을 연습하기 위해 사용할 수 있는 Adobe Stock 에셋입니다. 이 튜토리얼이 아닌 실제 프로젝트에 이 샘플 파일을 사용하려면 Adobe Stock에서 라이선스를 구매해야 합니다. 샘플 파일의 사용 약관을 살펴보려면 폴더에 있는 ReadMe 파일을 참조하십시오.

아트보드 복제

먼저 두 번째 아트보드를 복제합니다. 아트보드 이름을 클릭한 다음 Alt(Windows) 또는 Option(macOS) 키를 누른 상태에서 해당 아트보드를 오른쪽으로 드래그합니다.

아이스크림 모바일 앱 디자인에 사용할 3개의 아트보드에 한 스쿱의 아이스크림 콘 또는 세 스쿱의 아이스크림 콘이 있고, 첫 번째 아트보드에는 타이틀, 두 번째 및 세 번째 아트보드에는 가격이 표시되어 있음

추가 및 삭제

Adobe XD에서 아트보드 간의 오브젝트에 애니메이션을 적용하려면 레이어 이름이 일치해야 합니다. 아트보드를 복제하면 레이어 이름도 복제됩니다. 두 번째 아트보드에서 맨 위에 있는 아이스크림을 제거하고 아이스크림 콘을 위로 이동한 다음 새로운 상품을 반영하기 위해 문구와 가격을 업데이트합니다.

UX 디자인에는 두 개의 아트보드가 있고, 두 아트보드에 레이어 이름이 표시되어 있는 패널이 배치되어 있고, 오른쪽 아트보드에는 한 스쿱이 적은 아이스크림 콘이 있음

아트보드 추가

최종 프로토타입에는 총 5개의 아트보드가 포함되어 있습니다. 이전 단계에서 만든 아트보드를 복제하고, 두 번째 아이스크림을 제거한 다음 아이스크림 콘을 위로 옮기고 문구와 가격을 업데이트합니다. 그런 다음 이 아트보드를 복제하고, 마지막 아트보드에서 문구를 제거합니다.

모바일 앱에 사용할 3개의 아트보드 디자인이 있고, 첫 번째에는 두 덩이의 아이스크림이 놓여 있고, 나머지 두 개의 아트보드에는 한 덩이의 아이스크림이 표시되어 있고, 마지막 아트보드에는 가격과 문구가 없음

구성 요소를 활용한 디자인

에셋 패널의 구성 요소 섹션에는 이 앱 디자인 전체에 사용된 요소가 포함되어 있으며 이러한 요소는 재사용 가능합니다. 주문 텍스트와 주문 버튼을 마지막 아트보드로 드래그합니다.

Adobe XD 구성 요소 패널이 있고, 아트보드에는 한 덩이의 아이스크림, 주문 텍스트 및 주문 버튼이 있고, 텍스트가 녹색 테두리로 강조 표시되어 있음

인터랙션에 애니메이션 적용

프로토타입 모드로 전환하여 인터랙션을 정의합니다. 첫 번째 아트보드를 클릭하여 와이어를 두 번째 아트보드로 드래그한 다음 트리거를 탭으로 설정하고 액션을 자동 애니메이트로 설정합니다. XD에서는 이전에 적용한 애니메이션이 유지되므로 각 아트보드에서 다음 아트보드로 와이어를 드래그한 다음 마지막 아트보드에서 다시 첫 번째 아트보드로 드래그합니다. 마지막으로 데스크탑 미리보기에서 인터랙션을 테스트합니다.

파란색 와이어는 5개 아트보드를 서로 연결하여 인터랙티브한 프로토타입을 보여주며, 하나의 대화 상자에는 인터랙션 설정이 표시되어 있음

재미있는 요소 추가

모바일 앱에 사용할 재미있고 인터랙티브한 애니메이션을 디자인해 보시기 바랍니다.

Adobe XD에서 만든 앱 디자인 목업이 자리 표시자 이미지로 배치되어 있는 스마트폰을 들고 있는 손의 클로즈업 사진

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

09/02/2020

아티스트: Cynthia Fong

Adobe Stock 컨트리뷰터: Subbotina Anna, pamela_d_mcadams, rawpixel

이 페이지가 도움이 되었습니까?