> ## 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 툴바는 보드 하단 중앙에 고정된 플로팅 바입니다. 탐색, 그리기, 편집, 콘텐츠 추가에 사용하는 도구를 제공합니다. 이 툴바는 Canvas 모드에서 표시됩니다. Canvas 툴바를 확대한 모습. 좌측에는 아이콘만 있는 Interact(선택됨)와 Pan 버튼이, 우측에는 레이블이 있는 Chat, Draw, Edit, Generate 버튼이 있음 ## 도구 도구를 선택하면 활성화됩니다. 활성 도구는 채워진 배경으로 강조 표시됩니다. 가장 왼쪽 클러스터는 탐색(Interact, Pan)입니다. 나머지는 콘텐츠 및 마크업 도구입니다. 도구는 상호 배타적이므로 하나를 선택하면 다른 도구는 비활성화됩니다. ### Interact **Interact**는 기본 도구입니다. 프레임을 선택하고 드래그하거나, 실행 중인 Artifact를 클릭해 실제 작동하는 앱으로 사용할 때 씁니다. Interact가 활성화된 상태에서 프레임을 클릭하면 프레임이 선택되고 [프레임별 액션 바](/ko/design/frames#per-frame-action-bar)가 표시됩니다. Interact 도구로 Website 아티팩트가 선택된 Canvas — 프레임 주위에 선택 핸들이 표시되고 그 위에 프레임별 액션 바가 나타남. 하단 플로팅 툴바에서 Interact 도구가 강조 표시되어 있음 **키보드 단축키:** `V`. **게이트:** 항상 켜짐. ### Pan **Pan**은 커서를 그랩 도구로 전환하여 보드 자체를 드래그할 수 있게 합니다. Pan이 활성화된 상태에서는 클릭 앤 드래그가 프레임을 선택하는 대신 뷰포트를 이동시킵니다. 스페이스바를 누른 채 드래그하거나 마우스 중간 버튼으로 드래그하면 다른 도구에서도 패닝할 수 있습니다. Pan 도구가 활성화된 Canvas — 보드에 Website 아티팩트(Velocity — Supercar Rental)와 Design 목업(Velocity — Home (Mockup))이 보이고, 하단 플로팅 툴바에서 Pan(손 커서) 도구가 강조 표시되어 있음 **키보드 단축키:** `H`. **게이트:** 항상 켜짐. ### Chat **Chat**은 보드에 바로 작은 채팅 입력창을 놓아 Canvas를 벗어나지 않고 Agent에게 프롬프트를 보낼 수 있게 합니다. 선택된 요소와 프레임은 옆의 Agent 채팅 패널에서 보낼 때와 마찬가지로 메시지에 스냅샷으로 첨부됩니다. Chat 모드의 Canvas. 나머지 보드는 어둡게 처리되고 Website 아티팩트 위에 인라인 채팅 입력창이 겹쳐져 있음. 입력창의 'div' 칩은 선택된 요소를 나타내고, 프롬프트에는 'suggest three alternatives to this image'라고 적혀 있음. 하단 플로팅 툴바에서 Chat 도구가 강조 표시되어 있음 **게이트:** Chat 도구(데스크톱 전용). ### Draw **Draw**는 자유형 그리기, 화살표, 스티키 노트, 도형 등 마크업 도구를 활성화하여 프레임 위에 스케치하거나 보드에 주석을 남길 수 있게 합니다. 문제가 있는 부분에 동그라미를 치거나, 변경하고 싶은 요소를 가리키거나, 프레임 옆에 메모를 남기는 데 사용하세요. Draw가 활성화되면 플로팅 툴바 위에 현재 마크업 도구의 색상, 선, 채우기 컨트롤을 제공하는 **Shape properties** 바가 표시됩니다. Interact나 Pan으로 다시 전환하면 자동으로 사라집니다. Draw 도구가 활성화된 Canvas — 프레임 옆에 그려진 'Widget' 사각형과 보라색 'Add a widget' 스티키 노트가 놓여 있음. 플로팅 툴바 위에 Shape properties 바(연필, 텍스트, 사각형, 화살표, 스티키 노트 도구와 색상 스와치, Aa 텍스트 크기 컨트롤)가 보이고 Draw가 강조 표시되어 있음 **게이트:** 항상 켜짐. ### Edit **Edit**은 요소를 위한 시각적 선택 도구입니다. Edit이 활성화된 상태에서 실행 중인 Artifact 내부를 클릭해 요소(버튼, 제목, 이미지)를 타겟으로 지정하세요. 요소를 선택하면 컨트롤 패널인 **Visual Editor**(Layout, Color, Border 등)가 우측에 열리고, 해당 부분만 바꾸도록 Agent에게 요청할 수 있는 인라인 프롬프트가 함께 제공됩니다. 전체 흐름은 [Elements](/ko/design/elements) 및 [Visual Editor](/ko/design/visual-editor)를 참고하세요. 슈퍼카 렌탈 웹사이트에서 Edit 도구가 활성화되어 div 요소가 선택된 모습. Visual Editor 패널에는 Text, Layout, Color, Border 컨트롤과 Discard, Save edits 버튼이 표시되어 있음 **게이트:** 항상 켜짐(데스크톱). 프레임이 하나도 없으면 비활성화되며, 툴팁에는 \*"편집할 아티팩트를 만들거나 디자인을 생성하세요."\*라고 표시됩니다. 모바일에서는 숨겨집니다. ### Generate **Generate**는 이미지, 영상, 벡터 그래픽을 위한 **Generate media** 팝오버를 엽니다. 종류를 선택하고 프롬프트를 작성하면 Agent가 결과물을 새 프레임으로 보드에 배치합니다. 네 가지 옵션이 세로로 나열된 Canvas + Add 메뉴가 열린 모습: Design('Mock up interfaces and visual concepts'), Image('Generate and edit images'), Video('Generate motion clips and animations'), Vector Graphic('Generate vector illustrations and SVGs'). 하단 플로팅 툴바의 Generate 슬롯은 이제 '+ Generate'로 표시됨 팝오버 상단에는 네 개의 탭이 있습니다. * **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 | Animated 토글 | 모델 목록은 자주 변경됩니다. 표는 현재 사용 가능한 항목을 반영하며, 계정에서 오늘 사용할 수 있는 모델은 제품 내 드롭다운을 확인하세요. 각 프레임 종류가 무엇이며 생성 후 무엇을 할 수 있는지는 [Frames](/ko/design/frames)를 참고하세요. #### 시각적 참조 첨부 생성하기 전에, 보드에 이미 있는 항목을 시각적 참조로 첨부할 수 있습니다. Agent는 이 참조를 사용해 프로젝트의 스타일과 일치하는 결과를 만듭니다. **Generate media** 폼 안의 **+** 메뉴를 열고 옵션을 선택하세요. * **Upload file**: 컴퓨터에서 이미지를 업로드해 참조로 사용합니다. * **Select canvas elements**: 보드에서 기존 항목을 선택합니다. 프레임은 스크린샷으로 캡처되고, 텍스트와 노트 도형은 텍스트 요약으로 첨부됩니다. 각 참조는 폼에 칩으로 표시됩니다. 필요한 만큼 추가하고 프롬프트를 작성한 뒤 **Generate**를 선택하세요. 참조를 제거하려면 해당 칩을 선택하세요. + 메뉴가 열린 Canvas의 Generate media 폼. Upload file과 Select canvas elements 옵션이 표시되고 모델 드롭다운은 Nano Banana Pro로 설정되어 있음 ChatGPT Images 2.0은 현재 업로드를 지원하지 않습니다. 시각적 참조를 첨부하려면 모델을 예를 들어 Nano Banana Pro로 전환하세요. **Add menu**가 활성화되면 Generate 버튼이 팝오버의 종류들을 **Design**(실행 중인 코드에 영향을 주지 않는 독립적인 시각적 목업)과 함께 통합하는 **+** 메뉴로 대체됩니다. **게이트:** Image generation. **Vector Graphic**에는 Vector graphic generation이 필요하고, **Video**에는 Video generation이 필요합니다. **+** 메뉴에는 Add menu(자체적으로 Image generation이 필요함)가 필요합니다. ## 보드 탐색 패닝, 확대/축소, 선택 제스처와 그 키보드 단축키는 툴바의 도구가 아니라 보드 자체의 동작입니다. Canvas 페이지의 [보드 탐색하기](/ko/design/canvas#navigate-the-board)를 참고하세요. ## 관련 페이지 * [Canvas](/ko/design/canvas) — 보드 자체: 열기, 탐색하기, 그 위에 있는 것들. * [Frames](/ko/design/frames) — 프레임 종류, 프레임별 액션 바, Build와 Focus. * [Elements](/ko/design/elements) — 프레임 내부의 개별 조각. * [Visual Editor](/ko/design/visual-editor) — Edit이 이끄는 요소 타겟팅 흐름.