소개
최근 몇 년 사이, 패럴랙스는 웹사이트와 모바일 앱에서 하나의 트렌드가 되었습니다. 패럴랙스 스크롤 효과는 웹사이트의 배경이 전경보다 더 느린 속도로 스크롤되는 기법입니다. 그 목적은 웹사이트의 2D 장면 안에서 깊이감의 착시를 만드는 것입니다.
이 글에서는 ProtoPie에서 Chain 트리거를 사용해 패럴랙스 스크롤 효과를 만드는 방법을 알아보겠습니다.
배울 내용
패럴랙스가 작동하는 방식을 이해하기
스크롤 가능한 뷰를 만들기 위해 스크롤 컨테이너 만들기
배경 요소의 속도를 다르게 설정하기 위해 chain 사용하기
마지막에는 이런 것까지 만들 수 있게 될 거예요!
패럴랙스가 작동하는 방식 이해하기
프로토타입으로 들어가기 전에, 패럴랙스 스크롤이 어떻게 작동하는지 이해하고 패럴랙스 스크롤 효과를 최적화할 수 있도록 레이어 구조를 살펴보겠습니다.
어떻게 작동하나요?
패럴랙스 효과를 만들려면 각 요소가 서로 다른 속도와 시간으로 움직여야 합니다. 이렇게 해서 2D로 스크롤하더라도 깊이감이 있는 것처럼 보이게 됩니다.
경험칙상 가장 “먼” 객체일수록 가장 적게 움직입니다. 실제 세계에서 보이는 방식과 같습니다.
프로토타입 레이어 구조
패럴랙스 스크롤에서는 각 요소를 서로 다른 레이어에 배치해 속성을 개별적으로 조정해야 합니다. 에셋 파일을 살펴보고 이미지 에셋이 어떻게 분리된 레이어에 배치되어 있는지 확인해 보세요.
단계별 안내
1. 스크롤 가능한 뷰를 만들기 위해 스크롤 컨테이너 만들기
패럴랙스 움직임을 트리거하려면 scroll container가 필요합니다. 전체 화면 크기의 (1440900)* 스크롤 컨테이너를 추가해 봅시다.
Others와 Front 레이어를 스크롤 컨테이너 안으로 드래그하세요. 이 두 레이어가 스크롤 컨테이너와 함께 움직이도록 하려는 것입니다.
미리보기를 클릭해도 페이지를 위아래로 스크롤하더라도 아직은 패럴랙스 효과를 볼 수 없습니다. 그 이유는 chain 트리거에 대한 응답을 아직 추가하지 않았기 때문이며, 이제 그 작업을 해볼 것입니다!
💡 팁: 프로토타입 미리보기에서 스크롤 상호작용이 보이지 않는다면 Scroll Paging 레이어 속성을 Scroll로, direction을 세로로 설정하세요.
2. chain을 사용해 배경 요소의 속도를 다르게 설정하기
Chain Trigger 사용하기
Chain은 다른 레이어의 속성 변경을 기반으로 레이어의 속성을 변경할 수 있게 해주는 조건부 트리거입니다.
예를 들어 아래 이미지에서 초록색 박스를 위아래로 드래그하면 빨간 박스의 크기가 바뀝니다. ProtoPie에서는 빨간 박스의 scale이 초록 박스의 Y 위치에 “체인”되어 있기 때문에 이 작업이 가능합니다.
이 패럴랙스 스크롤 튜토리얼에서는 요소들의 위치를 스크롤 컨테이너의 스크롤 위치에 “체인”할 것입니다.
스크롤 컨테이너에 chain trigger를 추가하세요.
패럴랙스의 경험칙을 기억하시나요? 가장 먼 객체는 스크롤하는 동안 가장 적게 움직여야 합니다.
에셋 파일에서 Front 레이어가 가장 가깝고, Sky 레이어가 가장 멉니다. Front 레이어는 스크롤 컨테이너 안에 있으므로 Front 레이어에는 chain response를 추가할 필요가 없습니다.
Second 레이어를 선택한 다음 chain trigger 아래에 move response를 추가하세요. 먼저 스크롤 범위를 0 to 900으로 설정합시다. 그런 다음 Y range를 525 to -225로 설정하세요.
이 숫자들이 무엇을 의미할까요? 사용자가 0–900픽셀만큼 스크롤하면, Second 레이어는 750px만큼 움직입니다. 이는 초기 위치 (525)와 레이어의 종료 위치 (-225) 사이의 거리입니다.
💡 팁: 레이어의 시작 위치와 끝 위치를 자유롭게 조정해 보세요. 하지만 좋은 패럴랙스 스크롤 효과를 얻으려면 이 값이 스크롤 범위보다 아래에 있어야 합니다. 레이어는 스크롤과 함께 움직이면 안 되고, 대신 조금씩 끌려오는 듯한 느낌이어야 합니다.
같은 방법으로 다른 레이어의 move response도 설정하세요.
시각적으로 레이어가 멀수록 움직이는 거리는 더 짧아집니다. 레이어의 이동 거리를 점점 줄어드는 값으로 설정하세요.
이제 끝입니다!
이제 미리보기를 클릭하고 프로토타입에서 패럴랙스 스크롤 효과가 어떻게 보이는지 확인해 보세요. 이것저것 조정해 보며 방금 만든 은은한 애니메이션을 즐겨보세요.
이 튜토리얼 글에서는 패럴랙스가 무엇인지, 패럴랙스 효과를 어떻게 구현하는지, chain trigger를 어떻게 사용하는지, 그리고 이에 대한 응답을 어떻게 설정하는지 배웠습니다.
더 중요한 것은 이제 ProtoPie에서 Parallax Scrolling 효과를 만들 수 있게 되었다는 점입니다. 꽤 대단하죠!
이 사용 사례 튜토리얼이 도움이 되었나요? 교육 콘텐츠 개선에 도움이 되도록 이 1-min survey 에 참여해 주세요.
