비디오를 사용하여 프로토타입 제작

비디오에 대한 사전 설정 옵션 또는 사용자 정의 재생 옵션을 선택할 수 있으며 다른 인터랙션이 비디오와 작동하는 방식을 정의할 수 있습니다. 비디오 재생 옵션 및 인터랙션을 탐색하면서 비디오와 관련된 몇 가지 현실적인 프로토타이핑 예를 확인해 보십시오.

시작하기에 앞서

비디오 가져오기 및 설정 조정 방법에 대해 알아보십시오.

재생 옵션 설정

재생 옵션 및 연관된 인터랙션

디자인 모드에서 비디오에 대한 재생 옵션이 설정되면 프로토타입 모드에서 연관된 인터랙션이 자동 설정됩니다.

탭하여 재생

탭하여 재생이 선택되면 재생/일시 중지 전환을 기본 작업으로 하는 탭 트리거가 자동 설정됩니다.

자동 재생

자동 재생을 선택하면 0초 지연 후 시간 트리거가 자동 설정됩니다.

재생 안 함

재생 안 함이 선택되면 프로토타입 모드에서 생성되는 인터랙션이 없습니다.

비디오 재생 사용자 정의

프로토타입 모드에서 다음 사용자 정의 중 하나를 선택합니다.

 비디오를 드래그 트리거로 재생하도록 설정할 수 없습니다.

다른 인터랙션으로 비디오 재생 사용

인터랙션 및 비디오 재생 동작 이해 

다른 개체에 대해 설정된 인터랙션에 따라 비디오가 정지되거나 계속 재생됩니다.

• 비디오는 자동 애니메이트 및 Lottie 재생 이외의 인터랙션이 트리거될 때 정지됩니다.
• 다른 개체를 가리키거나 탭할 때 비디오가 계속 재생되도록 하려면 자동 애니메이트를 호버 및 탭 트리거에 대한 작업으로 사용하십시오.

비디오 및 시간 트리거

모든 해당 아트보드에서 다음이 해당됩니다.

• 시간 지연을 기반으로 여러 시간 트리거를 순서대로 가질 수 있습니다.
• 동일한 시간 지연 후 함께 재생되도록 비디오와 여러 Lottie 애니메이션을 설정할 수 있습니다. 자동으로 함께 재생되도록 설정할 수도 있습니다(시간 지연을 0초로 설정).
• 아트보드, 비디오 및 Lottie에서 동일한 시간 지연을 갖는 시간 트리거를 설정하는 경우, 우선순위는 아트보드 > 비디오 > Lottie입니다.

프로토타이핑의 예

이제 비디오의 재생 옵션을 설정하고 이를 다른 인터랙션과 연결하는 방법을 배웠으니, 몇 가지 예시를 살펴보겠습니다.

예 1: 비디오에 최대화 버튼 프로토타이핑

비디오에 최대화 버튼을 프로토타이핑하는 방법을 알아보십시오.

Ex 1-artboard 1

1. 디자인 모드에서 Tip 1 비디오를 가져와 아트보드에 배치합니다. 이를 탭하여 재생으로 설정합니다.
2. 비디오의 오른쪽 하단 모퉁이에 최대화 아이콘(아트보드 오른쪽의 아이콘 섹션에 있음)을 배치합니다. 
3. 프로토타입 모드에서 최대화 아이콘을 Ex 1-artboard 2에 연결하고, 이를 작업 유형이 자동 애니메이트인 탭 트리거로 설정합니다.

Ex 1-artboard 2

1. 디자인 모드에서 Tip 1 비디오를 가져와 아트보드에 배치합니다(전체 화면 비디오). 이를 탭하여 재생으로 설정합니다.
   
2. 비디오의 오른쪽 하단 모퉁이에 최소화 아이콘(아이콘 섹션에 있음)을 배치합니다. 
3. 프로토타입 모드에서 최소화 아이콘을 Ex 1-artboard 1에 연결하고, 이를 작업 유형이 자동 애니메이트인 탭 트리거로 설정합니다.
   

인터랙션 연결을 완료하면 프로토타입을 미리 보고 인터랙션을 확인합니다.

예 2: 프로토타입 재생

XD에서 여러 비디오를 연속적으로 재생하는 방법을 알아봅니다.

Ex 2-artboard 1

1. 디자인 모드에서 Intro 비디오를 가져와 소개 섹션에 배치합니다. 이를 재생 안 함으로 설정합니다.
   
2. Tip 1 및 Tip 2 비디오를 가져와서 팁 섹션에 배치합니다. 이를 재생 안 함으로 설정합니다.
3. 모든 비디오에 재생 버튼(아이콘 섹션에 있음) 사본을 배치합니다.
4. 프로토타입 모드에서는 다음을 따릅니다.

• Intro 비디오의 재생 버튼을 Ex 2-artboard 2에 연결합니다.
  
•  Tip 1 비디오의 재생 버튼을 Ex 2-artboard 3에 연결합니다.
  
• Tip 2 비디오의 재생 버튼을 Ex 2-artboard 4에 연결합니다. 

이를 모두 작업 유형이 전환인 탭 트리거로 설정합니다.

Ex 2-artboard 2

1. 디자인 모드에서 Intro 비디오를 가져와 팁 섹션 위에 배치합니다. 이를 자동 재생으로 설정합니다.
2. 프로토타입 모드에서 비디오를 Ex 2-artboard 3에 연결하고, 이를 작업 유형이 전환인 재생 종료 트리거로 설정합니다.
   

Ex 2-artboard 3

1. 디자인 모드에서 Tip 1 비디오를 가져와 팁 1 섹션 위에 배치합니다. 이를 자동 재생으로 설정합니다.
   
2. 프로토타입 모드에서 비디오를 Ex 2-artboard 4에 연결하고, 이를 작업 유형이 전환인 재생 종료 트리거로 설정합니다.
   

Ex 2-artboard 4

1. 디자인 모드에서 Tip 2 비디오를 가져와 팁 2 섹션 위에 배치합니다. 이를 자동 재생으로 설정합니다.
2. 프로토타입 모드에서 비디오를 Ex 2-artboard 1에 연결하고, 이를 작업 유형이 전환인 재생 종료 트리거로 설정합니다.
   

인터랙션 연결을 완료하면 프로토타입을 미리 보고 인터랙션을 확인합니다.

추가 예

비디오, Lottie 애니메이션 및 구성 요소 상태에 관한 추가 예에 대해 알아보십시오.

추가 예

자세히 알아보기

XD에서 비디오를 사용해 작업하는 데 대한 몇 가지 전문가 팁을 알아보려면 이 2분 길이의 비디오를 시청하십시오.

관련 리소스

• 인터랙티브 프로토타입 제작
  
• 음성 명령 및 재생을 사용하여 프로토타입 제작
  
• Lottie 애니메이션을 사용하여 작업

질문이나 아이디어가 있습니까?