메인 콘텐츠로 건너뛰기
Canvas 툴바는 보드 하단 중앙에 고정된 플로팅 바입니다. 탐색, 그리기, 편집, 콘텐츠 추가에 사용하는 도구를 제공합니다. 이 툴바는 Canvas 모드에서 표시됩니다.
Close-up of the Canvas toolbar with icon-only Interact (selected) and Pan buttons on the left, then labeled Chat, Draw, Edit, and Generate buttons on the right

​
도구

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

​
Interact

Interact는 기본 도구입니다. 프레임을 선택하고 드래그하거나, 실행 중인 Artifact를 클릭해 실제 작동하는 앱으로 사용할 때 씁니다. Interact가 활성화된 상태에서 프레임을 클릭하면 프레임이 선택되고 프레임별 액션 바가 표시됩니다.
Canvas with a Website artifact selected using the Interact tool — the frame is outlined with pink selection handles, the per-frame action bar (Reimagine and Preview) is shown above it, and the inline 'Request changes or chat about frame…' input is shown below. The Interact tool is highlighted in the floating toolbar at the bottom.
키보드 단축키: V. 게이트: 항상 켜짐.

​
Pan

Pan은 커서를 그랩 도구로 전환하여 보드 자체를 드래그할 수 있게 합니다. Pan이 활성화된 상태에서는 클릭 앤 드래그가 프레임을 선택하는 대신 뷰포트를 이동시킵니다. 스페이스바를 누른 채 드래그하거나 마우스 중간 버튼으로 드래그하면 다른 도구에서도 패닝할 수 있습니다.
Canvas with the Pan tool active — a Website artifact (Velocity — Supercar Rental) and a Design mockup (Velocity — Home (Mockup)) are visible on the board, and the Pan (hand cursor) tool is highlighted in the floating toolbar at the bottom.
키보드 단축키: H. 게이트: 항상 켜짐.

​
Chat

Chat은 보드에 바로 작은 채팅 입력창을 놓아 Canvas를 벗어나지 않고 Agent에게 프롬프트를 보낼 수 있게 합니다. 선택된 요소와 프레임은 옆의 Agent 채팅 패널에서 보낼 때와 마찬가지로 메시지에 스냅샷으로 첨부됩니다.
Canvas in Chat mode with the rest of the board dimmed and the inline chat composer overlaid on a Website artifact. A 'div' chip in the composer indicates a selected element, and the prompt reads 'suggest three alternatives to this image'. The Chat tool is highlighted in the floating toolbar at the bottom.
게이트: Chat 도구(데스크톱 전용).

​
Draw

Draw는 자유형 그리기, 화살표, 스티키 노트, 도형 등 마크업 도구를 활성화하여 프레임 위에 스케치하거나 보드에 주석을 남길 수 있게 합니다. 문제가 있는 부분에 동그라미를 치거나, 변경하고 싶은 요소를 가리키거나, 프레임 옆에 메모를 남기는 데 사용하세요. Draw가 활성화되면 플로팅 툴바 위에 현재 마크업 도구의 색상, 선, 채우기 컨트롤을 제공하는 Shape properties 바가 표시됩니다. Interact나 Pan으로 다시 전환하면 자동으로 사라집니다.
Canvas with the Draw tool active — a drawn 'Widget' rectangle and a purple 'Add a widget' sticky note are placed next to a frame. The Shape properties bar (pencil, text, rectangle, arrow, sticky-note tools plus color swatches and an Aa text-size control) is visible above the floating toolbar, with Draw highlighted.
게이트: 항상 켜짐.

​
Edit

Edit은 요소를 위한 시각적 선택 도구입니다. Edit이 활성화된 상태에서 실행 중인 Artifact 내부를 클릭해 요소(버튼, 제목, 이미지)를 타겟으로 지정하세요. 요소를 선택하면 컨트롤 패널인 Visual Editor(Layout, Color, Border 등)가 우측에 열리고, 해당 부분만 바꾸도록 Agent에게 요청할 수 있는 인라인 프롬프트가 함께 제공됩니다. 전체 흐름은 Elements 및 Visual Editor를 참고하세요.
Canvas with the Edit tool active — an image element in a Website artifact is selected (highlighted in blue with an 'img' chip label), and the Visual Editor panel shows Layout (Outer/Inner space), Color (Opacity), and Border (color, width, radius) controls plus Discard and Save edits buttons. The Edit tool is highlighted in the floating toolbar.
게이트: 항상 켜짐(데스크톱). 프레임이 하나도 없으면 비활성화되며, 툴팁에는 *“편집할 아티팩트를 만들거나 디자인을 생성하세요.”*라고 표시됩니다. 모바일에서는 숨겨집니다.

​
Generate

Generate는 이미지, 영상, 벡터 그래픽을 위한 Generate media 팝오버를 엽니다. 종류를 선택하고 프롬프트를 작성하면 Agent가 결과물을 새 프레임으로 보드에 배치합니다.
The Canvas + Add menu open with four options stacked vertically: Design ('Mock up interfaces and visual concepts'), Image ('Generate and edit images'), Video ('Generate motion clips and animations'), and Vector Graphic ('Generate vector illustrations and SVGs'). The Generate slot in the floating toolbar at the bottom now reads '+ 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) · 오디오 토글
GraphicSVG 벡터 출력; 아이콘, 로고, 다이어그램, 스타일화된 일러스트레이션Claude 4.6 Opus, Gemini 3.1 Pro PreviewAnimated 토글
모델 목록은 자주 변경됩니다. 표는 현재 사용 가능한 항목을 반영하며, 계정에서 오늘 사용할 수 있는 모델은 제품 내 드롭다운을 확인하세요.
각 프레임 종류가 무엇이며 생성 후 무엇을 할 수 있는지는 Frames를 참고하세요.

​
시각적 참조 첨부

생성하기 전에, 보드에 이미 있는 항목을 시각적 참조로 첨부할 수 있습니다. Agent는 이 참조를 사용해 프로젝트의 스타일과 일치하는 결과를 만듭니다. Generate media 폼 안의 + 메뉴를 열고 옵션을 선택하세요.
  • Upload file: 컴퓨터에서 이미지를 업로드해 참조로 사용합니다.
  • Select canvas elements: 보드에서 기존 항목을 선택합니다. 프레임은 스크린샷으로 캡처되고, 텍스트와 노트 도형은 텍스트 요약으로 첨부됩니다.
각 참조는 폼에 칩으로 표시됩니다. 필요한 만큼 추가하고 프롬프트를 작성한 뒤 Generate를 선택하세요. 참조를 제거하려면 해당 칩을 선택하세요.
The Generate media form on Canvas with the plus menu open, showing the Upload file and Select canvas elements options and the model dropdown set to 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이 필요함)가 필요합니다.

​
키보드 단축키

단축키동작
VInteract 도구 활성화
HPan 도구 활성화
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를 누름.
프레임을 하나 이상 선택하면 프레임별 액션 바가 표시되고 다음 Agent 메시지에 해당 프레임들이 스냅샷으로 첨부됩니다.

​
관련 페이지

  • Canvas — 개요 및 구조.
  • Frames — 프레임 종류, 프레임별 액션 바, Reimagine, Refine, Annotate, Build.
  • Elements — 프레임 내부의 개별 조각.
  • Visual Editor — Edit이 이끄는 요소 타겟팅 흐름.