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

# 디자인 빌드하기

> 우승한 프레임을 실제 소프트웨어로 만드세요: 새 앱으로 빌드하거나, 이미 가지고 있는 앱에 그 모습을 적용할 수 있습니다.

디자인 프레임은 단순한 그림이 아니라 실제 소프트웨어의 사양입니다. 프레임이 마음에 들면 Agent에게 맡기세요: 프레임을 선택하고 액션 바에서 \*\*Build…\*\*를 선택한 다음 경로를 고르면 됩니다:

* 같은 프로젝트 안에서 디자인을 새 앱으로 빌드하기
* 디자인의 모습을 이미 가지고 있는 앱에 적용하기
* 어느 쪽이든 안전하게 되돌리기, Agent가 시작하기 전에 체크포인트를 만듭니다

## 프레임에서 앱까지, 두 가지 경로

선택한 Design 프레임의 **Build…** 메뉴는 두 가지를 모두 다룹니다:

<Frame caption="Build… 메뉴: 새 아티팩트를 만들거나, 기존 아티팩트에 디자인을 적용합니다.">
  <img src="https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-build-menu.png?fit=max&auto=format&n=OIImiKPshhawqFXK&q=85&s=494228a2a81e9f943376d78e77b96417" alt="선택된 Design 프레임(APEX X1 Exact Replica)에서 열린 Build 메뉴. 'Build or apply your designs' 헤더 아래 새 아티팩트를 만드는 'Build this design'과, 프로젝트의 APEX X1 Design System 및 Scroll Hero 웹사이트를 나열하는 'Apply to an existing creation'이 표시됨" width="2000" height="1153" data-path="images/replitai/canvas-build-menu.png" />
</Frame>

### 이 디자인 빌드하기

**Build this design**을 선택하면 해당 프레임에서 새 아티팩트가 시작됩니다. Agent는 레이아웃, 스타일, 에셋을 빌드해 프로젝트의 아티팩트 목록에 실제로 실행되는 앱으로 추가합니다.

### 기존 앱에 적용하기

이 메뉴에는 프로젝트에 있는 모든 아티팩트도 나열됩니다. 하나를 선택하면 그 앱에 디자인을 적용합니다: Agent는 프레임에 맞게 아티팩트의 코드를 다시 작성하고, Design 프레임은 참고용으로 캔버스에 그대로 남습니다. 이미 만들어둔 앱을 처음부터 다시 만들지 않고도 스타일을 다시 입힐 수 있는 방법입니다.

## 진행 흐름

<Steps>
  <Step title="빌드할 디자인 고르기">
    출시할 프레임을 결정하세요. 먼저 캔버스에서 후보들을 나란히 비교해 보세요. 빌드하면 이번 탐색 라운드가 마무리되지만, Agent가 체크포인트를 만들어 두므로 언제든 되돌릴 수 있습니다.
  </Step>

  <Step title="Agent에게 맡기기">
    프레임을 선택하고 액션 바에서 \*\*Build…\*\*를 선택한 다음 경로를 고르세요: 새 아티팩트로 만들지, 기존 아티팩트에 적용할지 정합니다. Agent가 디자인, 레이아웃, 스타일, 에셋을 빌드하고 채팅에서 진행 상황을 알려줍니다.
  </Step>

  <Step title="빌드 결과 검토하기">
    Agent가 변경한 내용을 보고하고 체크포인트를 만듭니다. 결과물을 열어 디자인이 실제로 동작하는 모습을 확인하고, 제대로 반영되지 않은 부분이 있으면 계속 채팅으로 조정하세요.
  </Step>
</Steps>

<Note>
  Design 프레임에서 새 앱을 빌드하려면 Core 또는 Pro 플랜이 필요합니다. 디자인 적용을 비롯한 그 외 모든 Replit Design 기능은 모든 플랜에서 사용할 수 있습니다. 플랜 세부 정보는 [Billing](/ko/billing/ai-billing)을 참고하세요.
</Note>

## 빌드 이후: 진짜로 만들기

프레임을 빌드하면 디자인이 적용된 채로 실행되는 앱을 얻게 됩니다. 목업은 그저 동작하는 척만 했지만, 이제 Agent가 실제 기능을 추가할 수 있습니다. 채팅에서 필요한 것을 요청하세요:

* **로그인 기능 추가**: [Replit Auth](/ko/features/auth-and-identity/authentication)로 사용자 계정을 추가하면, 사용자는 별도 설정 없이 Replit 계정으로 로그인하거나 원하는 다른 제공자를 연결할 수 있습니다.
* **실제 데이터 저장**: 내장된 [Database](/ko/features/data-and-storage/sql-database)로 주문, 메시지, 환경설정을 저장하고 불러오세요.
* **요금 청구하기**: [Monetization](/ko/features/monetization/overview) 통합으로 결제와 구독 기능을 추가하세요.
* **다른 서비스와 연동하기**: Agent는 프롬프트 내용에 따라 이메일부터 Slack, Google 서비스까지 [통합 기능](/ko/features/integrations/overview)을 자동으로 활성화합니다.

## 출시하고 성장시키기

앱이 제대로 동작하면 사람들에게 선보이고 계속 개선해 나가세요:

* **퍼블리시하기**: [Publishing 도구](/ko/features/publishing/overview)로 출시한 다음, 실제 앱을 업데이트하는 방법은 [퍼블리시 이후](/ko/features/publishing/after-you-publish)를 참고하세요.
* **실제 주소 갖기**: [커스텀 도메인](/ko/features/publishing/custom-domains)을 구매하거나 연결하세요.
* **찾기 쉽게 만들기**: [SEO Agent](/ko/features/publishing/seo-agent)를 실행해 기술적 감사를 받고 원클릭으로 수정하세요.
* **방문자의 의견 듣기**: [피드백 위젯](/ko/features/publishing/feedback-widget)을 추가해 사람들이 문제와 아이디어를 제보하면 바로 Agent에게 전달할 수 있게 하세요.
* **건강하게 유지하기**: [퍼블리시된 앱 모니터링](/ko/features/publishing/monitoring-a-deployment)으로 상태, 성능, 가동 시간을 추적하세요.

## 다음 단계

* [Design vs. Build](/ko/design/design-vs-build): 각 진입점을 언제 사용할지 알아보세요.
* [디자인 시스템 만들기](/ko/design/create-a-design-system): 출시한 디자인에서 시스템을 추출해 다음 작업이 브랜드에 맞게 시작되도록 하세요.