Skip to main content
Canvas의 모든 타일은 **프레임(frame)**입니다. 프레임은 여러분이 선택하고 드래그하고 작업하는 대상입니다. 이 페이지에서는 프레임 종류, 선택 시 나타나는 프레임별 액션 바, 그리고 여기서 실행할 수 있는 기능인 Build와 Focus를 다룹니다.
보드에 배치된 세 개의 프레임이 있는 Canvas: Website(Scroll Hero), APEX X1 Design System, 그리고 APEX X1 슈퍼카의 Design 목업이 있으며, 하단에는 플로팅 툴바(Chat, Draw, Edit, Generate)가 있음

​
프레임 종류

주요 두 종류는 Artifacts(실행 중인, 앱에 연결된 화면)와 Designs(목업)입니다. 프레임 좌측 상단 헤더에서 어느 종류인지 확인할 수 있습니다.
Design 프레임이 정적 이미지처럼 동작하는지, 대화형 프로토타입처럼 동작하는지는 Interactive frames 기능에 따라 달라집니다. 이 기능이 활성화되어 있으면 Design 프레임은 실제 페이지처럼 클릭과 폼 입력에 반응합니다. 그렇지 않으면 반복 작업은 가능하지만 클릭해서 넘어갈 수는 없는 스냅샷으로 렌더링됩니다.

​
다양한 기기에서 미리보기

디자인이 다양한 화면 크기에서 어떻게 보이는지 확인하세요. Agent에게 모바일, 태블릿, 또는 데스크톱 버전을 보여달라고 요청하세요. 예를 들어 “이 페이지의 모바일 버전을 보여줘”라고 하면 Agent가 해당 크기로 프레임을 렌더링합니다.
  • 모바일: 390 × 844
  • 태블릿: 768 × 1024
  • 데스크톱: 1280 × 720

​
프레임별 액션 바

프레임을 선택하면 액션 바가 표시됩니다. 액션은 프레임의 종류에 따라 달라집니다.

​
Artifact 및 Design 프레임

Artifact(Website, Slides 등) 및 Design 프레임의 경우, 액션 바가 프레임 상단을 가로질러 표시됩니다.
APEX X1 Design 프레임이 선택된 Canvas. 상단에 종류 레이블과 Build, Focus, 추가 옵션 액션이 있는 프레임별 액션 바가 표시되고, 채팅 프롬프트 입력란에 해당 프레임이 칩으로 첨부되어 있음

Design 프레임의 액션 바: Build…, Focus, 그리고 추가 옵션.

액션 클러스터는 좁은 너비에서는 아이콘으로 압축되고, 프레임이 넓어지면 레이블이 나타납니다. 좌측부터 순서대로 전체 목록은 다음과 같습니다. 앱 프레임(Website, Slides, Mobile app)은 Focus와 추가 옵션을 보여주고, Design 프레임은 그 앞에 Build…를 추가로 보여줍니다. 선택한 프레임에서 새로운 방향으로 뻗어나가려면 해당 프레임의 제안을 따라가세요. 프레임을 선택하면 다음 Agent 채팅 메시지에도 스냅샷으로 첨부됩니다 — Canvas에 있는 것들을 참고하세요.
액션 바는 읽기 전용 모드를 따릅니다. Canvas가 백그라운드 작업 컨텍스트 안에서 잠겨 있으면 반복 작업 관련 액션은 숨겨지고 Focus만 남습니다.

​
미디어 프레임

Image, Video, Vector graphic 프레임은 프레임 위에 작은 플로팅 액션 바를 표시합니다. 세 종류 모두 다음을 공통으로 제공합니다.
  • 미디어 교체: Canvas에서의 위치와 크기를 유지한 채 프레임에 새 파일을 업로드해 교체합니다.
  • 다운로드: 미디어 파일을 컴퓨터에 저장합니다.
  • 대체 텍스트: 접근성을 위해, 그리고 프레임이 참조될 때 Agent가 더 많은 컨텍스트를 갖도록 대체 텍스트를 추가합니다.
Canvas에서 선택된 파란색 슈퍼카 영상 프레임 위에 플로팅 액션 바가 표시되어 있으며, Replace media, Download('Download original' 툴팁 포함), Alt text 컨트롤을 보여줌

영상 프레임의 액션 바: Replace media, Download, Alt text.

Image 프레임에는 두 가지 컨트롤이 더 있습니다.
  • 자르기(Crop): Canvas에서 바로 이미지를 자릅니다.
  • 영상 생성(Generate video): 이미지로부터 짧은 영상 클립을 생성합니다.
Canvas에서 선택된 노란색 슈퍼카 이미지 프레임 위에 플로팅 액션 바가 표시되어 있으며, Replace media, Crop, Download, Alt text, Generate video 컨트롤을 보여줌

이미지 프레임의 액션 바에는 Crop과 Generate video가 추가됨.

​
새로운 방향 탐색하기

프레임을 선택하면 옆에 제안이 나타납니다: 지금 보고 있는 것을 바탕으로 한 원클릭 방향 제시로, 다른 레이아웃, 새로운 분위기, 또는 디자인이 암시하는 페이지 등이 있습니다. 각 제안은 원본 옆에 새로운 프레임으로 생성되므로, 원본은 그대로 유지된 채 비교할 수 있습니다.
APEX X1 슈퍼카 히어로를 보여주는 선택된 Website 프레임 옆에 Suggested next steps 패널이 있고, Explore different approaches, Try different layouts, Explore different vibes, Surprise me 같은 제안 칩이 표시되어 있음

​
Build

선택한 Design 프레임의 Build… 메뉴는 디자인을 실제 작동하는 앱으로 승격시킵니다. 동일한 메뉴로 이미 존재하는 Artifact에 디자인을 적용하는 것도 가능합니다.
선택된 Design 프레임(APEX X1 Exact Replica)에서 열린 Build 메뉴. 헤더는 'Build or apply your designs'이며, 새 아티팩트를 만드는 'Build this design'과, 프로젝트의 APEX X1 Design System 및 Scroll Hero 웹사이트를 나열하는 'Apply to an existing creation'을 보여줌

​
Build this design

메뉴에서 Build this design을 선택하면 선택한 Design 프레임으로부터 새 Artifact가 시작됩니다. 새 Artifact는 프로젝트의 아티팩트 목록에 추가되어 실제 작동하는 앱이 됩니다. Build에는 Core 또는 Pro가 필요합니다.

​
기존 Artifact에 적용하기

Build… 메뉴에는 프로젝트 내 모든 Artifact가 나열됩니다. 하나를 선택하면 선택한 Design의 변경 사항이 해당 Artifact에 적용됩니다 — Agent가 디자인에 맞춰 Artifact의 코드를 다시 작성하며, Design 프레임은 참고용으로 Canvas에 남아 있습니다.

​
Focus

Focus는 선택한 프레임을 확대해 화면을 가득 채워, 보드의 나머지 부분 없이 가까이서 작업할 수 있게 해줍니다. 액션 바에서 Focus를 선택해 진입하고, 보드 상단의 Exit focus를 선택해 canvas로 돌아가세요.
포커스 모드에서 화면을 가득 채운 Website 프레임(Velocity 슈퍼카 렌탈 홈페이지)과 보드 상단의 Exit focus 버튼

​
관련 페이지

  • Canvas — 개요 및 구조.
  • Toolbar — 플로팅 툴바; Generate로 새 프레임을 만듭니다.
  • Elements — 프레임 내부의 개별 조각.
  • Visual Editor — 포커스된 프레임 내부의 요소 단위 편집.