> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Canvas vs. Preview

> Replit에서 Canvas와 Preview의 차이점과 프로젝트에서 각각을 언제 사용하는지 알아보세요.

Replit은 앱을 작업하는 두 가지 방법을 제공합니다: **Canvas**와 **Preview**. 가장 좋은 점은 함께 사용할 수 있다는 것입니다 — 아름다운 디자인으로 시작하고, 다듬은 다음, 준비가 되면 완전히 기능하는 앱으로 변환하세요.

<Frame>
  <img src="https://mintcdn.com/replit/NqvyWjOnebeS7HrG/images/replitai/canvas-preview-toggle.png?fit=max&auto=format&n=NqvyWjOnebeS7HrG&q=85&s=a8c72c7986b4fba0d2dca5a4a0a9a735" alt="Workspace의 Canvas와 Preview 토글, '전체 크기로 창작물과 상호작용하려면 Preview 모드로 돌아가기'라는 툴팁 표시" width="2202" height="1410" data-path="images/replitai/canvas-preview-toggle.png" />
</Frame>

## Canvas란?

[Canvas](/learn/design/canvas)를 사용하면 몇 분 만에 아름답고 인터랙티브한 웹사이트와 앱 디자인을 만들 수 있습니다. 아이디어를 설명하기만 하면 Replit이 빌드합니다.

Canvas는 다음에 완벽합니다:

* **아이디어를 빠르게 테스트**: 기능을 빌드하기 전에 앱의 디자인을 시각화
* **세련된 웹사이트 만들기**: 랜딩 페이지, 포트폴리오, 레스토랑 메뉴, 이벤트 페이지
* **디자인 세밀하게 조정**: 색상, 레이아웃, 콘텐츠를 즉시 조정

<Info>
  Canvas 디자인은 실제 앱처럼 보이고 느껴지지만, 아직 데이터를 저장하거나 외부 서비스에 연결하지 않습니다. 모든 것이 어떻게 보이는지 만족하면, 한 번의 클릭으로 디자인을 완전한 앱으로 변환할 수 있습니다. 아래 단계에서 방법을 보여줍니다.
</Info>

## Preview란?

Preview는 데이터를 저장하고, 사람들이 로그인하고, 다른 서비스에 연결할 수 있는 실제 작동하는 애플리케이션으로 창작물을 보여줍니다. 앱의 인터랙티브하고 전체 크기 뷰입니다.

앱에 다음이 필요할 때 Preview를 사용하세요:

* **사용자 계정**: 사람들이 계정을 만들고 로그인할 수 있음
* **정보 저장**: 주문, 메시지, 사용자 환경 설정 같은 데이터 저장
* **다른 서비스 연결**: 결제 처리, 이메일 전송, 다른 앱의 데이터 가져오기
* **복잡한 작업 처리**: 온라인 스토어 운영, 예약 관리, 대시보드 지원

## 두 모드 함께 사용하기

**Canvas와 Preview는 함께 작동하도록 만들어졌습니다**. 하나 또는 다른 것을 선택할 필요가 없습니다. 디자인으로 시작하여 완전한 앱으로 발전시킬 수 있습니다.

<Steps>
  <Step title="먼저 디자인하기">
    Canvas에서 시작하여 아이디어를 빠르게 시각화합니다. 앱이 어떻게 보이고 느껴지는지 — 레이아웃, 색상, 버튼, 사용자 경험 — 에 집중합니다.
  </Step>

  <Step title="개선하고 반복하기">
    **Reimagine**을 사용하여 선택된 디자인의 새로운 방향을 탐색하거나, [Visual Editor](/learn/design/visual-editor)를 열어 요소를 직접 클릭하고 조정합니다. Agent와 채팅하여 원하는 변경사항을 설명할 수도 있으며 — 즉시 나타납니다.

    <Frame>
      <img src="https://mintcdn.com/replit/NqvyWjOnebeS7HrG/images/replitai/canvas-reimagine.png?fit=max&auto=format&n=NqvyWjOnebeS7HrG&q=85&s=d913949ca41182092608c123828288f0" alt="Canvas의 디자인 재구상 대화 상자, '다양한 접근 방식 탐색', '다양한 레이아웃 시도', '다양한 분위기 탐색' 같은 추천 프롬프트 표시" width="2216" height="1616" data-path="images/replitai/canvas-reimagine.png" />
    </Frame>

    <Frame>
      <img src="https://mintcdn.com/replit/NqvyWjOnebeS7HrG/images/replitai/canvas-visual-editor.png?fit=max&auto=format&n=NqvyWjOnebeS7HrG&q=85&s=401ee84fd5add21fc418c0521ac22c7f" alt="Canvas에서 Visual Editor 패널이 열려 선택된 요소의 폰트 크기, 폰트 굵기, 정렬, 색상 컨트롤 표시" width="2222" height="1572" data-path="images/replitai/canvas-visual-editor.png" />
    </Frame>
  </Step>

  <Step title="완전한 앱으로 변환하기">
    디자인에 만족하고 실제 기능을 추가할 준비가 되면 **Build**를 선택하여 디자인을 앱으로 변환합니다. 새 아티팩트를 만들거나 기존 아티팩트에 디자인을 적용할 수 있습니다. Agent가 데이터 저장, 사용자 계정 처리, 서비스 연결 기능을 추가하며 — 디자인은 그대로 유지됩니다. 전체 워크플로우는 [Figma 디자인을 인터랙티브 앱으로 변환](/build/figma-to-app) 가이드를 참조하세요.

    <Frame>
      <img src="https://mintcdn.com/replit/NqvyWjOnebeS7HrG/images/replitai/canvas-build-dialog.png?fit=max&auto=format&n=NqvyWjOnebeS7HrG&q=85&s=ca2917d4a7e9650583fbb1ec71cc0ee3" alt="Canvas의 디자인 빌드 또는 적용 대화 상자, 새 아티팩트 만들기 또는 기존 창작물에 디자인 적용 옵션 표시" width="2210" height="1310" data-path="images/replitai/canvas-build-dialog.png" />
    </Frame>

    <Note>
      데이터베이스나 고급 기능을 추가하려고 할 때 Agent가 변환을 요청합니다.
    </Note>
  </Step>

  <Step title="게시하고 공유하기">
    앱이 빌드되면 누구나 온라인에서 접근할 수 있도록 게시합니다. Replit이 모든 기술 인프라를 처리하므로 앱이 사용자에게 안정적으로 작동합니다.
  </Step>
</Steps>

## 각 모드를 사용할 때

<CardGroup cols={2}>
  <Card title="Canvas로 시작하기" icon="paintbrush">
    * 아이디어를 빠르게 보고 싶을 때
    * 간단한 웹사이트를 만들 때
    * 다양한 디자인을 테스트하고 싶을 때
    * 속도가 우선일 때
  </Card>

  <Card title="바로 Preview로 가기" icon="cube">
    * 정확히 무엇이 필요한지 알 때
    * 처음부터 데이터를 저장해야 할 때
    * 사람들이 로그인해야 할 때
    * 다른 서비스에 연결할 때
  </Card>
</CardGroup>

<Tip>
  **어느 것을 선택할지 모르겠나요?** Canvas로 시작하세요. 더 빠르고, 나중에 언제든지 완전한 앱으로 변환할 수 있습니다. 업그레이드할 때 작업이 그대로 이어집니다.
</Tip>

## 주요 차이점

| 기능         | Canvas           | Preview          |
| ---------- | ---------------- | ---------------- |
| **속도**     | 몇 분              | 완전한 앱에 약 10분     |
| **데이터 저장** | 시각적만 (저장 안 됨)    | 실제 데이터 저장 및 불러오기 |
| **사용자 계정** | 로그인이 어떻게 보이는지 표시 | 실제 로그인 기능        |
| **서비스 연결** | 사용 불가            | 결제, 이메일, 외부 데이터  |
| **호스팅**    | 간단한 정적 호스팅       | 사용자에 따라 확장       |

## 다음 단계

<CardGroup cols={2}>
  <Card title="Canvas" icon="paintbrush" href="/learn/design/canvas">
    디자인 만들기에 대해 자세히 알아보기
  </Card>

  <Card title="Visual Editor" icon="edit" href="/learn/design/visual-editor">
    클릭으로 시각적 변경하기
  </Card>

  <Card title="Agent" icon="robot" href="/references/agent/overview">
    Agent가 빌드할 수 있는 것 탐색
  </Card>

  <Card title="Learn" icon="graduation-cap" href="https://learn.replit.com">
    전체 워크플로우 배우기
  </Card>
</CardGroup>