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

# Toolbar

> Canvas 툴바 참고 — Interact, Pan, Chat, Draw, Edit, Generate — 및 보드 제스처.

Canvas 툴바는 보드 하단 중앙에 고정된 떠 있는 바입니다. 탐색, 그리기, 편집, 콘텐츠 추가에 사용하는 도구를 제공합니다. 툴바는 캔버스 모드에서 표시됩니다.

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-toolbar.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=023d6e63f6ddbd10d74908708ab53b67" alt="왼쪽에 아이콘만 있는 Interact(선택됨)와 Pan 버튼, 오른쪽에 레이블이 있는 Chat, Draw, Edit, Generate 버튼이 있는 Canvas 툴바 클로즈업" width="454" height="50" data-path="images/replitai/canvas-toolbar.png" />
</Frame>

## 도구

도구를 선택하면 활성화됩니다. 활성 도구는 채워진 배경으로 강조 표시됩니다. 가장 왼쪽 클러스터는 탐색(Interact, Pan)입니다. 나머지는 콘텐츠 및 마크업 도구입니다. 도구는 상호 배타적입니다 — 하나를 선택하면 다른 것들이 비활성화됩니다.

### Interact

**Interact**는 기본 도구입니다. 프레임을 선택하고 드래그하거나, 라이브 아티팩트를 클릭하여 실제로 실행 중인 앱으로 사용할 수 있습니다. Interact가 활성화된 상태에서 프레임을 클릭하면 선택되고 [프레임별 액션 바](/references/design/frames#per-frame-action-bar)가 나타납니다.

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-interact.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=4d791ef05e8c21d6d89118ebfba4332c" alt="Interact 도구로 Website 아티팩트가 선택된 Canvas — 프레임이 분홍색 선택 핸들로 윤곽이 그려지고, 프레임별 액션 바(Reimagine 및 Preview)가 위에 표시되며, 인라인 '변경 요청 또는 프레임에 대해 채팅하기…' 입력이 아래에 표시됨. 하단의 떠 있는 툴바에서 Interact 도구가 강조 표시됨." width="3450" height="2000" data-path="images/replitai/canvas-interact.png" />
</Frame>

**키보드 단축키:** `V`. **적용 범위:** 항상 켜짐.

### Pan

**Pan**은 커서를 잡기 도구로 전환하여 보드 자체를 드래그할 수 있게 합니다. Pan이 활성화된 상태에서 클릭하고 드래그하면 프레임을 선택하는 대신 뷰포트가 이동합니다. 스페이스바를 누른 채 드래그하거나 마우스 중간 버튼으로 클릭하고 드래그하여 다른 도구에서도 이동할 수 있습니다.

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-pan.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=2b095492975bc038b91fc9523d33dace" alt="Pan 도구가 활성화된 Canvas — Website 아티팩트(Velocity — Supercar Rental)와 Design 목업(Velocity — Home (Mockup))이 보드에 표시되며, 하단의 떠 있는 툴바에서 Pan(손 커서) 도구가 강조 표시됨." width="1725" height="1041" data-path="images/replitai/canvas-pan.png" />
</Frame>

**키보드 단축키:** `H`. **적용 범위:** 항상 켜짐.

### Chat

**Chat**은 Canvas를 벗어나지 않고 Agent에게 프롬프트를 보낼 수 있도록 보드에 직접 작은 채팅 작성기를 드롭합니다. 선택된 요소와 프레임은 사이드 Agent 채팅 패널에서 보낼 때와 동일하게 스냅샷으로 메시지에 첨부됩니다.

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-chat.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=377656bbc9a2149df4b9488c9ed94f20" alt="나머지 보드가 흐려지고 인라인 채팅 작성기가 Website 아티팩트 위에 오버레이된 Chat 모드의 Canvas. 작성기의 'div' 칩은 선택된 요소를 나타내며, 프롬프트에는 '이 이미지에 대한 세 가지 대안을 제안해줘'라고 쓰여 있음. 하단의 떠 있는 툴바에서 Chat 도구가 강조 표시됨." width="3450" height="2000" data-path="images/replitai/canvas-chat.png" />
</Frame>

**적용 범위:** Chat 도구(데스크톱 전용).

### Draw

**Draw**는 자유 드로잉, 화살표, 스티커 메모, 도형 등의 마크업 도구를 활성화하여 프레임 위에 스케치하거나 보드에 주석을 달 수 있게 합니다. 문제 영역을 표시하거나, 변경하고 싶은 요소를 가리키거나, 프레임 옆에 메모를 남기는 데 사용하세요.

Draw가 활성화되면 현재 마크업 도구의 색상, 선, 채우기 컨트롤이 있는 **Shape properties** 바가 떠 있는 툴바 위에 나타납니다. Interact 또는 Pan으로 전환하면 자동으로 숨겨집니다.

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-draw.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=8259ca7d7f1833ccc39921b96b0ef2c2" alt="Draw 도구가 활성화된 Canvas — 그린 'Widget' 사각형과 보라색 'Add a widget' 스티커 메모가 프레임 옆에 배치됨. Shape properties 바(연필, 텍스트, 사각형, 화살표, 스티커 메모 도구 및 색상 견본, Aa 텍스트 크기 컨트롤)가 떠 있는 툴바 위에 표시되며 Draw가 강조 표시됨." width="1725" height="1041" data-path="images/replitai/canvas-draw.png" />
</Frame>

**적용 범위:** 항상 켜짐.

### Edit

**Edit**는 요소를 위한 시각적 선택기입니다. Edit가 활성화된 상태에서 라이브 아티팩트 내부를 클릭하면 요소(버튼, 제목, 이미지)를 선택합니다. 요소를 선택하면 **Visual Editor**가 열립니다 — 해당 부분만 변경하도록 Agent에게 요청하는 인라인 프롬프트와 함께 컨트롤(Layout, Color, Border 등)이 있는 오른쪽 패널. 전체 흐름은 [Elements](/references/design/elements) 및 [Visual Editor](/learn/design/visual-editor)를 참조하세요.

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-edit.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=d04a99a7f567c79c879a0168146b9f02" alt="Edit 도구가 활성화된 Canvas — Website 아티팩트의 이미지 요소가 선택되어 있고(파란색으로 강조 표시되고 'img' 칩 레이블이 있음), Visual Editor 패널에 Layout(Outer/Inner space), Color(Opacity), Border(색상, 너비, 반경) 컨트롤과 변경 사항 취소 및 저장 버튼이 표시됨. 툴바에서 Edit 도구가 강조 표시됨." width="1725" height="1041" data-path="images/replitai/canvas-edit.png" />
</Frame>

**적용 범위:** 항상 켜짐(데스크톱). Canvas에 프레임이 하나도 없으면 비활성화되며, 툴팁에 *"아티팩트를 만들거나 디자인을 생성하여 편집하세요."* 라고 표시됩니다. 모바일에서는 숨겨집니다.

### Generate

**Generate**는 이미지, 동영상, 벡터 그래픽을 위한 **Generate media** 팝오버를 엽니다. 종류를 선택하고 프롬프트를 작성하면 Agent가 결과를 보드에 새 프레임으로 배치합니다.

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-add-menu.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=1e6b4fad33d8f8a77a77c63dd244e6c9" alt="네 가지 옵션이 세로로 쌓인 Canvas + Add 메뉴: Design('인터페이스와 시각적 개념 목업'), Image('이미지 생성 및 편집'), Video('모션 클립 및 애니메이션 생성'), Vector Graphic('벡터 일러스트레이션 및 SVG 생성'). 하단의 떠 있는 툴바의 Generate 슬롯에 '+ Generate'로 표시됨." width="1102" height="702" data-path="images/replitai/canvas-add-menu.png" />
</Frame>

팝오버 상단에 네 가지 탭이 있습니다:

* **Design**
* **Image**
* **Video**
* **Vector Graphic**

일부 컨트롤은 모든 종류에 공통이며, 나머지는 종류별로 다릅니다.

**공통 컨트롤(모든 종류):**

* **Model**: 사용할 생성 모델. 사용 가능한 모델은 종류에 따라 다릅니다(아래 표 참조).
* **Prompt**: Agent에게 생성하도록 할 내용에 대한 자연어 설명.
* **Generate**: 요청을 제출하고 커서 위치에 플레이스홀더 프레임을 예약합니다. 에셋이 준비되면 플레이스홀더가 라이브 프레임으로 전환되며, 생성에 실패하면 플레이스홀더가 제거되고 채팅 패널에 오류가 표시됩니다.

**종류별 모델 및 컨트롤:**

| 종류          | 최적 용도                                    | 현재 모델                                                           | 종류별 컨트롤                                                         |
| ----------- | ---------------------------------------- | --------------------------------------------------------------- | --------------------------------------------------------------- |
| **Image**   | 래스터 출력(PNG/JPG); 무드보드 이미지, 히어로 샷, 참고 아트  | Nano Banana, Nano Banana 2, Nano Banana Pro, ChatGPT Images 2.0 | 종횡비(`1:1`, `16:9`, `9:16`, `4:3`, `3:4`) · 크기(`1K`, `2K`, `4K`) |
| **Video**   | 짧은 모션 클립 및 애니메이션                         | Veo 3.1, Seedance 2.0                                           | 종횡비 · 해상도(예: `720p`) · 길이(예: `4s`) · 오디오 토글                     |
| **Graphic** | SVG 벡터 출력; 아이콘, 로고, 다이어그램, 스타일화된 일러스트레이션 | Claude 4.6 Opus, Gemini 3.1 Pro Preview                         | 애니메이션 토글                                                        |

<Note>
  모델 라인업은 자주 변경됩니다. 표는 현재 사용 가능한 내용을 반영합니다. 오늘 귀하의 계정에서 사용할 수 있는 내용은 제품 내 드롭다운에서 확인하세요.
</Note>

각 프레임 종류가 무엇인지, 만든 후 무엇을 할 수 있는지는 [Frames](/references/design/frames)를 참조하세요.

#### 시각적 참조 첨부하기

생성하기 전에 보드에 이미 있는 항목을 시각적 참조로 첨부할 수 있습니다. Agent는 이 참조를 사용하여 결과가 프로젝트의 모양과 일치하도록 가이드합니다. **Generate media** 폼 내부의 **+** 메뉴를 열고 옵션을 선택하세요:

* **Upload file**: 컴퓨터에서 이미지를 업로드하여 참조로 사용합니다.
* **Select canvas elements**: 보드에서 기존 항목을 선택합니다. 프레임은 스크린샷으로 캡처되고, 텍스트 및 메모 도형은 텍스트 요약으로 첨부됩니다.

각 참조는 폼에서 칩으로 나타납니다. 필요한 만큼 추가하고 프롬프트를 작성한 다음 **Generate**를 선택하세요. 참조를 제거하려면 칩을 선택하세요.

<Frame caption="+ 메뉴가 열려 있는 Generate media 폼으로, 파일 업로드와 캔버스 요소 선택이 표시됩니다.">
  <img src="https://mintcdn.com/replit/77YMTrJyoo7tOA9T/images/replitai/canvas-generate-media-references.png?fit=max&auto=format&n=77YMTrJyoo7tOA9T&q=85&s=65012e52d8f54671b22e1f27cb153a13" alt="Canvas의 Generate media 폼에서 더하기 메뉴가 열려 있고, 파일 업로드와 캔버스 요소 선택 옵션이 표시되며 모델 드롭다운이 Nano Banana Pro로 설정됨" width="1134" height="662" data-path="images/replitai/canvas-generate-media-references.png" />
</Frame>

<Note>
  ChatGPT Images 2.0은 현재 업로드를 지원하지 않습니다. 시각적 참조를 첨부하려면 모델을 예를 들어 Nano Banana Pro로 전환하세요.
</Note>

**Add 메뉴**가 활성화되면 Generate 버튼이 팝오버의 종류들과 **Design**(라이브 코드에 영향을 미치지 않는 독립적인 시각적 목업)을 통합하는 **+** 메뉴로 대체됩니다:

**적용 범위:** 이미지 생성. **Vector Graphic**에는 벡터 그래픽 생성이 필요하고, **Video**에는 동영상 생성이 필요합니다. **+** 메뉴는 Add 메뉴(이미지 생성이 필요함)가 필요합니다.

## 키보드 단축키

| 단축키                  | 동작              |
| -------------------- | --------------- |
| `V`                  | Interact 도구 활성화 |
| `H`                  | Pan 도구 활성화      |
| `Space` 누른 채 드래그     | 다른 도구에서 이동      |
| `Cmd` / `Ctrl` + 스크롤 | 확대/축소           |
| `Cmd` / `Ctrl` + `+` | 확대              |
| `Cmd` / `Ctrl` + `-` | 축소              |
| `Cmd` / `Ctrl` + `0` | 확대/축소 초기화       |
| `Shift` + 클릭         | 현재 선택에 프레임 추가   |
| `Escape`             | 선택 해제           |

## 보드 제스처

특별히 명시되지 않는 한 이동, 확대/축소, 선택은 모든 도구에서 작동합니다.

**이동하기:**

* 트랙패드: 두 손가락으로 드래그.
* 마우스: 마우스 중간 버튼 클릭하고 드래그, 또는 스페이스바를 누른 채 왼쪽 버튼으로 클릭하고 드래그.
* Pan 도구: 왼쪽 마우스 버튼으로 클릭하고 드래그.

**확대/축소하기:**

* 트랙패드: 핀치.
* 마우스: `Ctrl`(또는 macOS에서 `Cmd`) + 스크롤 휠.
* 키보드: `Cmd`/`Ctrl` + `+`로 확대, `Cmd`/`Ctrl` + `-`로 축소, `Cmd`/`Ctrl` + `0`으로 확대/축소 초기화.

확대/축소는 커서에 고정되어 있으므로 커서 아래의 지점은 나머지 보드가 주변에서 확대/축소될 때 그대로 유지됩니다.

**선택하기:**

* 단일 프레임: Interact 도구로 클릭.
* 다중 선택: `Shift`를 누른 채 각 프레임을 클릭하거나, 보드에 마퀴 사각형을 드래그.
* 선택 해제: 빈 영역을 클릭하거나 `Escape`를 누릅니다.

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

## 관련 페이지

* [Canvas](/references/design/canvas) — 개요 및 구조.
* [Frames](/references/design/frames) — 프레임 종류, 프레임별 액션 바, Reimagine, Refine, Annotate, Build.
* [Elements](/references/design/elements) — 프레임 내부의 개별 요소.
* [Visual Editor](/learn/design/visual-editor) — Edit가 열어주는 요소 타겟팅 흐름.