> ## 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에서 UI 화면 생성

> Flowstep으로 단일 텍스트 프롬프트에서 한 번에 1개 또는 최대 6개의 화면을 생성합니다 — 빠른 UI 아이디어 탐색과 전체 흐름 탐색에 이상적입니다.

<iframe src="https://www.youtube.com/embed/hHNwjKz_264" title="YouTube video player" frameborder="0" className="w-full aspect-video rounded-xl" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />

Flowstep은 자연 언어 프롬프트로부터 UI 화면을 생성하여, 아이디어에서 시각적 디자인으로 몇 초 안에 전환할 수 있게 해줍니다. 개념을 검증하기 위한 단일 화면이 필요하든, 전체 사용자 여정을 포함하는 전체 화면 세트가 필요하든, 잘 작성된 프롬프트만 있으면 시작할 수 있습니다.

## 디자인 생성

<Steps>
  <Step title="새 프로젝트 열기">
    Flowstep 대시보드에서 새 프로젝트를 만들거나 화면을 추가할 기존 프로젝트를 엽니다.
  </Step>

  <Step title="프롬프트 작성">
    생성할 화면 또는 화면들에 대한 설명을 입력합니다. 앱의 유형, 사용자의 목표, 예상되는 콘텐츠에 대해 구체적으로 작성합니다.
  </Step>

  <Step title="생성할 화면 수 지정">
    기본적으로 Flowstep은 단일 화면을 생성합니다. 여러 화면을 원하면 프롬프트에서 명시적으로 지정하면 됩니다 — Flowstep은 하나의 프롬프트에서 최대 6개의 화면을 생성할 수 있습니다.
  </Step>

  <Step title="생성">
    프롬프트를 제출합니다. Flowstep은 화면을 생성하고 편집기에 표시하므로 검토하거나 수정할 수 있습니다.
  </Step>
</Steps>

## 단일 화면 대 여러 화면

단일 프롬프트에서 1개 또는 최대 6개의 화면을 생성할 수 있습니다. 두 가지 방식 모두 디자인 작업의 여러 단계에 적합합니다.

* **단일 화면** — 특정 UI 상태, 컴포넌트 또는 집중된 개념을 탐색할 때 가장 좋습니다.
* **여러 화면** — 흐름 매핑, 레이아웃 옵션 비교 또는 전체 사용자 여정을 빠르게 커버할 때 가장 좋습니다.

여러 화면을 원할 때는 프롬프트에서 명시적으로 지정합니다. Flowstep은 프롬프트의 문구를 사용하여 생성할 화면 수를 결정하므로, 모호한 프롬프트는 일반적으로 단일 화면을 반환합니다. 생성된 화면은 **Screen 1**, **Screen 2** 등으로 이름이 지어집니다 — 이 이름들을 사용하여 후속 프롬프트에서 특정 화면을 지칭합니다.

## 프롬프트 작성의 다른 방법들

텍스트만으로는 부족합니다. 다음과 같은 방법도 사용할 수 있습니다:

* **파일 첨부** — 이미지(JPG, PNG, WEBP) 또는 문서(PDF, MD, TXT)를 최대 3MB까지 드래그 앤 드롭, 파일 선택기 또는 붙여넣기를 통해 프롬프트에 추가합니다. 프롬프트에서 첨부된 이미지를 참조하면 Flowstep이 이를 생성된 화면에 통합합니다. [레퍼런스 사용](/ko/design-references)을 참조합니다.
* **프롬프트 받아쓰기** — 프롬프트 바에서 마이크 버튼을 클릭하거나(Mac에서는 **Cmd+Shift+V**, Windows에서는 **Ctrl+Shift+V**를 누름) 최대 60초 동안 말합니다. 트랜스크립션이 이미 입력한 내용에 추가됩니다.
* **Flowstep으로 웹 조사 수행** — 필요한 경우 프롬프트에서(예: "Stripe 가격 책정 페이지 복제"), Flowstep은 웹을 검색하고 페이지의 브랜딩(색상, 글꼴, 로고, UI 컴포넌트)을 읽어 생성된 화면에 사용할 수 있습니다. Flowstep은 자체적으로 조사 여부를 결정하므로, 모든 프롬프트에서 반드시 실행되지는 않습니다. 재현된 웹사이트는 원본과 다른 이미지와 네비게이션을 사용합니다.
* **디자인 가이드라인 설정** — 파일의 모든 생성에 적용되는 스타일 규칙을 정의합니다. [디자인 가이드라인](/ko/design-guidelines)을 참조합니다.

## 효과적인 프롬프트 작성

<Tip>
  **단일 화면 프롬프트 예시:** "피트니스 추적 앱용 모바일 로그인 화면을 디자인하세요. 이메일과 비밀번호 필드, 로그인 버튼, 비밀번호 찾기 링크를 포함합니다."
</Tip>

<Tip>
  **다중 화면 프롬프트 예시:** "음식 배달 앱의 온보딩 흐름을 위한 여러 화면을 생성하세요 — 음식 종류 선택, 배달 주소 입력, 첫 주문 확인을 포함합니다."
</Tip>

<Tip>
  **전체 여정 프롬프트 예시:** "경비 보고 앱의 전체 사용자 여정을 포함합니다. 영수증 제출부터 관리자 승인까지입니다."
</Tip>

프롬프트를 작성할 때 다음 원칙을 염두에 두세요:

* 플랫폼(모바일, 데스크톱, 태블릿)을 명명하여 Flowstep이 화면을 올바르게 크기 조정하도록 합니다.
* UI 요소만이 아니라 사용자의 목표를 설명합니다 — Flowstep은 의도에서 레이아웃을 추론합니다.
* 레이블, 작업 또는 데이터와 같은 주요 콘텐츠를 디자인에 중요하면 포함합니다.
* "여러 화면 생성" 또는 "전체 사용자 여정 포함"과 같은 구문을 사용하여 다중 화면 출력을 유발합니다.