프로토타입 열기
1
Preview 클릭
에디터 도구 모음에서 Preview를 클릭합니다. 프로토타입 플레이어가 에디터와 분리된 전체 페이지 보기로 열립니다.
2
Flowstep이 화면을 연결하게 하기
파일에 두 개 이상의 화면이 있으면, 프로토타입을 열 때 Flowstep이 대화형 요소(버튼, 카드, 메뉴 항목)를 대상 화면에 자동으로 연결합니다(작동 중에 “Bringing your screens to life” 메시지가 표시됩니다). 링크는 마지막 실행 이후 화면이 변경되었을 때만 재생성됩니다.
3
플로우를 클릭해서 탐색하기
연결된 요소(버튼, 카드, 메뉴 항목)를 클릭하여 대상 화면으로 이동합니다. 사이드바에 파일의 모든 화면이 표시되어 원하는 화면으로 직접 이동할 수 있으며, Back to editor를 클릭하면 파일로 돌아갑니다.
자동 연결을 사용하려면 파일에 최소한 두 개의 화면이 필요합니다. 링크 생성이 실패하면 플레이어의 Retry 버튼을 사용하세요.
탐색을 수동으로 설정하기
요소가 이동할 위치를 정확하게 제어할 수 있습니다:- 에디터에서 요소(예: 버튼)를 선택합니다.
- 오른쪽의 속성 패널에서 Navigation 패널을 엽니다.
- 드롭다운에서 대상 화면을 선택합니다 — 또는 No navigation을 선택하여 링크를 제거합니다.
대화형 컨트롤
프로토타입은 단순히 클릭 가능한 탐색 이상입니다 — 화면의 컨트롤은 미리보기 중에 반응합니다. 스위치를 켜거나 끄고, 체크박스를 클릭하고, 라디오 옵션을 선택하고, 드롭다운을 선택하고, 탭을 전환하고, 필드에 입력하고, 카운터를 증가시키면 화면이 실시간으로 새 상태를 반영하도록 업데이트됩니다. 파일의 화면은 미리보기 세션 중에 하나의 프로토타입 상태를 공유하므로 한 화면에서 수행한 변경 사항이 다른 화면을 클릭할 때도 유지됩니다. 화면을 밝은 모양과 어두운 모양 간에 전환하여 어떻게 반응하는지 확인할 수도 있습니다.대화형 동작은 화면에서 자동으로 생성됩니다 — 설정할 것이 없습니다. 파일을 미리보기하여 시도해보세요.