디지털 디자인에서 매력적인 사용자 경험을 추구하는 일은 끝이 없습니다. 강물의 밀물과 썰물처럼 스크롤 기반 애니메이션은 사용자를 몰입감 있는 디자인 속 시각적 여정으로 이끄는 변혁적인 힘입니다. 여기에 매혹적인 패럴랙스 효과와 사실적인 3D 360도 제품 렌더를 결합하면, 창의적 가능성의 새로운 세계가 수평선 위로 펼쳐집니다.
이 글에서는 프로토타이핑이라는 깊은 바다로 항해를 떠나 보겠습니다. 우리는 Chain 과 Detect 트리거를 variables, formulas, components와 함께 사용할 것입니다. 스크롤 기반 애니메이션의 흐름을 따라가며 상상의 홍수를 열고, ProtoPie에서 진정으로 매혹적인 경험을 만드는 비밀을 밝혀 봅시다.
1. 3D 애니메이션
현재 ProtoPie는 3D 형식을 지원하지 않습니다. 하지만 비디오 렌더를 사용하고 재생을 조작할 수는 있습니다. 이 기법은 프로토타입에서 3차원 객체를 흉내 내는 데 도움이 됩니다.
예를 들어, 고급 가구 제조업체를 위한 웹사이트를 디자인하고 있다고 해봅시다. 이 디자인의 중심은 고해상도 인터랙티브 제품 이미지입니다. 오브젝트 주위를 카메라가 회전하는 어떤 비디오든 사용할 수 있습니다. 저는 빠른 Blender 설정으로 회전 뷰를 렌더링하고 있습니다.
객체 제약 속성
저는 이미 객체와 간단한 3점 조명 설정을 배치해 두었습니다. 또한 카메라와 원형 커브도 있습니다.
카메라의 Object Constraint Properties 에서 Follow Path 와 Track To 제약을 추가합니다. 대상 경로는 원으로, 추적 대상은 의자로 설정하세요. 이제 카메라는 경로를 따라가면서 항상 의자를 향하게 됩니다.
비디오는 mp4 형식으로 렌더링합니다.
Blender의 객체 제약
2. 레이아웃
Figma에서 디자인하기
Figma로 이동해 메인 페이지의 미니멀한 레이아웃을 만듭니다. 내비게이션이 있는 헤더와 텍스트를 위한 최소 두 개의 섹션이 필요합니다.
다음으로 ProtoPie 플러그인을 사용해 프로토타이핑을 위한 디자인을 내보냅니다.
Figma에서 ProtoPie로 UI 디자인 내보내기
ProtoPie에서 설정하기
ProtoPie에서 몇 가지 요소를 조정해야 합니다. 먼저 회전 영상을 추가하세요. 기본적으로 자동 재생 옵션은 선택되어 있지 않습니다. 바로 그것이 우리가 원하는 바입니다.
영상의 크기를 조절하고 화면에 배치하세요. 정렬을 더 쉽게 하려면 원점을 중앙으로 바꿀 수도 있습니다.
제 영상은 카메라가 의자의 정면을 향한 상태에서 시작하지만, 저는 먼저 3/4 뷰를 보고 싶습니다. 첫 프레임도 조정하고 싶다면 Start 트리거에 Playback 응답을 추가하고 Seek 을 특정 타임스탬프로 설정하세요(제 경우는 0:01.0입니다).
ProtoPie에 비디오 추가하기
스크롤 기반 애니메이션을 트리거하려면 스크롤 컨테이너가 필요합니다. 속성 패널에서 텍스트 섹션이 있는 그룹을 세로 스크롤로 설정하세요. 이제 프로토타입을 만들 준비가 되었습니다!
스크롤 동작 설정하기
3. Chain 트리거
패럴랙스 효과
패럴랙스는 객체가 서로 다른 속도로 움직이는 것처럼 보이게 하는 시각 효과입니다. UI 디자인에서 패럴랙스 효과는 2차원 인터페이스 안에 3차원 공간이 있는 듯한 착각을 주어 깊이감과 몰입감을 만들어 냅니다.
이 효과를 가장 쉽게 흉내 내는 방법은 조건 트리거를 사용하는 것입니다. 헤더를 선택하고 Chain 속성을 scroll-container와 그 스크롤에 연결하세요. 그런 다음 헤더 요소에 대한 Move 응답을 추가하고 레이어 매핑 범위를 조정합니다. 0에서 48px까지 스크롤할 때 헤더를 Y축 기준 0에서 -72px로 이동시키세요. 이렇게 하면 헤더 객체가 나머지 콘텐츠보다 약간 더 빠르게 위로 움직입니다.
마찬가지로 비디오 위치도 컨테이너의 스크롤 오프셋에 연결합니다. 제 예시에서는 스크롤 범위 [0;360]을 Y 위치 범위 [520;360]에 매핑합니다. 따라서 비디오는 콘텐츠보다 더 느리게 위로 이동합니다.
스크롤 속성과 함께하는 Chain 트리거
비디오 재생
비디오 재생에도 같은 방법을 적용해 보려 하면 작동하지 않습니다. Playback 응답은 Chain 트리거에서 사용할 수 없기 때문입니다.
그렇다면 Chain 트리거 없이 재생을 스크롤 위치에 연결하려면 어떻게 해야 할까요?
Chain 트리거와 Playback 응답
4. 스크롤 애니메이션
스크롤 감지
Detect 트리거가 구명줄과 함께 등장해 우리를 구해 줍니다! 트리거가 스크롤 컨테이너의 Scroll에서 발생하는 모든 변경을 감지하도록 설정하세요. 그런 다음 로컬 숫자 변수를 추가하고 이름 옆의 버그 아이콘을 클릭합니다. 이렇게 하면 미리보기 창에서 해당 값을 표시할 수 있습니다.
Detect 트리거 안에 Assign 응답을 추가하고 다음 수식으로 현재 스크롤 오프셋을 변수에 저장합니다: scroll-container****.scrollOffset
변수 값은 미리보기에서 자동으로 업데이트되어야 합니다.
스크롤 오프셋 감지하기
Playback 응답
Detect 트리거에 Condition을 만듭니다. 스크롤 변수 값이 320보다 작을 때 Seek 동작이 있는 Playback 응답을 추가하세요. 저는 다음 수식을 사용합니다: 1+scroll/60. 이제 스크롤 오프셋이 비디오 재생을 완전히 제어합니다.
비디오 재생과 스크롤 오프셋 연결하기
텍스트 컴포넌트
마지막으로 조금 더 멋을 더해 줄 수 있는 것은 텍스트 애니메이션입니다. 헤더와 문단이 있는 텍스트 섹션용 컴포넌트를 만드세요. Receive 트리거를 추가하고 Parent Channel에서 오는 start 메시지를 수신하도록 설정합니다. 불투명도를 0에서 100으로 애니메이션하고 텍스트를 약간 위로 이동시키세요.
텍스트 컴포넌트 애니메이션
Send 응답
Send 응답으로 모든 것을 연결합니다. Start에서 첫 번째 섹션 컴포넌트에 start 메시지를 보냅니다. Detect에서는 스크롤 변수가 최소 240일 때 같은 메시지를 두 번째 섹션 컴포넌트로 보냅니다.
컴포넌트 애니메이션 트리거하기
4. 최종 결과
우리는 목적지에 도착했습니다. 이제 돛을 접고 스크롤 애니메이션의 낙원 같은 섬을 즐기세요 ;)
최종 결과
UX 여정과 프로토타이핑을 시작하세요
ProtoPie와 ProtoPie School로 고충실도 프로토타이핑을 마스터하는 첫걸음을 내딛어 보세요.
