Scroll & Paging Use Cases

이 페이지에서는 스크롤 및 페이징을 사용한 다양한 예제를 확인할 수 있습니다. 가로 혹은 세로 스크롤 뷰 생성 방법을 알아보십시오. 스크롤 속성을 설정하는 방법이나, 스크롤 인터랙션에 맞는 Trigger/Response를 확인하실 수 있습니다.

원하는 프로토타입을 다운로드 받아 인터랙션을 직접 만들어보실 수 있습니다. 또한 튜토리얼을 통해 해당 프로토타입이 제작된 과정을 확인하실 수 있습니다.

다음은 이 페이지에서 찾을 수 있는 예제 목록입니다.

• Browsing through a social media app
• Vertical scroll in a messaging app
• Looping scroll carousel
• Wheel picker
• Scrolling & paging from the middle
• Infinite paging scroll

Browsing Through a Social Media app

여러 소셜 앱 기능처럼 가로 혹은 세로 스크롤 뷰를 생성할 수 있습니다. 프로필과 사진들을 스크롤할 수 있는 인터랙션을 확인할 수 있습니다.

해당 프로토타입을 직접 만들어보실 수 있습니다.

프로토타입 제작 과정을 튜토리얼로 확인해보십시오.

Vertical Scroll in a Messaging App

메시지 앱 혹은 이메일처럼 위아래로 스크롤하는 인터랙션을 제작할 수 있습니다. 스크롤 컨테이너를 생성하고 스크롤이 시작되는 위치를 설정하는 방법을 확인해보십시오.

해당 프로토타입을 직접 만들어보실 수 있습니다.

프로토타입 제작 과정을 튜토리얼로 확인해보십시오.

Looping Scroll Carousel

온라인 쇼핑 사이트나 비디오 스트리밍 플랫폼처럼 슬라이드쇼를 생성할 수 있습니다. 페이징 컨테이너를 이용한 캐러샐뷰 제작과 Variable 기능을 활용한 이미지 변환에 대해서 확인해보십시오.

해당 프로토타입을 직접 만들어보실 수 있습니다.

프로토타입 제작 과정을 튜토리얼로 확인해보십시오.

Wheel Picker

날짜나 시간을 선택할 수 있는 Wheel Picker를 생성할 수 있습니다. 여러 개의 옵션을 표시할 때 스크롤하여 보기를 선택할 수 있도록 인터랙션을 제작할 수 있습니다.

해당 프로토타입을 직접 만들어보실 수 있습니다.

프로토타입 제작 과정을 튜토리얼로 확인해보십시오.

Scrolling & paging from the middle

중앙 페이지에서 시작하여 좌우로 스크롤을 할 수 있도록 인터랙션을 제작할 수 있습니다. 이를 위한 컨테이너 속성을 설정하는 방법을 알아보십시오.

해당 프로토타입을 직접 만들어보실 수 있습니다.

프로토타입 제작 과정을 튜토리얼로 확인해보십시오.

Infinite Paging Scroll

페이지를 연속적으로 스크롤할 수 있는 인터랙션을 제작할 수 있습니다. 페이징 컨테이너를 이용해 페이지를 그룹화하고, Trigger의 범위를 설정하는 방법을 알아보십시오.

해당 프로토타입을 직접 만들어보실 수 있습니다.

프로토타입 제작 과정을 튜토리얼로 확인해보십시오.