음성 명령 및 음성 재생을 사용하여 디자인하고 프로토타입을 만드는 방법을 학습합니다.

Adobe XD는 음성 명령을 사용하여 아트보드 사이에서 인터랙션을 트리거할 수 있도록 하는 사용이 간편한 솔루션을 제공합니다. 클릭이나 트리거로 사용하는 방식과 마찬가지로, 음성 명령을 사용하여 프로토타입 인터랙션과 음성 재생을 트리거된 액션으로 트리거할 수 있습니다. 예를 들어 모바일 애플리케이션에서 음성 검색을 통합하는 경우 음성 명령음성 재생을 사용하여 아트보드 사이를 자동으로 전환할 수 있습니다.

프로토타입에 음성 명령 추가

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

  2. 캔버스에 있는 모든 아트보드를 선택하여 해당 와이어를 조회합니다.

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

  4. 속성 관리자에 표시되는 인터랙션 패널에서 다음 옵션을 설정합니다.

    • 트리거음성으로 설정합니다.
    • 명령: 텍스트로 음성 명령을 입력합니다.
    • 액션전환으로 설정합니다.
    • 대상: 대상 아트보드를 설정합니다.
    • 애니메이션: 사용 가능한 옵션을 기반으로 애니메이션을 설정합니다.
    • 이징 효과: 사용 가능한 옵션을 기반으로 이징 효과를 설정합니다.
    • 지속 시간: 지속 시간을 단위로 설정합니다.
    음성 트리거 설정
    음성 트리거 설정

    A. 트리거를 음성으로 설정 B. 음성 명령을 텍스트로 입력 
  5. 변경 내용을 미리 보려면 데스크탑 미리보기 아이콘 을 선택합니다.

  6. 다음 아트보드로의 전환을 미리 보려면 스페이스 바를 누른 상태에서 음성 명령을 반복합니다. 

    음성 명령으로 전환 미리보기
    음성 명령으로 전환 미리보기

음성 입력에 음성 재생 추가

  1. 대상 아트보드에서 와이어를 클릭하고 소스 아트보드로 드래그합니다.

  2. 속성 관리자에 표시되는 인터랙션 패널에서 다음 옵션을 설정합니다.

    • 트리거시간으로 설정합니다.
    • 시간 지연: 전환 지연 시간을  단위로 설정합니다.
    • 액션음성 재생으로 설정합니다.
    • 목소리: 음성 재생을 위한 목소리를 선택합니다.
    • 음성: 해당 음성 응답을 추가합니다. 
    음성 재생 사용
    음성 재생 사용

    A. 트리거를 시간으로 설정 B. 시간 지연을 초 단위로 설정 C. 액션을 음성 재생으로 설정 D. 음성 설정 E. 음성 응답 추가 
  3. 변경 내용을 미리 보려면 데스크탑 미리보기 아이콘 을 선택합니다.

  4. 다음 아트보드로의 전환을 미리 보려면 스페이스 바를 누른 상태에서 음성 명령을 반복합니다. 

    음성 재생 미리보기
    음성 재생 미리보기

프로토타입에 음성 내레이션 추가

  1. 프로토타입 모드에서 플로우의 시작이 설정되어 있는 홈 화면을 선택하고 데스크탑 미리보기 버튼을 클릭합니다.

    참고:

    MAC 사용자는 미리보기 녹화를 시작하기 전에 마이크를 활성화할 수 있으며, Windows 사용자는 게임센터의 OS 레벨 컨트롤을 통해 이를 활성화할 수 있습니다.

  2. 녹화 버튼 옆에 있는 드롭다운 화살표를 선택하고 마이크 사용 옵션을 선택합니다. 녹화 시 인터페이스에서 깜박이는 빨간색 아이콘을 눈여겨 보십시오.

  3. 녹화 내용을 mp4로 저장하고 관련자와 공유하거나 소셜 미디어에 게시할 수 있습니다. 

웹에서 해당 프로토타입 또는 디자인 사양 링크를 공유하고 검토합니다.

  1. 데스크탑 앱에서 오른쪽 상단에 있는 공유 아이콘을 클릭하고 검토 목적으로 공유 (프로토타입의 경우) 또는 개발 목적으로 공유(디자인 사양의 경우)를 선택합니다.

  2. 다음에서 프로토타입 미리보기 시:

    • 데스크탑 또는 노트북: 스페이스바를 누릅니다.
    • Adobe XD Mobile 앱(iOS / Android): 화면의 아무 곳이나 길게 누릅니다. 손가락을 화면에 놓고(움직이지 않고) 음성 명령을 사용하고 난 후 화면에서 손가락을 뗍니다.
    • 스마트폰의 모바일 브라우저: 화면 오른쪽 하단에 있는 마이크 아이콘을 누릅니다.
  3. 디자인 사양을 미리 볼 때 개발자는 음성 명령 및 음성 재생을 텍스트로 읽거나 조회할 수 있습니다. 

    참고:

    디자인 사양은 음성 인터랙션을 지원하지 않습니다.

음성 인터랙션 문제 해결 (알림 사용)

이제 데스크탑 또는 웹에서 프로토타입을 미리 보는 동안 음성 트리거된 인터랙션 문제를 해결할 수 있습니다. 디자인 사양을 검토하는 관련자도 이 기능을 통해 Adobe XD의 프로토타입과 인터랙션하는 방법을 보다 깊이 이해할 수 있습니다.

프로토타입에 대해 이야기하기에 앞서 미리보기 시 알림 표시 메뉴가 선택되어 있어야 합니다. 기본적으로 이 메뉴 항목은 Adobe XD를 실행할 때 선택된 상태입니다.

알림 표시
음성 프로토타입에 대한 알림 표시

Adobe XD에 전달하는 각 명령은 현재 아트보드에 있는 모든 음성 트리거와 일치합니다. 일치하는 항목이 없는 경우에는 {내가 전달한 명령}에 대해 일치하는 항목 없음으로 시작하는 알림이 수신됩니다. Adobe XD가 전달 받은 명령을 직접 눈으로 확인하는 것은 음성 명령과 일치하는 항목을 찾을 수 없는 이유를 알아내는 데 도움이 됩니다.

일치하는 항목을 찾을 수 없는 이유는 다양합니다. 전달한 음성 명령이 해당 아트보드의 어떠한 인터랙션에서도 사용되지 않는 것일 수 있습니다. 또는 음성 인식 서비스가 예상치 않은 결과를 반환하는 것일 수도 있습니다.

예를 들어 인터랙션에서 음성 명령으로 2달러를 추가한다고 가정해 봅시다. 하지만 명령 전달 시 음성 인식 서비스는 $2.00를 반환할 수 있습니다. 알림에서 이를 확인해 보면 단어 대신 숫자를 사용하도록 인터랙션을 변경해야 한다는 것을 알 수 있습니다.

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

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