많은 모바일 앱에서 고정 헤더 경험을 사용하는 것을 보셨을 수 있습니다. 예를 들어 웹 브라우저를 보면 — 아래로 스크롤하면 헤더와 주변 버튼이 물러나고, 위로 스크롤하면 다시 슬라이드되어 들어옵니다. 이 경험은 사진 피드이든, 흥미로운 블로그 글이든, 쇼핑하면서 둘러볼 항목 목록이든, 사용자가 페이지에 완전히 몰입할 수 있게 해줍니다.
아래로 스크롤하는 동안 헤더를 부분적으로(또는 완전히) 숨기면 화면에 더 많은 콘텐츠를 볼 수 있습니다. 이것이 이 경험이 그렇게 매력적이고 인기 있는 이유입니다. 하지만 더 놀라운 점은 ProtoPie에서 이런 현실적인 경험을 만드는 것이 얼마나 쉬운지입니다. 필요한 것은 스크롤 방향을 확인하는 조건 하나뿐입니다. ProtoPie에 내장된 수식과 조건 설정 기능 덕분에, 여러분도 금세 이 경험을 완성할 수 있습니다!
개요
배우게 될 내용
고정 헤더를 만드는 단계별 가이드
팁과 요령
이것으로 끝입니다! 고정 헤더를 프로토타이핑했습니다
배우게 될 내용
스크롤 가능한 보기를 만들기 위해 스크롤 컨테이너 만들기
스크롤 컨테이너의 스크롤 속성 감지하기
조건과
$touchVelocityY > 0,$touchVelocityY < 0수식을 사용해 스크롤 방향 확인하기스크롤 방향에 따라 별도의 인터랙션 추가하기
마지막에는, 이런 것을 만들 수 있게 됩니다!
고정 헤더를 만드는 단계별 가이드
1. 스크롤 가능한 보기를 만들기 위해 스크롤 컨테이너 만들기
여기서는 스크롤이 활성화된 기본 페이지를 만들 것입니다.
도구 모음에서 Container로 이동한 다음 Scroll Container를 선택합니다. 이렇게 하면 스크롤이 활성화된 컨테이너가 만들어집니다. 이 컨테이너의 이름을 "Scroll"로 바꿔 보겠습니다. 이렇게 하면 앞으로 작업하면서 이 컨테이너를 더 쉽게 찾을 수 있습니다.
컨테이너 Scroll의 모서리 중 하나를 드래그하여 화면을 덮을 만큼 충분히 크게 조정합니다. 또는 크기를 393 x 852로 입력하고 위치를 0,0으로 설정할 수도 있습니다. 스크롤 감지는 컨테이너가 존재하는 영역에서만 발생할 수 있으므로, 화면에 맞게 컨테이너를 조정해야 합니다. 이 예제에서는 전체 화면을 사용하겠습니다.
레이어 패널에서 Scroll 레이어를 드래그하여 Card list 레이어 바로 위에 오도록 순서를 변경합니다. 이렇게 하면 카드가 보이지 않는 영역에서 원치 않는 탭을 방지하는 데 도움이 됩니다.
이제 레이어 패널에서 Card list 레이어를 Scroll 안으로 드래그합니다. 이것이 Card list 레이어를 스크롤 가능하게 만드는 마지막 단계입니다.
도구 모음에서 미리 보기를 눌러 확인해 보세요.
2. 스크롤 컨테이너의 스크롤 속성 감지하기
이 단계는 씬에서 콘텐츠가 스크롤될 때마다 인터랙션이 작동하도록 도와줍니다.
1. 인터랙션 패널에서 트리거 추가를 클릭하고 감지를 추가합니다. 트리거 속성 패널에서 선택된 레이어가 Scroll인지 확인하고, 기본값을 X에서 Scroll로 변경합니다.
값을 Scroll로 변경하면 선택한 레이어의 스크롤 위치 변화가 감지됩니다. 대신 X를 선택했다면 선택한 레이어의 X 위치 변화가 감지됩니다. 하지만 **Scroll ** 레이어의 X 위치는 전혀 변하지 않기 때문에, 감지 트리거는 아무런 반응도 일으키지 않습니다.
3. 조건과 수식을 사용해 스크롤 방향 확인하기
이제 Scroll 레이어에서 스크롤이 발생하는 시점을 감지할 수 있으므로, 스크롤 방향—위쪽과 아래쪽—에 따라 서로 다른 응답을 적용할 수 있도록 조건을 설정하겠습니다.
인터랙션 패널에서 감지 트리거 아래의 +를 눌러 새 응답을 추가하고, 조건을 선택합니다.
조건 속성 패널에서 레이어 드롭다운을 클릭한 다음 수식으로 변경합니다.
3. 수식 표시줄을 클릭하고 **fx **를 눌러 수식 도우미를 엽니다. 다음을 입력합니다: $touchVelocityY
$touchVelocityY는 움직이고 있는 손가락(또는 마우스)의 터치 속도를 Y축 기준으로 반환합니다. 따라서 움직임이 어느 방향으로 일어나는지도 알 수 있습니다. 예를 들어 아래로 스크롤하면 값이 < 0이 되고, 위로 스크롤하면 > 0이 됩니다.
$touchVelocityY는 화면 전체에서 터치를 확인합니다.
4. 스크롤 방향에 따라 별도의 인터랙션 추가하기
첫 번째 조건에서는 콘텐츠가 아래로 스크롤될 때의 인터랙션을 설정하겠습니다. 조건 속성 패널에서 <(작음)을 선택하고 값을 0으로 설정합니다. 인터랙션 패널에서
$touchVelocityY < 0조건이 보일 것입니다. 이는 이 조건 아래의 모든 응답이 터치 속도가 음수일 때, 즉 아래로 스크롤될 때 동작한다는 뜻입니다.인터랙션 패널에서 감지 아래의 +를 클릭하고 Move 응답을 추가합니다. tabBar 레이어를 선택한 다음, Y 축의 852 위치로 이동하도록 설정합니다. X 좌표는 비워 두어도 됩니다. 이렇게 하면 아래로 스크롤할 때 tabBar 레이어가 화면 하단으로 이동합니다.
Header 레이어도 이동시키고 싶습니다. 따라서 인터랙션 패널에서 감지 아래의 +를 클릭하고 또 다른 Move 응답을 추가합니다. 이번에는 Header 레이어를 선택하고, Y 축의 0 위치로 이동하도록 설정합니다. 이렇게 하면 아래로 스크롤할 때 Header 레이어가 화면 상단으로 이동합니다.
마지막으로, 위로 스크롤할 때 두 레이어를 다시 가져오고 싶습니다. 감지 아래의 +를 클릭하고 또 다른 조건을 추가합니다. 수식 $touchVelocityY를 다시 입력합니다. 하지만 이번에는 >를 선택하고 값을 0으로 설정합니다.
인터랙션 패널에서 $touchVelocityY > 0이라는 또 다른 조건이 보일 것입니다.
이렇게 하면 스크롤 방향이 위쪽일 때의 인터랙션을 설정할 수 있습니다. 이제 앞서 사용한 Move 응답을 반복하여 두 레이어를 원래 위치로 되돌릴 수도 있고, 뒤에서 자세히 설명하는 (아주 멋진) Reset 응답을 사용할 수도 있습니다.
💡 팁과 요령
위로 스크롤할 때 다시 Move 응답을 사용하는 대신, Reset 응답을 사용하면 효율성을 극대화할 수 있습니다.
감지 아래의 +를 클릭하고 Reset을 선택합니다. 이를 tabBar 레이어에 적용합니다. 이 경우 더 현실적인 전환을 위해 이징을 Ease out으로 설정합니다. 같은 방법으로 Reset 응답을 하나 더 추가하되, 이번에는 Header 레이어에 적용합니다.
Reset 응답은 선택한 레이어를 재설정하여 원래 위치와 상태로 되돌립니다.
이것으로 끝입니다! 고정 헤더를 프로토타이핑했습니다
이제 ProtoPie에서 고정 헤더를 만드는 방법을 익혔으니, 더 역동적이고 인터랙티브한 프로토타입을 만드는 데 한 걸음 더 가까워졌습니다. 여기서 멈추지 말고 ProtoPie의 잠재력을 마음껏 활용해 창의적인 아이디어를 현실로 구현해 보세요.
