스크롤 가능 아트보드를 제작하는 방법에 대해 알아봅니다.

XD 디자인을 제작할 때 아트보드의 길이가 콘텐츠에 비해 짧은 경우가 있을 수 있습니다. 아트보드를 더 길게 만들고 디자인 요구 조건에 따라 옵션을 선택함으로써 아트보드를 세로로 스크롤하여 다양한 디바이스 크기를 수용할 수 있습니다.

세로 스크롤을 사용하면 스크롤 가능한 드롭다운 목록이나 웹 사이트를 디자인할 때 스크롤 효과를 시뮬레이션할 수 있습니다. 그러나 다중 패널 인터페이스, 맵 및 가로 이미지 갤러리를 디자인할 때 스크롤 그룹을 사용하여 새로운 수준의 인터랙션을 추가할 수 있습니다.

스크롤 가능 아트보드

세로 스크롤 만들기

  1. 사전 설정된 아트보드에서: 아트보드의 가장 낮은 지점을 아래로 드래그하여 디바이스 화면보다 길게 늘립니다. 점선은 스크롤 가능 콘텐츠의 시작 위치를 가리킵니다. 

    점선 및 스크롤 가능 콘텐츠
    점선 및 스크롤 가능 콘텐츠
  2. 디자인 모드의 속성 관리자에서 다음 옵션을 선택하십시오.

    • 스크롤링세로 또는 없음을 선택합니다. 
    • 스크롤 시 위치 고정: 요소가 현재 위치에 고정되도록 하여 콘텐츠와 함께 스크롤되는 것을 방지합니다. 
    • 뷰포트 높이: 아트보드가 표시될 뷰포트 높이를 지정합니다. 

    세로 스크롤 효과를 적용하여 아트보드의 내용을 위아래로 이동할 수 있습니다.

    맞춤형 크기 아트보드에서의 세로 스크롤
    아트보드에서의 세로 스크롤
  3. 프로토타입 모드에서 아트보드를 와이어 연결합니다.

  4. 프로토타입 모드의 속성 관리자에서 다음 옵션을 선택하십시오.

    • 스크롤 위치 유지: 다음 아트보드로 전환할 때 이전 아트보드에서의 위치를 유지합니다. 자세한 내용은 이 Twitter 게시물을 참조하십시오. 
    • 스크롤 시 위치 고정: 디자인 요소가 현재 위치에 고정되도록 하여 콘텐츠와 함께 스크롤되는 것을 방지합니다. 
    스크롤 위치 유지
    스크롤 위치 유지
    스크롤 시 위치 고정
    스크롤 시 위치 고정
  5. 아트보드를 미리 보려면 데스크탑 미리보기()를 선택합니다. 미리보기 창을 드래그하여 세로 스크롤을 확인합니다.

예제 및 샘플 파일

사전 설정된 아트보드를 사용하여 세로 스크롤이 가능한 드롭다운 목록을 제작하고자 하십니까?

  1. 선택 도구를 사용하여 아트보드 이름을 클릭하거나 해당 아트보드를 드래그합니다. 레이어 패널에서 아트보드 이름을 클릭하여 문서 창에서 선택할 수도 있습니다.
  2. 선택한 아트보드의 길이를 늘리려면 아트보드 아래쪽의 하단 포인트를 드래그합니다. 점선은 아트보드의 원래 높이를 나타냅니다.
  3. 아트보드에서의 스크롤링을 미리 보려면 데스크탑 미리보기 옵션을 사용하여 XD에서 바로 미리 볼 수 있습니다.

샘플 파일을 다운로드하여 직접 테스트해 보거나 다음 비디오를 통해 자세한 내용을 살펴보십시오.

시청 시간: 1분


데스크탑 또는 모바일용 디자인을 제작할 때 스크롤 시에만 웹 사이트의 일부가 표시되도록 하고 디자인 요소가 제자리에 고정되도록 만들고 싶으십니까? 이 비디오를 통해 스크롤 가능 아트보드 및 고정된 요소에 대해 자세히 알아보십시오. 

시청 시간: 1분


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

팁 및 요령

디자인에서 가로 스크롤 효과를 만들려면 스크롤 그룹을 사용하십시오. 스크롤 그룹을 사용하여 가로, 세로 또는 양방향으로 스크롤할 수 있는 콘텐츠 창을 프로토타이핑할 수 있습니다.

모범 사례

“스티키 헤더와 기타 고정된 요소는 마치 고속도로의 표지판과 같습니다. 저희는 지속적으로 해당 섹션에 관련 정보를 제공하고 요구에 대한 즉각적인 행동을 통해 고객을 지원할 예정입니다.”  - Oliver Lindberg. 블로그를 통해 스티키 헤더와 기타 고정된 요소의 디자인에 대한 모범 사례를 살펴보십시오.