질문사항
화면을 아래로 스크롤할 때 오브젝트가 아래로 숨겨지는 형태의 인터랙션을 피그마 프로토타입으로 구현할 수 있나요?
답변
네, 피그마의 프로토타이핑 기능을 활용하여 해당 인터랙션을 구현할 수 있습니다.
핵심 원리: `On Drag` 인터랙션은 두 프레임(또는 컴포넌트 베리언트) 간의 시각적 차이를 기반으로 작동합니다. 드래그 방향은 이 두 프레임의 상태 차이에 따라 결정됩니다.
구현 방법:
두 가지 상태의 프레임 준비: 프레임 1 (초기 상태): 오브젝트가 보이는 상태. 프레임 2 (스크롤 후 상태): 오브젝트가 아래로 숨겨진 상태 (예: 오브젝트를 프레임 밖으로 이동시키거나, 투명도를 0으로 설정).프로토타입 연결: 프레임 1에서 스크롤 가능한 영역(또는 전체 프레임)을 선택합니다. `Prototype` 탭에서 `Interaction`을 추가하고 `Trigger`를 `On Drag`로 설정합니다. `Action`을 `Navigate To`로 설정하고 프레임 2를 선택합니다. `Animation`은 `Smart Animate`를 사용하는 것이 자연스러운 전환을 만듭니다.드래그 방향 설정: `Smart Animate`는 두 프레임 간의 객체 위치, 크기, 투명도 등의 변화를 자동으로 보간합니다. 사용자가 드래그하는 방향에 따라 프레임 1에서 프레임 2로, 또는 그 반대로 전환됩니다. 질문하신 '아래로 스크롤 시 오브젝트 숨김'의 경우, 프레임 2에서 오브젝트가 프레임 1보다 아래에 위치하거나 사라진 상태로 설정하면, 아래로 드래그할 때 해당 인터랙션이 발생하도록 유도할 수 있습니다.팁: `Overflow scrolling`을 `Vertical scrolling`으로 설정한 프레임 내에서 `On Drag` 인터랙션을 사용하면 더욱 실제와 같은 스크롤 경험을 만들 수 있습니다.