> ## 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는 Project Editor의 디자인 화면입니다. 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="The Preview tab in the Project Editor with the Canvas button highlighted and its tooltip open, reading 'Switch to Canvas mode — Canvas lets you design, annotate, and refine all your ideas in one place.'" width="3450" height="2000" data-path="images/replitai/canvas-button.png" />
</Frame>

Preview 탭 좌측 상단의 **Canvas** 버튼을 클릭하면 패널이 Canvas 모드로 전환됩니다. 패널을 다시 실행 중인 앱으로 전환하려면 Canvas 버튼 옆의 아티팩트 선택기를 클릭하고 미리 보고 싶은 아티팩트를 선택하세요.

## Canvas의 기능

Canvas는 작은 세트의 기능을 제공하며, 각각 툴바 또는 프레임별 액션 바를 통해 노출됩니다.

* **[생성(Generate)](/ko/features/design/toolbar#generate)**: 툴바의 Generate 메뉴 또는 채팅 프롬프트를 통해 새 프레임(디자인, 이미지, 벡터 그래픽, 영상)을 생성합니다.
* **[다듬기(Refine)](/ko/features/design/frames#refine-inline-edits)**: 인라인 편집 입력을 통해 프레임에 즉시 타겟 편집을 적용합니다.
* **[재구상(Reimagine)](/ko/features/design/frames#reimagine)**: 사전 설정된 방향이나 자유 형식 프롬프트를 사용해 기존 프레임의 나란히 비교 가능한 변형을 생성합니다.
* **[빌드(Build)](/ko/features/design/frames#build)**: 프레임별 **Build** 메뉴를 통해 Design 프레임을 실제 작동하는 Artifact로 승격시킵니다.

## 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 with three regions labeled: two Frames (a Website artifact on the left, a Design mockup on the right), an Element highlighted inside the Website frame (the hero section), and the floating Toolbar — Chat, Draw, Edit, Generate — at the bottom" 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](/ko/features/design/toolbar)를 참고하세요.

상황에 따라 다음 두 가지 구성 요소가 추가로 나타납니다.

* **프레임별 액션 바**: 프레임을 선택하면 표시됩니다. Reimagine, Build…, Preview, Inspect를 제공합니다. 자세한 내용은 [Frames](/ko/features/design/frames#per-frame-action-bar)를 참고하세요.
* **채팅 패널**: Canvas 옆에 고정된 Agent 채팅입니다. 메시지를 보내기 전에 프레임을 선택하면 스냅샷으로 첨부되어 Agent가 시각적 컨텍스트를 얻게 됩니다.

<Note>
  Design 프레임으로 새 앱을 빌드하려면 Core 또는 Pro가 필요합니다. 다른 모든 Canvas 기능은 모든 플랜에서 사용할 수 있습니다. 플랜에 대한 자세한 내용은 [Billing](/ko/billing/ai-billing)을 참고하세요.
</Note>

**참고 자료**

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

**배우기**

* [Canvas 가이드](/ko/learn/design/canvas) — 튜토리얼 안내.
* [Canvas로 디자인하기](/ko/build/design-with-canvas) — 기존 앱의 시각적 변형을 생성하고 원하는 것을 적용합니다.
* [Canvas와 Preview 비교](/ko/learn/design/canvas-vs-preview) — 각각을 언제 사용해야 하는지.