> ## Documentation Index > Fetch the complete documentation index at: https://docs.replit.com/llms.txt > Use this file to discover all available pages before exploring further. # Frames > Canvas의 Frames에서 재구상하고, 다듬고, 빌드하세요. Canvas의 모든 타일은 **프레임**입니다. 프레임은 선택하고, 드래그하고, 작업하는 대상입니다. 이 페이지에서는 프레임 종류, 선택 시 나타나는 프레임별 액션 바, 그리고 거기서 실행하는 기능들 — Reimagine, Refine, Build — 에 대해 설명합니다. Canvas에 배치된 두 프레임: 왼쪽의 Website 아티팩트(Velocity — Supercar Rental)와 오른쪽의 Design 목업(Velocity — Home (Mockup)). ## 프레임 종류 두 가지 주요 종류는 **Artifacts**(라이브, 앱 기반 표면)와 **Designs**(목업)입니다. 프레임의 왼쪽 상단 헤더에 종류가 표시됩니다. | 종류 | 헤더 레이블 | 기반 | 라이브 앱처럼 상호작용? | 실제 앱으로 변환? | | --------------- | ------------------------- | ----------- | ------------- | ----------------------------------------------- | | Artifact | **Website**, **Slides** 등 | 실행 중인 아티팩트 | 예 | 이미 앱입니다. | | Mobile artifact | **Mobile app** | 실행 중인 아티팩트 | 예(시뮬레이터에서) | 이미 앱입니다. | | Design | **Design** | 정적/대화형 목업 | 대화형 프레임만 | 예 — 프레임별 **Build…** 메뉴를 통해. [Build](#build) 참조. | | Image | **Image** | 생성된 PNG/JPG | 아니요 | 아니요 — 참조로 사용하세요. | | Video | **Video** | 생성된 동영상 | 아니요 | 아니요. | | Vector graphic | **Graphic** | 생성된 SVG | 아니요 | 아니요 — 실제 앱에 삽입하세요. | Design 프레임이 정적 이미지로 동작하는지 대화형 프로토타입으로 동작하는지는 **Interactive frames** 기능에 따라 다릅니다. 활성화되면 Design 프레임이 실제 페이지처럼 클릭 및 양식 입력에 반응하고, 그렇지 않으면 반복할 수 있지만 클릭할 수 없는 스냅샷으로 렌더링됩니다. ## 프레임별 액션 바 프레임을 선택하면 액션 바가 나타납니다. 동작은 프레임의 종류에 따라 다릅니다. ### Artifact 및 Design 프레임 Artifact(Website, Slides 등) 및 Design 프레임의 경우, 액션 바가 프레임 상단에 가로로 표시됩니다. Velocity Website 프레임이 선택된 Canvas로, 종류 레이블과 Preview 버튼이 있는 프레임별 액션 바가 상단에 표시되고 Reimagine으로 생성된 세 가지 Design 변형이 아래에 배치됨. 액션 클러스터는 좁은 너비에서 아이콘으로 압축되고 프레임이 넓어지면 레이블이 표시됩니다. 왼쪽에서 오른쪽 순서의 전체 세트: | 동작 | 설명 | | --------- | ------------------------------------------------------------------------------------------------------------------------------- | | Reimagine | 현재 프레임의 변형을 생성하는 Reimagine 메뉴를 엽니다. | | Build… | 프로젝트의 모든 아티팩트를 나열하는 메뉴를 엽니다 — 하나를 선택하여 디자인을 적용하거나, **Build this design**을 선택하여 새 아티팩트를 만듭니다. Design 프레임 전용. [Build](#build) 참조. | | Preview | 프레임에서 포커스 모드로 진입하고 메인 Preview 창으로 고정합니다. 포커스 상태에서 **Back to Canvas**로 전환됩니다. | | Inspect | 프레임 내의 요소를 타겟팅하는 [Visual Editor](/learn/design/visual-editor)를 엽니다. 프레임이 포커스 모드에 있고 선택 가능한 요소가 있을 때만 표시됩니다. | 프레임을 선택하면 다음 Agent 채팅 메시지에 스냅샷으로 첨부됩니다 — [Canvas 개요](/references/design/canvas#anatomy-of-the-canvas)를 참조하세요. 액션 바는 **읽기 전용 모드**를 존중합니다. Canvas가 배경 작업 컨텍스트 내에서 잠겨 있을 때 반복 작업 동작은 숨겨지고 Preview만 남습니다. ### 미디어 프레임 Image, Video, Vector graphic 프레임은 프레임 위에 세 가지 컨트롤이 있는 작은 떠 있는 액션 바를 표시합니다: * **Replace media**: 새 파일을 업로드하여 프레임에 교체하고 Canvas의 위치와 크기를 유지합니다. * **Download**: 미디어 파일을 컴퓨터에 저장합니다. * **Alt text**: 접근성을 위한 대체 텍스트를 추가하고 프레임이 참조될 때 Agent가 더 많은 컨텍스트를 갖도록 합니다. ## Reimagine Reimagine은 기존 프레임의 여러 대안 버전을 생성하여 나란히 디자인 방향을 비교할 수 있게 합니다. 선택된 Velocity Website 프레임에서 열린 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가 가장 탐색되지 않은 축을 선택하여 다양화합니다. | 선택된 변형은 소스 옆에 배치된 새 Design 프레임으로 Canvas에 나타납니다. 소스는 비교할 수 있도록 그대로 유지됩니다. ### 커스텀 프롬프트 사전 설정 목록 아래의 **Something else…** 입력은 자유 형식 프롬프트를 받습니다. 특정 방향이 있을 때 사용하세요 — 예를 들어, "기업 고객을 위한 신뢰와 신용을 강조하는 세 가지 버전을 생성해줘." 커스텀 프롬프트는 기본적으로 세 가지 변형을 생성합니다. ## Refine (인라인 편집) Refine은 단일 프레임의 인라인 편집 루프입니다. 프레임을 선택하고 아래에 나타나는 메시지 입력에 변경 사항을 입력하면 Agent가 프레임을 재작성하여 제자리에서 교체합니다. "Refine"이라는 레이블이 붙은 버튼은 없습니다 — 인라인 입력이 바로 그 표면입니다. Canvas에서 선택된 Design 프레임(Velocity — Home (Mockup))으로, 상단에 프레임별 액션 바(Reimagine, Build…, Preview)가 표시되고 프레임 아래 인라인 Refine 입력에 '검색 바 옆에 AI 질문 아이콘 추가' 프롬프트가 포함됨. 변경하고 싶은 것을 알고 여러 대안을 볼 필요가 없을 때 Refine을 사용하세요. 예시 프롬프트: * "히어로 이미지를 전체 너비로 만들고 아래에 CTA 추가하기" * "내비게이션을 사이드바 레이아웃으로 전환하기" * "더 부드러운 색상 팔레트 사용하기 — 검정 줄이기, 따뜻한 회색 늘리기" Reimagine과 달리 Refine은 변형을 생성하는 대신 선택된 프레임을 직접 수정합니다. 원본을 유지하고 싶다면 먼저 프레임을 복제하세요(오른쪽 클릭 → **Duplicate**). ## Build 선택된 Design 프레임의 **Build…** 메뉴는 디자인을 라이브 실행 앱으로 전환합니다. 같은 메뉴는 이미 존재하는 아티팩트에 디자인을 적용하는 것도 다룹니다. 선택된 Design 프레임에서 열린 Build… 메뉴로, '빌드하거나 디자인 적용' 헤더가 있음. 두 섹션이 표시됨: '새로운 것 만들기…'에 'Build this design — 새 아티팩트가 생성됩니다' 옵션이 있고, '기존 창작물에 적용하기…'에 프로젝트의 Website 아티팩트(Velocity — Supercar Rental)가 나열됨. ### Build this design 메뉴에서 **Build this design**을 선택하면 선택된 Design 프레임에서 새 아티팩트가 시작됩니다. 새 아티팩트는 프로젝트의 아티팩트 목록에 나타나고 라이브 실행 앱이 됩니다. Build에는 Core 또는 Pro가 필요합니다. ### 기존 아티팩트에 적용하기 Build… 메뉴는 프로젝트의 모든 아티팩트를 나열합니다. 하나를 선택하면 선택된 Design의 변경 사항이 해당 아티팩트에 적용됩니다 — Agent가 디자인과 일치하도록 아티팩트의 코드를 재작성하고 참조를 위해 Design 프레임은 Canvas에 유지됩니다. ## 관련 페이지 * [Canvas](/references/design/canvas) — 개요 및 구조. * [Toolbar](/references/design/toolbar) — 떠 있는 툴바; Generate로 새 프레임을 만들 수 있습니다. * [Elements](/references/design/elements) — 프레임 내부의 개별 요소. * [Visual Editor](/learn/design/visual-editor) — 포커스된 프레임 내의 요소 수준 편집.