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 페이지까지의 스크롤 거리를 입력합니다.

더 알고 싶은 내용이나 궁금한 점이 있다면 댓글로 알려 주세요.

ProtoPie 평생 무료로 사용하기

---

▼ ProtoPie 리뷰 더 살펴보기

[디자인베이스] 매력 넘치는 프로토파이의 기능들

[아폴로 그래픽] 어도비XD 호환 가능한 프로토파이

[못사] 게임 기획자의 프로토타이핑 툴