> ## 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.

# Canvas로 디자인하기

> Canvas에서 기존 앱의 시각적 변형을 생성하고, 나란히 비교하고, 마음에 드는 것을 적용하세요 — 재빌드 없이.

export const YouTubeEmbed = ({videoId, title = "YouTube video", startAt}) => {
  if (!videoId) {
    return null;
  }
  let url = "https://www.youtube.com/embed/" + videoId;
  if (startAt) {
    url = url + "?start=" + startAt;
  }
  return <Frame>
      <iframe src={url} title={title} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen></iframe>
    </Frame>;
};

<YouTubeEmbed videoId="Qv9cREjl9vQ" title="Replit Canvas 개요" />

⏰ *예상 시간: 5분* · [첫 번째 앱 빌드하고 게시하기](/build/your-first-app)에서 이어집니다

[Canvas](/learn/design/canvas)는 이미 빌드한 앱에 대한 대안적인 디자인을 Agent에게 생성하도록 요청하고, 나란히 비교하고, 원하는 것을 적용할 수 있는 시각적 워크스페이스입니다. 재빌드에 전념하지 않고도 시각적 방향을 탐색하는 가장 빠른 방법입니다.

이 가이드는 [첫 번째 앱 빌드하고 게시하기](/build/your-first-app)의 Runwell 러닝 트래커를 실행 예제로 사용하지만, 동일한 플로우는 모든 프로젝트에서 작동합니다.

## 시작하기 전에

Replit에 기존 앱이 필요합니다. 다음 중 하나:

* [첫 번째 앱 빌드하고 게시하기](/build/your-first-app)를 완료하여 Runwell을 열어두거나,
* 다른 프로젝트를 사용하세요 — 아래 단계는 동일하게 작동합니다.

## 디자인 변형 탐색하기

<Steps>
  <Step title="Canvas 열기 및 프레임 선택하기">
    Project Editor에서 **Canvas** 탭을 여세요. 앱이 Canvas에 프레임으로 표시됩니다. 프레임을 선택하면 **Reimagine…** 및 **Preview** 컨트롤이 나타납니다.

    <Frame>
      <img src="https://mintcdn.com/replit/L79Q3CdSVWOJwgpU/images/runwell/runwell-canvas-original.png?fit=max&auto=format&n=L79Q3CdSVWOJwgpU&q=85&s=ea5b64f08d33d6c7f45071b02a32658d" alt="Canvas에 프레임으로 표시된 Runwell 앱 — 프레임 상단에 Reimagine 및 Preview 버튼이 있습니다" width="1440" height="900" data-path="images/runwell/runwell-canvas-original.png" />
    </Frame>
  </Step>

  <Step title="디자인 다시 상상하기">
    \*\*Reimagine…\*\*을 클릭하여 Agent가 탐색할 수 있는 방향 메뉴를 여세요. 하나를 선택하세요 — Runwell의 경우 **Explore different vibes**를 시도해 보세요. Agent는 레이아웃을 유지하면서 시각적 느낌을 바꾸는 세 가지 미적 변형을 생성합니다.

    <Frame>
      <img src="https://mintcdn.com/replit/xo1ygyWkXu0yulfN/images/fitstart/fitstart-canvas-reimagine-menu.png?fit=max&auto=format&n=xo1ygyWkXu0yulfN&q=85&s=158dcf710e17daeee2a86554fa0c3e2e" alt="Explore different vibes, Try different layouts, More like this but better 등의 옵션이 있는 열린 Reimagine 메뉴" width="720" height="450" data-path="images/fitstart/fitstart-canvas-reimagine-menu.png" />
    </Frame>

    전체 방향 목록:

    * **Explore different approaches(다양한 접근 방식 탐색)**
    * **Try different layouts(다양한 레이아웃 시도)**
    * **Explore different vibes(다양한 분위기 탐색)**
    * **More like this, but better(이것과 비슷하게, 더 좋게)**
    * **Optimize for usability(사용성 최적화)**
    * **Show me the opposite of this(이것의 반대 보여주기)**
    * **Surprise me(놀라게 해줘)**

    메뉴에서 선택하는 대신 직접 방향을 설명할 수도 있습니다 — 예: "어두운 테마, 미니멀 테마, 화려한 테마를 보여줘".
  </Step>

  <Step title="변형 비교하기">
    Canvas에서 패닝하거나 축소하여 원본과 함께 변형을 확인하세요. 비교해보고 적용하고 싶은 방향을 결정하세요.

    <Frame>
      <img src="https://mintcdn.com/replit/L79Q3CdSVWOJwgpU/images/runwell/runwell-canvas-variants.png?fit=max&auto=format&n=L79Q3CdSVWOJwgpU&q=85&s=86b35f57c7a4cc864b4235d1819b13d8" alt="Canvas에서 원본과 함께 세 가지 Runwell 디자인 변형 — Dawn Patrol, Track Day, Zen Trail" width="1440" height="900" data-path="images/runwell/runwell-canvas-variants.png" />
    </Frame>

    전념하기 전에 하나를 더 다듬고 싶다면 Agent에게 요청하세요 — 예: "두 번째가 마음에 드는데, 헤더를 더 크게 만들어줘."
  </Step>

  <Step title="앱에 디자인 적용하기">
    원하는 변형을 선택하고, 프레임 상단의 \*\*Build…\*\*를 클릭하세요. 대화 상자에서 **기존 앱**(예: Runwell)을 선택하여 별도의 복사본을 만들지 않고 기존 앱에 새 디자인을 적용하세요.

    <Frame>
      <img src="https://mintcdn.com/replit/xo1ygyWkXu0yulfN/images/fitstart/fitstart-canvas-build-dialog.png?fit=max&auto=format&n=xo1ygyWkXu0yulfN&q=85&s=af969c32f40c2b5af80a30edc3e0016a" alt="Build with this design(새 앱 만들기) 또는 기존 Runwell 앱에 적용하는 두 가지 옵션을 보여주는 Build 대화 상자" width="1700" height="1100" data-path="images/fitstart/fitstart-canvas-build-dialog.png" />
    </Frame>

    Agent가 변경 사항을 적용하는 동안 기다리세요. 완료되면 Canvas에서 업데이트된 프레임을 선택하고 **Preview**를 클릭하여 결과를 확인하세요. 처음에 했던 것과 동일한 확인을 실행하세요 — Runwell의 경우: 달리기를 저장하고, 합계가 업데이트되는지 확인하고, Preview를 폰 크기 너비로 조정하세요.
  </Step>

  <Step title="업데이트된 디자인 게시하기 (선택 사항)">
    새로운 디자인이 마음에 드시나요? Agent 채팅 또는 Tools & files 패널의 **Publishing** 타일에서 게시하세요. 공개 URL은 동일하게 유지됩니다 — 방문자는 업데이트된 버전을 즉시 볼 수 있습니다.

    게시 플로우를 다시 확인하고 싶다면 [첫 번째 앱 빌드하고 게시하기](/build/your-first-app)의 **앱 게시하기** 단계를 참조하세요.
  </Step>
</Steps>

## 다음에 시도해볼 것들

<CardGroup cols={2}>
  <Card title="Canvas" icon="palette" href="/learn/design/canvas">
    Canvas 기능과 워크플로우에 대해 자세히 알아보세요.
  </Card>

  <Card title="Visual Editor" icon="pen-ruler" href="/learn/design/visual-editor">
    색상, 텍스트, 레이아웃을 세밀하게 조정하세요.
  </Card>

  <Card title="바이브 코딩 101" icon="robot" href="/learn/vibe-coding">
    Agent를 아이디어에서 동작하는 앱까지 안내하는 방법을 배우세요.
  </Card>
</CardGroup>