Matt Rae의 아트워크
Adobe XD는 이미지 및 벡터 그래픽에서 음악 및 오디오 파일에 이르기까지 다양한 유형의 미디어를 지원하여 놀라운 디지털 환경을 디자인하고 프로토타이핑 작업을 쉽게 수행할 수 있습니다.
이 안내서에서는 비디오와 Lottie 두 가지 미디어 유형을 활용하여 TikTok과 Instagram Reels와 유사한 소셜 비디오 공유 애플리케이션의 프로토타입을 제작하는 방법을 배웁니다. 시작 파일을 다운로드하고 Adobe XD에서 열어 이 튜토리얼에 따라 수행합니다.
Adobe XD에 비디오 및 Lottie 추가
튜토리얼을 시작하기 전에 Adobe XD 내에서 비디오 및 Lottie 미디어가 작동하는 방식을 이해하는 것이 좋습니다. 이미지와 벡터 그래픽처럼 비디오와 Lottie 파일은 컴퓨터의 파일 시스템에서 캔버스로 드래그할 수 있습니다. 캔버스에서 파일을 제자리에 배치하고 [디자인] 모드의 [속성 관리자] 내에서 설정을 조정할 수 있습니다.
이미지와 동일한 방식으로 이러한 유형의 파일 중 하나를 벡터 형태나 경로로 드래그하면 형태의 경계 내에 파일이 자동으로 마스크되므로 자리 표시자 형태를 비디오와 Lottie 내용으로 쉽게 채울 수 있습니다. 와이어프레임 레이아웃을 고화질 에셋으로 채울 때 매우 유용합니다. 비디오 또는 Lottie 파일이 형태에 추가되면, 마스크를 두 번 클릭하여 마스크 내에서 파일 위치를 조정할 수 있습니다.
Adobe XD는 현재 15MB 이하의 MP4 비디오 파일을 지원하여 속도와 성능을 최적화합니다. Lottie 파일은 JSON 포맷이 허용되며 LottieFiles에서 다운로드하거나 Adobe After Effects에서 After Effects용 LottieFiles 플러그인을 사용하여 내보낼 수 있습니다.
위에 제공된 시작 파일에는 이 튜토리얼 프로젝트에서 사용할 수 있는 비디오 및 Lottie 파일이 여러 개 있는 폴더가 있습니다.
제공된 시작 파일에는 짧은 비디오 클립을 검색하기 위해 모바일 비디오 환경을 디자인하고 프로토타입화하는 데 사용할 에셋, 구성 요소 및 UI 요소가 다수 포함되어 있습니다. 이 안내서에서는 비디오 및 Lottie 파일을 추가하는 데 중점을 두고 있으므로 이미 여러 페이지가 배치되어 작업할 준비가 되어 있습니다.
앱 로그인 플로우 만들기
처음 제작할 경험은 로그인 플로우입니다. 여기서 사용자는 이 모바일 경험을 통해 자신의 여정을 시작할 것입니다. 이 플로우는 시작 화면에서 애니메이션 효과가 적용된 앱 로고로 시작된 다음 백그라운드에 비디오 자동 재생이 포함된 로그인 시퀀스로 진행합니다.
애니메이션 앱 로고
먼저 문서 에셋 패널에서 [애니메이션 로고] 구성 요소를 찾은 다음 인스턴스를 첫 번째 화면으로 드래그하여 아트보드 중간에 있는 자리 표시자 사각형을 바꿉니다. 이 구성 요소에는 After Effects에서 만들어 Adobe XD로 가져온 Lottie 파일이 포함되어 있습니다.
로고 애니메이션이 자동으로 재생되도록 하려면 [속성 관리자]에서 재생 설정을 업데이트해야 합니다. [인터랙티브 미디어] 섹션의 드롭다운 메뉴에서 [Play automatically]을 선택합니다. 디자인을 미리 보기 하면 미리 보기 창이 열리며 Lottie 애니메이션이 자동으로 재생됩니다.
이 로고 애니메이션은 앱 로드를 시뮬레이션하므로 애니메이션이 완료되면 프로토타입이 다음 화면으로 진행되어야 합니다. 이렇게 하려면 Lottie 애니메이션을 다시 선택하고 [프로토타입] 모드로 전환합니다. 인터랙션 메뉴에서 +를 선택하고 [End of Playback] 트리거를 사용하여 새 인터랙션을 추가합니다. 이러한 인터랙션이 애니메이션을 자동으로 재생하도록 트리거하므로 [Time] 트리거를 재정의하지 마십시오.
트리거로 [End of Playback]을 선택한 상태에서 대상을 로그인 플로우의 첫 번째 화면(Home Screen Loading)으로 설정합니다. 이렇게 하면 애니메이션이 완료된 후 프로토타입을 진행할 수 있습니다.
배경 비디오
다음 단계는 비디오 파일을 등록 플로우의 배경으로 추가하는 것입니다. 이 등록 플로우에는 여러 화면이 있으므로 한 화면에서 배경을 설정한 다음 복사하여 다른 화면에 붙여넣는 것이 좋습니다.
첫 번째 화면의 [레이어] 패널에서 [비디오 자리 표시자] 레이어를 선택하고 스택의 맨 위로 이동합니다. 이렇게 하면 비디오를 더 쉽게 추가할 수 있으며 키보드 단축키를 사용하여 수행할 수 있습니다. 그런 다음 샘플 파일 폴더에서 HomeScreen.mp4 파일을 드래그하여 사각형 모양에 배치합니다(사각형이 파란색으로 바뀌면 해제).
사각형을 두 번 클릭하여 필요에 따라 마스크를 조정합니다. 만족하는 위치에서 [속성 관리자]로 이동하여 비디오 설정을 엽니다. 이 경우 비디오가 반복되어야 하므로 [반복] 토글을 클릭하여 활성화합니다. 비디오 설정 드롭다운 메뉴에서 [Play Automatically]을 선택합니다.
이제 이 비디오 요소를 클립보드에 복사한 다음 등록 플로우의 나머지 아트보드를 선택하고 붙여넣습니다(XD는 선택한 모든 아트보드에 자동으로 붙여넣음).
마지막으로 각 인스턴스를 각 아트보드의 레이어 스택 뒤쪽으로 옮깁니다(이 작업은 키보드 단축키 ‘Shift + [’로 수행할 수 있음). 이 등록 플로우의 아트보드는 이미 자동 애니메이트와 연결되어 있으므로 미리 보기에서 클릭하면 비디오가 자동으로 재생되고 프로토타입이 탐색되는 동안 계속 재생된다는 것을 알 수 있습니다. 마지막 두 대지에서 비디오가 화면에 표시되지 않도록 비디오 재생을 [No Playback]으로 설정합니다.
로드 표시기 만들기
등록이 완료되면 앱이 로드되어 앱의 홈 페이지로 전환되는 것처럼 표시됩니다. 이렇게 만들기 위해 등록과 홈 사이에 다른 Lottie 애니메이션을 화면에 추가할 수 있습니다.
App Loading이라는 이름의 아트보드에서 Loading Indicator Lottie 파일을 문서 에셋에서 자리 표시자 사각형으로 드래그합니다. 애니메이션 로고와 동일한 방법으로 애니메이션을 [Play Automatically]로 설정하고 재생이 완료되면 Mid Phase 아트보드로 이동합니다. 그러면 홈 화면으로 자동 전환됩니다.
이전 화면에서 부드럽게 전환하려면 등록 플로우의 마지막 화면에 로드 표시기 사본을 배치하되 크기를 줄이고 불투명도를 0%로 설정합니다. 자동 애니메이트으로 페이지 전환이 발생하면 재생이 시작될 때 로드 표시기가 확장되는 것처럼 나타납니다.
세로 비디오 캐러셀 만들기
등록 플로우가 완료되면 애플리케이션의 기본 홈 화면을 완성할 수 있습니다. 이 화면은 재생이 완료되면 다음 비디오로 스크롤되는 세로 비디오 캐러셀 같은 기능을 합니다. 이 캐러셀은 인터랙티브 요소를 만들기 위해 Adobe XD를 사용하는 이미지 기반 캐러셀과 유사하게 만들어집니다. 그러나 이 경우 비디오 재생이 제어되어 한 번에 하나의 비디오를 재생하고 비디오가 완료되면 캐러셀이 자동으로 진행됩니다.
비디오 구성 요소 만들기
이 요소의 구성 요소는 이미 만들어져 있습니다. 연습 파일의 구성 요소 섹션에서 [Main Component]를 찾으십시오. 피드에 포함할 네 개의 비디오 각각에 대한 인스턴스가 생성되었습니다.
먼저 [Post Element]라는 첫 번째 인스턴스를 선택하고 이전과 같이 자리 표시자 이미지 사각형을 선택합니다. 에셋 폴더에서 비디오 Berg.mp4를 드래그하여 원하는 대로 마스크를 조정합니다. 구성 요소의 각 상태에서 다른 설정을 조정할 수 있으므로 다른 설정은 아직 조정하지 마십시오.
페이지에 있는 다른 세 개의 인스턴스와 함께 이 단계를 반복하여 비디오 Walk.mp4, Dive.mp4, River.mp4를 각 비디오 자리 표시자 중 하나에 추가합니다.
마지막으로 이러한 각 비디오 요소를 다른 요소 위에 세로로 쌓아 구성 요소로 컴파일하고 [비디오 피드]라는 구성 요소를 구성합니다.
이 비디오 피드의 경우 다음 비디오로 진행되는 드래그 동작이 있으며 비디오 재생 종료 시 자동으로 진행됩니다. 이를 위해 구성 요소 상태를 사용하는 대신 개별 아트보드를 사용하고, 구성 요소의 위치는 어떤 비디오가 재생되는지에 따라 위아래로 이동하기만 하면 됩니다.
컴파일된 구성 요소 위치
먼저 컴파일된 구성 요소의 인스턴스를 가져와(각각 재정의가 있으므로) 홈 피드의 첫 번째 아트보드에 배치합니다. 대괄호 키보드 단축키 또는 [레이어] 패널을 사용하여 레이어 스택의 맨 아래에 배치하고 구성 요소의 맨 위(스택의 첫 번째 비디오)가 가장 상단에 위치하는지 확인합니다.
그런 다음 구성 요소를 두 번 클릭하고 첫 번째 비디오의 비디오 재생을 [Play Automatically]로 설정합니다. 각 아트보드에 대해 보기의 비디오만 [Play Automatically]로 설정해야 하므로 이러한 변경 내용을 주 구성 요소가 아닌 컴파일된 구성 요소의 인스턴스에 적용해야 합니다.
비디오 인터랙션 프로토타입
마지막으로 비디오를 함께 연결하기 위해 각 비디오에 대해 두 개의 인터랙션을 만듭니다. 첫 번째 인터랙션은 비디오 자체에서 수행됩니다. 첫 번째 비디오의 [레이어] 패널에서 비디오를 선택합니다. [프로토타입] 모드에서 Playback End 트리거 및 시리즈의 다음 아트보드의 대상과 새로운 인터랙션을 설정합니다. 자동 애니메이트를 작업 유형으로 사용하고 원하는 수준을 선택합니다. 이 인터랙션은 첫 번째 비디오 재생이 완료되면 자동으로 다음 비디오로 이동합니다.
비디오가 길거나 사용자가 건너뛰고 다음 비디오로 이동하려는 경우 [드래그] 인터랙션을 추가할 수 있습니다. 이렇게 하려면 컴파일된 비디오 구성 요소 자체를 선택하고 [프로토타입] 모드에서 [드래그] 트리거와의 인터랙션을 추가합니다. 자동 애니메이트를 다시 사용하고 시리즈의 다음 아트보드를 선택합니다. 이제 사용자가 비디오 컴포넌트를 드래그하여 위로 올리면 프로토타입은 비디오가 위로 스크롤되어 다음 비디오로 진행되도록 애니메이션을 만듭니다.
나머지 애플리케이션 연결
비디오가 포함된 추가 아트보드를 캔버스에서 사용할 수 있습니다. 제공된 이러한 에셋을 사용해 보고 프로필 페이지에서 비디오 세부 정보 보기를 만들거나, 자신만의 에셋을 만들어 비디오 애플리케이션 환경을 완성해 보십시오.
Adobe XD를 사용한 프로토타입 제작에 대해 자세히 알아보고, 이 프로토타입 제작 튜토리얼을 통해 이와 같은 다른 경험을 만드는 방법에 대해 알아봅니다.
