Canvas의 모든 타일은 프레임입니다. 프레임은 선택하고, 드래그하고, 작업하는 대상입니다. 이 페이지에서는 프레임 종류, 선택 시 나타나는 프레임별 액션 바, 그리고 거기서 실행하는 기능들 — 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… | 프로젝트의 모든 아티팩트를 나열하는 메뉴를 엽니다 — 하나를 선택하여 디자인을 적용하거나, Build this design을 선택하여 새 아티팩트를 만듭니다. Design 프레임 전용. Build 참조. |
| Preview | 프레임에서 포커스 모드로 진입하고 메인 Preview 창으로 고정합니다. 포커스 상태에서 Back to Canvas로 전환됩니다. |
| Inspect | 프레임 내의 요소를 타겟팅하는 Visual Editor를 엽니다. 프레임이 포커스 모드에 있고 선택 가능한 요소가 있을 때만 표시됩니다. |
액션 바는 읽기 전용 모드를 존중합니다. Canvas가 배경 작업 컨텍스트 내에서 잠겨 있을 때 반복 작업 동작은 숨겨지고 Preview만 남습니다.
미디어 프레임
Image, Video, Vector graphic 프레임은 프레임 위에 세 가지 컨트롤이 있는 작은 떠 있는 액션 바를 표시합니다:
- Replace media: 새 파일을 업로드하여 프레임에 교체하고 Canvas의 위치와 크기를 유지합니다.
- Download: 미디어 파일을 컴퓨터에 저장합니다.
- Alt text: 접근성을 위한 대체 텍스트를 추가하고 프레임이 참조될 때 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… 메뉴는 디자인을 라이브 실행 앱으로 전환합니다. 같은 메뉴는 이미 존재하는 아티팩트에 디자인을 적용하는 것도 다룹니다.
Build this design
메뉴에서 Build this design을 선택하면 선택된 Design 프레임에서 새 아티팩트가 시작됩니다. 새 아티팩트는 프로젝트의 아티팩트 목록에 나타나고 라이브 실행 앱이 됩니다. Build에는 Core 또는 Pro가 필요합니다.
기존 아티팩트에 적용하기
Build… 메뉴는 프로젝트의 모든 아티팩트를 나열합니다. 하나를 선택하면 선택된 Design의 변경 사항이 해당 아티팩트에 적용됩니다 — Agent가 디자인과 일치하도록 아티팩트의 코드를 재작성하고 참조를 위해 Design 프레임은 Canvas에 유지됩니다.
관련 페이지
