ProtoPie 루핑 애니메이션 만들기 <2편>
ProtoPie, Infinite Paging Scroll
Free Your Ideas, ProtoPie
프로토타이핑 기술을 향상시킬 수 있는 ProtoPie 팁 시리즈의 세 번째 팁을 소개합니다. 이번에는 지난 Rotate와 Move Looping에 이어 Infinite Paging Scroll에 대해 알아보겠습니다.
Infinite Paging Scroll
(무한 스크롤)이란?
무한 스크롤(Infinite Paging Scroll)이란 위 예시처럼 페이지를 좌우로 끊임없이 슬라이드 하는 것을 말합니다.
Infinite Paging Scroll의
작동 원리는?
먼저, ProtoPie의 기본적인 기능 중 하나인 Paging Containers를 사용해 3개의 페이지를 하나로 그룹화시켜야 합니다. Paging Container에 대해 궁금하다면 Scroll & Paging tutorial을 통해 확인하시기 바랍니다.
① 3 페이지를 왼쪽으로 슬라이드하면 다시 1 페이지가 나와야 하므로, 1 페이지를 복사하여 3 페이지 바로 뒤에 붙입니다.
② 3 페이지에서 4 페이지(1 페이지의 복사본, 이하 1' 페이지)로 스크롤하는 순간, 4개의 페이지가 모두 되돌아가 1 페이지가 화면에 나타납니다. 즉, 사용자는 4 페이지로 넘기면 복사한 1'페이지를 인식하지 못하고 바로 원래의 1 페이지를 확인하게 됩니다.
③ 마찬가지로 1 페이지를 오른쪽으로 슬라이드 할 때 3 페이지가 나와야 하므로 1 페이지의 왼편에 3 페이지의 복사본(이하 3' 페이지)을 붙여 넣습니다.
3' 페이지가 paging container의 가장 왼편에 위치하면, 스크롤이 시작되는 첫 번째 페이지가 3' 페이지로 변경됩니다. 그러므로 Paging을 중간에서부터 시작하는 방법을 활용해 스크롤이 1 페이지에서부터 시작될 수 있도록 설정해줍니다.
④ 위의 화면처럼 3' 페이지가 화면의 중앙에 위치했을 때 3 페이지로 스크롤 되기 때문에 계속 좌우로 끊임없이 슬라이드 할 수 있게 됩니다.
ProtoPie에서
무한 스크롤 만들기
이와 같이 Infinite Paging Scroll(무한 스크롤)을 만들기 위해서는 Range trigger와 Scroll response를 사용해야 합니다.
① 예시에서 1' 페이지 중앙의 distance(scroll offset)는 750입니다. 그러므로 Rang trigger를 선택한 후
scroll offset을 749.5 ~ 750.5로 설정하고,
Scroll response를 사용하여 187.5(1 페이지의 scroll offset)를 입력하면 1' 페이지에서 1 페이지로 scroll 됩니다.
② 동일한 방법으로 3' 페이지 중앙의 distance(scroll offset)는 0이므로, Range trigger를 선택하여 scroll offset을 -1 ~ 1로 설정하고,
Scroll response에는 562.5 (3 페이지의 scroll offset)를 입력하면 됩니다.
여기서는'Range trigger가 1 페이지에서 ±0.5, 3' 페이지에서는 ±1로 다르게 설정되었지만 숫자를 같게 설정해도 문제는 없습니다. 숫자가 너무 차이가 나지 않는다면 기본적인 효과는 같게 나타납니다.
오늘 소개한 Infinite Paging Scroll이 어렵다면 위의 링크를 통해 pie file을 다운로드하고 조금 더
자세하게 확인해보시기 바랍니다.
