인터넷을 둘러보다 보면 반복 스크롤 캐러셀이 적용된 웹사이트를 쉽게 찾을 수 있습니다. 홈페이지에서 이미지나 배너를 보여주기 위해 이를 사용하는 것이 일반적입니다. 이 글에서는 스크롤 트리거, 변수, 조건을 사용해 웹사이트용 반복 스크롤 캐러셀을 프로토타입으로 만드는 방법을 배워보겠습니다.
개요
배울 내용
단계별: 반복 스크롤 캐러셀 프로토타입 만들기
1. 페이징 컨테이너를 사용해 캐러셀 뷰 만들기.
2. 스크롤 오프셋에 따라 이미지 이름 변경
3. 반복 스크롤 만들기
캐러셀 프로토타입이 완성되었습니다!
배울 내용
Paging Container를 사용해 캐러셀 뷰 프로토타입 만들기
스크롤 오프셋에 따라 이미지 이름 변경하기(yay, 변수!)
반복 스크롤 만들기
마지막에는 이런 것을 만들 수 있게 됩니다!
단계별: 반복 스크롤 캐러셀 프로토타입 만들기
1. 페이징 컨테이너를 사용해 캐러셀 뷰 만들기.
먼저 이미지를 하나의 컨테이너에 묶어야 합니다. 스크롤 애니메이션이 이미지에 맞춰 "스냅"되도록 하고 싶기 때문에 paging 속성을 사용해야 합니다. scroll은 더 유연하지만, 여기서는 스냅이 필요합니다.
1.** 페이징 컨테이너를 추가**하고 너비를 화면 전체와 같게, 높이를 이미지 높이와 같게 설정합니다. 스크롤해야 하는 요소를 컨테이너 안으로 드래그하세요 — IMG 1, IMG 2, IMG 3.
2. 페이징 컨테이너의 속성 패널에서 스크롤 방향을** horizontal**로 설정합니다. 이미지는 가로로 움직이기 때문입니다. 좌우 화살표를 클릭하세요. 참조하기 쉽도록 이 컨테이너의 이름을 "Paging"으로 변경해 둡시다.
3. 스와이프 상호작용을 비활성화하고 싶다면, 페이징 컨테이너의 높이를 0으로 설정할 수 있습니다. 마우스 커서로 "스와이프"하는 것은 자연스럽지 않기 때문입니다. 하지만 이 단계는 선택 사항입니다—스와이프 상호작용을 유지하고 싶다면 그대로 두셔도 됩니다!
4. 스와이프 상호작용을 숨기기로 했다면, 넘치는 이미지를 잘라낼 새 컨테이너를 추가하세요. 너비를 화면 전체와 같게, 높이를 이미지 높이와 같게 설정합니다. 그런 다음 페이징 컨테이너를 새 컨테이너 안에 넣습니다.
오른쪽의 속성 패널로 이동해 아래로 스크롤한 다음 Clip Sublayers를 클릭하여 넘치는 이미지를 숨깁니다. 축소해서 보면 화면의 왼쪽과 오른쪽으로 넘친 이미지가 이제 숨겨진 것을 볼 수 있습니다.
5. 오른쪽 화살표 아이콘을 클릭 가능하게 만들려면 a** Tap 트리거.**를 추가하세요.** 스크롤 위치를 페이징 컨테이너에서 1171px만큼 이동시키기 위해 ** Scroll By ** 속성을 사용합니다.
💡 왜 "Scroll by"를 "Scroll to" 대신 사용할까요?
이유는 고정된 위치로 설정하는 것이 아니라 거리만큼 이동시키고 싶기 때문입니다. 예를 들어 현재 스크롤 위치가 0이라고 해봅시다. "Scroll to" 로직을 사용하면 스크롤 위치를 1171px로 이동시키게 됩니다. 그다음 오른쪽 화살표를 탭하면 어떻게 될까요? 이미 1171에 있으므로 아무 일도 일어나지 않습니다.
그래서 "Scroll by"를 사용해야 합니다. 무엇이 일어나든, 스크롤 위치가 어디에 있든, 사용자가 오른쪽 화살표를 클릭하면 스크롤을 1171px만큼 이동시킵니다. 오른쪽 화살표를 다시 클릭하면 또다시 1171px만큼 이동합니다.
💡 좋아요, 그런데 왜 1171만큼 스크롤하나요?
프로토타입에 있는 웹사이트의 너비가 1171이기 때문입니다.
6. 같은 방법으로 왼쪽 아이콘의 상호작용을 만듭니다. 단, scroll by 값은 -1171로 설정합니다.
💡 팁과 요령
추가 상호작용을 만들려면 페이징 컨테이너의 스크롤 오프셋을 알아야 합니다. 스크롤 값을 빠르게 얻는 방법은 변수를 사용해 그 값을 감지하는 것입니다. 몇 단계로 해보겠습니다:
1. 새 변수를 만듭니다.
2. 속성 패널에서 Use Formula 체크박스를 클릭해 수식 입력을 활성화합니다. 이 수식은 Variables For This Scene에만 사용할 수 있습니다.
3. 여기서 사용하는 수식은 "Paging".scrollOffset 입니다. 이는 페이징 컨테이너의 현재 스크롤 값을 반환합니다.
4. 미리보기 창에서는 아직 아무것도 보이지 않을 것입니다. 방금 만든 변수 위에 마우스를 올리고 오른쪽의 "bug" 아이콘을 클릭하세요. 그러면 이제 왼쪽 상단에서 현재 스크롤 값을 볼 수 있습니다.
2. 스크롤 오프셋에 따라 이미지 이름 변경
이제 스크롤 값을 감지할 수 있으므로, 현재 어떤 이미지가 보이는지 알 수 있도록 도와주는 포인터를 만들 수 있습니다. 예를 들어, 보고 있는 이미지의 정확한 이름을 표시할 수 있습니다. 해봅시다!
1.** 페이징 컨테이너에 Detect 트리거를 추가합니다.** 속성 패널에서 해당 스크롤 값을 감지하도록 선택하세요. 여기서 하는 일은 스크롤 값의 변화를 "감지"하는 것입니다. 그런 다음 스크롤 값에 따라 이미지 제목을 적절히 변경할 수 있습니다.
💡 detect trigger란 무엇인가요? 레이어 속성이나 변수의 변화를 감지하는 트리거입니다. 변화가 감지되면 응답이 활성화됩니다.
2. 이미지 이름을 정확하게 표시하려면 페이징 컨테이너의 스크롤 위치를 감지해야 합니다. 페이징 컨테이너의 스크롤 값이 "0"일 때 조건을 추가하세요. 페이지가 아직 스크롤되지 않았을 때(스크롤 위치 = 0) 해당 이미지의 올바른 이름을 보여주고 싶기 때문입니다.
3. 스크롤 값이 0일 때 제목에 불투명도 응답을 추가합니다. 여기서 사용하는 값은 다음과 같습니다:
모던 아키텍처: 불투명도 = 100
박물관: 불투명도 = 0
미니멀 광장: 불투명도 = 0
텍스트를 변경하기 위해 텍스트 응답을 사용할 수도 있습니다. 이 경우 제목 레이어는 1개만 있으면 됩니다. 하지만 불투명도를 사용하면 더 부드러운 전환 효과를 줄 수 있습니다.
또한 "ct-bg" 레이어 안의 배경 이미지에도 같은 로직을 적용할 것입니다. 이 이미지들은 ProtoPie에서 만든 "Background Blur" 레이어 뒤에 배치되어 있습니다. "모던 아키텍처"의 불투명도가 100이면, "ct-bg" 안의 해당 이미지인 "모던 아키텍처"도 불투명도 100이어야 합니다.
다른 레이어에도 같은 규칙을 적용합니다: 캐러셀에서 이미지가 보이면 "ct-bg" 안의 해당 이미지는 불투명도 100으로 설정하고, 표시되지 않는 이미지는 불투명도 0으로 설정합니다.
지금 프로토타입을 실행해 보면, 어떤 이미지가 표시되든 모던 아키텍처가 계속 남아 있는 것을 볼 수 있습니다. 다른 제목에 대한 조건을 아직 설정하지 않았기 때문입니다. 다음으로 박물관과 미니멀 광장에도 같은 작업을 하겠습니다.
4. 같은 방법으로 스크롤 값이 1171과 2342일 때 응답을 추가합니다
값 = 1171일 때,
모던 아키텍처: 불투명도 = 0
박물관: 불투명도 = 100
미니멀 광장: 불투명도 = 0
값 = 2342일 때,
모던 아키텍처: 불투명도 = 0
박물관: 불투명도 = 0
미니멀 광장: 불투명도 = 100
미리보기 창에서 확인해 봅시다. 이제 동적인 제목이 있는 클릭 가능한 스크롤 배너가 생겼습니다! 하지만... 아직 뭔가 완전하지 않습니다. 끝에 도달하면 배너가 반복되지 않습니다. 이제 반복되도록 만들어 봅시다!
3. 반복 스크롤 만들기
반복되게 만들려면 첫 번째 이미지를 복제해 오른쪽에 놓고, 마지막 이미지를 복제해 왼쪽에 놓아야 합니다. 이 두 이미지도 페이징 컨테이너 안에 있어야 합니다.
보셨듯이, 실제로 같은 이미지를 반복하는 것은 아닙니다. 대신 반복처럼 보이도록 속여서 프로토타입에서 반복되는 느낌을 만들어냅니다. 똑똑하죠?
1. 감지 트리거에 조건을 추가합니다. 페이징 컨테이너의 스크롤 값을 사용하며, 값을 -1171로 설정합니다.
2. 이 조건 아래에서 페이징 컨테이너를 2342로 스크롤하도록 스크롤 동작을 추가합니다. duration은** **0으로 설정하세요.
이것이 방금 설명한 가짜 반복입니다. 따라서 스크롤 값이 -1171이 될 때마다, 조건이 즉시 2342로 이동시킵니다. duration은 0이어야 합니다. 시각적으로 아무 변화도 보이게 하고 싶지 않기 때문입니다. 2342로 즉시 이동해야 합니다.
3. 조건을 하나 더 추가합니다. 페이징의 스크롤 값이** 3513일 때, 페이징 컨테이너를 0으로 스크롤합니다. 스크롤이 보이지 않고 즉시 적용되도록** duration **을 0으로 설정하는 것을 잊지 마세요.
미리보기 창에서 확인해 봅시다... 이제 반복 스크롤 캐러셀을 만들었습니다!
캐러셀 프로토타입이 완성되었습니다!
캐러셀을 직접 조작해 보며 얼마나 자연스러운 경험인지 확인해 보세요! 재미있었습니다.
이 튜토리얼에서는 스크롤 트리거, 변수, 조건을 구현했습니다. 반복 효과는 말할 것도 없죠!
이 배운 내용을 활용해 이것저것 시도해 보면 더 흥미로운 상호작용도 만들 수 있을 거예요! 여러분의 기발한 실험도 꼭 보고 싶습니다. ProtoPie로 자신만의 프로토타입을 만들고 Twitter 또는 Instagram에 #MadeWithProtoPie와 함께 공유해 주세요
