스크롤 가능 아트보드를 만들고 아트보드의 해당 섹션으로 이동하는 방법에 대해 살펴보십시오.

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

세로 스크롤을 사용하면 스크롤 가능한 드롭다운 목록이나 웹 사이트를 디자인할 때 스크롤 효과를 시뮬레이션할 수 있지만, 가로 스크롤은 XD에서 지원되지 않습니다. 

앵커 링크는 프로토타입을 작업할 때, 특히 단일 페이지 웹 사이트를 디자인할 때 보다 나은 탐색 환경을 제공합니다. 탭 한 번으로 아트보드의 현재 섹션에서 다른 섹션으로 스크롤할 수 있습니다.

스크롤 가능 아트보드

세로 스크롤 만들기

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

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

    • 스크롤링세로 또는 없음을 선택합니다. 
    • 스크롤 시 위치 고정: 요소가 현재 위치에 고정되도록 하여 콘텐츠와 함께 스크롤되는 것을 방지합니다. 
    • 뷰포트 높이: 아트보드가 표시될 뷰포트 높이를 지정합니다. 
    맞춤형 크기 아트보드에서의 세로 스크롤
    아트보드에서의 세로 스크롤
  3. 프로토타입 모드에서 아트보드를 와이어 연결합니다.

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

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

  1. 프로토타입 모드에서 앵커 링크를 추가할 오브젝트를 선택합니다. 스크롤 위치를 액션으로 트리거할 해당 오브젝트의 연결을 드래그합니다. 속성 관리자에 표시되는 인터랙션 패널을 살펴봅니다.

    • 트리거: 자동으로 으로 설정됩니다.
    • 액션: 자동으로 스크롤 위치로 설정됩니다. 과 같은 단일 트리거에 두 개의 액션을 할당하려면 속성 관리자의 첫 번째 액션 + 버튼을 스크롤 위치로 설정하고 두 번째 액션 + 버튼을 오디오 재생 또는 음성 재생과 같은 비전환 액션으로 설정하십시오.
    • 대상: 와이어를 드롭한 오브젝트는 대상 드롭다운에서 레이어로 설정됩니다. 그러나 선택적으로 목록에서 다른 레이어를 선택하도록 할 수 있습니다.
    • Y 오프셋 : 와이어 연결된 오브젝트의 위쪽을 기준으로 y 오프셋 값을 입력합니다. 와이어 연결된 오브젝트 위쪽의 값은 음의 오프셋이고 아래쪽의 값은 양의 오프셋입니다. y 오프셋 핸들을 아트보드의 왼쪽으로 드래그하여 y 오프셋을 변경하도록 선택할 수 있습니다.
    • 이징: 이징 효과를 시뮬레이트할 옵션을 선택합니다.
    • 지속 시간: 지속 시간을 입력합니다. 전환하는 두 개의 아트보드 사이에서 설정할 수 있는 최대 지속 시간은 5초입니다.
    앵커 링크
    A. 트리거 유형 선택 B. 액션을 스크롤 위치로 선택 C. 대상 아트보드 선택 D. Y 오프셋 선택 
  2. 아트보드를 미리 보려면 데스크탑 미리보기()를 선택합니다. 트리거된 오브젝트를 클릭하면 앵커 링크가 아트보드의 스크롤 환경을 개선하는 데 어떤 도움을 주는지 살펴볼 수 있습니다.

예제 및 샘플 파일

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

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

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

시청 시간: 1분


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

시청 시간: 1분


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

팁 및 요령

프로토타입에 가로 스크롤 기능을 적용하고자 하십니까?

XD는 가로 스크롤 기능을 지원하지 않지만 대신 드래그 트리거를 통한 자동 애니메이트 기능을 사용하여 가로 스크롤을 시뮬레이션할 수 있습니다.

  1. 아트보드에서 가로로 스크롤하려는 요소를 그룹화하고 동일한 아트보드를 복제합니다.
  2. 새 아트보드에서 요소의 그룹을 복사하여 스크롤의 마지막 위치로 옮깁니다.
  3. 프로토타입을 와이어 연결하고 트리거를 에서 드래그로, 액션을 자동 애니메이트로 전환합니다.
  4. 미리보기 창을 드래그하여 적용된 가로 스크롤 효과를 확인합니다.

모범 사례

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

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책