> ## 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 디자인을 채팅이나 캔버스를 통해 수정하고 반복하기

> AI가 생성한 모든 Flowstep 화면을 수동 시각 편집이나 채팅 기반 프롬프트로 개선하고, 디자인이 완성될 때까지 필요한 만큼 반복합니다.

<Frame>
  <img src="https://mintcdn.com/flowstep/iVYFuG-E2bJvmdDE/images/Screenshot-2026-05-06-at-14.25.48.png?fit=max&auto=format&n=iVYFuG-E2bJvmdDE&q=85&s=0a67045dde91f73cae39afde3d359269" alt="Screenshot 2026 05 06 At 14 25 48" width="2338" height="1510" data-path="images/Screenshot-2026-05-06-at-14.25.48.png" />
</Frame>

Flowstep 디자인은 생성 후 완전히 수정할 수 있습니다. AI가 처음 만든 결과에 국한되지 않으며, 편집기에서 시각적 요소를 직접 조정하거나, 채팅을 사용해 평문으로 변경 사항을 설명하거나, Flowstep에 변형 및 새 화면 생성을 요청할 수 있습니다. 원하는 변경에 가장 적합한 방법을 선택하세요.

## 수정하는 두 가지 방법

<Tabs>
  <Tab title="수동 시각 편집">
    캔버스에서 직접 요소를 선택하고 수정하여 변경 사항을 만듭니다. 이 방법은 정확한 조정에 가장 적합합니다(컴포넌트 이동, 색상 변경, 레이블 업데이트, 간격 조정).

    <Steps>
      <Step title="변경하려는 요소 선택">
        디자인에서 임의의 컴포넌트나 레이어를 클릭하여 선택합니다.
      </Step>

      <Step title="변경 사항 적용">
        편집기 컨트롤을 사용하여 색상, 크기, 위치 또는 텍스트 내용 등의 속성을 조정합니다.
      </Step>

      <Step title="결과 검토">
        변경 사항이 즉시 캔버스에 적용됩니다. 계속 편집하거나 다음 화면으로 이동하세요.
      </Step>
    </Steps>
  </Tab>

  <Tab title="채팅 기반 편집">
    원하는 변경 사항을 평문으로 설명하면 Flowstep이 디자인을 업데이트합니다. 이 방법은 광범위하거나 구조적인 변경에 더 빠릅니다(레이아웃 조정, 섹션 재검토, 스타일 방향 적용).

    <Steps>
      <Step title="채팅 패널 열기">
        편집하려는 화면을 선택한 후 채팅 입력 창을 열습니다.
      </Step>

      <Step title="변경 사항 설명">
        Flowstep에 업데이트할 내용을 입력합니다. 도움이 된다면 무엇을 변경할지, 왜 변경할지 구체적으로 설명하세요.
      </Step>

      <Step title="업데이트된 디자인 검토">
        Flowstep이 변경 사항을 적용하고 결과를 표시합니다. 완벽하지 않으면 후속 메시지를 보내 더 개선할 수 있습니다.
      </Step>
    </Steps>

    편집 및 재생성은 새 화면을 추가하는 대신 선택한 화면을 **제자리에서** 업데이트합니다. Flowstep이 변경 사항을 스트리밍하는 동안, 현재 작업 중인 요소는 녹색 점선 테두리로 강조됩니다. 화면을 선택하지 않고 생성하면 대신 새 화면이 추가됩니다.
  </Tab>
</Tabs>

## 화면의 일부만 수정하기

전체 화면을 편집할 필요는 없습니다. 카드, 버튼, 텍스트 레이블 등의 하위 요소를 선택하면 채팅 프롬프트가 해당 요소에만 적용되어 화면의 나머지 부분은 그대로 유지됩니다.

* **Shift+V** (또는 **Select** 툴바 버튼의 드롭다운)를 사용하여 **Direct selection** (직접 선택) 모드로 전환하면 클릭 위치의 가장 깊은 요소를 선택할 수 있습니다. **V**를 눌러 일반 선택으로 돌아가거나, **Cmd** (Mac) / **Ctrl** (Windows)를 누른 채 클릭하여 직접 선택을 임시로 사용합니다. **Escape**를 눌러 직접 선택을 종료하세요.
* **Cmd+Shift**를 사용하여 여러 화면에서 하위 요소를 선택합니다(단일 프롬프트로 메시지당 최대 6개 화면을 편집할 수 있습니다).

이미지 요소가 선택되면 (와이어프레임 모드 외에) 속성 패널에 **Image** (이미지) 패널이 나타납니다. 이미지를 미리 보거나, 미리 보기에 새 이미지 파일을 드래그하거나 **Pick image** (이미지 선택)을 클릭하여 교체하거나, **Download image** (이미지 다운로드)로 저장할 수 있습니다.

## 이전 버전 복원하기

채팅 기록의 각 AI 생성은 원본 결과를 유지합니다. 생성 후 화면이 편집되거나 삭제된 경우, 채팅 메시지에 **Restore** (복원) 버튼이 표시됩니다. **Restore original** (원본 복원)을 클릭하여 편집을 취소하거나, **Restore** / **Restore all** (모두 복원)을 사용하여 삭제된 화면을 복구합니다. 편집이 잘못된 방향으로 진행된 후 알려진 상태로 돌아가려면 이 기능을 사용하세요.

## 한 번의 클릭으로 수행하는 작업

<Frame>
  <img src="https://mintcdn.com/flowstep/iVYFuG-E2bJvmdDE/images/Screenshot-2026-05-06-at-14.29.34.png?fit=max&auto=format&n=iVYFuG-E2bJvmdDE&q=85&s=52e0f38e4c4506adbecdccc7a95be652" alt="Screenshot 2026 05 06 At 14 29 34" width="2436" height="1528" data-path="images/Screenshot-2026-05-06-at-14.29.34.png" />
</Frame>

직접 편집 외에도 Flowstep에 대안을 탐색하도록 요청할 수 있습니다.

* **Try again from scratch** — Flowstep에 다른 레이아웃이나 시각적 방향으로 현재 화면의 새로운 버전을 생성하도록 요청합니다.
* **Show the next screen** — 사용자 흐름에서 논리적으로 다음에 올 내용을 생성하도록 Flowstep에 요청합니다.
* **Make it pretty** — 디자인 전체의 간격, 정렬, 색상을 조정합니다. 레이아웃은 변경되지 않습니다.

이 옵션을 사용하면 매번 프롬프트를 작성할 필요 없이 빠르게 반복할 수 있습니다.

## 반복해서 개선하기

디자인은 첫 시도에 완벽하게 나오는 경우가 드뭅니다. 각 피드백 라운드마다 채팅 기반 편집을 사용하세요(무엇이 효과적인지, 무엇이 아닌지 설명하면 Flowstep이 그에 따라 조정합니다). 화면을 반복할 수 있는 횟수에는 제한이 없습니다.

<Tip>
  채팅을 통해 반복할 때 특정 요소를 이름이나 위치로 참조하면 더 정확한 결과를 얻을 수 있습니다. 예를 들어 "버튼 고정"보다는 "행동 유도 버튼을 화면 하단으로 이동하고 전체 너비로 만들기"가 더 효과적입니다.
</Tip>