ProtoPie로 Apple의 패럴랙스 효과를 재현하는 방법

패럴랙스 스크롤링에 대해 배우고 Apple Vision Pro 랜딩 페이지 클론을 만들어 볼 준비가 되셨나요? 바로 시작해 봅시다.

개요

• 패럴랙스 스크롤링이란?

• ProtoPie로 Apple Vision Pro의 랜딩 페이지 재현하기

• 필요한 것

• 팁과 요령

  • 스크롤 애니메이션으로 히어로 섹션 만들기

  • 비디오 슬라이드쇼로 몰입도 높이기

  • 스크롤로 재생되는 몰입감 더하기

• ProtoPie로 쉽게 만드는 패럴랙스 스크롤링

• ProtoPie School에서 웹 디자인 배우기

패럴랙스 스크롤링이란?

패럴랙스 스크롤링은 2011년 처음 등장한 이후 웹 디자인의 판도를 바꾼 기법으로, 역동적이고 몰입감 있는 사용자 경험을 제공합니다. 시간이 흐르면서 이는 현대 웹 디자인의 핵심 요소가 되었습니다.

이 기법은 사용자가 웹페이지를 스크롤할 때 배경이 전경 요소보다 느리게 움직이도록 해 깊이감을 만들어 냅니다. 이는 시각적 매력을 높일 뿐 아니라 사용자 참여도도 향상시킵니다. 또한 사용자가 여러분이 공유하고 싶은 방대한 정보를 따라 스크롤하는 동안 이야기가 전개되는 듯한 매력적인 내러티브를 만들어, 더 탐색하도록 유도합니다.

ProtoPie로 Apple Vision Pro의 랜딩 페이지 재현하기

이 글에서는 웹 디자인을 깊이 있게 다루며, 바로 적용할 수 있는 팁과 요령을 제공합니다. 최첨단 Apple Vision Pro 랜딩 페이지 디자인을 ProtoPie로 재현하는 방법을 안내해 드리겠습니다. Apple 웹사이트가 매우 방대한 만큼, 우리는 그 본질을 재현하는 데 필요한 기본 기법에 집중할 것입니다.

필요한 것

시작하기 전에 필요한 에셋을 준비해 이 창의적인 여정을 시작할 수 있도록 잠시 시간을 내어 모아 보세요.

매끄러운 스크롤 경험을 위한 팁과 요령

ProtoPie가 있다면 패럴랙스 디자인의 미묘한 차이를 익히는 일이 다른 디자인 툴을 다루는 것보다 훨씬 쉬워집니다. 웹 디자인을 능숙하게 다룰 수 있도록 유용한 팁과 요령을 소개해 드리겠습니다. 어느새 여러분은 웹 프로젝트에서 전문가처럼 매끄럽고 눈길을 끄는 스크롤 경험을 만들어 내고 있을 거예요!

시작해 봅시다.

스크롤 애니메이션으로 히어로 섹션 만들기

Apple Vision Pro 스크롤 애니메이션.

히어로 섹션은 웹사이트의 전면부이며, 여기에는 화면 대부분을 채우는 매력적인 영상이 있습니다. 스크롤을 시작하면 흥미로운 전환이 일어납니다:

• 내비게이션 바가 일부 숨겨집니다

• Apple Vision Pro 컴포넌트가 우아하게 사라집니다.

• 히어로 영상이 부드럽게 재생되기 시작합니다.

시작용 Pie를 열어 봅시다. “Hero” 장면을 찾아 보세요. 이곳이 이러한 매력적인 히어로 애니메이션을 만들 지정 영역이 됩니다.

Vision Pro 랜딩 페이지를 스크롤할 때 요소들이 눈에 띄는 세로 이동 없이도 미묘하게 모습이 바뀌는 것을 보셨나요? 브라우저의 스크롤 표시기를 보면 진행 막대가 실제로 움직이며 스크롤 깊이를 나타냅니다.

우리의 과제는 ProtoPie 안에서 요소들을 제자리에 고정한 채 이 효과를 재현하는 것입니다. 스크롤 깊이를 조절하기 위해 더미 스크롤 요소를 만드는 기법을 안내해 드리겠습니다. 동시에 스크롤 거리를 활용해 스크롤 진행에 따라 요소가 어떻게 변해야 하는지를 정확하게 지정할 것입니다.

1. “Dummy Scroll”이라는 스크롤 컨테이너를 만들어 봅시다. 스크롤 컨테이너의 높이는 화면과 같아야 합니다. 너비는 원하는 대로 정하면 됩니다. 스크롤 방향은 세로로 설정해 봅시다.

Apple Vision Pro 스크롤 효과.

2. “Dummy Scroll” 컨테이너 안에 “Depth”라는 사각형을 그려 봅시다. 사각형의 너비는 “Dummy Scroll” 컨테이너와 같게 설정합니다. 이 사각형의 높이는 2000픽셀을 사용해 봅시다.

더미 스크롤에 깊이 표시기 추가하기.

3. 이제 “Dummy Scroll” 컨테이너는 보이는 요소가 아니어야 하므로 장면 밖으로 옮기는 것이 좋습니다.

4. 그다음 오른쪽의 터치 영역을 켜고, 이 터치 영역이 화면 전체를 덮도록 설정합니다.

터치 영역.

5. 마지막으로, 스크롤 거리를 실시간으로 확인할 수 있도록 변수 하나를 만들어 보겠습니다.

• “For This Scene” 변수 만들기

• 이름을 “scrollDistance”로 지정하기

• 변수 안에서는 직접 수식을 사용해 `Dummy Scroll`.scrollOffset을 입력하기

• 변수 패널에서 무당벌레 아이콘을 클릭해 디버그 모드를 켜기

6. 미리보기를 해 봅시다. 이제 웹사이트를 스크롤할 때, 눈에 보이는 변화가 없어도 변수 값이 업데이트되는 것을 확인할 수 있습니다. 이것이 바로 우리의 스크롤 거리이며, 이 값을 사용해 요소를 변화시킬 것입니다.

스크롤 거리 미리보기.

이제 웹사이트를 스크롤하기 시작할 때 몇 가지 요소에 애니메이션을 적용해 봅시다.

1. “Dummy Scroll” 컨테이너의 Scroll 속성에 Range 트리거를 추가합니다.

2. 스크롤을 시작하면 스크롤 거리는 더 이상 0이 아니어야 합니다. 따라서 Range 값으로 Scroll of Dummy Scroll ≥ 1을 사용해 봅시다.

3. 이제 우리의 목표는 내비게이션 바를 위로 이동시키고, 로고를 숨기고, 영상 재생을 시작하는 것입니다.

• “Nav” 컨테이너에 Move 응답을 추가하고 Y = -44로 이동시키기

• “Hero copy” 컨테이너에 Opacity 응답을 추가하고 0으로 낮추기

• “Hero Video”에 Playback 응답을 추가하고 Play.로 설정하기

Range 트리거 설정하기.

웹사이트를 다시 맨 위로 스크롤하면 전체 내비게이션 바가 다시 나타납니다.

1. “Dummy Scroll” 컨테이너의 Scroll 속성에 Range 트리거를 추가합니다. 그리고 Range 값으로는 Scroll of Dummy Scroll = 0을 사용해 봅시다.

2. 내비게이션 바를 다시 보이게 하려면 “Nav” 컨테이너에 Reset 응답을 추가하면 됩니다.

Reset 응답.

아래로 계속 스크롤하면 영상이 점차 작아지고 약간 어두워집니다.

1. “Dummy Scroll” 컨테이너의 Scroll 속성에 Chain 트리거를 추가합니다.

Chain 트리거 추가하기.

2. 그다음 “Hero Video”에 Scale 응답을 추가합니다.

• 스크롤 거리가 0에서 976픽셀 범위일 때, 영상의 스케일은 100%에서 90%로 부드럽게 전환됩니다

Scale 응답.

3. “Hero Video”에 Opacity 응답을 추가해 봅시다.

• 스크롤 거리가 512에서 976픽셀 범위일 때, 영상의 불투명도는 100에서 30으로 점차 조정됩니다

Opacity 응답.

잘하셨습니다! 이제 더미 스크롤 기법을 사용해 Apple Vision의 히어로 섹션을 만드는 방법을 배웠습니다. 이 내용을 더 연습할 수 있도록 퀵 스타트 비디오 강의도 준비되어 있습니다. ProtoPie School에서 확인해 보세요.

• 페이지 로드 시 애니메이션

• 스크롤 기반 애니메이션

비디오 슬라이드쇼로 몰입도 높이기

비디오 슬라이드쇼.

다음으로, 매력적인 히어로 섹션 바로 아래에 있는 비디오 슬라이드쇼 영역을 살펴보겠습니다.

이 섹션에서는 아래로 스크롤할 때 여러 개의 영상이 하나씩 우아하게 모습을 드러냅니다. 각 영상에는 짧은 한 줄 설명이 함께 배치되어 있으며, 이 설명은 스크롤 동작과 발맞춰 자연스럽게 나타나고 이동합니다.

시작용 pie에서 두 번째 장면인 “Video Slideshows”로 이동해 봅시다. 여기에는 몇 가지가 준비되어 있습니다.

• “Dummy Scroll” 컨테이너 — 이 글의 첫 번째 부분에서 설명한 것과 동일하게, 스크롤 이벤트를 제어하는 요소입니다.

• “scrollDistance”라는 변수 — 실시간 스크롤 거리를 표시합니다.

또한 몇 가지 시각 자료도 준비되어 있습니다.

• “Text Area” 컨테이너 — 그 안에는 네 개의 서로 다른 텍스트 레이어가 있으며, 각 슬라이드에 표시되도록 만들 것입니다.

• “Video” 컨테이너 — 우리가 사용할 모든 영상이 들어 있습니다.

첫 번째 슬라이드에 집중해 봅시다.

1. “Dummy Scroll” 컨테이너의 Scroll 속성에 Chain 트리거를 추가합니다.

Chain 트리거.

• 첫 번째 슬라이드의 한 줄 설명인 “Text 1” 레이어에 Move 응답을 적용합니다. 스크롤 거리가 0에서 976픽셀까지일 때 “Text 1”이 Y 위치 767에서 0으로 부드럽게 이동하도록 설정합니다.

Move 응답.

• “Text 1” 레이어에 Opacity 응답을 추가하고, 다음과 같은 세부 애니메이션을 적용합니다:

• 스크롤 거리가 0에서 50픽셀 범위일 때 텍스트의 불투명도를 0에서 100으로 전환하여 텍스트 레이어가 보이도록 합니다.

• 50에서 972픽셀 범위에서는 텍스트의 불투명도를 100으로 유지해 화면에 계속 보이도록 합니다.

• 922에서 972픽셀 범위에 도달하면 텍스트의 불투명도를 100에서 0으로 점차 조정하여 텍스트 레이어가 우아하게 사라지도록 합니다.

텍스트 불투명도.

• “Video Wrapper 1” 컨테이너에 Opacity 응답을 추가하고, 다음 범위로 설정합니다.

• 스크롤 거리가 0에서 871픽셀 범위일 때 Video Wrapper의 불투명도를 80으로 유지합니다.

• 스크롤 거리가 871에서 972픽셀 범위일 때 Video Wrapper의 불투명도를 100에서 0으로 부드럽게 전환하여 우아하게 사라지도록 합니다.

비디오 래퍼 불투명도.

2. 첫 번째 슬라이드의 애니메이션을 미리보기 해 봅시다.

애니메이션 미리보기.

이제 두 번째 슬라이드로 넘어가 봅시다. 애니메이션은 스크롤 거리만 달라질 뿐 대부분 동일합니다. 첫 번째 슬라이드의 인터랙션을 복제한 뒤 필요한 부분만 수정하면 작업을 훨씬 간단하게 진행할 수 있습니다.

1. 지금까지 만든 세 가지 응답을 복제해 봅시다.

2. 그다음 연결된 객체를 변경합니다. 예를 들어:

• 원래 응답이 "Text 1"에 연결되어 있었다면 이를 "Text 2"로 업데이트합니다.

• 원래 응답이 "Video Wrapper 1"에 연결되어 있었다면 이를 "Video Wrapper 2"로 변경합니다.

3. 효율을 위해 ProtoPie의 타임라인 기능을 활용합니다. 새로 만든 세 가지 응답을 모두 선택한 뒤 오른쪽으로 이동시켜, 시작점을 초기 인터랙션의 종료 지점과 정확히 맞춥니다.

응답을 오른쪽으로 이동하기.

4. 미리보기 해 봅시다.

두 번째 슬라이드 미리보기.

슬라이드 2에서 다시 슬라이드 1로 스크롤하려고 할 때까지는 모든 기능이 완벽하게 동작합니다. 두 번째 영상의 불투명도가 0으로 초기화되지 않는 문제가 생깁니다.

1. "Video Wrapper 2"의 Opacity 응답에 작은 조정이 필요합니다.

• 현재 범위는 다음과 같습니다 — 스크롤 거리가 972에서 1894픽셀 범위일 때 Video Wrapper의 불투명도를 80으로 유지합니다.

• 이를 다음과 같이 변경해 봅시다

• 스크롤 거리가 972에서 1022픽셀 범위일 때 Video Wrapper의 불투명도를 0에서 100으로 조정합니다.

• 스크롤 거리가 1022에서 1894픽셀 범위일 때 Video Wrapper의 불투명도를 80으로 유지합니다.

Wrapper 불투명도.

2. 이 조정을 통해 이제 응답을 복제하고 새 객체에 할당한 뒤 타임라인을 적절히 조정하는 방식으로 이후 슬라이드에도 이 인터랙션을 손쉽게 적용할 수 있습니다.

마지막으로, 스크롤 거리에 따라 영상 재생 또는 초기화를 관리해야 합니다. 이는 Range 트리거를 사용하면 쉽게 구현할 수 있습니다. 이 글이 길기 때문에 세부 사항까지는 다루지 않겠습니다. 아래 그림은 범위를 정확하게 설정하는 데 참고할 수 있는 자료입니다.

Range 트리거.

Range 트리거가 처음이라면, 스크롤 이벤트를 기준으로 재생 또는 일시 정지하는 방법을 단계별로 안내하는 ProtoPie School의 전용 강의가 있습니다. 더 자세한 안내와 깊은 이해를 위해 이 자료를 살펴보셔도 좋습니다.

그리고 가로로 스크롤되는 슬라이드쇼를 어떻게 만드는지 궁금하실 수 있습니다. ProtoPie School의 이 웹 디자인 퀵 스타트 강의를 확인해 보세요!

스크롤로 재생되는 몰입감 더하기

Apple의 웹사이트는 사용자가 사이트를 스크롤할 때 수많은 영상과 이미지 에셋이 교묘하게 트리거되는 경우가 많다는 점을 확인할 수 있습니다. 이는 웹사이트의 시각적 매력을 높일 뿐 아니라 사용자의 몰입도도 효과적으로 높여 줍니다. 또한 설득력 있는 스토리텔링 방식을 가능하게 해, 사용자가 내러티브를 따라가며 중요한 정보를 흥미롭고 인터랙티브한 방식으로 받아들이도록 돕습니다.

마지막 예제에서는 Vision Pro 랜딩 페이지에서 이 기법이 사용된 섹션에 집중해 보겠습니다.

스크롤로 재생하기.

시작용 pie에서 마지막 장면인 ”Scroll to Playback”으로 이동해 봅시다.

앞선 예제와 마찬가지로, 이 과정을 시작할 수 있도록 몇 가지 기본 요소를 준비해 두었습니다. 예를 들면 스크롤 이벤트를 관리하는 "Dummy Scroll" 컨테이너와 실시간 스크롤 값을 모니터링하는 "scrollDistance"가 있습니다. 또한 웹사이트를 스크롤할 때 요소가 부드럽게 전환되도록 Chain 트리거를 활용하는 일련의 인터랙션도 배치해 두었습니다.

여기서 필요한 것은 스크롤할 때 영상이 재생되도록 만드는 것뿐입니다. 이 기능을 구현하는 방법을 살펴봅시다.

1. 먼저 "Dummy Scroll" 컨테이너에 Chain 트리거를 추가하고 Scroll 속성을 선택합니다.

"Dummy Scroll"에 Chain 트리거 추가하기.

2. 그다음 “Video” 레이어에 **Playback **응답을 추가합니다. 동작은 “Seek”을 선택합니다. 그리고 여기에 다음 공식을 사용합니다: ``Video.totalTime/1650*(Dummy Scroll.scrollOffset-798)

Playback 응답.

• `Video`.totalTime — 영상 에셋의 전체 재생 시간을 가져옵니다.

• 1650 — 이 값은 조정 가능하며, 원하는 영상 동작과 연결된 스크롤 깊이 범위를 나타냅니다.

• `Dummy Scroll`.scrollOffset — 전체 스크롤 거리를 가져옵니다.

• 798 — 이 값 역시 조정 가능하며, 스크롤-재생 상호작용의 시작 지점을 나타냅니다. 즉, 페이지 상단에서 798만큼 스크롤해야 이 상호작용이 트리거된다는 뜻입니다. 그 이유는 이 섹션 앞에 다른 디자인이 있기 때문입니다.

ProtoPie로 쉽게 만드는 패럴랙스 스크롤링

이 튜토리얼을 마무리하면서, Apple 웹사이트에서 볼 수 있는 매력적인 사용자 경험을 재현하는 핵심 기법들을 살펴보았습니다. Apple 웹사이트 전체를 그대로 재현하는 것은 방대한 작업이지만, 지금까지 다룬 기본 방법은 훌륭한 출발점이 됩니다.

이 기법들을 더 확장해 보고, 다양한 스크롤 트리거를 실험하고, 추가 인터랙션을 탐색하며, 각자의 프로젝트에 맞게 동작을 세밀하게 조정해 보세요.

ProtoPie School에서 웹 디자인 배우기

더 알아볼 내용도 많습니다! 웹 디자인 기법에 대한 심층적인 인사이트와 추가 탐구를 원하신다면, ProtoPie School의 웹 디자인 시리즈를 꼭 확인해 보세요. 이 시리즈는 다양한 주제를 다루며, 웹 디자인 실력을 높이는 데 도움이 되는 유용한 팁, 튜토리얼, 영감을 제공합니다.

계속 관심을 가지고 배우며 웹 디자인 여정을 시작해 보세요. 창의력이 마음껏 꽃피우길 바랍니다! 즐거운 프로토타이핑 되세요!