ProtoPie 포뮬러를 활용한 스티키헤더 만들기
ProtoPie, ProtoPie 팁, 프로토타이핑
Free Your Ideas, ProtoPie
많은 모바일 앱이 스티키헤더를 사용하고 있습니다. 예를 들어, 웹 브라우저에서는 아래로 스크롤 할 때 헤더와 주변 버튼들이 사라졌다가, 위로 스크롤하면 다시 보이게 되는 것과 같은데요. 스티키헤더를 사용하면 사용자는 사진 피드나 흥미로운 블로그 포스트, 쇼핑몰의 상품 목록에서까지 페이지에 완전히 몰입할 수 있게됩니다.
아래로 스크롤 할 때 헤더를 부분적으로(또는 완전히) 숨기면 사용자는 페이지 속 컨텐츠를 더 많이 볼 수 있고, 이것은 즐거운 경험이 됩니다. 그러나 훨씬 더 즐거운 것은 ProtoPie에서 스티키헤더를 매우 쉽게 만들 수 있다는 사실이죠. 스크롤 방향을 확인하기 위한 condition만 있으면 됩니다. ProtoPie에 내장된 formulas와 conditioning functionality 덕분에 금방 완벽하게 제작할 수 있을 거예요.
무엇을 배우게 될까요?
아래 네 가지를 배우고 나면, 위와 같이 만들 수 있을 거예요.
1. 스크롤 가능한 화면을 만들기 위한 scroll container 만들기
2. scroll container의 스크롤 특성 확인하기
3. 스크롤 방향을 확인하기 위해 condition과 $touchVelocityY > 0, $touchVelocityY < 0 사용하기
4. 스크롤 방향에 따라 별도의 인터랙션 추가하기
프로토타입 시작하기 / 완성된 프로토타입 확인하기
단계별 설명
1. 스크롤 가능한 화면을 만들기 위한 scroll container 만들기
먼저 스크롤을 사용할 수 있는 기본 페이지를 만들어보겠습니다.
① 도구 모음의 Container에서 Scroll Container를 선택하면 스크롤 가능한 container가 만들어 집니다. 이 containr의 이름을 "Scroll"로 변경하세요. 나중에 container를 찾는 데 도움이 될 거예요.
② 스크린을 덮을 만큼 모서리를 드래그 하여 "Scroll" container의 크기를 조절하세요. 크기를 375 x 812, 위치를 0.0으로 설정하는 방법도 있습니다. 화면에 맞게 container의 크기를 조절하는 이유는 container가 있는 곳에서만 스크롤을 감지할 수 있기 때문입니다. 이 예제에서는 전체 화면을 사용합니다.
③ layers panel의 Scroll을 드래그 하여 Card list 레이어 바로 위에 Scroll 레이어가 오도록 재정렬 합니다. 이렇게 하면 카드가 보이지 않는 곳에서 원하지 않는 터치를 방지할 수 있습니다.
④ 이제 layer panel의 Scroll 안에 있는 Card list 레이어를 드래그 하세요. 이것이 Card list 레이어를 스크롤 할 수 있도록 하는 마지막 단계입니다.
⑤ 도구 모음의 Preview를 눌러 사용해 보세요.
2. scroll container의 스크롤 특성 확인하기
이번에는 화면에서 컨텐츠가 스크롤 될 때마다 인터랙션이 실행되도록 합니다.
① interaction 패널에서 Add Trigger를 클릭하고 Detect를 추가합니다. trigger 속성 패널에서 선택된 레이어가 Scroll인지 확인하고, 기본값을 X에서 Scroll로 변경하세요.
· Scroll로 값을 변경하면 선택된 레이어에서 스크롤 위치가 바뀌는 것을 trigger가 모두 감지할 수 있습니다. 만약 값이 그대로 X였다면, trigger는 선택된 레이어에서 X 위치가 바뀌는 것을 감지할 것입니다. 그러나 레이어 Scroll의 X 위치가 전혀 바뀌지 않으므로, Detect trigger는 아무런 response도 얻을 수 없겠죠.
3. 스크롤 방향을 확인하기 위해 condition과 formula 사용하기
이제 레이어 Scroll에서 발생하는 스크롤을 감지할 수 있게 되었으므로, 스크롤의 방향이 위인지 아래인지에 따라 다른 response를 허용하는 조건을 설정해보겠습니다.
① interaction 패널에서 Detect trigger 아래 +를 눌러 추가할 새 response로 Condition을 선택합니다.
② condition 속성 패널에서 레이어의 드롭다운(▼)을 클릭해 Formula로 변경합니다.
③ formula 바의 fx를 클릭해 $touchVelocityY를 입력합니다.
$touchVelocityY 는 Y축을 따라 움직이는 손가락(또는 마우스)의 터치 속도를 반환합니다. 이로 인해 어느 방향으로 움직임이 발생하는지도 알 수 있게 되는데요. 예를 들어 아래로 스크롤 하면 0보다 작은 값이, 위로 스크롤 하면 0보다 큰 값이 나옵니다.
$touchVelocityY 전체 화면에서 발생하는 터치를 확인할 것입니다.
4. 스크롤 방향에 따라 별도의 인터랙션 추가하기
① 첫 번째 condition으로 컨텐츠가 아래로 스크롤 될 때의 인터랙션을 설정해 보겠습니다. condition의 속성 패널에서 <(보다 작음)을 선택하고 값을 0으로 설정하세요. 인터랙션 패널에서 $touchVelocityY < 0 condition을 볼 수 있습니다. 이것은 터치 속도가 0보다 작을 때, 다시 말해 아래로 스크롤 할 때 해당 condition 아래 모든 response가 작동한다는 것을 의미합니다.
② 인터랙션 패널에서 Detect 밑의 +를 클릭하고 Move response를 추가합니다. 레이어 tabBar를 선택하고 Y축의 위치 812로 Move To를 설정합니다. X 좌표는 비워둡니다. 이렇게 하면 아래로 스크롤 할 때 tabBar 레이어가 스크린의 가장 아래로 이동하게 됩니다.
③ Head 레이어도 이동해보겠습니다. 인터랙션 패널에서 Detect 아래 +를 클릭하고 또 다른 Move response를 추가합니다. 이번에는 레이어 Header를 선택하고 Y축의 위치 0으로 Move To를 설정합니다. 이렇게 하면 아래로 스크롤 할 때 Header 레이어가 스크린의 가장 위로 이동하게 됩니다.
마지막으로, 위로 스크롤 할 때 두 레이어가 다시 돌아오게 만들어 보겠습니다. Detect 아래 +를 클릭하고 다른 Condition을 추가합니다. $touchVelocityY 공식을 다시 입력하세요. 그러나 이번에는 >를 선택해 값을 0으로 설정합니다.
인터랙션 패널에서 $touchVelocityY > 0 라는 다른 조건을 볼 수 있는데요.
이것은 스크롤 방향이 위일 때의 인터랙션을 설정하는데 도움이 됩니다. 이제 좀 전의 Move response를 반복해 두 레이어를 기존 위치로 이동할 수 있습니다. 또는 앞으로 설명할 Reset response를 사용해도 됩니다.
팁
위로 스크롤 하는 중에 Move response를 다시 사용하는 대신, Reset response를 사용해 효율성을 극대화 시킬 수 있습니다.
① Dectect 아래 +를 클릭하고 Reset을 선택합니다. 레이어 tabBar를 설정합니다. 이때 조금 더 현실적인 전환을 위해 Easing을 Ease out으로 설정합니다. 그리고 똑같이 다른 Reset response를 추가하는 대신 이번에는 레이어 Header를 설정합니다.
② Reset response는 선택된 레이어를 재설정하고 기존의 위치와 상태로 되돌립니다.
▼ 더 많은 ProtoPie 팁
