ProtoPie Chain으로
패럴랙스 스크롤 구현하기
ProtoPie, ProtoPie 팁, 프로토타이핑
Free Your Ideas, ProtoPie
최근 몇 년 사이 'parallax'는 웹사이트와 모바일 앱의 트렌드가 되었습니다. 패럴랙스 스크롤링 효과는 웹 사이트의 배경이 전경보다 느린 속도로 스크롤 되는 것인데요. 이는 웹사이트의 2d 화면을 깊이 있어 보이게 합니다.
오늘은 Chain Trigger를 사용하여 패럴랙스 스크롤링 효과를 만드는 방법에 대해 알아보겠습니다.
무엇을 배우게 될까요?
아래 세 가지를 배우고 나면, 위와 같이 만들 수 있을 거예요.
1. Parallax의 작동 방법
2. 스크롤 가능한 화면을 만들기 위한 scroll container 만들기
3. 배경 요소에 다른 속도를 설정하기 위해 chain 사용하기
프로토타입 시작하기 / 완성된 프로토타입 확인하기
어떻게 Parallax가
작동하는지 이해하기
프로토타입을 제작하기 전에, 패럴랙스 스크롤링이 어떻게 작동하는지 이해하고, 패럴랙스 스크롤링 효과를 최적화하기 위한 레이어를 구성해 보겠습니다.
어떻게 작동하나요?
2D 속에서 스크롤 하더라도 깊이 있어 보이려면, 모든 요소가 다른 속도와 시간으로 움직이게 하여 parallax 효과를 내야 합니다. 실제로 가장 멀리 있는 물체는 가장 적게 움직이는 것처럼 보입니다.
레이어 구조 프로토타입 하기
패럴랙스 스크롤링을 위해, 각각의 요소를 모두 다른 레이어에 배치하여 개별적으로 속성을 조정해야 합니다. Asset 파일에서 이미지 파일들이 어떻게 서로 다른 레이어에 배치되었는지 확인하세요.
단계별 설명
1. 스크롤 가능한 화면을 위해 scroll container 만들기
① 다른 레이어들의 parallax movements를 위해 scroll container가 필요하므로, 전체 화면 크기(1440*900)의 scroll container를 추가합니다.
② Others 레이어와 Front 레이어가 scroll container와 함께 움직일 수 있도록, 이 두 가지 레이어를 scroll container 안으로 드래그합니다.
Preview를 클릭해 페이지를 위아래로 스크롤 해도 parallax 효과는 아직 볼 수 없습니다. Chain trigger에 아무런 response를 추가하지 않았기 때문입니다.
· 팁 : Preview에서 스크롤이 되지 않는다면, Scrolling Paging 레이어 속성을 Scroll로 설정하고, 방향은 vertical(세로)로 설정하세요.
2. Chain을 사용하여 배경 요소에 다른 속도 설정하기
Chain Trigger 사용하기
Chain은 다른 레이어의 속성 변화에 따라 레이어의 속성을 바꿀 수 있는 conditional trigger입니다. 예를 들어 상단 이미지에서 초록색 상자를 위아래로 드래그하면 빨간색 상자의 크기가 바뀝니다. ProtoPie에서는 빨간색 상자와 초록색 상자의 Y range에 "Chain" 적용할 수 있기 때문입니다.
패럴랙스 스크롤링을 위해 scroll container의 scrolling position에 요소들의 위치를 "chain" 할 것입니다.
① Scroll container에 chain trigger를 추가합니다.
② Parallax의 법칙에 따라, 스크롤 할 때 가장 멀리 있는 물체가 가장 적게 움직이도록 해야 합니다.
· Assets 파일에서는 Front 레이어가 가장 가까이 있고, Sky 레이어가 가장 멀리 있습니다. Front 레이어가 scroll container 안에 있기 때문에, Front 레이어에는 chain response를 추가할 필요가 없습니다.
· Second 레이어를 선택하고, chain trigger 아래에 move response를 추가합니다. 그리고 scroll range를 0부터 900까지 설정하고, Y range를 525부터 -225까지 설정합니다.
· 이 숫자들은 유저가 0부터 900까지의 픽셀을 스크롤 할 때, Second 레이어가 750픽셀만큼 이동한다는 뜻으로, 이는 시작 위치인 525와 레이어의 끝 위치인 -225 사이의 거리입니다.
· 팁 : 레이어의 시작 위치와 끝 위치는 자유롭게 설정할 수 있지만, 좋은 패럴랙스 스크롤링 효과를 원한다면 scroll range 사이에 있어야 한다는 것을 명심하세요. 레이어는 스크롤과 함께 이동하는 것이 아니라, 조금 드래그 되어야 합니다.
③ 동일한 방법으로 다른 레이어에 move response를 설정하세요.
시각적으로 레이어가 멀리 있을수록 움직이는 거리는 짧아집니다. 레이어의 이동 거리가 점차 줄어들도록 설정하세요.
완성
이제 preview를 클릭해 프로토타입에서 패럴랙스 스크롤링 효과가 어떻게 보이는지 확인하세요. 직접 실행해 보며 직접 만든 섬세한 애니메이션을 즐겨보시기 바랍니다.
오늘은 parallax가 무엇인지 알아보고, parallax 효과를 어떻게 만드는지, chain trigger를 어떻게 사용하고, 어떻게 response를 설정하는지까지 알아보았습니다.
가장 중요한 것은, 이제 ProtoPie에서 패럴랙스 스크롤링 효과를 만들 수 있다는 것입니다.
