모두 안녕하세요. 저는 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로 수행할 수 있는 작업의 극히 일부에 불과합니다. 향후 튜토리얼에서 많은 사용 사례를 추가로 다룰 예정입니다. 하지만 마무리를 하기 전에, 여기 전체 경험을 살펴보겠습니다. 즐거운 작업이 되길 바랍니다.