간단 요약
스크롤 뷰는 오늘날의 디지털 제품 곳곳에 있습니다. ProtoPie의 Scroll Container 덕분에 매끄러운 스크롤 경험을 빠르게 프로토타입할 수 있습니다. 이번에는 조금 다르게 해보고, 3D 같은 결과를 위해 스크롤 뷰에 깊이를 더해 보려고 했습니다. 복잡해 보일 수도 있지만, 사실 ProtoPie에서 이 효과를 만드는 것은 아주 쉽습니다. 필요한 것은 단 3가지입니다: Scroll Container, Chain 트리거, 그리고 몇 가지 3D 응답입니다. 어떻게 작동하는지 보여드릴게요!
배울 내용
이 단계별 튜토리얼에서는 다음을 배우게 됩니다:
Scroll Container를 사용해 세로로 스크롤 가능한 뷰를 만드는 방법.
Chain 트리거와 3D Rotate 응답을 사용해 스크롤 값에 따라 스크롤 경험에 깊이를 더하는 방법.
**완료 시간: ≤10분 **
마지막에는 이런 결과물을 만들 수 있게 됩니다!
단계별 안내
1부. Scroll Container를 사용해 세로로 스크롤 가능한 뷰 만들기
먼저 씬에 스크롤 뷰를 만들어 보겠습니다.
디자인 툴에서 카드 목록을 디자인한 뒤 ProtoPie로 가져오세요. 이 목록을 나중에 스크롤하게 됩니다. 각 카드 레이어의 속성 패널에서 Origin이 center로 설정되어 있는지 확인하세요.
Scroll Container를 추가한 뒤 크기를 조정해 전체 씬을 덮도록 하세요. 레이어 패널을 보기 좋게 정리하려면 Scroll Container의 이름을 바꾸세요(제 Pie 파일에서는 Scroll list입니다).
모든 카드 레이어를 선택한 다음 2단계에서 만든 Scroll Container로 드래그하세요. ProtoPie Studio 인터페이스 오른쪽에 있는 속성 패널에서 컨테이너가 세로로 스크롤되도록 설정되어 있는지 확인하세요. Scroll value는 0이어야 합니다.
Scroll value란 무엇일까요? ProtoPie에서 Scroll Container의 Scroll value는 Scroll Container가 스크롤을 시작해야 하는 x(가로 스크롤) 또는 y(세로 스크롤) 위치를 결정합니다.
2부. Chain과 3D Rotate로 3D 스크롤 효과 만들기
이제 Scroll Container에 깊이감과 3D 느낌을 더해, 더 독특한 스크롤 경험을 만들어 보겠습니다!
Scroll Container에 할당된 Chain 트리거를 사용하고 Scroll 속성을 선택하세요.
0에서 812의 y 위치까지 스크롤할 때 첫 번째 카드 레이어는 -200도에서 시작해 0도로 돌아올 때까지 3D 회전해야 합니다.
회전 방향은 “위쪽”으로 설정합니다.
축하합니다!
3D 회전을 사용해 스크롤되는 세로 목록을 만드는 방법을 배웠습니다.
