사용자 경험의 최적화 여부에 따라 앱의 성패가 좌우됩니다. 아티스트 Erica Larson은 프로토타입에서 재사용 가능한 이미지와 메뉴의 오버레이를 만들어 디자인을 테스트합니다. 이 튜토리얼에서는 Larson이 Adobe XD에서 모바일 앱에 대한 아이디어를 실현하는 방법을 소개합니다.

그래픽 아티스트 Erica Larson은 Adobe Studio 팀원으로서 영감을 주는 디자인 제작에 매일 최선을 다하고 있으며 그녀의 디자인을 본 사람이 무언가를 만들고자 하는 마음을 갖게 하는 그런 디자인 제작을 목표로 하고 있습니다.

1단계: 스테이지 설정

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

전체적으로 디자인이 완성된 건강/뷰티 앱 아트보드가 복제되어 있고, 왼쪽에는 모바일 메뉴 디자인이 있고, 오른쪽에는 제품 오버레이가 표시되어 있음

2단계: 표시 및 숨기기

아트보드의 일부 요소를 처음에는 표시되지 않도록 설정해 두고 사용자가 앱을 탐색하거나 터치할 때 화면에 표시되고 사라지는 디자인을 만들고자 합니다. Shift 키를 누른 상태에서 아트보드에서 해당 요소를 모두 선택한 다음 속성 관리자에서 불투명도 슬라이더를 0%로 설정합니다.

두 아트보드의 오브젝트 주위에 선택 영역 테두리가 있고, 불투명도가 0으로 설정된 속성 관리자가 표시되어 있음

3단계: 메뉴 연결

프로토타입 탭을 클릭하여 인터랙션을 정의합니다. 첫 번째 iPhone 아트보드에 있는 햄버거 메뉴 아이콘을 선택하고 와이어를 Menu 아트보드로 드래그한 다음 액션을 오버레이로 설정하고, 메뉴가 아트보드 위로 미끄러지듯 표시되도록 애니메이션을 오른쪽으로 슬라이드로 선택합니다. 그런 다음 오버레이의 녹색 원을 드래그하여 메뉴를 표시할 위치에 배치합니다. 두 번째 iPhone 아트보드의 햄버거 메뉴에도 동일한 절차를 반복합니다.

프로토타입 탭이 활성화되어 있고, 첫 번째 아트보드와 메뉴 오버레이가 파란색 점선으로 연결되어 있고, 속성 관리자에 인터랙션 설정이 표시되어 있음

4단계: 숨겨진 요소 표시

Info 아이콘에서 두 번째 iPhone 아트보드로 와이어를 드래그합니다. 이번에는 숨겨진 요소가 서서히 표시되도록 하기 위해 액션을 전환으로 설정하고 애니메이션을 디졸브로 지정합니다.

파란색 선이 첫 번째 아트보드의 정보 아이콘에서 두 번째 아트보드로 연결되어 있고, 속성 관리자에 인터랙션 설정이 표시되어 있음

5단계: 재사용

마지막으로 모델의 볼에 있는 핫스팟을 제품 오버레이로 연결합니다. 점을 선택하고 와이어를 Product overlay 아트보드로 드래그하여 인터랙션을 정의한 다음 해당 오버레이를 두 번째 아트보드에 표시할 위치에 배치합니다. 완료되면 데스크탑 미리보기를 클릭하여 모든 인터랙션을 테스트합니다.

파란색 점선이 모델의 볼에 있는 점에서 제품 오버레이로 연결되어 있고, 속성 관리자가 있고, 데스크탑 미리보기가 강조 표시되어 있음

실제와 같은 경험 구현

모바일 앱에서 재사용 가능한 이미지와 메뉴 오버레이를 디자인해 보시기 바랍니다.

손에 들려 있는 스마트폰 화면에는 건강/뷰티 앱 디자인이 있고 왼쪽 하단에는 Adobe XD 니모닉이 있음

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

09/02/2020

아티스트: Erica Larson

Adobe Stock 컨트리뷰터: blackzheep

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