Toolbar

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

​

도구

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

​

Interact

Interact는 기본 도구입니다. 프레임을 선택하고 드래그하거나, 실행 중인 Artifact를 클릭해 실제 작동하는 앱으로 사용할 때 씁니다. Interact가 활성화된 상태에서 프레임을 클릭하면 프레임이 선택되고 프레임별 액션 바가 표시됩니다. 키보드 단축키: V. 게이트: 항상 켜짐.

​

Pan

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

​

Chat

Chat은 보드에 바로 작은 채팅 입력창을 놓아 Canvas를 벗어나지 않고 Agent에게 프롬프트를 보낼 수 있게 합니다. 선택된 요소와 프레임은 옆의 Agent 채팅 패널에서 보낼 때와 마찬가지로 메시지에 스냅샷으로 첨부됩니다. 게이트: Chat 도구(데스크톱 전용).

​

Draw

Draw는 자유형 그리기, 화살표, 스티키 노트, 도형 등 마크업 도구를 활성화하여 프레임 위에 스케치하거나 보드에 주석을 남길 수 있게 합니다. 문제가 있는 부분에 동그라미를 치거나, 변경하고 싶은 요소를 가리키거나, 프레임 옆에 메모를 남기는 데 사용하세요. Draw가 활성화되면 플로팅 툴바 위에 현재 마크업 도구의 색상, 선, 채우기 컨트롤을 제공하는 Shape properties 바가 표시됩니다. Interact나 Pan으로 다시 전환하면 자동으로 사라집니다. 게이트: 항상 켜짐.

​

Edit

Edit은 요소를 위한 시각적 선택 도구입니다. Edit이 활성화된 상태에서 실행 중인 Artifact 내부를 클릭해 요소(버튼, 제목, 이미지)를 타겟으로 지정하세요. 요소를 선택하면 컨트롤 패널인 Visual Editor(Layout, Color, Border 등)가 우측에 열리고, 해당 부분만 바꾸도록 Agent에게 요청할 수 있는 인라인 프롬프트가 함께 제공됩니다. 전체 흐름은 Elements 및 Visual Editor를 참고하세요. 게이트: 항상 켜짐(데스크톱). 프레임이 하나도 없으면 비활성화되며, 툴팁에는 *“편집할 아티팩트를 만들거나 디자인을 생성하세요.”*라고 표시됩니다. 모바일에서는 숨겨집니다.

​

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 menu가 활성화되면 Generate 버튼이 팝오버의 종류들을 Design(실행 중인 코드에 영향을 주지 않는 독립적인 시각적 목업)과 함께 통합하는 + 메뉴로 대체됩니다. 게이트: Image generation. Vector Graphic에는 Vector graphic generation이 필요하고, Video에는 Video generation이 필요합니다. + 메뉴에는 Add menu(자체적으로 Image generation이 필요함)가 필요합니다.

​

보드 탐색

패닝, 확대/축소, 선택 제스처와 그 키보드 단축키는 툴바의 도구가 아니라 보드 자체의 동작입니다. Canvas 페이지의 보드 탐색하기를 참고하세요.

​

관련 페이지

• Canvas — 보드 자체: 열기, 탐색하기, 그 위에 있는 것들.
• Frames — 프레임 종류, 프레임별 액션 바, Build와 Focus.
• Elements — 프레임 내부의 개별 조각.
• Visual Editor — Edit이 이끄는 요소 타겟팅 흐름.