> ## 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

> Canvas에서 앱 디자인을 시각적으로 생성하고, 재구상하고, 빌드하세요.

## Canvas란?

Canvas는 프로젝트 편집기의 디자인 뷰입니다. Agent가 웹사이트, 디자인, 이미지, 벡터 그래픽, 동영상을 나타내는 프레임을 생성하여 무한한 보드에 배치합니다. 프레임을 이동하고 크기를 조정하며, 변형을 생성하고 채팅으로 반복 작업할 수 있습니다.

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-button.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=48a62a087c8cb6ede3aaaf4a469cf13f" alt="Preview 탭에서 Canvas 버튼이 강조 표시되고 툴팁이 열려 있는 모습 — '캔버스 모드로 전환 — Canvas에서 모든 아이디어를 한 곳에서 디자인하고, 주석을 달고, 다듬을 수 있습니다.'" width="3450" height="2000" data-path="images/replitai/canvas-button.png" />
</Frame>

Preview 탭 왼쪽 상단의 **Canvas** 버튼을 클릭하여 창을 캔버스 모드로 전환하세요. 창을 다시 라이브 앱으로 전환하려면 Canvas 버튼 옆의 아티팩트 선택기를 클릭하고 미리보기할 아티팩트를 선택하세요.

## Canvas 기능

Canvas는 툴바나 프레임별 액션 바를 통해 제공되는 몇 가지 기능을 제공합니다.

* **[Generate](/references/design/toolbar#generate)**: 툴바의 Generate 메뉴 또는 채팅 프롬프트에서 새 프레임(디자인, 이미지, 벡터 그래픽, 동영상)을 생성합니다.
* **[Refine](/references/design/frames#refine-inline-edits)**: 인라인 편집 입력을 통해 프레임에 직접 타겟팅된 편집을 적용합니다.
* **[Reimagine](/references/design/frames#reimagine)**: 사전 설정된 방향이나 자유 형식 프롬프트를 사용하여 기존 프레임의 나란히 놓인 변형을 생성합니다.
* **[Build](/references/design/frames#build)**: 프레임별 **Build** 메뉴를 통해 Design 프레임을 라이브 아티팩트로 전환합니다.

## Canvas 구조

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-anatomy.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=d80782f69b9cadb82f541aa20d71ef5a" alt="세 영역이 표시된 Canvas: 두 프레임(왼쪽의 Website 아티팩트, 오른쪽의 Design 목업), Website 프레임 안에 강조 표시된 Element(히어로 섹션), 하단의 떠 있는 툴바 — Chat, Draw, Edit, Generate" width="3450" height="2000" data-path="images/replitai/canvas-anatomy.png" />
</Frame>

Canvas 용어:

* **Canvas**: 모든 프레임, 도형, 메모를 담는 무한히 이동하고 확대/축소할 수 있는 표면.
* **Frames**: Canvas의 모든 타일은 프레임입니다. 두 가지 주요 유형이 있습니다: **Artifacts**(라이브, 앱 기반 — 프레임 헤더에 **Website**, **Slides** 등이 표시됨)와 **Designs**(라이브 앱에 영향을 미치지 않는 목업 — 프레임 헤더에 **Design**이 표시됨). 이미지, 동영상, 벡터 그래픽도 포함됩니다.
* **Elements**: 프레임 내부의 개별 요소(텍스트, 버튼, 이미지, 기타 컴포넌트). Elements는 Visual Editor로 선택하고 조정하는 대상입니다.
* **Toolbar**: Canvas 도구가 있는 떠 있는 바입니다. 전체 목록은 [Toolbar](/references/design/toolbar)를 참조하세요.

컨텍스트에 따라 두 가지 추가 컴포넌트가 나타납니다:

* **프레임별 액션 바**: 프레임을 선택하면 나타납니다. Reimagine, Build…, Preview, Inspect를 제공합니다 — [Frames](/references/design/frames#per-frame-action-bar)를 참조하세요.
* **Chat 패널**: Canvas 옆에 도킹된 Agent 채팅. 메시지를 보내기 전에 프레임을 선택하면 스냅샷으로 첨부되어 Agent가 시각적 컨텍스트를 갖게 됩니다.

<Note>
  Design 프레임에서 새 앱을 빌드하려면 Core 또는 Pro가 필요합니다. 다른 모든 Canvas 기능은 모든 플랜에서 작동합니다. 플랜 세부 정보는 [요금](/billing/ai-billing)을 참조하세요.
</Note>

**참고**

* [Toolbar](/references/design/toolbar) — 전체 도구 목록, 제스처, 선택.
* [Frames](/references/design/frames) — 프레임 종류, 프레임별 액션 바, Reimagine, Refine, Annotate, Build.
* [Elements](/references/design/elements) — 프레임 내부의 개별 요소.
* [Agent](/references/agent/overview) — Canvas에서 프레임을 생성하고 편집하는 Agent.

**학습**

* [Canvas 가이드](/learn/design/canvas) — 튜토리얼 안내.
* [Canvas로 디자인하기](/build/design-with-canvas) — 기존 앱의 시각적 변형을 생성하고 원하는 것을 적용하세요.
* [Canvas vs Preview](/learn/design/canvas-vs-preview) — 각 표면을 사용해야 하는 경우.