여러 모바일 앱에서 스크롤 시 헤더가 나타났다 사라지는 경험을 보셨을 겁니다. 웹 브라우저를 예로 들면, 아래로 스크롤할 때 헤더와 주변 버튼이 사라지고, 위로 스크롤하면 다시 들어갑니다. 이 경험은 사용자가 사진 피드, 블로그 글, 쇼핑 목록 등 다양한 콘텐츠에 몰입할 수 있게 도와줍니다.

헤더를 스크롤 시 부분적으로(또는 완전히) 숨기는 것은 화면에 더 많은 콘텐츠를 표시할 수 있게 하여 매우 유용합니다. ProtoPie에서 이 현실감 있는 경험을 만드는 것은 매우 쉽습니다. 스크롤 방향을 확인하는 조건만 필요합니다. ProtoPie의 내장된 수식 및 조건 기능을 이용한다면 금방 이 인터랙션을 완성할 수 있습니다!

기사를 통해 배울 수 있는 것들

1. 스크롤 가능한 뷰를 만들기 위해 스크롤 컨테이너 생성

2. 스크롤 컨테이너의 스크롤 속성 감지

3. 조건과 `$touchVelocityY > 0`, `$touchVelocityY < 0` 수식을 사용하여 스크롤 방향 확인

4. 스크롤 방향에 따라 다른 상호작용 추가

이 기사를 따라 천천히 만들다보면 이와 같은 것을 만들 수 있게됩니다!

시작할 때 사용할 파이🥧

완성된 파이🥧

단계별 가이드

1. 스크롤 가능한 뷰를 만들기 위해 스크롤 컨테이너 만들기

여기에서 스크롤이 가능한 기본 페이지를 만들겠습니다.

1. 툴바에서 Container를 선택한 다음, Scroll Container를 선택합니다. 이렇게 하면 스크롤이 활성화된 컨테이너가 생성됩니다. 나중에 찾기 쉽도록 이 컨테이너의 이름을 "Scroll"로 변경합니다.

2. 화면을 덮을 수 있을 정도로 충분히 커질 때까지 모서리 중 하나를 드래그하여 컨테이너 Scroll을 확장합니다. 또는 393 x 852의 크기로 설정하고 위치를 0,0으로 설정할 수 있습니다. 스크롤 감지는 컨테이너가 있는 곳에서만 발생하기 때문에 화면에 맞게 컨테이너를 확장해야 합니다. 이 예시에서는 전체 화면을 사용합니다.

3. 레이어 패널에서 Scroll을 드래그하여 Card list 레이어 바로 위에 Scroll 레이어를 이동시킵니다. 이렇게 하면 카드가 보이지 않는 곳에서 원하지 않는 탭을 방지하는 데 도움이 됩니다.

4. 이제 레이어 패널의 Card list 레이어를 Scroll 안으로 드래그합니다. Card list 레이어를 스크롤할 수 있게하는 마지막 단계입니다.

5. 툴바에서 미리보기를 눌러 테스트합니다.

2. 스크롤 컨테이너의 스크롤 속성 감지

이 단계는 씬(Scene) 내에서 콘텐츠가 스크롤될 때마다 인터랙션이 작동하도록 설정합니다.

1. 인터랙션 패널에서 'Add Trigger'를 클릭하고 'Detect'를 추가합니다. 트리거 속성 패널에서 레이어가 'Scroll'로 선택되어 있는지 확인하고, 기본 값을 'X'에서 'Scroll'로 변경합니다.

• 값을 'Scroll'로 변경하면 선택된 레이어의 스크롤 위치에 대한 모든 변경 사항을 트리거가 감지하게 됩니다. 만약 'X'를 선택했다면, 트리거는 선택된 레이어의 X 위치에 대한 변경 사항을 감지하게 됩니다. 그러나 'Scroll' 레이어의 X 위치는 전혀 변경되지 않으므로, Detect 트리거는 응답을 발생시키지 않을 것입니다.

3. 조건과 수식을 사용한 스크롤 방향 확인

이제 'Scroll' 레이어에서 스크롤이 발생할 때 이를 감지할 수 있으므로, 스크롤 방향에 따라 다른 응답을 설정하기 위한 조건을 설정하겠습니다. 이 조건을 통해 스크롤이 위로 또는 아래로 이동하는지에 따라 다른 응답을 트리거할 수 있습니다.

1. 인터랙션 패널에서 'Detect' 트리거 아래에 있는 + 버튼을 눌러 새로운 응답을 추가합니다. 'Condition'(조건)을 선택하세요.

2. 조건의 속성 패널에서 레이어 드롭다운을 클릭한 다음, 이를 'Formula'(수식)로 변경합니다.

3. 수식 입력란을 클릭하고, fx 버튼을 눌러 수식 도우미를 엽니다. 그런 다음 $touchVelocityY를 입력합니다.

$touchVelocityY는 손가락(또는 마우스)을 사용한 터치가 Y축을 따라 움직일 때의 속도를 반환합니다. 이를 통해 움직임이 어느 방향으로 발생하는지도 알 수 있습니다. 예를 들어, 아래로 스크롤할 때는 값이 0보다 작고, 위로 스크롤할 때는 값이 0보다 큽니다.

$touchVelocityY는 화면 전체에서 터치를 감지합니다.

4. 스크롤 방향에 따라 다른 인터랙션 추가

1. 첫 번째 조건으로, 콘텐츠가 아래로 스크롤될 때 상호작용을 설정하겠습니다. 조건 속성 패널에서 `<`(작다)를 선택하고 값을 0으로 설정합니다. 인터랙션 패널에서 `$touchVelocityY < 0` 조건을 확인할 수 있습니다. 이 조건은 터치 속도가 음수일 때, 즉 아래로 스크롤할 때 모든 응답이 작동함을 의미합니다.

2. 인터랙션 패널에서 Detect 아래에 있는 + 버튼을 클릭하여 Move 응답을 추가합니다. 레이어 tabBar를 선택하고, Y 축 위치를 852로 설정합니다. X 좌표는 비워둘 수 있습니다. 이는 아래로 스크롤할 때 tabBar 레이어를 화면 하단으로 이동시킵니다.

3. 또한, Header 레이어도 이동시키고자 합니다. 인터랙션 패널에서 Detect 아래에 있는 + 버튼을 클릭하여 또 다른 Move 응답을 추가합니다. 이번에는 레이어 Header를 선택하고, Y 축 위치를 0으로 설정합니다. 이는 아래로 스크롤할 때 Header 레이어를 화면 상단으로 이동시킵니다.

마지막으로, 위로 스크롤할 때 두 레이어를 원래 위치로 되돌리고자 합니다. Detect 아래에 있는 + 버튼을 클릭하여 또 다른 Condition(조건)을 추가합니다. 이전과 마찬가지로 $touchVelocityY 수식을 입력합니다. 하지만 이번에는 `>`(크다)를 선택하고 값을 0으로 설정합니다.

이제 인터랙션 패널에서 $touchVelocityY > 0이라는 새로운 조건을 확인할 수 있습니다. 

이 조건은 스크롤 방향이 위쪽일 때 인터랙션을 설정하는 데 사용됩니다. 이제 이전에 사용했던 Move 응답을 반복하여 두 레이어를 원래 위치로 되돌릴 수 있습니다. 또는 이후에 자세히 설명될 매우 유용한 Reset 응답을 사용할 수도 있습니다.

팁

위로 스크롤할 때 Move 응답을 다시 사용하는 대신, 효율성을 극대화하기 위해 Reset 응답을 사용할 수 있습니다.

1. Detect 아래의 + 버튼을 클릭하고 Reset을 선택한 후, 이를 tabBar 레이어에 설정합니다. 보다 현실감 있는 전환을 위해 Easing 옵션을 Ease out으로 설정합니다. 동일한 방법으로 다른 Reset 응답을 추가하고, 이번에는 Header 레이어에 설정합니다.

2. Reset 응답은 선택된 레이어를 초기 위치와 상태로 되돌려줍니다. 이를 통해 스크롤 방향에 관계없이 레이어를 효율적으로 관리할 수 있습니다.

스티키 프로토타입 완성!

이제 ProtoPie에서 스티키 헤더를 프로토타이핑하는 방법을 마스터했습니다. 이를 통해 보다 동적이고 인터랙티브한 프로토타입을 만들 수 있습니다. ProtoPie의 잠재력을 탐구하여 창의적인 디자인을 실제로 만들어보세요!