스크롤 및 페이징 활용 사례
일반적인 시나리오에서 스크롤과 페이징을 효과적으로 사용하는 방법을 알아보세요. 모바일 및 데스크톱 애플리케이션을 위한 수직 및 수평 스크롤 뷰를 만드는 방법을 살펴보세요. 스크롤 속성을 올바르게 구성하고, 스크롤 관련 인터랙션에 적합한 트리거와 반응을 선택하는 방법에 대한 인사이트를 얻을 수 있습니다.
프로토타입을 직접 체험해보고 다운로드하여 인터랙션을 살펴보세요. 또한, 튜토리얼을 통해 각 프로토타입을 제작하는 단계별 프로세스를 이해해 보세요.
필요한 활용 사례를 찾아보세요.
소셜 미디어 앱 둘러보기
메시징 앱의 수직 스크롤
무한 루프 스크롤 캐러셀
휠 피커
가운데에서 시작하는 스크롤 및 페이징
무한 페이징 스크롤
소셜 미디어 앱 둘러보기
오늘날 대부분의 소셜 미디어 앱이 작동하는 방식과 마찬가지로, 수평 및 수직 스크롤을 만들어 다양한 프로필과 사진을 둘러볼 수 있습니다. 실제 앱과 유사한 UI(스크롤 끝부분의 여백)를 유지하기 위해 스크롤 뷰에 여백(margin)을 추가하는 방법을 알아보세요.
프로토타입을 직접 체험해 보세요.
이 프로토타입을 단계별로 만드는 방법을 알아보세요.
메시징 앱의 수직 스크롤
메시징 앱이나 이메일 수신함에서 메시지를 보려면 위아래로 스크롤하세요. 스크롤 컨테이너를 생성하고 사용자 정의 스크롤 시작 위치(예: 맨 아래부터 시작)를 설정하는 방법을 알아봅니다.
프로토타입을 직접 체험해 보세요.
이 프로토타입을 단계별로 만드는 방법을 알아보세요.
무한 루프 스크롤 캐러셀
온라인 쇼핑몰이나 비디오 스트리밍 플랫폼의 이미지 갤러리처럼 슬라이드쇼를 만들 수 있습니다. 페이징 컨테이너를 사용하여 캐러셀 뷰를 만드는 방법과, 변수를 사용하여 스크롤하는 동안 이미지 이름을 번갈아 표시하는 방법을 알아봅니다.
프로토타입을 직접 체험해 보세요.
이 프로토타입을 단계별로 만드는 방법을 알아보세요.
휠 피커
날짜, 시간 등을 선택할 수 있는 나만의 휠 피커를 만들어 보세요. 휠 피커를 사용하면 여러 선택 항목을 위아래로 아주 빠르게 스크롤할 수 있습니다. 특히 화면의 가용 공간을 초과하여 옵션 목록을 모두 표시할 수 없을 때 유용합니다.
프로토타입을 직접 체험해 보세요.
이 프로토타입을 단계별로 만드는 방법을 알아보세요.
가운데에서 시작하는 스크롤 및 페이징
페이지가 가운데에서 시작하여 좌우 양쪽으로 스크롤되도록 설정합니다. 이를 구현하기 위해 올바른 컨테이너 속성을 설정하는 방법을 알아봅니다.
프로토타입을 직접 체험해 보세요.
이 프로토타입을 단계별로 만드는 방법을 알아보세요.
무한 페이징 스크롤
페이지가 양방향으로 무한히 스크롤되도록 만듭니다. 페이징 컨테이너를 사용하여 페이지를 그룹화하고, 범위(Range) 트리거를 사용하여 무한 스크롤을 구현하는 방법을 알아봅니다.
프로토타입을 직접 체험해 보세요.
이 프로토타입을 단계별로 만드는 방법을 알아보세요.