Adobe XD에서 자신이나 다른 사용자가 사용자 경험을 검증하기 위해 사용할 수 있는 인터랙티브 프로토타입을 제작하는 방법에 대해 학습합니다.

화면 디자인을 완료한 후에는 이들 화면을 서로 연결하여 해당 앱이나 웹 사이트에 대한 사용자 경험을 미리 시각적으로 확인해 볼 수 있습니다.

Adobe XD를 통해 인터랙티브 프로토타입을 제작하고 화면이나 와이어프레임 사이의 내비게이션을 시각화할 수 있습니다. 인터랙션에 대한 미리보기를 통해 사용자 경험을 검증하고 디자인을 수정하여 개발 시간을 단축할 수 있습니다. 인터랙션을 녹화하고 관련자들과 공유하여 피드백을 받아 볼 수도 있습니다. 확대/축소 기능을 통해 프로토타입의 특정 부분을 자세히 살펴볼 수 있습니다.

홈 화면 설정

홈 화면은 앱 또는 웹 사이트에서 첫 번째로 표시되는 화면입니다. 사용자는 홈 화면에서부터 앱 또는 웹 사이트의 탐색을 시작하게 됩니다.

프로토타입에서 아무 것도 선택하지 않고 미리보기를 하는 경우에도 홈 화면에서부터 미리보기가 시작됩니다. 즉, 기본적으로 홈 화면은 다른 아트보드로의 연결을 위한 첫 번째 아트보드로 설정됩니다.

  1. 프로토타입 모드로 전환합니다.

  2. 홈 화면으로 설정하고자 하는 아트보드를 클릭합니다. 왼쪽 상단에 회색의 홈 아이콘이 나타납니다.

    홈 화면 설정하기
    홈 화면 설정하기
  3. 홈 아이콘을 클릭합니다. 아트보드 또는 화면이 홈 화면으로 설정되면 아이콘이 파란색으로 바뀝니다.

    아트보드가 홈 화면으로 설정되면 파란색으로 바뀌는 홈 아이콘
    아트보드가 홈 화면으로 설정되면 파란색으로 바뀌는 홈 아이콘

    다른 아트보드를 홈 화면으로 설정하려면 해당 아트보드와 연계된 홈 아이콘을 클릭하기만 하면 됩니다.

대상 화면에 인터랙티브 요소 링크

  1. 프로토타입 모드로 전환합니다.

  2. 링크하고자 하는 오브젝트를 클릭합니다.

    화살표가 포함된 연결 핸들이 오브젝트에 나타납니다. 핸들에 마우스를 올리면 커서가 커넥터로 바뀝니다.

    인터랙티브 요소를 대상 화면에 링크
    인터랙티브 요소를 대상 화면에 링크
  3. 마우스로 클릭하고 드래그하여 커넥터가 표시되도록 합니다. 대상 아트보드 또는 화면 위에서 마우스 버튼을 놓습니다.

    첫 번째 요소를 연결하면 해당 요소의 아트보드가 홈 아트보드로 설정됩니다. 

  4. 표시되는 팝업 창에서 다음과 같은 옵션을 지정할 수 있습니다.

    • 전환 옵션 및 전환 시간: 다른 아트보드로 전환할 때 스크롤 위치가 그대로 유지되도록 하려면 스크롤 위치 유지를 선택합니다. 사용자가 원래의 아트보드에서 스크롤하면 다음 아트보드가 원래 아트보드에서의 스크롤 위치를 인식합니다. 아트보드를 클릭하거나 아트보드의 요소를 클릭할 때 하나의 화면에서 다음 화면으로 전환하는 동안 원래 위치가 그대로 유지되도록 제어할 수 있습니다. 이러한 제어 기능은 프로젝트 파일에서 앞뒤로 스크롤을 반복해야 하는 수고를 덜어 줍니다. 예를 들어 사용자가 아트보드 A에서 y=1000으로 스크롤 다운하면 아트보드 B로의 전환 시 기본적으로 y=1000이 됩니다. 원본 아트보드에 정의된 스크롤이 없는 경우 스크롤 위치 유지 옵션은 활성화되지 않습니다. 이 옵션은 내비게이션 바나 고정된 바닥글을 시험 제작할 때 유용합니다.
    • 오버레이: 메뉴 드롭다운 및 슬라이딩 키보드와 같은 상태 또는 전환을 시뮬레이션하려면 오버레이를 선택합니다.

    Esc 키를 누르거나 팝업 창의 바깥쪽을 클릭하여 종료합니다.

    오버레이를 사용하여 작업
    오버레이를 사용하여 작업
  5. 위의 단계를 반복하여 프로젝트의 모든 인터랙티브 요소를 링크합니다.

    팁:

    프로토타입 모드에서 인터랙션을 보다 빠르게 제작하려면:

    • 아트보드 전체에 걸쳐 오브젝트를 복사하고 붙여넣을 수 있습니다. 오브젝트는 자신의 인터랙션과 함께 복사되고 붙여넣어집니다.
    • 인터랙션만 복사하고 붙여넣을 수도 있습니다. 오브젝트를 복사하고 다른 오브젝트를 마우스 오른쪽 버튼으로 클릭한 다음 인터랙션 붙여넣기를 선택합니다. 이렇게 하면 인터랙션만 붙여넣어집니다.
    all-connectors
    대상 화면에 링크된 인터랙티브 요소

요소가 다른 화면을 가리키도록 하려면 핸들을 다시 클릭하고 필요한 화면으로 드래그합니다.

특정 아트보드에 대한 연결 상태를 확인하려면 아트보드의 제목을 선택합니다.

인터랙션을 삭제하려면 커넥터의 대상 핸들을 대상 아트보드의 바깥쪽으로 드래그하여 초안 영역 위에 놓습니다.

시간 경과 전환 사용

Adobe XD의 시간 경과 전환 기능을 통해 온보딩 플로우, 다른 화면으로의 자동 리디렉션 또는 진행 표시줄과 같은 풍부한 프로토타입 경험을 만들 수 있습니다. 전환을 트리거하기 위해 하는 것처럼 지연을 사용하여 전환 지속 시간 지정할 수 있습니다. 예를 들어 온보딩 워크플로를 제작할 때 지연 옵션을 사용하여 아트보드 사이를 연결하고 전환할 수 있습니다.

디자이너는 시간을 사용하여 다른 아트보드로의 전환을 트리거할 수도 있습니다. 예를 들어 온보딩 플로우를 디자인하는 경우 시간 경과 전환 기능을 사용하여 앱 플로우의 스플래시 화면을 시작하고 몇몇 온보딩 화면 사이를 자동으로 전환할 수 있습니다.

온보딩 워크플로에 대한 시간 경과 전환 만들기

시간 경과 전환
시간 경과 전환
  1. XD에서 프로토타입 모드로 전환합니다.

  2. 커넥터를 보려면 아트보드를 선택하고 핸들 위로 마우스를 가져다 댑니다.

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

  4. 트리거 팝업 창에서 다음 옵션을 설정합니다.

    • 트리거: 시간으로 설정합니다.
    • 시간 지연: 전환 지연 시간을 단위로 설정합니다.
    • 지속 시간: 전환 지속 시간을 단위로 설정합니다.
    • 액션: 전환으로 설정합니다.
    트리거, 지연, 지속 시간 및 액션 설정
    트리거, 지연, 지속 시간 및 액션 설정

    A. 트리거를 시간으로 설정 B. 초 단위로 지연 설정 C. 액션을 전환으로 설정 D. 지속 시간을 초로 설정 
  5. 변경 내용을 미리 보려면 데스크탑 미리보기 아이콘()을 선택합니다.

웹에서 프로토타입 링크 검토

  1. 데스크탑 앱에서 오른쪽 상단에 있는 공유 아이콘을 클릭하고 프로토타입 게시를 선택합니다. 시간 경과 전환은 XD 데스크탑 앱에서 디자인할 때 재생됩니다.

  2. 시간 경과 전환을 멈추려면 뒤 화살표 키 또는 뒤 화살표 내비게이션 버튼을 눌러 이전 화면으로 돌아갑니다.

  3. 처음으로 전환을 중단하면 Adobe XD는 시간 전환이 중단된 지점을 표시해 줍니다. 다시 시작하려면 오른쪽 화살표 내비게이션 버튼 또는 오른쪽 화살표 키보드 키를 누릅니다.

이전 아트보드에 링크

  1. 프로토타입 모드에서 대상 > 이전 아트보드를 선택합니다.

    이전 아트보드 선택
    이전 아트보드 선택
  2. 대상이전 아트보드로 설정합니다. 대상이 설정되면 아이콘이 변경됩니다.

  3. 미리보기 창을 사용하여 링크 상태를 미리 확인할 수 있습니다.

아트보드 링크 해제

  1. 프로토타입 모드에서 대상 > 없음을 선택합니다.

    아트보드에서 초안 영역(아트보드 사이의 회색 공간)으로 와이어를 드래그해도 됩니다.

    아트보드를 “없음”으로 링크
    아트보드 링크 해제

    참고:

    없음 옵션은 현재 아트보드가 대상에 링크되어 있는 경우에만 사용할 수 있습니다.

  2. 브라우저에서 링크 상태를 미리 봅니다.

    요소에서 이전에 설정된 모든 대상 링크는 제거됩니다.

인터랙션 미리보기 및 녹화

참고:

Windows의 Adobe XD에서는 프로토타입 녹화 기능이 지원되지 않습니다. 그러나 해결 방법은 있습니다. Windows + G 키를 눌러 기본 리코더를 사용하면 미리보기 창을 녹화할 수 있습니다.

프로토타입 미리보기를 통해 내 프로토타입과 인터랙션을 테스트할 수 있습니다. 미리보기를 녹화하고 .mp4 파일로 저장할 수도 있습니다. 이후 관련자들과 해당 .mp4 파일을 공유하여 이들이 내 프로토타입을 둘러보거나 검토하고 피드백을 제공하도록 할 수 있습니다.

  1. 데스크탑 미리보기 아이콘을 클릭합니다. 미리보기 창이 나타나고 해당 아트보드가 강조 표시됩니다.

    화면 간 내비게이션을 테스트하려면 인터랙티브 요소를 클릭합니다.

    미리보기 창에서 프로토타입의 디자인과 인터랙션을 미리 확인하는 동시에 편집 작업을 수행할 수 있습니다. 이들 변경 내용은 미리보기에서 즉시 확인할 수 있습니다.

  2. 인터랙션을 녹화하려면 미리보기 창에서 녹화를 클릭합니다. 녹화를 종료하려면 Esc 키를 누르거나 녹화 버튼을 다시 클릭합니다.

    preview-record
    프로토타입 인터랙션 녹화

  3. 녹화 파일의 이름과 저장할 위치를 지정합니다. 녹화 파일은 .mp4로 저장됩니다.

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

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