Canvas

​

Canvas란?

Canvas는 Project Editor의 디자인 화면입니다. Agent가 웹사이트, 디자인, 이미지, 벡터 그래픽, 영상을 나타내는 프레임을 생성하고 이를 무한한 보드 위에 배치합니다. 프레임을 이동하거나 크기를 조절하고, 변형을 생성하고, 채팅으로 반복 작업을 할 수 있습니다. Preview 탭 좌측 상단의 Canvas 버튼을 클릭하면 패널이 Canvas 모드로 전환됩니다. 패널을 다시 실행 중인 앱으로 전환하려면 Canvas 버튼 옆의 아티팩트 선택기를 클릭하고 미리 보고 싶은 아티팩트를 선택하세요.

​

Canvas의 기능

Canvas는 작은 세트의 기능을 제공하며, 각각 툴바 또는 프레임별 액션 바를 통해 노출됩니다.

• 생성(Generate): 툴바의 Generate 메뉴 또는 채팅 프롬프트를 통해 새 프레임(디자인, 이미지, 벡터 그래픽, 영상)을 생성합니다.
• 다듬기(Refine): 인라인 편집 입력을 통해 프레임에 즉시 타겟 편집을 적용합니다.
• 재구상(Reimagine): 사전 설정된 방향이나 자유 형식 프롬프트를 사용해 기존 프레임의 나란히 비교 가능한 변형을 생성합니다.
• 빌드(Build): 프레임별 Build 메뉴를 통해 Design 프레임을 실제 작동하는 Artifact로 승격시킵니다.

​

Canvas의 구조

Canvas 용어:

• Canvas: 모든 프레임, 도형, 노트를 담는 무한한 패닝 및 줌 표면입니다.
• Frames: Canvas의 모든 타일이 프레임입니다. 주요 유형은 Artifacts(실행 중인, 앱에 연결된 프레임 — 프레임 헤더에 Website, Slides 등으로 표시)와 Designs(실행 중인 앱에 영향을 주지 않는 목업 — 프레임 헤더에 Design으로 표시) 두 가지입니다. 그 외에도 이미지, 영상, 벡터 그래픽이 있습니다.
• Elements: 프레임 내부의 개별 조각(텍스트, 버튼, 이미지, 기타 구성 요소)입니다. Elements는 Visual Editor로 선택하고 조정하는 대상입니다.
• Toolbar: Canvas 도구가 모여 있는 플로팅 바입니다. 전체 목록은 Toolbar를 참고하세요.

상황에 따라 다음 두 가지 구성 요소가 추가로 나타납니다.

• 프레임별 액션 바: 프레임을 선택하면 표시됩니다. Reimagine, Build…, Preview, Inspect를 제공합니다. 자세한 내용은 Frames를 참고하세요.
• 채팅 패널: Canvas 옆에 고정된 Agent 채팅입니다. 메시지를 보내기 전에 프레임을 선택하면 스냅샷으로 첨부되어 Agent가 시각적 컨텍스트를 얻게 됩니다.

참고 자료

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

배우기

• Canvas 가이드 — 튜토리얼 안내.
• Canvas로 디자인하기 — 기존 앱의 시각적 변형을 생성하고 원하는 것을 적용합니다.
• Canvas와 Preview 비교 — 각각을 언제 사용해야 하는지.