ProtoPie 없이 모션 프로토타입

화면 전환 하나, 토스트 하나를 보여 주려고 별도의 프로토타입 도구로 화면을 옮기고 인터랙션을 다시 만드는 경우가 많습니다. 그렇게 만든 프로토타입은 보기에는 좋지만, 개발로 넘어갈 때 "이 움직임이 정확히 몇 ms였지?"를 다시 묻게 됩니다. ScreenPath에서는 화면을 설계한 그 자리에서 모션을 정하고, 재생으로 확인하고, 같은 값을 명세로 넘깁니다.

ProtoPie는 세밀한 인터랙션과 센서까지 다루는 훌륭한 도구입니다. 이 글은 그 대신이 아니라, 앱 흐름 수준의 모션이라면 설계 도구 안에서 끝낼 수 있다는 이야기입니다.

모션 프리셋으로 시작

ScreenPath에는 모션 프리셋이 60개 들어 있습니다.

• 화면 전환 — 즉시, 페이드, 밀기(push), 덮기(slide over), 팝, 뒤집기, 시트, 모달, 전체 화면 덮기, 서랍, 탭 등
• 오버레이 — 토스트, 스낵바, 툴팁, 팝오버, 확인 대화상자, 액션 시트, 로딩, 코치마크
• 반응 — 누름, 나타남, 주의 끌기, 스크롤, 제스처, 값 바뀜, 햅틱

길이는 instant·fast·normal·slow·slower 토큰으로 맞추고, 프리셋마다 "움직임 줄이기"를 켠 사용자에게 어떻게 보일지가 함께 기록됩니다. 필요하면 나만의 프리셋을 만들어 프로젝트 전체에서 씁니다.

트리거와 조건

움직임은 무엇이 일으키는지와 함께 정해야 의미가 있습니다. ScreenPath는 누름·두 번 누름·길게 누름·끌기·밀기·핀치·회전·마우스 올림·스크롤·화면 들어옴·타이머·값 바뀜·제출·변수 일치 등 34종의 트리거를 지원합니다.

변수(글·숫자·참거짓·선택지)를 두면 "장바구니에 담긴 수가 0보다 크면 배지를 띄운다"처럼 조건에 따라 다른 반응을 줄 수 있고, 셀렉터 값에 따라 다른 화면으로 가는 길은 지도에 점선으로 바로 보입니다.

재생으로 확인

재생 화면은 설계한 화면을 실제 앱처럼 띄우고, 정해 둔 트리거와 모션 그대로 움직입니다. 목록·카드·이미지에 아직 실제 내용이 없으면 예시 내용으로 채워 보여 주기 때문에, 회색 상자만 있는 뼈대 대신 앱다운 화면으로 흐름을 점검할 수 있습니다. 휴대폰을 짝지어 실제 기기에서 이어서 재생할 수도 있습니다.

같은 값을 그대로 넘긴다

모션을 설계 도구 안에서 정하는 가장 큰 이유는 넘기기입니다. md 명세의 "상태(변수)와 모션 규격" 절에는 화면 전환과 화면 안 반응이 트리거·프리셋·길이·곡선과 함께 표로 들어가고, 웹·React Native·SwiftUI·Flutter에서 대응하는 구현 방식이 나란히 적힙니다. Claude나 개발자는 영상을 보고 추측하지 않고 그 표를 따라 구현합니다.

Figma로 보내야 한다면 ScreenPath Figma 플러그인이 프로토타입 연결과 전환까지 내보냅니다. 다만 핀치·회전처럼 Figma가 재현하지 못하는 일부 동작은 가장 가까운 동작으로 바뀝니다.

정리

• 앱 흐름 수준의 모션(전환·오버레이·반응)은 설계 도구 안에서 정하고 확인할 수 있습니다.
• 트리거·변수·조건까지 같은 프로젝트에 있으므로 재생이 곧 명세 확인입니다.
• 정한 값은 md 명세와 MCP로 그대로 코드까지 갑니다.