Toolbar

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

​

도구

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

​

Interact

Interact는 기본 도구입니다. 프레임을 선택하고 드래그하거나, 라이브 아티팩트를 클릭하여 실제로 실행 중인 앱으로 사용할 수 있습니다. Interact가 활성화된 상태에서 프레임을 클릭하면 선택되고 프레임별 액션 바가 나타납니다. 키보드 단축키: V. 적용 범위: 항상 켜짐.

​

Pan

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

​

Chat

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

​

Draw

Draw는 자유 드로잉, 화살표, 스티커 메모, 도형 등의 마크업 도구를 활성화하여 프레임 위에 스케치하거나 보드에 주석을 달 수 있게 합니다. 문제 영역을 표시하거나, 변경하고 싶은 요소를 가리키거나, 프레임 옆에 메모를 남기는 데 사용하세요. Draw가 활성화되면 현재 마크업 도구의 색상, 선, 채우기 컨트롤이 있는 Shape properties 바가 떠 있는 툴바 위에 나타납니다. Interact 또는 Pan으로 전환하면 자동으로 숨겨집니다. 적용 범위: 항상 켜짐.

​

Edit

Edit는 요소를 위한 시각적 선택기입니다. Edit가 활성화된 상태에서 라이브 아티팩트 내부를 클릭하면 요소(버튼, 제목, 이미지)를 선택합니다. 요소를 선택하면 Visual Editor가 열립니다 — 해당 부분만 변경하도록 Agent에게 요청하는 인라인 프롬프트와 함께 컨트롤(Layout, Color, Border 등)이 있는 오른쪽 패널. 전체 흐름은 Elements 및 Visual Editor를 참조하세요. 적용 범위: 항상 켜짐(데스크톱). Canvas에 프레임이 하나도 없으면 비활성화되며, 툴팁에 “아티팩트를 만들거나 디자인을 생성하여 편집하세요.” 라고 표시됩니다. 모바일에서는 숨겨집니다.

​

Generate

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

• Design
• Image
• Video
• Vector Graphic

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

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

종류별 모델 및 컨트롤: 각 프레임 종류가 무엇인지, 만든 후 무엇을 할 수 있는지는 Frames를 참조하세요.

​

시각적 참조 첨부하기

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

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

각 참조는 폼에서 칩으로 나타납니다. 필요한 만큼 추가하고 프롬프트를 작성한 다음 Generate를 선택하세요. 참조를 제거하려면 칩을 선택하세요. Add 메뉴가 활성화되면 Generate 버튼이 팝오버의 종류들과 Design(라이브 코드에 영향을 미치지 않는 독립적인 시각적 목업)을 통합하는 + 메뉴로 대체됩니다: 적용 범위: 이미지 생성. Vector Graphic에는 벡터 그래픽 생성이 필요하고, Video에는 동영상 생성이 필요합니다. + 메뉴는 Add 메뉴(이미지 생성이 필요함)가 필요합니다.

​

키보드 단축키

​

보드 제스처

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

• 트랙패드: 두 손가락으로 드래그.
• 마우스: 마우스 중간 버튼 클릭하고 드래그, 또는 스페이스바를 누른 채 왼쪽 버튼으로 클릭하고 드래그.
• 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가 열어주는 요소 타겟팅 흐름.