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

> Replit Design이 프레임을 표시하는 무한한 표면인 Canvas를 열고, 탐색하고, 콘텐츠를 추가하세요.

Canvas는 Replit Design이 프레임을 표시하는 무한한 팬 앤 줌(pan-and-zoom) 표면입니다. 디자인하는 모든 것이 여기에 존재합니다: 프레임을 생성하고, 드래그해서 옮기고, 세부 사항을 확대해서 보고, 원하는 결과가 나올 때까지 반복하세요.

<Frame>
  <img src="https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-overview.png?fit=max&auto=format&n=OIImiKPshhawqFXK&q=85&s=5cd2330c89bbdedfb249151ee582f070" alt="보드에 배치된 세 개의 프레임이 있는 Canvas: Website(Scroll Hero), APEX X1 Design System, 그리고 APEX X1 슈퍼카의 Design 목업이 있으며, 하단에는 플로팅 툴바(Chat, Draw, Edit, Generate)가 있음" width="2000" height="1255" data-path="images/replitai/canvas-overview.png" />
</Frame>

## Canvas 열기

Canvas는 Replit Design에서 가장 먼저 보게 되는 화면입니다. 프로젝트에서 헤더의 **Design**을 선택하면 Canvas가 패널을 채우고, **Build**를 선택하면 실행 중인 앱으로 다시 전환됩니다.

<Frame>
  <img src="https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-design-button.png?fit=max&auto=format&n=OIImiKPshhawqFXK&q=85&s=08c21763270694a8ecd5d2d62e83f8a9" alt="Design과 Build 토글이 있는 프로젝트 헤더를 확대한 모습. Design이 선택되어 있고 그 아래 Canvas에 프레임들이 있음" width="987" height="619" data-path="images/replitai/canvas-design-button.png" />
</Frame>

[replit.com/design](https://replit.com/design)에서 새로 시작하면 새 디자인을 만들라는 안내가 나타나고, 이는 Canvas에서 열립니다. 각 화면을 언제 사용해야 하는지는 [Design vs. Build](/ko/design/design-vs-build)를 참고하세요.

## Canvas 위에 있는 것들

* **Frames**: 보드 위의 모든 타일입니다. 프레임은 디자인 목업, 웹 앱, 모바일 앱, 슬라이드, 이미지, 영상, 또는 벡터 그래픽이 될 수 있습니다. 채팅 프롬프트, 툴바의 [Generate 메뉴](/ko/design/toolbar#generate), 또는 [라이브러리 패널](/ko/design/library-panel)을 통해 생성하세요. 프레임에 대해 하는 모든 작업 — Build, Focus, 제안 — 은 프레임 자체를 통해 이루어집니다: [Frames](/ko/design/frames)를 참고하세요.
* **드로잉과 메모**: [Draw 도구](/ko/design/toolbar#draw)로 추가하는 마크업으로, 스케치, 화살표, 도형, 스티키 노트 등이 있습니다. Agent가 마크업을 읽으므로 문제가 있는 부분에 동그라미를 치고 변경을 요청할 수 있습니다.
* **채팅 패널**: Canvas 옆에 고정된 Agent 채팅입니다. 메시지를 보내기 전에 프레임을 선택하면 스냅샷으로 첨부되어 Agent가 시각적 컨텍스트를 갖게 됩니다.

각 구성 요소가 무엇이고 어떻게 맞물리는지는 [구성 요소 개요](/ko/design/core-components)를 참고하세요.

## 보드 탐색하기

별도로 언급하지 않는 한 패닝, 확대/축소, 선택은 어떤 도구에서든 작동합니다.

**패닝:**

* 트랙패드: 두 손가락 드래그.
* 마우스: 중간 버튼 클릭 후 드래그, 또는 스페이스바를 누른 채 왼쪽 클릭 드래그.
* [Pan 도구](/ko/design/toolbar#pan): 왼쪽 마우스 버튼으로 클릭 앤 드래그.

**확대/축소:**

* 트랙패드: 핀치.
* 마우스: `Ctrl`(macOS에서는 `Cmd`) + 스크롤 휠.
* 키보드: 확대는 `Cmd`/`Ctrl` + `+`, 축소는 `Cmd`/`Ctrl` + `-`, 확대/축소 재설정은 `Cmd`/`Ctrl` + `0`.

확대/축소는 커서를 기준으로 고정되므로 커서 아래 지점은 그대로 유지되고 나머지 보드가 그 주위로 확대/축소됩니다.

**선택:**

* 단일 프레임: [Interact 도구](/ko/design/toolbar#interact)로 클릭.
* 다중 선택: `Shift`를 누른 채 각 프레임을 클릭하거나 보드에서 마퀴 사각형을 드래그.
* 선택 해제: 빈 영역을 클릭하거나 `Escape`를 누름.

프레임을 하나 이상 선택하면 [프레임별 액션 바](/ko/design/frames#per-frame-action-bar)가 표시되고 다음 Agent 메시지에 해당 프레임들이 스냅샷으로 첨부됩니다.

### 키보드 단축키

| 단축키                            | 동작               |
| ------------------------------ | ---------------- |
| `V`                            | Interact 도구 활성화  |
| `H`                            | Pan 도구 활성화       |
| `Space` 누르고 드래그                | 어떤 도구에서든 패닝      |
| `Cmd` / `Ctrl` + 스크롤           | 확대/축소            |
| `Cmd` / `Ctrl` + `+`           | 확대               |
| `Cmd` / `Ctrl` + `-`           | 축소               |
| `Cmd` / `Ctrl` + `0`           | 확대/축소 재설정        |
| `Shift` + 클릭                   | 현재 선택 항목에 프레임 추가 |
| `Cmd` / `Ctrl` + `Shift` + `C` | 선택한 프레임을 PNG로 복사 |
| `Escape`                       | 선택 해제            |

## 우클릭 메뉴

보드 어디서든 우클릭하면 컨텍스트 메뉴가 열립니다. 이 메뉴는 상황에 맞게 구성되므로 커서 아래에 무엇이 있는지에 따라 액션이 달라집니다: 프레임에서는 프레임 액션이, 빈 Canvas에서는 보드 수준 액션이 나타나며, 앱 프레임에는 **Refresh artifact**가 추가됩니다.

선택된 프레임의 메뉴에는 다음이 포함됩니다.

| 액션                             | 단축키                           | 기능                                                   |
| ------------------------------ | ----------------------------- | ---------------------------------------------------- |
| Edit                           |                               | 프레임 내부의 요소를 선택하기 위해 Edit 도구로 전환합니다.                  |
| Chat                           |                               | 프레임에 대해 Agent와 채팅합니다.                                |
| Focus                          |                               | 프레임에서 [포커스 모드](/ko/design/frames#focus-mode)로 들어갑니다. |
| Cursor chat                    | `/`                           | 커서 위치에서 빠른 채팅을 시작합니다.                                |
| Reorder                        |                               | 프레임을 스태킹 순서에서 앞으로 또는 뒤로 이동합니다.                       |
| Copy, Paste, Duplicate, Delete | `⌘C`, `⌘V`, `⌘D`, `Backspace` | 표준 클립보드 및 프레임 관리 기능입니다.                              |
| Export as…                     |                               | 프레임을 파일로 내보냅니다.                                      |
| Select all                     | `⌘A`                          | 보드의 모든 프레임을 선택합니다.                                   |

<Frame caption="선택된 프레임의 우클릭 메뉴.">
  <img src="https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-right-click-menu.png?fit=max&auto=format&n=OIImiKPshhawqFXK&q=85&s=7c57a64a352438ea80d992ad6803278c" alt="회색 Apex X1 슈퍼카를 보여주는 선택된 Design 프레임에서 열린 우클릭 메뉴. Edit, Chat, Focus, Cursor chat, Reorder, Copy, Paste, Export as…, Duplicate, Delete, Select all 액션이 표시되어 있음" width="2000" height="1252" data-path="images/replitai/canvas-right-click-menu.png" />
</Frame>

### 프레임을 PNG로 내보내기

모든 아티팩트 또는 디자인 프레임을 PNG 이미지로 저장하세요. 문서나 채팅에서 미리보기를 공유하거나, 더 반복하기 전에 스냅샷을 캡처하거나, 팀원에게 스크린샷을 보낼 때 유용합니다.

<Steps>
  <Step title="프레임 선택">
    내보낼 아티팩트 또는 디자인 프레임을 선택한 다음, 로딩이 끝날 때까지 기다립니다.
  </Step>

  <Step title="Export 선택">
    프레임의 액션 바에서 **Export**를 선택하세요. 프레임을 우클릭한 다음 **Export as…** > **PNG**를 선택할 수도 있습니다. 이미지가 프레임 이름을 기반으로 한 파일명으로 컴퓨터에 다운로드됩니다.
  </Step>
</Steps>

선택한 프레임을 다운로드하는 대신 PNG로 복사하려면 `Cmd+Shift+C`(Windows 및 Linux에서는 `Ctrl+Shift+C`)를 누르세요.

<Note>내보낸 PNG는 Canvas에서 현재 프레임이 표시하는 것과 일치합니다. 앱이나 디자인이 아직 로딩 중이라면 내보내기 전에 완전히 렌더링될 때까지 기다리세요.</Note>

## Canvas와 실행 중인 앱

Canvas와 실행 중인 앱 미리보기는 같은 패널을 공유하며, 몇 가지 모드가 이 둘을 연결합니다.

* **포커스 모드**: 선택된 프레임의 **Focus** 액션은 프레임을 확장해 화면을 가득 채웁니다. 보드 상단의 **Exit focus**를 선택하면 Canvas로 돌아갑니다.
* **읽기 전용 모드**: Canvas가 백그라운드 작업 컨텍스트 안에서 잠겨 있으면 반복 작업 관련 액션은 숨겨지고 Focus만 남습니다.

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

**참고 자료**

* [구성 요소 개요](/ko/design/core-components): 빌딩 블록과 그것들이 어떻게 맞물리는지.
* [Frames](/ko/design/frames): 프레임 종류, 프레임별 액션 바, Build와 Focus.
* [Elements](/ko/design/elements): 프레임 내부의 개별 조각.
* [Toolbar](/ko/design/toolbar): 전체 도구 목록.

**배우기**

* [제안 살펴보기](/ko/design/explore-suggestions): 선택한 프레임에서 새로운 방향으로 뻗어나가고 최적의 결과를 앱에 적용하세요.
* [Design vs. Build](/ko/design/design-vs-build): 각 화면을 언제 사용해야 하는지.