프로토타이핑

피그마 프로토타입: On Drag 방향 변경

피그마 오픈카톡방2026. 3. 7.

질문사항

피그마 프로토타입에서 `On Drag` 인터랙션의 드래그 방향을 어떻게 변경할 수 있나요?

답변

피그마의 `On Drag` 인터랙션에서 드래그 방향은 사용자가 직접 설정하는 것이 아니라, 연결된 두 프레임(또는 베리언트) 간의 시각적 차이에 따라 자동으로 결정됩니다.

원리: `Smart Animate`를 사용하여 두 프레임을 연결했을 때, 피그마는 두 프레임에 있는 동일한 이름의 레이어들을 비교하여 위치, 크기, 투명도 등의 변화를 감지합니다. 사용자가 드래그하면 이 변화를 따라 애니메이션이 진행됩니다.

드래그 방향을 바꾸는 방법:

두 프레임의 상태 변경: 예를 들어, `프레임 A`에서 `프레임 B`로 전환될 때, `프레임 B`의 객체들이 `프레임 A`보다 위쪽에 위치하도록 디자인하면, 사용자가 위로 드래그할 때 `프레임 B`로 전환됩니다. 반대로 `프레임 B`의 객체들이 `프레임 A`보다 아래쪽에 위치하도록 디자인하면, 아래로 드래그할 때 전환됩니다.

예시:

위로 스크롤하여 다음 화면으로 전환: `프레임 A`의 콘텐츠가 `프레임 B`에서는 위로 이동하여 일부가 보이지 않게 됩니다. 이때 `프레임 A`에서 `프레임 B`로 `On Drag`를 연결하면, 위로 드래그할 때 전환됩니다.

오른쪽으로 스와이프하여 다음 화면으로 전환: `프레임 A`의 콘텐츠가 `프레임 B`에서는 왼쪽으로 이동하고, 새로운 콘텐츠가 오른쪽에서 나타나도록 디자인합니다. 이때 `프레임 A`에서 `프레임 B`로 `On Drag`를 연결하면, 오른쪽으로 드래그할 때 전환됩니다.

결론적으로, 원하는 드래그 방향에 맞춰 두 프레임의 객체 위치와 상태를 디자인해야 합니다.