> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Flowstep 디자인을 대화형 프로토타입으로 미리보기

> Flowstep 파일을 클릭 가능한 프로토타입으로 열어보세요 — Flowstep이 화면을 자동으로 연결하며, 요소별로 탐색을 수동으로 설정하거나 잠금할 수 있습니다.

Flowstep은 파일의 화면을 클릭 가능한 프로토타입으로 변환할 수 있습니다. 에디터 도구 모음에서 **Preview**를 클릭하면 Flowstep이 전체 페이지 프로토타입 플레이어를 열어 플로우를 클릭해서 탐색할 수 있습니다 — 사용자 여정을 테스트하거나 이해관계자에게 제시하는 데 유용합니다.

## 프로토타입 열기

<Steps>
  <Step title="Preview 클릭">
    에디터 도구 모음에서 **Preview**를 클릭합니다. 프로토타입 플레이어가 에디터와 분리된 전체 페이지 보기로 열립니다.
  </Step>

  <Step title="Flowstep이 화면을 연결하게 하기">
    파일에 두 개 이상의 화면이 있으면, 프로토타입을 열 때 Flowstep이 대화형 요소(버튼, 카드, 메뉴 항목)를 대상 화면에 자동으로 연결합니다(작동 중에 "Bringing your screens to life" 메시지가 표시됩니다). 링크는 마지막 실행 이후 화면이 변경되었을 때만 재생성됩니다.
  </Step>

  <Step title="플로우를 클릭해서 탐색하기">
    연결된 요소(버튼, 카드, 메뉴 항목)를 클릭하여 대상 화면으로 이동합니다. 사이드바에 파일의 모든 화면이 표시되어 원하는 화면으로 직접 이동할 수 있으며, **Back to editor**를 클릭하면 파일로 돌아갑니다.
  </Step>
</Steps>

<Note>
  자동 연결을 사용하려면 파일에 최소한 두 개의 화면이 필요합니다. 링크 생성이 실패하면 플레이어의 **Retry** 버튼을 사용하세요.
</Note>

## 탐색을 수동으로 설정하기

요소가 이동할 위치를 정확하게 제어할 수 있습니다:

1. 에디터에서 요소(예: 버튼)를 선택합니다.
2. 오른쪽의 속성 패널에서 **Navigation** 패널을 엽니다.
3. 드롭다운에서 대상 화면을 선택합니다 — 또는 **No navigation**을 선택하여 링크를 제거합니다.

직접 설정한 링크가 Flowstep의 자동 연결로 덮어씌워지지 않도록 하려면, Navigation 패널에서 **Lock link**를 클릭합니다. 잠금된 링크는 링크가 재생성될 때 변경되지 않습니다.

## 대화형 컨트롤

프로토타입은 단순히 클릭 가능한 탐색 이상입니다 — 화면의 컨트롤은 미리보기 중에 반응합니다. 스위치를 켜거나 끄고, 체크박스를 클릭하고, 라디오 옵션을 선택하고, 드롭다운을 선택하고, 탭을 전환하고, 필드에 입력하고, 카운터를 증가시키면 화면이 실시간으로 새 상태를 반영하도록 업데이트됩니다.

파일의 화면은 미리보기 세션 중에 하나의 프로토타입 상태를 공유하므로 한 화면에서 수행한 변경 사항이 다른 화면을 클릭할 때도 유지됩니다. 화면을 밝은 모양과 어두운 모양 간에 전환하여 어떻게 반응하는지 확인할 수도 있습니다.

<Note>
  대화형 동작은 화면에서 자동으로 생성됩니다 — 설정할 것이 없습니다. 파일을 미리보기하여 시도해보세요.
</Note>