사용 안내서 취소

스크롤 가능 아트보드 제작

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

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

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

스크롤 가능 아트보드

세로 스크롤 만들기

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

    점선 및 스크롤 가능 콘텐츠
    점선 및 스크롤 가능 콘텐츠

  2. 디자인 모드의 속성 관리자에서 다음 옵션을 선택하십시오.

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

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

    맞춤형 크기 아트보드에서의 세로 스크롤
    아트보드에서의 세로 스크롤

  3. 프로토타입 모드에서 아트보드를 와이어 연결합니다.

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

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

    스크롤 시 위치 고정
    스크롤 시 위치 고정

  5. 아트보드를 미리 보려면 데스크탑 미리보기  를 선택합니다. 미리보기 창을 드래그하여 세로 스크롤을 확인합니다.

예제 및 샘플 파일

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

팁 및 요령

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


관련 리소스

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

커뮤니티에 질문하기

질문이 있거나 아이디어를 공유하고 싶다면 Adobe XD 커뮤니티에 참여하십시오. 소중한 의견과 다양한 작품 활동을 기대하겠습니다.

쉽고 빠르게 지원 받기

신규 사용자이신가요?