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

# Design vs. Build

> Replit 프로젝트에서 Design과 Build의 차이점과 각각을 언제 시작해야 하는지 알아보세요.

모든 Replit 프로젝트에는 헤더에 나란히 위치한 두 가지 진입점이 있습니다: **Design**과 **Build**. Design은 소프트웨어가 어떻게 보일지 만드는 곳이고, Build는 Agent가 그것을 작동하게 만드는 곳입니다. 두 진입점 모두 같은 프로젝트를 여는 것이므로, 디자인한 내용이 디자인 도구에 갇히는 일은 없습니다.

<Frame>
  <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/design-vs-build-project.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=d3f7fcbc912ce59d00f6d88e41b9ba38" alt="헤더에 Design과 Build 진입점이 나란히 있는 Replit 프로젝트, APEX X1 Exact Replica 디자인 프레임이 선택된 캔버스 표시" width="2000" height="1255" data-path="images/design/replit-design/design-vs-build-project.png" />
</Frame>

## Design이란?

[Design](/ko/design/what-is-replit-design)은 캔버스를 보여주는 곳으로, 프롬프트로 디자인 프레임을 생성하고, 여러 변형을 살펴보고, 코드를 작성하기 전에 가장 마음에 드는 것을 다듬을 수 있습니다.

Design은 다음에 완벽합니다:

* **아이디어를 빠르게 테스트하기**: 기능을 빌드하기 전에 앱의 디자인을 시각화
* **세련된 웹사이트 만들기**: 랜딩 페이지, 포트폴리오, 레스토랑 메뉴, 이벤트 페이지
* **디자인 세밀하게 조정하기**: 색상, 레이아웃, 콘텐츠를 즉시 조정

<Info>
  Design 목업은 실제 페이지처럼 보이고 느껴지지만, 아직 데이터를 저장하거나 외부 서비스에 연결하지 않습니다. 모든 것이 어떻게 보이는지 만족스러우면, 한 번의 클릭으로 디자인을 완전한 앱으로 빌드할 수 있습니다. 아래 단계에서 방법을 보여줍니다.
</Info>

## Build란?

Build는 여러분의 창작물이 데이터를 저장하고, 사람들이 로그인하고, 다른 서비스에 연결할 수 있는 실제 작동하는 애플리케이션으로 실행되는 곳입니다.

앱에 다음이 필요할 때 Build를 사용하세요:

* **사용자 계정**: 사람들이 계정을 만들고 로그인할 수 있음
* **저장된 정보**: 주문, 메시지, 사용자 환경 설정 같은 데이터 저장
* **다른 서비스 연결**: 결제 처리, 이메일 전송, 다른 앱의 데이터 가져오기
* **복잡한 작업**: 온라인 스토어 운영, 예약 관리, 대시보드 지원

## 두 가지 함께 사용하기

Design과 Build는 같은 프로젝트에서 작동하므로 둘 중 하나를 선택할 필요가 없습니다. 외관부터 시작해서 완전한 앱으로 발전시켜 보세요.

<Steps>
  <Step title="먼저 Design하기">
    Design에서 시작하여 아이디어를 빠르게 시각화합니다. 앱이 어떻게 보이고 느껴지는지, 즉 레이아웃, 색상, 버튼, 사용자 경험에 집중하세요.
  </Step>

  <Step title="다듬고 반복하기">
    [제안](/ko/design/explore-suggestions)을 따라 선택한 프레임의 새로운 방향을 탐색하거나, **Edit** 도구를 선택하고 요소를 클릭하여 [Visual Editor](/ko/design/visual-editor)에서 조정하세요. 원하는 변경 사항을 설명하기 위해 [Agent와 채팅](/ko/design/chat-about-your-design)할 수도 있습니다.

    <Frame>
      <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/ambient-iq.png?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=7f39fec76cde3f60e3a20e6c5a13d8db" alt="APEX X1 슈퍼카 히어로를 보여주는 선택된 Website 프레임과 그 옆에 Explore different approaches, Try different layouts, Explore different vibes, Surprise me 같은 제안 칩을 제공하는 Suggested next steps 패널" width="2000" height="1254" data-path="images/design/replit-design/ambient-iq.png" />
    </Frame>
  </Step>

  <Step title="디자인 빌드하기">
    디자인에 만족하고 실제 기능을 추가할 준비가 되면 프레임에서 \*\*Build…\*\*를 선택하세요. 새 아티팩트를 만들거나 기존 아티팩트에 디자인을 적용할 수 있습니다. Agent가 데이터 저장, 사용자 계정 처리, 서비스 연결 기능을 추가하는 동안 디자인은 그대로 유지됩니다.

    <Frame>
      <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>

    <Note>
      목업에 데이터베이스나 고급 기능을 추가하려고 하면 Agent가 변환을 제안합니다.
    </Note>
  </Step>

  <Step title="게시하고 공유하기">
    앱이 빌드되면 누구나 온라인에서 접근할 수 있도록 게시하세요. Replit이 모든 기술 인프라를 처리하므로 여러분의 앱은 사용자에게 안정적으로 작동합니다.
  </Step>
</Steps>

## 각각을 언제 시작해야 할까요

<CardGroup cols={2}>
  <Card title="Design에서 시작하기" icon="paintbrush">
    * 외관이 가장 어려운 부분일 때
    * 아이디어를 빠르게 확인하고 싶을 때
    * 여러 방향을 탐색하고 비교하고 싶을 때
    * 속도가 우선일 때
  </Card>

  <Card title="Build에서 시작하기" icon="cube">
    * 동작이 가장 어려운 부분일 때
    * 앱이 처음부터 데이터를 저장해야 할 때
    * 사람들이 로그인해야 할 때
    * 다른 서비스에 연결할 때
  </Card>
</CardGroup>

<Tip>
  **어느 것을 선택할지 모르겠나요?** Design에서 시작하세요. 더 빠르고, 나중에 언제든지 디자인을 완전한 앱으로 빌드할 수 있습니다. 작업이 헛되지 않고 빌드할 때 그대로 이어집니다. 반대 방향도 마찬가지입니다. Build에서 앱을 작동시킨 다음 Design에서 다시 스타일링할 수 있습니다.
</Tip>

## 주요 차이점

| 기능         | Design (목업)      | Build (앱)        |
| ---------- | ---------------- | ---------------- |
| **속도**     | 몇 분              | 완전한 앱에 약 10분     |
| **데이터 저장** | 시각적만 (저장 안 됨)    | 실제 데이터 저장 및 불러오기 |
| **사용자 계정** | 로그인이 어떻게 보이는지 표시 | 실제 로그인 기능        |
| **서비스 연결** | 사용 불가            | 결제, 이메일, 외부 데이터  |

## 다음 단계

<CardGroup cols={2}>
  <Card title="What is Replit Design" icon="palette" href="/ko/design/what-is-replit-design">
    프롬프트에서 온브랜드 앱까지의 전체 여정
  </Card>

  <Card title="Canvas" icon="object-group" href="/ko/design/canvas">
    프레임이 존재하는 보드
  </Card>

  <Card title="Build your design" icon="hammer" href="/ko/design/build-your-design">
    프레임에서 작동하는 앱까지 안내되는 흐름
  </Card>

  <Card title="Agent" icon="robot" href="/ko/features/agent/overview">
    Agent가 여러분을 위해 무엇을 빌드할 수 있는지 살펴보기
  </Card>
</CardGroup>