Canvas의 모든 타일은 **프레임(frame)**입니다. 프레임은 여러분이 선택하고 드래그하고 작업하는 대상입니다. 이 페이지에서는 프레임 종류, 선택 시 나타나는 프레임별 액션 바, 그리고 여기서 실행할 수 있는 기능들 — Reimagine, Refine, Build — 을 다룹니다.
프레임 종류
주요 두 종류는 Artifacts(실행 중인, 앱에 연결된 화면)와 Designs(목업)입니다. 프레임 좌측 상단 헤더에서 어느 종류인지 확인할 수 있습니다.
| 종류 | 헤더 레이블 | 기반 | 실행 중인 앱처럼 상호작용 가능? | 실제 앱으로 전환 가능? |
|---|
| Artifact | Website, Slides 등 | 실행 중인 아티팩트 | 예 | 이미 앱임. |
| Mobile artifact | Mobile app | 실행 중인 아티팩트 | 예(시뮬레이터에서) | 이미 앱임. |
| Design | Design | 정적/대화형 목업 | 대화형 프레임만 | 예 — 프레임별 Build… 메뉴를 통해. Build를 참고하세요. |
| Image | Image | 생성된 PNG/JPG | 아니요 | 아니요 — 참고 자료로 사용. |
| Video | Video | 생성된 영상 | 아니요 | 아니요. |
| Vector graphic | Graphic | 생성된 SVG | 아니요 | 아니요 — 실제 앱에 임베드. |
Design 프레임이 정적 이미지처럼 동작하는지, 대화형 프로토타입처럼 동작하는지는 Interactive frames 기능에 따라 달라집니다. 이 기능이 활성화되어 있으면 Design 프레임은 실제 페이지처럼 클릭과 폼 입력에 반응합니다. 그렇지 않으면 반복 작업은 가능하지만 클릭해서 넘어갈 수는 없는 스냅샷으로 렌더링됩니다.
프레임별 액션 바
프레임을 선택하면 액션 바가 표시됩니다. 액션은 프레임의 종류에 따라 달라집니다.
Artifact 및 Design 프레임
Artifact(Website, Slides 등) 및 Design 프레임의 경우, 액션 바가 프레임 상단을 가로질러 표시됩니다.
액션 클러스터는 좁은 너비에서는 아이콘으로 압축되고, 프레임이 넓어지면 레이블이 나타납니다. 좌측부터 순서대로 전체 목록은 다음과 같습니다.
| 액션 | 기능 |
|---|
| Reimagine | 현재 프레임의 변형을 생성하는 Reimagine 메뉴를 엽니다. |
| Build… | 프로젝트 내 모든 Artifact를 나열하는 메뉴를 엽니다 — 디자인을 적용할 하나를 선택하거나, Build this design을 선택해 새 Artifact를 생성하세요. Design 프레임에만 해당됩니다. Build를 참고하세요. |
| Preview | 프레임에서 포커스 모드로 들어가 이를 메인 미리보기 패널로 고정합니다. 포커스가 되어 있는 동안에는 Back to Canvas로 전환됩니다. |
| Inspect | 프레임 내 요소를 타겟으로 하는 Visual Editor를 엽니다. 프레임이 포커스 모드에 있고 선택 가능한 요소가 있을 때만 표시됩니다. |
액션 바는 읽기 전용 모드를 따릅니다. Canvas가 백그라운드 작업 컨텍스트 안에서 잠겨 있으면 반복 작업 관련 액션은 숨겨지고 Preview만 남습니다.
미디어 프레임
Image, Video, Vector graphic 프레임은 프레임 위에 세 가지 컨트롤이 있는 작은 플로팅 액션 바를 표시합니다.
- 미디어 교체: Canvas에서의 위치와 크기를 유지한 채 프레임에 새 파일을 업로드해 교체합니다.
- 다운로드: 미디어 파일을 컴퓨터에 저장합니다.
- 대체 텍스트: 접근성을 위해, 그리고 프레임이 참조될 때 Agent가 더 많은 컨텍스트를 갖도록 대체 텍스트를 추가합니다.
Reimagine
Reimagine은 기존 프레임의 여러 대체 버전을 생성해 디자인 방향을 나란히 비교할 수 있게 합니다.
추천 프롬프트
Reimagine을 선택하면 프레임에 고정된 팝오버가 열리고 일곱 가지 사전 설정된 방향이 나타납니다. 각 프리셋에는 조정된 프롬프트와 변형 개수가 함께 제공됩니다.
| 프리셋 | 변형 수 | 적합한 경우 |
|---|
| Explore different approaches | 4 | 근본적으로 다른 콘셉트 — IA와 상호작용 모델을 다양화합니다. |
| Try different layouts | 3 | 동일한 콘텐츠, 다른 공간 구성과 계층 구조. |
| Explore different vibes | 3 | 동일한 레이아웃, 다른 미학과 톤 방향. |
| More like this, but better | 2 | 디자인 방향은 바꾸지 않고 현재 방향을 다듬습니다. |
| Optimize for usability | 3 | 각 변형이 서로 다른 사용성 절충안을 우선시합니다. |
| Show me the opposite of this | 2 | 지배적인 디자인 선택을 뒤집어 숨겨진 가정을 드러냅니다. |
| Surprise me | 3 | Agent가 가장 덜 탐구된 축을 골라 변형합니다. |
커스텀 프롬프트
프리셋 목록 아래에 있는 Something else… 입력란에는 자유 형식 프롬프트를 입력할 수 있습니다. 특정한 방향이 있을 때 사용하세요 — 예를 들어 “기업 고객을 대상으로 신뢰와 신뢰성을 강조하는 세 가지 버전을 생성해줘.” 커스텀 프롬프트는 기본적으로 세 가지 변형을 생성합니다.
Refine(인라인 편집)
Refine은 단일 프레임에서의 인라인 편집 루프입니다. 프레임을 선택하고 그 아래에 나타나는 메시지 입력란에 변경 사항을 입력하면, Agent가 프레임을 다시 작성해 그 자리에 대체합니다. “Refine”이라는 이름의 버튼은 없습니다 — 인라인 입력란이 곧 그 인터페이스입니다.
무엇을 바꿔야 할지 알고 있고 여러 대안을 볼 필요가 없을 때 Refine을 사용하세요. 예시 프롬프트:
- “히어로 이미지를 전체 너비로 만들고 아래에 CTA를 추가해줘”
- “네비게이션을 사이드바 레이아웃으로 바꿔줘”
- “더 부드러운 색상 팔레트를 사용해줘 — 검은색은 줄이고 웜 그레이를 더”
Reimagine과 달리, Refine은 변형을 생성하는 대신 선택한 프레임을 직접 수정합니다. 원본을 유지하고 싶다면 먼저 프레임을 복제하세요(오른쪽 클릭 → Duplicate).
Build
선택한 Design 프레임의 Build… 메뉴는 디자인을 실제 작동하는 앱으로 승격시킵니다. 동일한 메뉴로 이미 존재하는 Artifact에 디자인을 적용하는 것도 가능합니다.
Build this design
메뉴에서 Build this design을 선택하면 선택한 Design 프레임으로부터 새 Artifact가 시작됩니다. 새 Artifact는 프로젝트의 아티팩트 목록에 추가되어 실제 작동하는 앱이 됩니다. Build에는 Core 또는 Pro가 필요합니다.
기존 Artifact에 적용하기
Build… 메뉴에는 프로젝트 내 모든 Artifact가 나열됩니다. 하나를 선택하면 선택한 Design의 변경 사항이 해당 Artifact에 적용됩니다 — Agent가 디자인에 맞춰 Artifact의 코드를 다시 작성하며, Design 프레임은 참고용으로 Canvas에 남아 있습니다.
관련 페이지
