Flowstep은 자연어 프롬프트에서 UI 화면을 생성하므로, 아이디어에서 시각적 디자인까지 몇 초 만에 옮길 수 있습니다. 개념을 검증할 화면 하나가 필요하든 전체 사용자 여정을 다루는 화면 세트가 필요하든, 잘 작성된 프롬프트 하나면 시작할 수 있습니다.
디자인 생성하기
1
새 프로젝트 열기
Flowstep 대시보드에서 새 프로젝트를 만들거나, 화면을 추가할 기존 프로젝트를 여세요.
2
프롬프트 작성하기
원하는 화면에 대한 설명을 입력하세요. 앱의 종류, 사용자의 목표, 보고 싶은 콘텐츠를 구체적으로 적으세요.
3
원하는 화면 수 지정하기
기본적으로 Flowstep은 화면 하나를 생성합니다. 여러 화면을 원한다면 프롬프트에 그렇게 명시하세요. Flowstep은 프롬프트 하나로 최대 6개의 화면을 생성할 수 있습니다.
4
생성하기
프롬프트를 제출하세요. Flowstep이 화면을 만들어 편집기에 표시하면, 검토하거나 다듬을 수 있습니다.
새 파일을 만들고 첫 프롬프트를 보내면, Flowstep이 그 프롬프트를 바탕으로 파일 이름을 지정하므로 나중에 쉽게 찾을 수 있습니다. 이미 이름이 있는 파일이나 이전 프롬프트가 있는 파일은 기존 이름을 유지하며, 언제든지 직접 파일 이름을 바꿀 수 있습니다.
생성 중지하기
Flowstep이 응답하는 동안에는 전송 버튼이 중지 버튼(Stop Flowstep response)으로 바뀝니다. 이 버튼을 클릭하면 생성이 멈춥니다. 여러 화면 요청에서 이미 완료된 화면은 캔버스에 남고, 완료되지 않은 화면은 제거됩니다. Flowstep이 화면 만들기를 시작한 뒤에 생성을 중지해도 메시지는 사용됩니다. 메시지 및 사용 한도를 참조하세요.단일 화면과 여러 화면 비교
프롬프트 하나로 화면 하나 또는 최대 6개의 화면을 생성할 수 있습니다. 두 방식은 디자인 작업의 서로 다른 단계에 각각 적합합니다.- 단일 화면 — 특정 UI 상태, 컴포넌트, 또는 집중된 콘셉트를 탐색하기에 가장 좋습니다.
- 여러 화면 — 흐름을 설계하거나, 레이아웃 옵션을 비교하거나, 전체 사용자 여정을 빠르게 다루기에 가장 좋습니다.
프롬프트를 작성하는 다른 방법
텍스트만 입력할 수 있는 것은 아닙니다. 다음과 같은 방법도 사용할 수 있습니다.- 파일 첨부 — 이미지(JPG, PNG, WEBP) 또는 문서(PDF, MD, TXT)를 각각 3 MB 이하로 프롬프트에 추가하세요. 드래그 앤 드롭, 파일 선택기, 붙여넣기로 추가할 수 있습니다. 프롬프트에서 첨부한 이미지를 참조하면 Flowstep이 생성된 화면에 이를 반영합니다. 디자인 레퍼런스 사용을 참조하세요.
- 프롬프트 음성 입력 — 프롬프트 입력란의 마이크 버튼을 클릭하거나(Mac에서는 Cmd+Shift+V, Windows에서는 Ctrl+Shift+V를 누르세요), 최대 60초 동안 말하세요. 받아쓴 내용은 이미 입력한 내용 뒤에 추가됩니다.
- Flowstep이 웹을 검색하도록 하기 — 프롬프트에서 필요할 때(예: “Stripe 가격 페이지를 복제해 줘”), Flowstep은 웹을 검색하고 페이지의 브랜딩(색상, 글꼴, 로고, UI 컴포넌트)을 읽어 생성된 화면에 사용할 수 있습니다. 검색 여부는 Flowstep이 스스로 판단하므로 모든 프롬프트에서 실행되지는 않습니다. 재현된 웹사이트는 원본과 다른 이미지와 내비게이션을 사용할 수 있다는 점에 유의하세요.
- 디자인 가이드라인 설정 — 파일의 모든 생성에 적용되는 기본 스타일 규칙을 정의하세요. 디자인 가이드라인을 참조하세요.
효과적인 프롬프트 작성하기
프롬프트를 작성할 때 다음 원칙을 기억하세요.- 플랫폼(모바일, 데스크톱, 태블릿)을 명시하면 Flowstep이 화면 크기를 올바르게 설정합니다.
- UI 요소뿐 아니라 사용자의 목표도 설명하세요. Flowstep은 의도로부터 레이아웃을 추론합니다.
- 디자인에 중요하다면 라벨, 동작, 데이터 같은 핵심 콘텐츠를 포함하세요.
- “여러 화면 생성” 또는 “전체 사용자 여정 다루기” 같은 표현을 사용하면 여러 화면 출력을 유도할 수 있습니다.