> ## 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 디자인을 JPG 또는 PNG 이미지 파일로 다운로드하기

> Flowstep은 디자인을 JPG 또는 PNG로 내보낼 수 있습니다. 어떤 형식이 당신의 사용 사례에 적합한지, 그리고 몇 번의 클릭으로 화면을 다운로드하는 방법을 알아보세요.

<Frame>
  <img src="https://mintcdn.com/flowstep/UmnbuTkaA7N6vp1N/images/Screenshot-2026-05-06-at-14.19.49.png?fit=max&auto=format&n=UmnbuTkaA7N6vp1N&q=85&s=b9d31a01c99bae3d325fdbfee34529dc" alt="Screenshot 2026 05 06 At 14 19 49" width="1824" height="1388" data-path="images/Screenshot-2026-05-06-at-14.19.49.png" />
</Frame>

디자인을 공유하거나 인수인계할 준비가 되면, Flowstep은 정적 이미지로 내보낼 수 있습니다(JPG 또는 PNG 중 하나). 두 형식 모두 디자인 도구, 프레젠테이션 소프트웨어, 브라우저 전반에서 널리 지원되므로, AI가 생성한 디자인을 필요한 곳에 활용할 수 있습니다.

## 디자인을 내보내는 방법

<Steps>
  <Step title="디자인 열기">
    Flowstep 내에서 내보내려는 디자인으로 이동합니다.
  </Step>

  <Step title="내보내기 메뉴 열기">
    도구 모음이나 디자인 패널에서 내보내기 옵션을 찾습니다. 이를 선택하여 내보내기 설정을 엽니다.
  </Step>

  <Step title="형식 선택">
    사용 사례에 따라 **JPG** 또는 **PNG** 중 하나를 선택합니다(아래 비교 참조).
  </Step>

  <Step title="파일 다운로드">
    선택을 확인하고 내보낸 이미지를 기기에 다운로드합니다.
  </Step>
</Steps>

<Frame>
  <img src="https://mintcdn.com/flowstep/UmnbuTkaA7N6vp1N/images/Screenshot-2026-05-06-at-14.19.39.png?fit=max&auto=format&n=UmnbuTkaA7N6vp1N&q=85&s=8f3132e26a9a759315dd87a7a624fe00" alt="Screenshot 2026 05 06 At 14 19 39" width="1828" height="1522" data-path="images/Screenshot-2026-05-06-at-14.19.39.png" />
</Frame>

## JPG vs PNG: 어떤 형식을 사용할까요?

|              | JPG                            | PNG                      |
| ------------ | ------------------------------ | ------------------------ |
| **최적 사용 사례** | 미리보기, 프레젠테이션, 이해관계자 검토 공유      | 투명 배경이 있는 디자인, 고충실도 인수인계 |
| **파일 크기**    | 더 작음 — 이메일 또는 메시지를 통해 더 빠르게 공유 | 더 큼 — 전체 이미지 세부 정보 유지    |
| **투명성**      | 미지원                            | 지원됨                      |
| **품질**       | 약간 압축됨                         | 무손실 — 품질 감소 없음           |

<Tip>
  디자인을 슬라이드 덱에 붙여넣거나 클라이언트에게 빠른 미리보기를 보내는 경우 JPG가 보통 올바른 선택입니다. 선명한 가장자리나 투명 배경이 필요한 경우(예: 디자인을 다른 이미지에 오버레이하려면) PNG를 사용합니다.
</Tip>

## 코드 내보내기

이미지 외에도, **Code** 버튼은 화면을 React + Tailwind 코드로 내보냅니다. 스니펫을 복사하거나 전체 번들을 ZIP으로 다운로드할 수 있습니다. 번들은 자체 포함됨: 디자인에 사용된 이미지(채팅 패널에 첨부한 이미지 포함)는 `public/assets/` 폴더에 포함되며 코드가 로컬 경로로 참조하므로, 내보내기가 그대로 실행됩니다.

다운로드된 파일(이미지와 코드 번들 모두)은 소속된 화면 이름으로 지정되며(화면이 이름을 가지지 않은 경우 파일 이름으로 돌아감), 많은 화면으로 작업할 때 내보내기를 쉽게 식별할 수 있습니다.

<Note>
  디자인을 벡터 편집 워크플로우로 가져가야 하는 경우 대신 Figma에 직접 복사합니다. [Flowstep 디자인을 Figma에 즉시 복사하기](/ko/figma-integration)를 참고하세요.
</Note>