Canvas

​

Canvas란?

Canvas는 프로젝트 편집기의 디자인 뷰입니다. Agent가 웹사이트, 디자인, 이미지, 벡터 그래픽, 동영상을 나타내는 프레임을 생성하여 무한한 보드에 배치합니다. 프레임을 이동하고 크기를 조정하며, 변형을 생성하고 채팅으로 반복 작업할 수 있습니다. Preview 탭 왼쪽 상단의 Canvas 버튼을 클릭하여 창을 캔버스 모드로 전환하세요. 창을 다시 라이브 앱으로 전환하려면 Canvas 버튼 옆의 아티팩트 선택기를 클릭하고 미리보기할 아티팩트를 선택하세요.

​

Canvas 기능

Canvas는 툴바나 프레임별 액션 바를 통해 제공되는 몇 가지 기능을 제공합니다.

• Generate: 툴바의 Generate 메뉴 또는 채팅 프롬프트에서 새 프레임(디자인, 이미지, 벡터 그래픽, 동영상)을 생성합니다.
• Refine: 인라인 편집 입력을 통해 프레임에 직접 타겟팅된 편집을 적용합니다.
• Reimagine: 사전 설정된 방향이나 자유 형식 프롬프트를 사용하여 기존 프레임의 나란히 놓인 변형을 생성합니다.
• Build: 프레임별 Build 메뉴를 통해 Design 프레임을 라이브 아티팩트로 전환합니다.

​

Canvas 구조

Canvas 용어:

• Canvas: 모든 프레임, 도형, 메모를 담는 무한히 이동하고 확대/축소할 수 있는 표면.
• Frames: Canvas의 모든 타일은 프레임입니다. 두 가지 주요 유형이 있습니다: Artifacts(라이브, 앱 기반 — 프레임 헤더에 Website, Slides 등이 표시됨)와 Designs(라이브 앱에 영향을 미치지 않는 목업 — 프레임 헤더에 Design이 표시됨). 이미지, 동영상, 벡터 그래픽도 포함됩니다.
• Elements: 프레임 내부의 개별 요소(텍스트, 버튼, 이미지, 기타 컴포넌트). Elements는 Visual Editor로 선택하고 조정하는 대상입니다.
• Toolbar: Canvas 도구가 있는 떠 있는 바입니다. 전체 목록은 Toolbar를 참조하세요.

컨텍스트에 따라 두 가지 추가 컴포넌트가 나타납니다:

• 프레임별 액션 바: 프레임을 선택하면 나타납니다. Reimagine, Build…, Preview, Inspect를 제공합니다 — Frames를 참조하세요.
• Chat 패널: Canvas 옆에 도킹된 Agent 채팅. 메시지를 보내기 전에 프레임을 선택하면 스냅샷으로 첨부되어 Agent가 시각적 컨텍스트를 갖게 됩니다.

참고

• Toolbar — 전체 도구 목록, 제스처, 선택.
• Frames — 프레임 종류, 프레임별 액션 바, Reimagine, Refine, Annotate, Build.
• Elements — 프레임 내부의 개별 요소.
• Agent — Canvas에서 프레임을 생성하고 편집하는 Agent.

학습

• Canvas 가이드 — 튜토리얼 안내.
• Canvas로 디자인하기 — 기존 앱의 시각적 변형을 생성하고 원하는 것을 적용하세요.
• Canvas vs Preview — 각 표면을 사용해야 하는 경우.