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

# Projects & Artifacts

> Replit에서 프로젝트와 아티팩트가 무엇인지 알아보고, 아티팩트를 하나의 프로젝트에 유지할지 별도의 프로젝트를 만들지 결정하세요.

export const ArtifactGrid = () => {
  if (typeof document !== "undefined" && !document.getElementById("artifact-grid-styles")) {
    const style = document.createElement("style");
    style.id = "artifact-grid-styles";
    style.textContent = `
      .artifact-grid-wrap {
        --ag-bg: var(--replit-docs-bg, #F6F6F4);
        --ag-icon-bg: var(--replit-docs-bg-elevated, #F1F1EE);
        --ag-icon-border: var(--replit-docs-border, #DEDAD5);
        --ag-text: var(--replit-docs-text-muted, #5C5C5C);
        --ag-icon-color: var(--replit-docs-text-muted, #5C5C5C);
      }
      .dark .artifact-grid-wrap,
      html.dark .artifact-grid-wrap,
      [data-theme="dark"] .artifact-grid-wrap {
        --ag-bg: var(--replit-docs-bg, #1E1E1F);
        --ag-icon-bg: var(--replit-docs-bg-elevated, #222223);
        --ag-icon-border: var(--replit-docs-border, #39393D);
        --ag-text: var(--replit-docs-text-muted, #B8B8BE);
        --ag-icon-color: var(--replit-docs-text-muted, #B8B8BE);
      }
      @keyframes ag-fade-in {
        from { transform: translateY(8px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
      }
      @media (hover: hover) {
        .artifact-grid-wrap .ag-icon-btn:hover {
          background: var(--ag-icon-border) !important;
        }
      }
    `;
    document.head.appendChild(style);
  }
  const types = [{
    name: "Web",
    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path fillRule="evenodd" d="M12 1.25c5.937 0 10.75 4.813 10.75 10.75S17.937 22.75 12 22.75 1.25 17.937 1.25 12 6.063 1.25 12 1.25Zm-9.217 11.5a9.25 9.25 0 0 0 7.468 8.333 15.25 15.25 0 0 1-2.982-8.333H2.783Zm13.948 0a15.249 15.249 0 0 1-2.983 8.333 9.25 9.25 0 0 0 7.469-8.333H16.73Zm-7.958 0A13.748 13.748 0 0 0 12 20.876a13.748 13.748 0 0 0 3.227-8.126H8.773Zm1.478-9.834a9.251 9.251 0 0 0-7.468 8.334H7.27a15.251 15.251 0 0 1 2.982-8.334ZM12 3.123a13.747 13.747 0 0 0-3.227 8.127h6.454A13.748 13.748 0 0 0 12 3.123Zm1.748-.207a15.25 15.25 0 0 1 2.983 8.334h4.486a9.251 9.251 0 0 0-7.469-8.334Z" clipRule="evenodd" />
        </svg>
  }, {
    name: "Mobile",
    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path fillRule="evenodd" d="M7 2.75c-.69 0-1.25.56-1.25 1.25v16c0 .69.56 1.25 1.25 1.25h10c.69 0 1.25-.56 1.25-1.25V4c0-.69-.56-1.25-1.25-1.25H7ZM4.25 4A2.75 2.75 0 0 1 7 1.25h10A2.75 2.75 0 0 1 19.75 4v16A2.75 2.75 0 0 1 17 22.75H7A2.75 2.75 0 0 1 4.25 20V4Zm7 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5H12a.75.75 0 0 1-.75-.75Z" clipRule="evenodd" />
        </svg>
  }, {
    name: "Slides",
    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path fillRule="evenodd" d="M20 2.25A2.75 2.75 0 0 1 22.75 5v14A2.75 2.75 0 0 1 20 21.75h-8A2.75 2.75 0 0 1 9.25 19V5A2.75 2.75 0 0 1 12 2.25h8Zm-8 1.5c-.69 0-1.25.56-1.25 1.25v14c0 .69.56 1.25 1.25 1.25h8c.69 0 1.25-.56 1.25-1.25V5c0-.69-.56-1.25-1.25-1.25h-8Z" clipRule="evenodd" />
          <path d="M6 4.25a.75.75 0 0 1 .75.75v14a.75.75 0 0 1-1.5 0V5A.75.75 0 0 1 6 4.25ZM2 6.25a.75.75 0 0 1 .75.75v10a.75.75 0 0 1-1.5 0V7A.75.75 0 0 1 2 6.25Z" />
        </svg>
  }, {
    name: "Design",
    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path d="M6.5 11.25a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5ZM17.5 9.25a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5ZM8.5 6.25a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5ZM13.5 5.25a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Z" />
          <path fillRule="evenodd" d="M12 1.25c2.827 0 5.553 1.01 7.573 2.828C21.596 5.9 22.75 8.388 22.75 11A5.749 5.749 0 0 1 17 16.75h-2.25a1 1 0 0 0-.8 1.6l.3.4.1.143a2.5 2.5 0 0 1-2.1 3.857H12a10.75 10.75 0 1 1 0-21.5Zm0 1.5a9.25 9.25 0 1 0 0 18.5h.25a1 1 0 0 0 .8-1.6l-.3-.4a2.5 2.5 0 0 1 2-4H17l.21-.005A4.25 4.25 0 0 0 21.25 11c0-2.161-.953-4.252-2.68-5.807C16.84 3.636 14.476 2.75 12 2.75Z" clipRule="evenodd" />
        </svg>
  }, {
    name: "Animation",
    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path fillRule="evenodd" d="M10.024 7.25c.31.004.613.091.878.251l4.996 2.996a1.752 1.752 0 0 1 .625 2.367 1.75 1.75 0 0 1-.625.639v-.001l-4.995 2.995.001.001a1.75 1.75 0 0 1-2.654-1.505v-5.99a1.75 1.75 0 0 1 1.774-1.753Zm-.02 1.5a.252.252 0 0 0-.22.124.253.253 0 0 0-.034.127v5.998a.252.252 0 0 0 .127.219.253.253 0 0 0 .252-.004l.002-.001 4.997-2.997.002-.001a.252.252 0 0 0 .122-.215.25.25 0 0 0-.122-.215h-.002L10.13 8.786h-.002a.25.25 0 0 0-.125-.037Z" clipRule="evenodd" />
          <path fillRule="evenodd" d="M12 1.25c5.937 0 10.75 4.813 10.75 10.75S17.937 22.75 12 22.75 1.25 17.937 1.25 12 6.063 1.25 12 1.25Zm0 1.5a9.25 9.25 0 1 0 0 18.5 9.25 9.25 0 0 0 0-18.5Z" clipRule="evenodd" />
        </svg>
  }, {
    name: "Data Viz",
    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path d="M5 14.25a.75.75 0 0 1 .75.75v6a.75.75 0 0 1-1.5 0v-6a.75.75 0 0 1 .75-.75ZM12 8.25a.75.75 0 0 1 .75.75v12a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75ZM19 2.25a.75.75 0 0 1 .75.75v18a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75Z" />
        </svg>
  }, {
    name: "3D Game",
    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path fillRule="evenodd" d="M11.25 9.675A3.751 3.751 0 0 1 12 2.25a3.75 3.75 0 0 1 .75 7.425v4.575H19A2.75 2.75 0 0 1 21.75 17v2A2.75 2.75 0 0 1 19 21.75H5A2.75 2.75 0 0 1 2.25 19v-2A2.75 2.75 0 0 1 5 14.25h.25V13a.75.75 0 0 1 1.5 0v1.25h4.5V9.675ZM9.75 6a2.25 2.25 0 1 0 4.5 0 2.25 2.25 0 0 0-4.5 0ZM4.116 16.116A1.25 1.25 0 0 1 5 15.75h14A1.25 1.25 0 0 1 20.25 17v2A1.25 1.25 0 0 1 19 20.25H5a1.25 1.25 0 0 1-1.244-1.126L3.75 19v-2c0-.331.132-.65.366-.884Z" clipRule="evenodd" />
        </svg>
  }];
  const rows = [types.slice(0, 4), types.slice(4, 7)];
  const iconBtnStyle = {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    width: "48px",
    height: "48px",
    border: "1px solid var(--ag-icon-border)",
    borderRadius: "12px",
    background: "var(--ag-icon-bg)",
    cursor: "default",
    color: "var(--ag-icon-color)",
    padding: 0,
    transition: "background 120ms ease-out",
    flexShrink: 0
  };
  return <div className="artifact-grid-wrap" style={{
    fontFamily: "'IBM Plex Sans', sans-serif",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    gap: "12px",
    padding: "32px",
    background: "var(--ag-bg)",
    borderRadius: "16px",
    width: "100%",
    maxWidth: "460px",
    margin: "32px auto",
    opacity: 0,
    animation: "ag-fade-in 300ms ease-out forwards"
  }}>
      {rows.map((row, ri) => <div key={ri} style={{
    display: "flex",
    gap: "12px",
    justifyContent: "center"
  }}>
          {row.map(type => <div key={type.name} style={{
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    gap: "6px"
  }}>
              <div className="ag-icon-btn" style={iconBtnStyle}>
                {type.icon}
              </div>
              <span style={{
    fontSize: "11px",
    color: "var(--ag-text)",
    textAlign: "center",
    lineHeight: "1.2"
  }}>
                {type.name}
              </span>
            </div>)}
        </div>)}
    </div>;
};

**프로젝트**는 Replit에서 빌드하는 모든 것의 컨테이너입니다. **아티팩트**는 그 안에 있는 게시 가능한 결과물 — 웹 앱, 모바일 앱, 슬라이드 덱, 애니메이션, 데이터 시각화, 3D 게임, 디자인 — 입니다.

두 가지 이상을 빌드할 때는 두 가지 옵션이 있습니다: 하나의 프로젝트에 여러 아티팩트를 추가하거나, 별도의 프로젝트를 만드는 것입니다. 올바른 선택은 앱이 데이터, 로직, 배포 주기를 공유하는지 여부에 따라 달라집니다. 이 페이지에서는 두 용어를 깊이 설명하고, 아티팩트를 단일 프로젝트에 유지할 때와 별도의 프로젝트를 만들 때를 보여줍니다.

## 프로젝트란?

프로젝트는 코드, 데이터, 그리고 생성하는 모든 아티팩트를 담는 컨테이너입니다. Agent에게 원하는 것을 말하면, 프로젝트를 설정하고 그 안에 아티팩트를 빌드합니다.

프로젝트는 책상 위의 작업 공간처럼 생각하세요. 모든 것이 한 곳에 있고 동일한 정보를 공유할 수 있지만, 각 부분은 다른 목적을 가집니다.

예를 들어, Agent에게 피트니스 추적 앱을 빌드하도록 요청하면, 모바일 앱 아티팩트와 함께 필요한 백엔드, 데이터베이스, 스토리지가 포함된 프로젝트를 만듭니다.

핵심 개념:

* **프로젝트**: 코드, 데이터, 모든 아티팩트를 담는 컨테이너.
* **아티팩트**: 프로젝트 내의 게시 가능한 결과물 (웹 앱, 슬라이드 덱, 비디오 등).
* **리소스**: 모든 아티팩트는 별도 설정 없이 자동으로 백엔드, 데이터베이스, 파일 스토리지에 접근할 수 있습니다.

프로젝트로 할 수 있는 모든 것 — 관리, 필터링, 고정, 정렬 — 은 [Projects](/references/projects-and-artifacts/projects)를 참조하세요.

## 아티팩트란?

아티팩트는 Replit에서 게시할 수 있는 것들입니다. 각각은 게시할 때 자체 공유 가능한 URL을 갖는 완전하고 독립적인 결과물입니다.

프로젝트의 나머지 — 파일, 이미지, CSV, 코드 — 는 아티팩트를 지원하지만 그 자체로는 게시할 수 없습니다.

<ArtifactGrid />

| 유형                                                           | 설명                                   |
| ------------------------------------------------------------ | ------------------------------------ |
| **[웹 앱](/references/artifact-types/web-apps)**               | 사용자, 데이터베이스 등을 처리하는 웹사이트 및 웹 애플리케이션. |
| **[모바일 앱](/references/artifact-types/building-mobile-apps)** | iPhone 및 Android용 네이티브 앱.            |
| **[슬라이드 덱](/references/artifact-types/slide-decks)**         | 발표하거나 내보낼 수 있는 프레젠테이션 덱.             |
| **[애니메이션](/references/artifact-types/animated-videos)**      | 모션 그래픽 및 애니메이션 비디오. MP4로 내보내기 가능.    |
| **[데이터 시각화](/references/artifact-types/data-apps)**          | 데이터 탐색 및 차트 생성을 위한 인터랙티브 대시보드 및 시각화. |
| **3D 게임**                                                    | 3D 게임, 시뮬레이션, 인터랙티브 경험.              |
| **[디자인](/learn/design/canvas)**                              | 디자인 캔버스에서 탐색한 시각적 방향 및 프로토타입.        |

아티팩트로 할 수 있는 모든 것 — 전환, 새로 추가, Library 사이드바 — 은 [Artifacts](/references/projects-and-artifacts/artifacts)를 참조하세요.

## 프로젝트 내 아티팩트가 공유하는 것

[아티팩트](/references/projects-and-artifacts/artifacts)가 같은 [프로젝트](/references/projects-and-artifacts/projects)에 있을 때, 자동으로 다음을 공유합니다:

* **데이터베이스**: 하나의 아티팩트가 데이터를 작성하면, 나머지가 즉시 읽을 수 있습니다.
* **백엔드 및 API**: 공유된 서버 로직, 코드 중복 없음.
* **파일 스토리지**: 아티팩트 전반에서 접근 가능한 이미지, 문서, 업로드.
* **배포**: 게시하면 모든 것이 함께 동기화되어 배포됩니다.

즉, 아티팩트 간에 연결을 설정하거나 코드를 중복할 필요가 없습니다. 하지만 다른 아티팩트를 게시하지 않고 하나의 아티팩트만 게시할 수는 없습니다.

## 빠른 가이드

기존 프로젝트에 아티팩트를 추가할지 또는 별도의 프로젝트를 만들지 결정할 때 고려해야 할 주요 시나리오입니다.

| **하나의 프로젝트에 여러 아티팩트 사용**       | **별도의 프로젝트 사용**               |
| ------------------------------ | ----------------------------- |
| 앱이 동일한 데이터와 백엔드를 공유            | 앱이 기본 로직이나 데이터를 공유하지 않음       |
| 모든 것을 함께 배포하고 싶음               | 독립적인 배포 주기가 필요                |
| 보완적인 관계 (고객 앱과 관리자 대시보드 같은)    | 관련 없는 제품이거나 다른 클라이언트를 위한 것    |
| 하나의 아티팩트 변경이 나머지에 자동으로 반영되길 원함 | 캠페인 랜딩 페이지나 이벤트 사이트처럼 단기 프로젝트 |

## 예시

### 같은 프로젝트: 하나의 제품을 위한 웹 앱 + 모바일 앱

레스토랑이 고객이 메뉴를 볼 수 있는 웹 앱과 직원이 주문을 관리할 수 있는 모바일 앱을 빌드합니다. 두 앱 모두 메뉴 항목, 주문, 고객 정보의 동일한 데이터베이스에 연결됩니다.

**하나의 프로젝트인 이유:** 앱이 동일한 데이터와 백엔드를 공유합니다. 고객이 웹 앱을 통해 주문하면, 직원은 모바일 앱에서 즉시 볼 수 있습니다.

### 같은 프로젝트: 앱 + 관리자 대시보드 + 투자자 피치 덱

스타트업이 주요 제품, 콘텐츠 관리를 위한 내부 관리 패널, 자금 조달을 위한 슬라이드 덱을 하나의 프로젝트로 빌드합니다.

**하나의 프로젝트인 이유:** 관리자 대시보드는 앱이 표시하는 동일한 데이터를 관리하고, 피치 덱은 공유 백엔드의 실시간 지표를 참조할 수 있습니다.

### 별도의 프로젝트: 관련 없는 두 클라이언트 앱

프리랜서가 한 클라이언트를 위한 e-커머스 스토어와 다른 클라이언트를 위한 예약 시스템을 빌드합니다.

**별도의 프로젝트인 이유:** 앱이 공유하는 데이터나 로직이 없습니다. 각 클라이언트는 독립적인 배포가 필요하고, 하나의 변경이 다른 것에 영향을 미치지 않길 원합니다.

### 별도의 프로젝트: 주요 제품과 함께하는 캠페인 랜딩 페이지

연중 운영되는 프로덕션 앱과 마케팅 캠페인을 위한 단기 랜딩 페이지가 있습니다.

**별도의 프로젝트인 이유:** 캠페인 페이지는 고유한 수명이 있습니다 — 시작하고, 몇 주 운영하고, 내립니다. 별도로 유지하면 주요 제품이 복잡해지지 않고 독립적으로 게시하거나 제거할 수 있습니다.

## 자주 묻는 질문

<Accordion title="아티팩트를 다른 프로젝트로 이동할 수 있나요?">
  현재는 불가능합니다. 아티팩트를 분리해야 한다면, 새 [프로젝트](/references/projects-and-artifacts/projects)를 만들고 Agent에게 다시 빌드하도록 요청하세요.
</Accordion>

<Accordion title="프로젝트에 아티팩트 수 제한이 있나요?">
  프로젝트는 최대 7개의 아티팩트를 포함할 수 있으며, **프로젝트당 모바일 앱 1개** 제한이 있습니다. 이 제한은 추가 아티팩트가 더 많은 메모리를 소비하여 미리보기가 느려질 수 있기 때문입니다. 더 많은 아티팩트가 필요하면 다른 [프로젝트](/references/projects-and-artifacts/projects)를 시작하세요.
</Accordion>

<Accordion title="프로젝트에서 하나의 아티팩트만 게시할 수 있나요?">
  현재는 불가능합니다. 게시하면 모든 것이 함께 배포됩니다. 독립적인 배포가 필요하면 별도의 프로젝트를 사용하세요.
</Accordion>

<Accordion title="아티팩트끼리 데이터를 공유하나요?">
  예. 프로젝트의 모든 아티팩트는 동일한 데이터베이스와 백엔드 서비스를 공유합니다. 웹 앱이 데이터를 작성하면, 모바일 앱과 데이터 대시보드가 즉시 읽을 수 있습니다.
</Accordion>

<Accordion title="아티팩트와 파일의 차이점은 무엇인가요?">
  아티팩트는 게시할 수 있는 것들 — 앱, 슬라이드, 비디오 등 — 입니다. 파일 (CSV, 이미지, 코드 등)은 프로젝트 내의 자산으로 아티팩트를 지원하지만 그 자체로는 게시할 수 없습니다.
</Accordion>