스크롤 가능한 아트보드를 만들어 숨겨진 콘텐츠를 표시하는 방법을 살펴봅니다.

필요 항목

샘플 파일은 튜토리얼의 학습 내용을 연습하기 위해 사용할 수 있는 Adobe Stock 에셋입니다. 이 튜토리얼이 아닌 실제 프로젝트에 이 샘플 파일을 사용하려면 Adobe Stock에서 라이선스를 구매해야 합니다. 샘플 파일의 사용 약관을 살펴보려면 폴더에 있는 ReadMe 파일을 참조하십시오.

학습한 내용: 콘텐츠를 세로로 스크롤할 수 있도록 아트보드 크기를 조정하는 방법

XD에서 디자인을 만들 때 아트보드 높이가 콘텐츠에 맞지 않는 경우가 있습니다. 콘텐츠에 맞게 아트보드를 길게 만들면 다양한 디바이스 크기에 맞게 자동으로 세로로 스크롤할 수 있습니다.

아트보드 크기 조정

콘텐츠에 맞게 아트보드를 길게 만들려면 아트보드를 선택해야 합니다.

  • 선택 툴을 사용하여 아트보드 이름을 클릭하거나 아트보드 전체를 드래그합니다.
  • 레이어 패널에서 아트보드 이름을 클릭하면 문서 창에서 해당 아트보드가 선택됩니다.

선택한 아트보드를 길게 만들려면 아트보드의 아래 점을 아래로 드래그합니다. 점선은 아트보드의 원래 높이를 나타냅니다.

스크롤 미리 보기

아트보드에서 스크롤을 미리 보려면 데스크탑 미리 보기 옵션을 사용하여 XD에서 바로 미리 볼 수 있습니다.

  • 스크롤할 아트보드나 해당 아트보드의 콘텐츠가 선택된 상태에서 애플리케이션의 오른쪽 상단에 있는 데스크탑 미리 보기 버튼을 클릭합니다. 나타나는 창에서 선택한 아트보드가 표시됩니다. 나타나는 창의 크기는 선택한 아트보드의 크기에 따라 결정됩니다. 표시되는 아트보드 영역을 뷰포트 영역이라고 합니다.
  • 창을 클릭하고 드래그하여 아트보드를 세로로 스크롤합니다.
  • 데스크탑 미리 보기 창을 닫습니다.

스크롤 끄기

  • 속성 관리자의 스크롤 섹션에서 없음을 선택하여 아트보드의 스크롤을 비활성화할 수 있습니다. 디바이스의 뷰포트보다 큰 아트보드의 스크롤을 비활성화하면 아트보드 영역의 크기가 뷰포트 영역에 맞게 조정됩니다.

팁: 또한 아트보드의 스크롤이 활성화된 상태에서 뷰포트 영역의 세로 크기를 조정할 수 있습니다. 아트보드에서 점선 헤드를 드래그하면 위치가 변경됩니다.

 

이전 튜토리얼: 와이어프레임 키트 사용

 

이 페이지가 도움이 되었습니까?