Flowstep 디자인을 채팅이나 캔버스로 편집하고 반복하기

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

​

편집하는 두 가지 방법

​

화면의 일부만 편집

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

• Shift+V를 사용하거나 선택 도구 모음 버튼의 드롭다운을 사용하여 직접 선택 모드로 전환하면 클릭 아래의 가장 깊은 요소를 선택할 수 있습니다. V를 눌러 일반 선택 모드로 돌아가거나, Cmd(Mac) / Ctrl(Windows)를 누른 채 직접 선택을 임시로 사용할 수 있습니다. Escape를 누르면 직접 선택이 종료됩니다.
• Cmd+Shift를 사용하여 여러 화면에서 부분 요소를 선택할 수 있습니다. 단일 프롬프트로 메시지당 최대 6개 화면을 편집할 수 있습니다.

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

​

요소 복사 및 붙여넣기

선택 항목을 복사한 다음 필요한 곳에 붙여넣으세요. 같은 파일, 다른 파일, 또는 다른 브라우저 탭에 붙여넣을 수 있습니다. 복사한 내용은 시스템 클립보드에 저장되기 때문입니다.

• Cmd+C(Mac) / Ctrl+C(Windows)로 복사하고, Cmd+X / Ctrl+X로 잘라내기를 하며, Cmd+V / Ctrl+V로 붙여넣기를 합니다.
• Cmd+D / Ctrl+D로 선택 항목을 제자리에서 복제합니다.
• 붙여넣은 요소는 원본을 가리지 않도록 원본에서 약간 떨어진 위치에 배치됩니다.

이 단축키는 선택한 요소에 적용됩니다. 텍스트를 편집하는 중에는 일반적인 텍스트 복사 및 붙여넣기 기능으로 동작합니다.

​

캔버스에서 화면 이름 지정

캔버스의 모든 화면 위 레이블에 화면 이름이 표시됩니다. 아직 이름을 지정하지 않은 화면은 Screen으로 표시됩니다.

• 레이블을 더블 클릭하여 화면 이름을 변경한 다음 Enter를 눌러 저장합니다. 다른 곳을 클릭해도 저장됩니다. 이름은 최대 100자까지 입력할 수 있습니다.
• 레이블을 한 번 클릭하여 화면을 선택한 다음 드래그하여 캔버스에서 이동합니다.

​

불투명도, 블렌드 모드, 모서리 조정

요소를 선택하면 속성 패널에서 모양을 세부적으로 조정할 수 있습니다.

• Opacity — 요소의 투명도를 0%에서 100% 사이로 설정합니다. 같은 패널에는 블렌드 모드(Normal, Multiply, Screen, Overlay 등)가 있으며, 이는 요소가 뒤에 있는 요소와 어떻게 섞일지를 제어합니다.
• Corners — 요소의 모서리를 둥글게 만듭니다. 네 모서리에 동일한 Corner radius를 설정하거나, Per corner를 켜서 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 모서리마다 별도의 반지름을 지정할 수 있습니다. 각 값은 테마의 Token 또는 Custom 값으로 설정할 수 있습니다.

​

픽셀 단위로 확대하기

간격과 정렬을 자세히 확인하려면 캔버스를 25,600%까지 확대할 수 있습니다. 200%를 넘으면 픽셀에 맞춘 격자선이 나타나며, 더 확대할수록 점점 뚜렷하게 보여 요소를 정확하게 맞출 수 있습니다.

​

이전 버전 복원

채팅 기록의 각 AI 생성이 원본 결과를 유지합니다. 화면이 생성된 후 편집되거나 삭제된 경우, 그 채팅 메시지에는 Restore 버튼이 나타납니다. Restore original을 사용하여 편집을 되돌리거나, Restore / Restore all을 사용하여 삭제된 화면을 되돌릴 수 있습니다. 편집이 잘못된 방향으로 진행되었을 때 알려진 좋은 상태로 돌아가는 데 사용하세요. 채팅 패널에서 메시지 위에 마우스를 올려 보내진 시간을 확인할 수 있습니다. 최근 메시지는 시간을 표시하고, 오래된 메시지는 보낸 시간을 표시합니다(예: “1일 전”). 마우스를 올리면 전체 날짜 및 시간이 도구 설명에 나타납니다.

​

원클릭 동작

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

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

이러한 옵션으로 매번 프롬프트를 작성하지 않고도 빠르게 반복할 수 있습니다.

​

반복으로 개선하기

디자인이 첫 시도에 완벽하게 완성되는 경우는 드뭅니다. 각 피드백 라운드마다 채팅 기반 편집을 사용합니다. 잘 작동하는 부분과 작동하지 않는 부분을 설명하면 Flowstep이 이를 바탕으로 조정합니다. 화면을 반복하는 횟수에 제한이 없습니다.