by
Mar 31. 2021
ProtoPie카드 양옆으로 스크롤하는 인터렉션 만들기
ProtoPie, ProtoPie 강좌, 페이징, paging
Free Your Ideas, ProtoPie
프로토타이핑 기술을 향상시킬 수 있는 ProtoPie 팁, 오늘 소개할 내용은 카드 양옆으로 스크롤하는 인터렉션 만들기입니다.
Paging을 중간에서부터
시작하는 방법은?
ProtoPie는 어떤 방향으로든 쉽게 스크롤 하거나 페이지를 넘길 수 있는 scroll container를 만들 수 있습니다. 하지만 프로토타입 화면 중앙에 두 번째 페이지를 배치하면, 위처럼 오른쪽으로만 스크롤 됩니다.
이 때 중간 페이지에서 양쪽으로 paging하는 두 가지 방법을 보여 드리겠습니다.
#1
Start trigger 사용하기
Start trigger를 사용하면 프로토타입을 실행할 때 두 번째 페이지가 스크되어 화면에 먼저 나타납니다.
① Start trigger를 추가합니다.
② Scroll response를 추가하고 paging container를 object로 설정합니다.
③ 1 페이지에서 2 페이지까지의 스크롤 거리를 입력합니다.
④ Duration을 0으로 변경합니다.
위 예시에서는 1 페이지에서 2 페이지까지의 스크롤 거리가 화면 너비와 동일하므로 375를 입력합니다.
#2
컨테이너 속성 설정하기
두 번째 방법은 인터랙션을 추가할 필요가 없기 때문에 더 쉽습니다.
이 방법을 사용하면 2 페이지가 화면 중앙에서 시작하는 것을 볼 수 있습니다.
① Paging container를 선택합니다.
② Container property panel의 Scroll 필드에 1 페이지에서 2 페이지까지의 스크롤 거리를 입력합니다.
더 알고 싶은 내용이나 궁금한 점이 있다면 댓글로 알려 주세요.
