[Tip]웹에서 루핑 스크롤 캐러셀을 만드는 방법

2024. 9. 23.

인터넷을 탐색하다 보면, 루핑 스크롤 캐러셀을 사용하는 웹사이트를 쉽게 찾을 수 있습니다. 주로 홈페이지에서 이미지를 보여주거나 배너를 표시하는 데 사용됩니다. 이 글에서는 웹사이트에 루핑 스크롤 캐러셀을 프로토타이핑하는 방법을 배워보겠습니다. 스크롤 트리거, 변수, 조건을 사용하여 이를 구현할 수 있습니다.

시작하기 전에 필요한 파이를 다운로드 받아 스튜디오에서 사용하실 수 있습니다.

미완성 파이 다운로드

완성된 파이 다운로드

단계별 가이드: 루핑 스크롤 캐러셀을 프로토타이핑하는 방법

  1. 페이징 컨테이너를 이용하여 캐러셀 뷰 만들기

먼저, 이미지를 컨테이너에 그룹화해야 합니다. 스크롤 애니메이션이 스크롤과 달리 더 유연한 대신 '이미지에 맞게 고정(snap)'되도록 하기 위해 페이징 속성을 사용해야 합니다.

  1. 페이징 컨테이너를 추가하고 너비는 화면 크기와 동일하게, 높이는 이미지 높이에 맞춥니다. 스크롤해야 하는 요소들 — IMG 1, IMG 2, IMG 3을 컨테이너에 드래그합니다.

2. 페이징 컨테이너의 속성 패널에서 스크롤 방향을 수평(horizontal)으로 설정합니다. 이미지가 수평으로 이동할 것이기 때문에 좌우 화살표를 클릭하세요. 이 컨테이너의 이름을 'Paging'으로 변경하여 확인하기 쉽게 만듭니다.

  1. 스와이프 상호작용을 비활성화하고 싶다면, 페이징 컨테이너의 높이를 0으로 설정할 수 있습니다. 이유는 마우스 커서를 사용하여 "스와이프"하는 것이 자연스럽지 않기 때문입니다. 하지만 이는 선택 사항이므로, 스와이프 상호작용을 유지하고 싶다면 그대로 두셔도 됩니다!

  2. 스와이프 상호작용을 숨기기로 결정했다면, 새로운 컨테이너를 추가하여 넘치는 이미지를 잘라냅니다. 컨테이너의 너비는 화면만큼 넓게, 높이는 이미지 높이만큼 설정합니다. 그런 다음 페이징 컨테이너를 새로운 컨테이너 안에 넣습니다.

오른쪽 속성 패널로 이동하여, 아래로 스크롤하여 Clip Sublayers를 클릭해 넘치는 이미지를 숨깁니다. 화면을 축소하면 화면의 왼쪽과 오른쪽으로 넘치는 이미지가 숨겨진 것을 확인할 수 있습니다.

5. 오른쪽 화살표를 클릭 가능하게 만들기 위해서 Tap 트리거를 추가합니다. Scroll By 속성을 이용하여 페이징 컨테이너의 스크롤 위치를 1171px로 이동하겠습니다.

💡 왜 "Scroll to" 대신 "Scroll by"를 사용하나요?

우리는 고정된 위치로 스크롤을 이동하는 것이 아니라, 거리를 이동시키고 싶기 때문입니다. 예를 들어, 현재 스크롤 위치가 0일 때, "Scroll to" 로직을 사용하면 스크롤 위치를 1171px로 이동시킵니다. 그러나 이후에 오른쪽 화살표를 클릭하면 아무 일도 일어나지 않습니다. 왜냐하면 이미 1171px에 위치해 있기 때문입니다.

그래서 우리는 "Scroll by"를 사용해야 합니다. 스크롤 위치가 어디에 있든, 사용자가 오른쪽 화살표를 클릭하면 1171px만큼 스크롤이 이동합니다. 오른쪽 화살표를 다시 클릭하면 또다시 1171px 만큼 이동하게 됩니다.

💡 그렇다면 왜 1171px만큼 스크롤 해야하나요?

1171px은 우리가 프로토타입에서 사용하는 웹사이트의 너비이기 때문입니다.

  1. 왼쪽 아이콘에 대해서도 같은 방법으로 상호작용을 만드세요. 단, 스크롤 값을 -1171px로 설정합니다.

💡 팁

추가적인 상호작용을 만들려면 Paging Container의 스크롤 오프셋을 알아야 합니다. 스크롤 값을 빠르게 얻는 방법은 변수를 사용해 해당 값을 감지하는 것입니다. 아래 몇 단계로 그 방법을 알아보세요:

  1. 새로운 변수를 만듭니다.

  2. 속성 패널에서 Use Formula 체크박스를 클릭하여 수식 입력을 활성화합니다. 이 수식은 현재 장면에만 적용되는 변수로 사용할 수 있습니다.

  3. 여기서 사용할 수식은 "Paging".scrollOffset입니다. 이 수식은 Paging Container의 현재 스크롤 값을 반환합니다.

  1. 미리보기 창에서는 아직 아무것도 볼 수 없습니다. 방금 만든 변수 위에 마우스를 올리고, 오른쪽에 있는 "bug" 아이콘을 클릭하세요. 이 작업을 완료하면 이제 화면 왼쪽 상단에서 현재 스크롤 값을 볼 수 있습니다.

2. 스크롤 오프셋을 기준으로 이미지 이름 변경

이제 스크롤 값을 감지할 수 있으니, 어느 이미지가 현재 화면에 표시되는지 알려주는 포인터를 만들 수 있습니다. 예를 들어, 현재 보고 있는 이미지의 이름을 올바르게 표시할 수 있습니다. 다음 단계로 진행해봅시다!

  1.  Detect 트리거를 Paging Container에 추가하세요. 속성 패널에서 스크롤 값을 감지하도록 선택합니다. 여기서 하는 작업은 스크롤 값의 변화를 "감지"하는 것입니다. 그런 다음, 스크롤 값에 따라 이미지 제목을 변경할 수 있습니다.

💡 Detect 트리거란 무엇인가요?
Detect 트리거는 레이어 속성이나 변수의 변화를 감지하는 트리거입니다. 변화가 감지되면, 설정된 응답이 활성화됩니다.

  1. 이미지 이름을 정확하게 가져오기 위해, Paging Container의 스크롤 위치를 감지해야 합니다. 스크롤 값이 "0"일 때 조건을 추가하세요. 페이지가 아직 스크롤되지 않았을 때(스크롤 위치 = 0) 이미지의 올바른 이름을 표시하기 위함입니다.

  1. 스크롤 값이 0일 때, 제목에 대한 불투명도 응답을 추가하세요. 여기서 사용할 값은 다음과 같습니다:

  • Modern Architecture: 불투명도 = 100

  • Museum: 불투명도 = 0

  • Minimal Plaza: 불투명도 = 0

텍스트 응답을 사용하여 텍스트를 변경할 수도 있습니다. 이 경우 제목 레이어가 하나만 필요합니다. 그러나 불투명도를 사용하면 더 부드러운 전환 효과를 얻을 수 있습니다.

또한 동일한 논리를 "ct-bg" 레이어 안의 배경 이미지에도 적용합니다. 이러한 이미지는 ProtoPie에서 생성된 "Background Blur" 레이어 뒤에 배치됩니다. "Modern Architecture"의 불투명도가 100일 때, "ct-bg" 안의 해당 이미지("Modern Architecture"라는 이름의 이미지)도 불투명도가 100이어야 합니다.

다른 레이어에도 동일한 규칙을 적용하세요: 캐러셀에 이미지가 표시되면 해당 이미지가 포함된 "ct-bg" 안의 이미지도 불투명도가 100이어야 하고, 표시되지 않은 이미지는 불투명도가 0이어야 합니다.

지금 프로토타입을 시도해 보면, "Modern Architecture"가 어느 이미지가 표시되든 그대로 남아있는 것을 볼 수 있습니다. 이는 다른 제목들에 대한 조건을 설정하지 않았기 때문입니다. 이제 "Museum"과 "Minimal Plaza"에도 동일한 조건을 설정하겠습니다.

  1. 동일한 방법을 사용하여 스크롤 값이 1171 및 2342일 때 응답을 추가하세요.

  • 값이 1171일 경우:

    • Modern Architecture: 불투명도 = 0

    • Museum: 불투명도 = 100

    • Minimal Plaza: 불투명도 = 0

  • 값이 2342일 경우:

    • Modern Architecture: 불투명도 = 0

    • Museum: 불투명도 = 0

    • Minimal Plaza: 불투명도 = 100

미리보기 창에서 확인해보세요. 이제 동적으로 제목이 변경되는 클릭 가능한 스크롤 배너가 만들어졌습니다! 하지만... 뭔가 아직 부족합니다. 배너가 끝에 도달하면 반복되지 않습니다. 이제 배너가 반복되도록 만들어보겠습니다.

  1. 반복 스크롤 만들기

"반복"처럼 보이게 하려면 첫 번째 이미지를 복제하여 오른쪽에 배치하고, 마지막 이미지를 복제하여 왼쪽에 배치해야 합니다. 이 두 이미지는 페이징 컨테이너 안에 있어야 합니다.

이제 확인할 수 있듯이, 실제로 이미지를 반복하는 것이 아니라, 프로토타입에서 반복되는 것처럼 느끼게 만들고 있습니다.

  1. 감지 트리거에 조건을 추가합니다. 페이징 컨테이너의 스크롤 값을 -1171로 설정합니다.

  2. 이 조건 아래에서, 페이징 컨테이너가 2342로 스크롤되도록 설정하고, 지속 시간(duration)을 0으로 설정합니다.

이것이 우리가 방금 논의한 가짜 루프(fake loop)입니다. 스크롤 값이 -1171일 때마다 조건이 즉시 2342로 이동시킵니다. 지속 시간(duration)을 0으로 설정해야 시각적인 변화를 사용자가 보지 않도록 할 수 있습니다. 즉, 2342로 즉시 스크롤되도록 하는 것입니다.

  1. 또 다른 조건을 추가합니다. 페이징 컨테이너의 스크롤 값이 3513일 때, 페이징 컨테이너가 0으로 스크롤되도록 설정합니다. 지속 시간을 0으로 설정하는 것을 잊지 마세요. 사용자가 스크롤 변화를 보지 않고 즉시 이동하게 하기 위함입니다.

미리보기 창에서 확인해보세요!

캐러셀 프로토타입이 완성되었습니다! 캐러셀을 마음껏 사용해보고, 얼마나 매끄러운 경험인지 살펴보세요!

이 튜토리얼에서 스크롤 트리거, 변수, 조건을 구현했습니다. 게다가 루프 효과도 적용했습니다.

이 배운 내용을 응용해 다양한 상호작용을 만들어보세요. ProtoPie로 여러분만의 프로토타입을 만들고, Twitter나 Instagram에서 #MadeWithProtoPie 해시태그로 공유해주세요!

프로토파이 무료로 시작하기