오버레이 추가

마지막 업데이트 날짜 2022년 2월 17일

인터랙티브 슬라이드 효과를 시뮬레이트하기 위해 오버레이를 추가하는 방법에 대해 알아봅니다.

Adobe XD를 사용하면 여러 장의 아트보드에 중복되지 않고 다른 아트보드 위에 콘텐츠를 쌓아 드롭다운 목록, 슬라이드업 키보드 등의 효과를 시뮬레이트할 수 있습니다.

디자인 모드에서 소스 아트보드와 여기에 오버레이로 사용할 다른 아트보드를 선택합니다. 오버레이 아트보드는 여러 번 재사용할 수 있습니다.

프로토타입 모드에서 소스 아트보드로부터 커넥터를 드래그하여 오버레이 콘텐츠가 있는 아트보드에 드롭합니다. 커넥터를 클릭하여 속성 관리자에 표시되는 인터랙션 패널을 확인하고 다음 옵션을 설정합니다.

트리거: 옵션을 선택합니다.
액션: 오버레이를 선택합니다.탭과 같은 단일 트리거에 두 가지 액션을 할당하려면 속성 관리자에서 첫 번째 액션 + 버튼을 오버레이로 설정하고, 두 번째 액션 + 버튼은 오디오 재생이나 음성 재생
과 같은 비전환 액션으로 설정하세요.
애니메이션: 애니메이션 유형을 선택합니다. 위로 슬라이드 또는 아래로 슬라이드를 선택하면 XD가 자동으로 오버레이를 소스 아트보드의 가장자리에 배치합니다.
이징: 이징 효과를 시뮬레이트할 옵션을 선택합니다.
지속 시간: 지속 시간을 입력합니다. 전환하는 두 개의 아트보드 사이에서 설정할 수 있는 최대 지속 시간은 5초입니다.

소스 아트보드에서 오버레이의 위치를 조정하려면 녹색 위치 손잡이(+)를 클릭하고 드래그하고 드롭합니다.

지원되는 브라우저에서 오버레이를 미리 보려면 를 클릭합니다.

중첩된 오버레이

Adobe XD는 다른 오버레이 위에 오버레이를 적용한 중첩된 오버레이를 지원하지 않습니다. 이러한 경우 첫 번째 오버레이 아트보드를 다른 아트보드에 연결하면 두 번째 오버레이가 안쪽으로 전환되기 전에 첫 번째 오버레이가 바깥쪽으로 전환됩니다.

배경 흐림 효과를 사용하여 인터랙티브 오버레이를 제작하려면 다음 단계를 따르십시오.

소스 아트보드와 배경 흐림 효과가 있는 오버레이 아트보드를 선택합니다. 배경 흐림 효과를 추가하는 방법에 대한 자세한 내용은 XD에서 흐림 효과를 사용하여 작업을 참조하십시오.
프로토타입 모드로 전환하여 소스 아트보드를 오버레이 아트보드에 와이어 연결합니다.
속성 관리자에서 다음 옵션을 선택합니다.
- 트리거: 탭을 선택하세요.
- 액션: 오버레이를 선택합니다.
- 애니메이션: 디졸브를 선택하세요.
- 이징: 서서히 끝내기를 선택합니다.
- 지속 시간: 0.2초를 입력합니다.
오버레이 아트보드에 최대한 다양한 소스 아트보드를 와이어 연결하십시오.
효과를 미리 보려면 데스크탑 미리보기를 사용합니다.

자세한 튜토리얼 및 다운로드 가능한 샘플 파일은 인터랙티브 오버레이 만들기를 참조하십시오.

오버레이를 사용하여 슬라이드 인 드롭다운 목록 효과를 만드는 방법에 대해 알아보시겠습니까? 이 예제의 끝에 있는 튜토리얼을 시청하고 다음 단계를 따르십시오.

XD의 오버레이에 대해 자세히 알아보려면 이 비디오를 시청하세요.
시청 시간: 10분

또한 XD 커뮤니티를 통해 더 많은 튜토리얼 및 샘플 파일을 구할 수 있습니다.

앱에서 바로 단계별 비디오 튜토리얼과 실습형 안내를 통해 학습하십시오.

전문가들과 토론하고, 답변을 찾고, 배우며, 여러분의 지식을 공유하세요.

즐겨 사용하는 Creative Cloud 앱, 서비스, 파일 관리 등에 액세스하세요.