{}

{
    const ta = e.currentTarget;
    ta.style.height = "auto";
    ta.style.height = ta.scrollHeight + "px";
    updateAgentInputButtonState(findAgentInputContainer(ta));
  }} style={{
    display: "block",
    width: "100%",
    minHeight: "21px",
    maxHeight: "calc(14px * 1.5 * 10)",
    padding: 0,
    margin: 0,
    border: "none",
    outline: "none",
    resize: "none",
    fontSize: "14px",
    lineHeight: "1.5",
    color: "var(--ai-text-primary)",
    background: "transparent",
    fontFamily: "inherit",
    boxSizing: "border-box",
    overflowY: "auto"
  }} />
          </div>
          {}
          <div style={{
    position: "absolute",
    left: "8px",
    right: "8px",
    bottom: "8px",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center"
  }}>
            {}
            <div style={{
    display: "flex",
    alignItems: "center",
    gap: "8px",
    overflow: "hidden",
    minWidth: 0
  }}>
              <button className="ai-icon-btn" style={iconBtnStyle} aria-label="Add attachment" type="button">
                {PlusIcon}
              </button>
              <div id="agent-input-pills" data-agent-input-role="pills" style={{
    display: "flex",
    alignItems: "center",
    gap: "6px",
    overflow: "hidden"
  }}></div>
            </div>
            {}
            <div style={{
    display: "flex",
    alignItems: "center",
    gap: "8px",
    flexShrink: 0
  }}>
              {highlightPlan ? <div className="ai-plan-wrap" onClick={e => {
    const wrap = e.currentTarget;
    wrap.classList.toggle("ai-plan-off");
  }}>
                  <label className="ai-plan-btn-highlight" style={{
    display: "flex",
    alignItems: "center",
    gap: "6px",
    height: "32px",
    padding: "0 8px",
    cursor: "pointer",
    fontSize: "12px",
    fontFamily: "inherit",
    transition: "background 120ms ease-out"
  }}>
                    <input className="ai-plan-checkbox-input" type="checkbox" aria-label="Plan mode" name="Plan mode" defaultChecked />
                    <span>Plan</span>
                  </label>
                </div> : <label className="ai-plan-checkbox-label">
                  <input className="ai-plan-checkbox-input" type="checkbox" aria-label="Plan mode" name="Plan mode" />
                  <span>Plan</span>
                </label>}
              <button className="ai-icon-btn" style={iconBtnStyle} aria-label="Start voice input" type="button">
                {MicIcon}
              </button>
              {highlightStart ? <div className="ai-start-wrap">
                  <button data-agent-input-role="start-button" className="ai-icon-btn ai-start-btn-highlight" onClick={handleStartClick} type="button" aria-label="Start" style={{
    ...iconBtnStyle,
    borderRadius: "6px",
    background: "#0079F2",
    color: "#fff",
    opacity: defaultPrompt ? "1" : "0.4",
    cursor: defaultPrompt ? "pointer" : "not-allowed"
  }}>
                    {ArrowUpIcon}
                  </button>
                </div> : <button data-agent-input-role="start-button" className="ai-icon-btn" onClick={handleStartClick} type="button" aria-label="Start" style={{
    ...iconBtnStyle,
    background: "#0079F2",
    color: "#fff",
    opacity: defaultPrompt ? "1" : "0.4",
    cursor: defaultPrompt ? "pointer" : "not-allowed"
  }}>
                  {ArrowUpIcon}
                </button>}
            </div>
          </div>
        </div>
      </div>
    </div>;
};

## Canvas란?

Canvas는 Agent와 함께 디자인을 탐색하고 반복하는 공간입니다. 여기서 앱, 비디오, 슬라이드 같은 아티팩트가 프레임에 표시됩니다. 하나의 시각적 보드에서 Agent와 함께 목업을 만들고, 디자인 방향을 비교하고, 변경사항을 앱에 적용할 수 있습니다.

## Canvas의 구성 요소

Canvas는 모든 것을 시각적으로 보고 작업할 수 있는 무한한 보드입니다.

* **앱**: 실행 중인 앱이 Canvas에서 라이브 인터랙티브 미리보기로 나타납니다. 브라우저에서처럼 클릭하고 사용할 수 있습니다.
* **디자인 목업**: Agent가 생성하는 시각적 프로토타입. 실제 페이지처럼 보이고 느껴집니다 — 상호작용하고, 크기를 조정하고, Agent에게 수정을 요청할 수 있습니다 — 하지만 라이브 앱과 별개여서 자유롭게 실험할 수 있습니다.
* **도형과 그림**: 직사각형, 원, 별, 화살표, 하트 등. 대략적인 아이디어를 스케치하거나, 디자인에 주석을 달거나, 화면이 어떻게 연결되는지 매핑하는 데 사용하세요.
* **텍스트와 스티커 메모**: Canvas 어디에나 레이블이나 메모를 추가하여 생각을 정리하세요.
* **이미지**: Canvas에 스크린샷이나 참조 이미지를 드롭하세요. Agent가 보이는 것을 다시 만들거나 변형할 수 있습니다.
* **비디오**: 다른 콘텐츠 옆에 비디오 파일을 Canvas에 배치하세요.

### Canvas에서 디자인 시작하기

디자인을 시작하는 몇 가지 방법이 있습니다. 가장 자연스러운 것을 선택하세요.

<Steps>
  <Step title="채팅에서 Agent에게 요청하기">
    채팅 입력창에 원하는 것을 입력하면 Agent가 Canvas에 인터랙티브 프레임으로 배치합니다.

<Step title="출력 유형 선택하기">
    원하는 출력 종류 — 웹, 모바일, 슬라이드, 디자인 등 — 를 선택할 수도 있습니다. 캐러셀을 사용하여 프롬프트를 보내기 전에 선택하세요.

<Step title="기존 페이지를 Canvas로 가져오기">
    이미 라이브 앱이 있나요? Agent에게 페이지를 Canvas로 가져와 재디자인하도록 요청하세요 — 예: "내 대시보드를 캔버스에 올려줘." Agent가 사본을 만들어 라이브 앱은 영향을 받지 않습니다.
  </Step>
</Steps>

## 변경하기

Canvas에 디자인이 있으면 여러 방법으로 반복할 수 있습니다.

### Agent에게 업데이트 요청하기

Canvas에서 프레임을 선택하고 아래 나타나는 입력창에 변경사항을 입력하세요. 엔터를 누르면 Agent가 요청을 받아 업데이트를 실행하고 Canvas에서 목업을 새로고침합니다.

### 그리기 및 주석 달기

하단 도구 모음의 그리기 도구를 사용하여 Canvas에 직접 스케치하세요. 변경하고 싶은 곳을 가리키는 화살표를 그리거나, 문제 영역에 원을 그리거나, 피드백이 담긴 텍스트 메모를 추가하세요. 그런 다음 Agent에게 주석을 기반으로 변경하도록 요청하세요.

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

다양한 화면 크기에서 디자인이 어떻게 보이는지 확인하세요. Agent에게 모바일, 태블릿, 또는 데스크톱 버전을 보여달라고 요청하세요:

* **모바일** — 390 × 844
* **태블릿** — 768 × 1024
* **데스크톱** — 1280 × 720

예: "이 페이지의 모바일 버전을 보여줘"라고 하면 Agent가 해당 크기로 렌더링합니다.

### 앱에 변경사항 적용하기

디자인에 만족하면 변경사항을 메인 버전에 적용하세요. Agent가 수행된 내용의 요약을 보여주고 적용하거나 취소할 수 있는 옵션을 제공합니다.

### 프레임을 PNG로 내보내기

Canvas의 모든 아티팩트 또는 디자인 프레임을 PNG 이미지로 저장할 수 있습니다. 이는 문서나 채팅에서 미리보기를 공유하거나, 더 반복하기 전에 스냅샷을 캡처하거나, 팀원에게 스크린샷을 보낼 때 유용합니다.

<Steps>
  <Step title="프레임 메뉴 열기">
    내보낼 아티팩트 또는 디자인 프레임을 우클릭합니다. 사용 가능한 작업이 있는 메뉴가 나타납니다.
  </Step>

<Step title="Export PNG 선택">
    **Export** > **PNG**를 선택합니다. 이미지가 프레임 이름을 기반으로 한 파일명으로 컴퓨터에 다운로드됩니다.
  </Step>
</Steps>

<Note>내보낸 PNG는 Canvas에서 현재 프레임이 표시하는 것과 일치합니다. 앱이나 디자인이 아직 로딩 중이라면 내보내기 전에 완전히 렌더링될 때까지 기다리세요.</Note>

## 디자인 방향 비교하기

어떤 방향으로 갈지 확실하지 않을 때, Agent에게 여러 버전을 생성하여 나란히 비교하도록 요청하세요.

* **한 페이지의 여러 버전**: "이 랜딩 페이지의 다섯 가지 버전을 보여줘." Agent가 각각을 만들어 나란히 배치합니다.
* **다중 페이지 흐름**: "완전한 온보딩 흐름 디자인: 환영, 프로필 설정, 환경 설정, 확인." Agent가 각 화면을 빌드하여 순서대로 배열합니다.
* **혼합 및 매칭**: "미니멀과 볼드 스타일로 랜딩 페이지와 가격 페이지를 보여줘." Agent가 모든 조합을 만들어 전체 그림을 볼 수 있게 합니다.

## 사용자 흐름 매핑하기

Canvas에서 완전한 사용자 여정 — 가입, 온보딩, 대시보드, 설정 — 을 배치하고 모든 것이 어떻게 연결되는지 보세요.

* 각 화면을 별도의 프레임으로 배치
* Agent에게 전체 흐름 생성 요청: "내 앱의 완전한 온보딩 흐름을 그려줘"
* 화살표와 도형을 사용하여 사용자가 화면 간에 이동하는 방법 표시
* Agent에게 대략적인 스케치를 완성된 디자인으로 변환하도록 요청

## 디자인을 실제 앱으로 변환하기

디자인에 만족하고 실제로 만들고 싶을 때 두 가지 방법이 있습니다:

### 완전한 앱으로 만들기

디자인에 데이터 저장, 사용자 계정, 다른 서비스 연결 같은 실제 기능이 필요하면 Agent에게 완전한 앱으로 변환하도록 요청하세요. "이것을 실제 앱으로 만들어줘" 또는 "백엔드를 추가해줘"라고 말하세요. Agent가 실제 게시 가능한 앱으로 작동하는 데 필요한 모든 것을 빌드합니다.

<Note>
  디자인을 완전한 앱으로 변환하려면 유료 플랜이 필요합니다.
</Note>

### 특정 유형으로 변환하기

디자인 프레임을 특정 아티팩트 유형으로 변환할 수도 있습니다:

<Steps>
  <Step title="프레임 선택">
    변환할 프레임을 클릭합니다.
  </Step>

<Step title="Agent에게 변환 요청">
    원하는 것을 Agent에게 말합니다 — 예: "이것을 웹 앱으로 변환해줘" 또는 "이것을 슬라이드로 바꿔줘."
  </Step>

<Step title="유형 선택">
    웹 앱, 모바일 앱, 슬라이드, 데이터 시각화 등에서 선택합니다.
  </Step>
</Steps>

## 자주 묻는 질문

<Accordion title="디자인 프레임이 실행 중인 앱과 같은 건가요?">
  아닙니다. 디자인 프레임은 시각적 프로토타입입니다 — 실제처럼 보이고 느껴지지만, 그 뒤에 작동하는 백엔드나 데이터베이스가 없습니다. Canvas의 앱 미리보기는 실제 실행 중인 앱입니다.
</Accordion>

<Accordion title="라이브 앱을 망가뜨리지 않고 페이지를 재디자인할 수 있나요?">
  예. Agent에게 페이지를 Canvas로 가져오도록 요청하세요 — 예: "내 대시보드를 캔버스에 올려줘." Agent가 실험할 수 있는 사본을 만듭니다. 변경사항을 적용하기로 선택할 때까지 라이브 앱은 영향을 받지 않습니다.
</Accordion>

<Accordion title="디자인을 실제 앱으로 어떻게 변환하나요?">
  Agent에게 완전한 앱으로 만들어달라고 요청하세요("이것을 실제로 만들어줘") 또는 특정 유형으로 변환하도록 요청하세요("이것을 웹 앱으로 변환해줘"). Agent가 작동하고 게시 가능한 앱이 되는 데 필요한 모든 것을 빌드합니다.
</Accordion>

<Accordion title="웹 앱 이외의 유형으로도 변환할 수 있나요?">
  예. Canvas 프레임을 웹 앱, 모바일 앱, 슬라이드, 데이터 시각화 등으로 변환할 수 있습니다.
</Accordion>

<Accordion title="Figma나 다른 도구에서 디자인을 가져올 수 있나요?">
  예. Figma 디자인을 Replit으로 가져오는 몇 가지 방법이 있습니다:

* **Figma에서 가져오기**: [replit.com/import](https://replit.com/import)로 이동하여 Figma 계정을 연결하고 프레임 URL을 붙여넣어 디자인을 작동하는 React 앱으로 변환합니다. 자세한 내용은 [Figma에서 앱으로 빠른 시작](/build/figma-to-app)을 참조하세요.
  * **Agent 채팅의 Figma MCP**: Agent 채팅에 Figma 링크를 직접 붙여넣고 코드 생성, 디자인 데이터 추출, 또는 디자인에서 컴포넌트 빌드를 요청합니다. [Figma MCP 통합](/references/mcp/figma) 가이드를 참조하세요.
  * **스크린샷 참조**: Canvas에 스크린샷을 드롭하고 Agent에게 그로부터 디자인을 다시 만들도록 요청합니다.
</Accordion>

## 사용 가능 여부

Canvas는 프레임 생성, 인라인 편집, 변형 생성, 아티팩트 변환을 포함하여 모든 플랜에서 사용할 수 있습니다. 디자인을 완전한 앱으로 변환하려면 유료 플랜이 필요합니다.