Adobe XD의 스크롤 그룹으로 나머지 아트보드에서 개별적으로 스크롤하는 아트보드 내의 영역을 정의하여 가로 또는 세로 스크롤 효과를 만들 수 있습니다. 스크롤 그룹은 이미지 슬라이드, 제품 슬라이더 또는 인터랙티브 맵과 같은 UI 요소를 디자인할 때 편리합니다.

XD에서 가로 및 세로 스크롤, 가로 스크롤과 세로 스크롤의 조합 스크롤 그룹을 사용하는 방법에 대해 알아보십시오.

XD의 디자인, 프로토타입 및 공유 모드에 대해 잘 알고 있어야 합니다.

제한 사항

디자인 사양에서는 스크롤 그룹이 작동하지 않습니다. 해결 방법으로 별도의 아트보드에 스크롤 그룹을 추가하고 디자인 사양의 일부로 이를 게시할 수 있습니다.

가로 스크롤 효과 만들기

가로 스크롤 기능을 사용하여 슬라이드를 프로토타이핑하시겠습니까? 이 애니메이션 일러스트레이션을 살펴보고 다음 단계에 따라 가로 스크롤 효과를 만드는 방법에 대해 알아보십시오.

1. 디자인 모드에서 스크롤 가능 그룹으로 변환할 오브젝트를 선택합니다.
   
2. 속성 관리자에서  아이콘을 클릭합니다. 뷰포트는 필요 시 바로 미리보기 환경을 제공하도록 크기가 자동으로 조정됩니다. macOS에서는 ⇧⌘H를, Windows에서는 Shift + Ctrl + H를 사용하여 가로 스크롤 효과를 만들 수도 있습니다.
   
3.  모든 가로 스크롤 효과를 미리 보려면 를 클릭합니다.
   

세로 스크롤 효과 만들기

세로 스크롤을 사용하여 슬라이드를 프로토타이핑하시겠습니까? 이 애니메이션 일러스트레이션을 살펴보고, 다음 단계에 따라 세로 스크롤 효과를 만드는 방법에 대해 알아보십시오.

1. 디자인 모드에서 스크롤 가능 그룹으로 변환할 오브젝트를 선택합니다.
   
2. 속성 관리자에서  아이콘을 클릭하여 위아래로 스크롤합니다. 뷰포트는 필요 시 바로 미리보기 환경을 제공하도록 크기가 자동으로 조정됩니다. macOS에서는 ⇧⌘V를, Windows에서는 Shift + Ctrl + V를 사용하여 세로 스크롤 효과를 만들 수도 있습니다.
   
3. 모든 세로 스크롤 효과를 미리 보려면 를 클릭합니다.
   

가로 및 세로 스크롤 효과 만들기

대화형 맵과 같이 모든 방향으로 스크롤할 수 있는 오브젝트를 만들 때 가로 스크롤 및 세로 효과의 조합이 유용합니다. 이 애니메이션 일러스트레이션을 시청하고 다음 단계를 따르십시오.

1. 디자인 모드에서 스크롤 가능 그룹으로 변환할 오브젝트를 선택합니다.
   
2. 속성 관리자에서  아이콘을 클릭합니다. 뷰포트는 필요 시 바로 미리보기 환경을 제공하도록 크기가 자동으로 조정됩니다. 또한 macOS에서는 ⇧⌘D를 사용하고 Windows에서는 Shift + Ctrl + D를 사용하여 가로 및 세로 스크롤 효과의 조합을 만들 수도 있습니다.
   
3. 전체 가로 및 세로 스크롤 효과를 미리 보려면 를 클릭합니다.
   

자세히 알아보기

이 비디오를 통해 XD의 가로 및 세로 스크롤 그룹에 대한 자세한 내용을 살펴보십시오.

시청 시간: 6분

팁 및 요령

XD에서 가로 및 세로 스크롤 효과를 만드는 방법에 대해 살펴보려면 다음 유용한 팁 및 요령을 참조하십시오.

• windows 및 웹에서 프로토타입을 미리 볼 때 트랙패드, 마우스 휠을 사용해 클릭하고 드래그하여 가로 및 세로 스크롤 효과를 모두 확인할 수 있습니다.
• macOS 미리보기에서 가로 및 세로 스크롤 효과를 모두 확인하려면 트랙패드, 마우스 휠, 클릭 및 드래그를 사용합니다.
• 스크롤 그룹을 구성 요소 상태 및 오버레이, 자동 애니메이트 및 스크롤 위치와 같은 작업 유형과 결합할 수 있습니다. 
• 패딩을 사용하여 스크롤 그룹에 더 나은 오프셋 컨트롤을 추가합니다.
• 디자인에 여러 수준의 스크롤을 만들 때 중첩된 스크롤 그룹을 사용합니다.

다음 단계

지금까지 가로 및 세로 스크롤 효과를 만드는 방법에 대해 살펴보았습니다. 한 단계 더 진행하여 인터랙티브한 프로토타입을 만들고 디자이너 또는 관계자와 공유하면서 피드백을 받는 방법에 대해 알아보십시오.

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