소개
스크롤 피커는 매우 직관적이고, 또 매우 널리 사용됩니다. 가장 흔하게는 온라인 양식에서 생년월일을 선택할 때, 또는 작은 목록에서 항목을 고를 때 보게 됩니다. 해야 할 일은 피커에서 원하는 항목까지 스크롤하는 것뿐이며, 짠!
스크롤 피커는 사용하기도 이해하기도 매우 쉽지만, 사용하는 즐거움도 매우 큰 도구입니다! 이 글에서는 ProtoPie의 Chain 및 3D Rotate 기능을 사용해, 추가적인 깊이감을 주는 스크롤 휠 피커를 만드는 방법을 배워보겠습니다.
배울 내용
페이징 컨테이너를 사용해 스크롤 가능한 뷰 만들기
변수를 사용해 스크롤 값 가져오기
스크롤 값에 따라 Chain과 3D Rotate를 사용해 추가적인 깊이감 더하기
Start를 사용해 각 목록 항목의 초기 회전 설정하기
마지막에는 이런 것을 만들 수 있게 됩니다!
단계별 안내
1. 페이징 컨테이너를 사용해 스크롤 가능한 뷰 만들기
여기서는 스크롤 가능한 기본 컴포넌트를 만들겠습니다.
1. 페이징 컨테이너를 추가하고, 장면의 흰색 박스를 덮도록 크기를 327 x 216으로 설정합니다. 참고하기 쉽도록 이 컨테이너의 이름을 Paging으로 바꿉니다.
2. month 레이어들, 즉 June, July부터 December까지 모두 선택합니다. 이 레이어들을 Paging 컨테이너 안으로 드래그합니다. 이 목록이 컨테이너 안에서 스크롤 가능해질 것입니다.
💡 특히 높이를 216으로 하는 등, 이러한 크기를 사용하는 것이 페이징 컨테이너에 중요한 이유는 다음과 같습니다:
스크롤 중 컨테이너 안에서 각 목록 항목이 가운데에 오도록 도와줍니다. 각 month 레이어의 높이는 72이며, 페이징 컨테이너에서는 그중 세 개의 레이어가 한 번에 보이게 됩니다. 그래서 높이가 216이 됩니다. 즉, 3 ✕ 72입니다.
화면에서 사용자의 스크롤 터치에 반응하는 영역이 이곳 하나만 됩니다.
3. Paging 컨테이너를 선택하고, 속성 패널에서 다음 항목을 변경합니다.
Page by를 Container에서 Custom으로 변경하고, 값을 72로 설정합니다. 이렇게 하면 각 스크롤 간격(페이지)이 72가 되며, 이는 month 레이어 각각의 높이와 정확히 일치합니다. 예를 들어 June도 높이가 72입니다. 이렇게 해야 스크롤 중 각 month 레이어가 완벽하게 정렬됩니다.
Scroll을 72로 변경합니다. 이렇게 하면 장면이 시작될 때 스크롤이 72만큼 오프셋됩니다. 목록의 첫 번째 month가 June(높이도 72)이므로, 72포인트 오프셋은 두 번째 목록 항목인 July가 선택된 것처럼 보이게 합니다.
4. 목록의 끝에 추가 여백을 넣어 마지막 항목인 December도 스크롤 휠의 중앙에 선택된 상태로 보이게 합니다. 이를 위해 rectangle를 추가할 수 있습니다. 이름을 Margin으로 바꿉니다.
Margin이 Paging 컨테이너 안에 있고, 다른 month 레이어와 같은 크기, 즉 217 ✕ 72인지 확인합니다. 이렇게 해야 December가 중앙에 보이게 됩니다.
또한 Margin의 Opacity를 0으로 설정해야 합니다. 그렇지 않으면 목록에 보기 좋지 않은 항목이 보이게 됩니다.
5. Paging 컨테이너를 다시 한 번*,* 선택하고, 속성 패널에서 Clip Sublayers가 활성화되어 있는지 확인합니다. 이렇게 하면 컴포넌트 바운딩 박스 밖의 모든 콘텐츠가 숨겨집니다.
2. 변수를 사용해 스크롤 값 가져오기
추가 인터랙션을 만들기 위해서는 사용자가 목록을 얼마나 스크롤하는지 알아야 합니다. 이를 위해 변수를 사용해 스크롤 값을 감지하고 저장하겠습니다. 방법은 다음과 같습니다:
1. 이 장면에 대해 변수를 생성합니다. 참고하기 쉽도록 변수 이름을 Scroll로 바꿉니다. 이 변수에 직접 수식을 할당할 것이므로 이 장면에 대해를 선택하는 것이 중요합니다. 이 기능은 지정된 장면의 변수에서만 동작합니다.
2. Scroll 변수를 선택한 상태에서 속성 패널의 수식 사용 옵션을 활성화합니다.
3. 아래에 나타나는 수식 입력란에 'Paging'.scrollOffset 수식을 사용합니다. Paging은 컨테이너 Paging을 지정하고, scrollOffset은 현재 스크롤 값을 반환합니다.
4. Scroll 옆의 디버그 아이콘을 클릭해 미리보기 창에서 변수 값을 실시간으로 확인합니다. 다시 이 아이콘을 누르면 미리보기 창에서 스크롤 값을 숨길 수 있습니다.
3. 스크롤 값에 따라 Chain과 3D Rotate를 사용해 추가적인 깊이감 더하기
이 단계가야말로 실제와 같고 시각적으로도 즐거운 프로토타입을 만드는 핵심입니다. 방법은 다음과 같습니다:
1. Paging 컨테이너에 Chain 트리거를 추가하고, 속성 패널에서 값을 Scroll로 설정합니다.
2. 레이어 June.에 3D Rotate 응답을 추가합니다.
3D rotate의 속성 패널에서 다음 값을 사용합니다:
범위 1의 시작에서, Paging의 스크롤이 0일 때 레이어 June이 0으로 3D 회전되어야 합니다. 즉, 현재처럼 평평한 상태를 유지합니다. 범위 1의 끝에서는 Paging을 72까지 스크롤했을 때 레이어 June이 35도 각도로 회전해야 합니다.
Rotation Direction을 upward로 설정합니다.
이 값들을 함께 사용하면 Paging의 스크롤이 0에서 72로 이동할 때 June이 위쪽으로 0º에서 35º까지 회전합니다.
3. 같은 방식으로 July 레이어에도 3D Rotate 응답을 추가합니다. 이번에는 Paging이 위로 스크롤될 때 레이어를 위로 회전시키고, 아래로 스크롤될 때는 아래로 회전시켜야 합니다. 이를 위해 두 개의 범위를 사용하겠습니다.
범위 1에서는 Paging을 0에서 72로 스크롤할 때 July가 -35º에서 0º로 회전해야 합니다. 음수 각도(-35º)를 사용하므로 방향을 upward로 설정합니다.
범위 2에서는 Paging을 72에서 144까지 스크롤할 때(즉, July가 두 번째 항목이므로 72 ✕ 2) July가 0º에서 35º로 회전해야 합니다. 방향을 upward로 설정합니다.
4. 이 과정을 모든 month 레이어에 대해 반복해야 합니다.
체인을 올바르게 설정했는지 확인하려면 완성된 pie를 확인해 보세요.
4. Start를 사용해 각 목록 항목의 초기 회전 설정하기
미리보기 창(또는 위의 화면 녹화)에서 보게 되겠지만, month 레이어의 회전 각도는 0에서 즉시 전환됩니다. 예를 들어 September가 화면에 처음 나타날 때 평평한 상태에서 회전된 상태로 바뀌는 것을 확인할 수 있습니다.
이것은 각 레이어에 대해 특정 스크롤 범위의 3D Rotation을 정의했지만, 프로토타입이 시작될 때 September 같은 레이어는 그 범위 밖에 있기 때문입니다. 그런 레이어가 범위 안으로 들어오면 3D 회전이 즉시 발생해 약간 갑작스럽게 보일 수 있습니다.
시각적으로는 조금 오류처럼 보이지만, 쉽게 고칠 수 있습니다! 방법은 다음과 같습니다:
1. 인터랙션 패널에서 트리거 추가를 클릭하고 Start를 선택합니다.
2. Start 트리거 안에 June 레이어에 대한 3D Rotate 응답을 추가합니다. Rotation을 Rotate To로 변경하고, 값을 35로 설정합니다. 방향은 upward로 설정합니다. 마지막으로 Duration을 0으로 설정합니다.
💡 Duration을 0으로 설정하면 장면이 시작되자마자 레이어가 즉시 35º로 회전합니다. 장면이 시작될 때 사용자에게 애니메이션이 보이지 않도록 효과가 즉시 발생하길 원합니다.
3. July는 장면이 시작될 때 기본적으로 0º이므로 Start 값이 필요하지 않습니다. August와 그 이후의 각 레이어에는 위 과정을 반복하되, 한 가지 값만 바꾸면 됩니다. Rotate To 값은 -35º로 설정해야 합니다.
4. 이제 모두 끝났습니다! 미리보기 창에서 프로토타입을 실행해 보세요.
이상입니다!
잘하셨습니다! 페이징 컨테이너를 만들고, 초기값과 변수를 사용해 실시간 스크롤 값을 설정하는 방법을 배웠습니다. 또한 이 스크롤 값에 대해 Chain 트리거와 3D Rotate 응답을 사용하는 방법도 배웠습니다. 마지막으로 Start를 사용해 장면을 설정하고, 그것이 가져올 수 있는 개선 효과도 배웠습니다.
이 배움을 바탕으로 이것저것 시도해 보세요. 훨씬 더 흥미로운 인터랙션을 만들 수 있을 것입니다! 여러분의 기발한 실험도 꼭 보고 싶습니다. 직접 프로토타입을 만들어 Twitter나 Instagram에 #MadeWithProtoPie와 함께 공유해 주세요.
