강사: Howard Pinsky
모두 안녕하세요. 저는 Adobe의 수석 XD 리더인 Howard Pinsky입니다. 오늘은 비디오와 Lottie 애니메이션을 프로토타입에 추가하여 새로운 수준으로 끌어올리는 방법에 대해 알아보겠습니다. 시작해봅시다.
여기 Adobe XD에 제가 설계한 게임 플랫폼이 있습니다. 이 경험을 더욱 생생하게 구현하기 위해 비디오와 Lottie 애니메이션을 추가해 보겠습니다. 홈 화면 상단에 멋진 대형 이미지가 있지만, 꽤 정적으로 느껴집니다. XD 프로젝트에 비디오를 추가하는 것은 사진과 매우 비슷합니다. 캔버스로 직접 드래그하거나 빈 모양으로 드래그하여 마스크할 수 있습니다. 추가하고 선택하면 [속성 관리자]에서 비디오 재생 옵션이 표시됩니다. 여기에서는 비디오가 재생되는 시점을 제어할 수 있을 뿐만 아니라 미리 보기가 시작될 때 자동으로 제어할 수 있습니다. 그러나 왼쪽에 있는 아이콘을 클릭하면 사용자 지정 섬네일 설정, 비디오 스크럽 및 미리 보기, 오디오 켜기/끄기, 잠시 후에 보여드릴 트림, 반복 재생 등 훨씬 더 많은 컨트롤이 포함된 HUD가 표시됩니다.
이제 비디오를 추가하고 재생 시점을 선택했으므로 미리 보기를 실행하면 실제로 실행되는 것을 볼 수 있습니다. 그리고 단 한 번 추가만으로 프로토타입은 완전히 새로워집니다. Lottie 애니메이션을 추가하기 전에 이 기능 구성 요소 내의 다른 상태 중 하나로 전환해 보겠습니다. 여기 자동으로 재생되는 다른 비디오가 있습니다. 하지만 미리보기에서 볼 수 있듯이, 비행기가 장면에 나오려면 몇 초가 걸립니다. 몇 분 전에 HUD를 잠깐 살펴보았을 때, 비디오를 다듬을 수 있는 방법이 있다고 말씀드렸습니다. 이 모드를 시작하면 핸들을 드래그하여 시작점과 끝점을 설정할 수 있습니다. 그리고 이 경우에는 동작이 시작되기 바로 전에 재생을 시작했으면 합니다. 그리고 모든 것이 설정되면 체크 표시로 이러한 변경 사항을 적용합니다. 트리밍은 비디오를 완전히 삭제하지 않으므로 언제든지 HUD로 돌아가 편집 내용을 조정하거나 취소할 수 있습니다.
기본 상태로 다시 전환하면 미리 보기를 한 번 더 시작합니다. 이제 두 번째 상태를 클릭하면 비디오는 자동으로 새로운 시작점에서 재생됩니다. 세 번째 비디오도 연결했습니다. 그리고 첫 번째로 돌아가면, 더 많은 정보를 보여주는 확장된 보기가 있습니다. 또한 자동 애니메이트 상태 사이에 있는 비디오는 중단 없이 계속 재생됩니다.
좋아요, Lottie를 보겠습니다. [커뮤니티] 화면에서 호버에 표시되는 구성 요소를 설정했습니다. 그리고 그 안에서, 애니메이션 이모지 선택기에 사용하고 싶은 추가 영역을 대략적으로 만들었습니다. 내용을 추가할 수 있도록 주요 구성 요소를 편집해 보겠습니다. 스택 그룹으로 넘어가서, 기존 레이어를 몇 번 빠르게 복제한 다음 Finder로 넘어가겠습니다. 여기서 Anna Movin이 ui8.net에서 만든 다양한 이모지의 사랑스러운 Lottie 애니메이션을 볼 수 있습니다. 비디오와 마찬가지로 Lottie 파일을 기존 Lottie 레이어로 직접 드래그하거나 캔버스로 바로 옮기거나 모양으로 마스킹하여 크기를 정의할 수 있습니다. 레이어를 선택하면 재생을 오른쪽으로 설정할 수 있습니다. 그리고 이 모든 것에 대해, 자동으로 재생되기를 원합니다. 여기서 한 가지 짚고 넘어가야 할 것은, 비디오와는 달리 왼쪽에 있는 아이콘은 반복을 엄격하게 제어합니다. 이러한 인터랙션을 위해 이렇게 할 것입니다. 완벽합니다.
이 구성 요소의 기본 상태로 다시 전환하면 [커뮤니티] 화면을 미리 볼 수 있습니다. 메시지 위에 마우스를 올린 다음 이모지 아이콘 위로 마우스를 가져가면 Lottie 애니메이션이 표시되고 실제로 움직이는 모습을 볼 수 있습니다.
전체 프로토타입을 보여드리기 전에, 일부 비디오와 Lottie 인터랙션을 자동화하는 데 도움이 되는 [End of Playback] 트리거에 대해 간단히 살펴보겠습니다. 앞서, 여러분에게 주요 구성 요소의 확장된 상태를 잠시 보여드렸습니다. 그리고 이 섹션에는 다운로드 상태로 이어지는 버튼이 있습니다. 여기 전환 직후 시작하는 Lottie 애니메이션을 포함시켰습니다. 하지만 여러분 스스로에게 물어볼 수 있는 질문은 애니메이션이 완료되면 어떤 일이 벌어질까 하는 것입니다.
프로토타입 모드로 전환하면 현재 [Time] 트리거가 연결되어 있지만 파란색 플러스 버튼을 클릭하여 두 번째 인터랙션을 추가할 수 있습니다. 이제 [속성 관리자] 내에서 [End of Playback] 트리거를 선택할 수 있습니다. 그러면 XD에서 비디오 또는 Lottie 애니메이션이 완료된 후 전환을 수행하도록 지시할 수 있습니다. 이 인터랙션을 위해서는 [재생] 상태로 이어지는 간단한 전환이 효과적일 것입니다. 이 트리거는 아트보드에서도 작동합니다. 동일한 구성 요소의 로드 상태에서 다른 Lottie 애니메이션을 추가했습니다. [Time] 트리거 외에도 [게임] 화면으로 이어지는 [End of Playback] 트리거가 있습니다. 물론, 이 모든 것이 실제로 일어나는 것을 보지 않고는 큰 의미가 없습니다. 다시 기본 상태로 돌아가 미리 보기를 시작하고 보기를 확장한 다음 [다운로드] 인터랙션을 시작합니다. [End of Playback] 트리거 덕분에 구성 요소가 [재생] 상태로 자동 전환됩니다. 여기서 클릭하면 애니메이션 로딩이 시작됩니다. 그리고 그것이 완료되면 아트보드 전환이 일어납니다.
이 몇 가지 예는 비디오와 Lottie로 수행할 수 있는 작업의 극히 일부에 불과합니다. 향후 튜토리얼에서 많은 사용 사례를 추가로 다룰 예정입니다. 하지만 마무리를 하기 전에, 여기 전체 경험을 살펴보겠습니다. 즐거운 작업이 되길 바랍니다.
모션 그래픽을 사용하여 프로토타입을 완전히 새롭게 만드세요. 이 튜토리얼에서는 비디오 및 Lottie 애니메이션으로 게임 플랫폼을 디자인하는 방법을 볼 수 있습니다. 비디오 및 Lottie 파일을 디자인 캔버스로 직접 드래그하거나 빈 모양에 마스크로 드래그합니다. [속성 관리자]에서 비디오 재생 옵션을 조정합니다. 섬네일, 스크럽, 미리 보기 비디오를 추가하고, 오디오를 활성화하고, 비디오 클립을 트리밍하고 재생을 반복할 수 있습니다. 자동 애니메이트 전환을 통해 인터랙션을 연결하고 중단 없이 비디오 재생을 시청할 수 있습니다. Lottie 애니메이션 재생이 완료되면 [End of Playback] 트리거를 사용하여 인터랙션을 수행하여 자동으로 다른 상태로 전환합니다.
