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

# 기존 프로젝트 가져오기

> 기존 코드나 디자인 작업을 Replit으로 가져오고, 가져오기가 파일 첨부와 어떻게 다른지 이해하고, 결과로 생성된 Project에서 작업을 이어가세요.

export const ImportProjectCover = () => <div className="chat-mkt" role="img" aria-label="Existing project files and code arriving in a Replit Project canvas" style={{
  margin: "28px 0 42px",
  borderTop: 0,
  paddingTop: 0
}}>
    <div className="chat-use-case-visual" style={{
  aspectRatio: "auto",
  minHeight: "clamp(220px, 34vw, 320px)",
  overflow: "hidden",
  background: "radial-gradient(circle at 14% 0%, rgba(255,255,255,.82), transparent 40%), radial-gradient(circle at 94% 94%, rgba(255,185,147,.48), transparent 37%), linear-gradient(140deg, #ff764d, #ff3c00 60%, #c92d00)"
}}>
      <div aria-hidden="true" style={{
  position: "absolute",
  inset: 0,
  background: "linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,0) 50%, rgba(111,24,0,.2))"
}} />
      <div aria-hidden="true" style={{
  position: "relative",
  zIndex: 1,
  display: "flex",
  width: "100%",
  minHeight: "inherit",
  alignItems: "center",
  justifyContent: "center",
  gap: "clamp(12px, 3vw, 32px)",
  padding: "clamp(14px, 3vw, 28px)",
  boxSizing: "border-box"
}}>
        <div style={{
  display: "grid",
  width: "clamp(102px, 19vw, 156px)",
  gap: "clamp(10px, 2vw, 18px)",
  transform: "translateY(-3%)"
}}>
          <div style={{
  display: "grid",
  gap: 7,
  padding: "clamp(11px, 2vw, 17px)",
  border: "1px solid rgba(255,255,255,.56)",
  borderRadius: 16,
  background: "linear-gradient(145deg, rgba(255,255,255,.32), rgba(255,255,255,.11))",
  boxShadow: "0 14px 28px rgba(71,21,7,.16)",
  backdropFilter: "blur(6px)"
}}>
            {["78%", "52%", "86%", "64%"].map((width, index) => <span key={width} style={{
  width,
  height: index === 0 ? 6 : 4,
  borderRadius: 999,
  background: index === 0 ? "rgba(255,255,255,.78)" : "rgba(255,255,255,.4)"
}} />)}
          </div>
          <div style={{
  display: "flex",
  alignItems: "center",
  gap: 7,
  padding: "clamp(10px, 1.7vw, 14px)",
  border: "1px solid rgba(255,255,255,.5)",
  borderRadius: 15,
  background: "rgba(255,255,255,.15)",
  boxShadow: "0 14px 28px rgba(71,21,7,.14)",
  backdropFilter: "blur(6px)"
}}>
            <span style={{
  width: 15,
  height: 18,
  border: "1px solid rgba(255,255,255,.82)",
  borderRadius: 3
}} />
            <span style={{
  width: "52%",
  height: 5,
  borderRadius: 999,
  background: "rgba(255,255,255,.58)"
}} />
          </div>
        </div>
        <div style={{
  display: "flex",
  alignItems: "center",
  width: "clamp(28px, 7vw, 74px)",
  height: 2,
  borderRadius: 999,
  background: "linear-gradient(90deg, rgba(255,255,255,.2), rgba(255,255,255,.78), rgba(255,255,255,.2))",
  boxShadow: "0 0 12px rgba(255,255,255,.3)"
}}>
          {[0, 1, 2].map(node => <span key={node} style={{
  width: node === 1 ? 10 : 6,
  height: node === 1 ? 10 : 6,
  marginLeft: node === 0 ? "12%" : "auto",
  border: "1px solid rgba(255,255,255,.68)",
  borderRadius: 999,
  background: node === 1 ? "rgba(255,255,255,.74)" : "rgba(255,255,255,.2)"
}} />)}
        </div>
        <div style={{
  position: "relative",
  width: "clamp(182px, 38vw, 310px)",
  minWidth: "min(42%, 250px)",
  minHeight: "clamp(162px, 27vw, 220px)",
  padding: "clamp(12px, 2vw, 18px)",
  border: "1px solid rgba(255,255,255,.64)",
  borderRadius: 21,
  background: "linear-gradient(145deg, rgba(255,255,255,.42), rgba(255,255,255,.12))",
  boxShadow: "0 22px 42px rgba(68,20,6,.24)",
  backdropFilter: "blur(8px)",
  boxSizing: "border-box"
}}>
          <div style={{
  display: "flex",
  alignItems: "center",
  gap: 6
}}>
            {[0, 1, 2].map(dot => <span key={dot} style={{
  width: 7,
  height: 7,
  borderRadius: 999,
  background: dot === 0 ? "rgba(255,255,255,.9)" : "rgba(255,255,255,.38)"
}} />)}
            <span style={{
  width: "32%",
  height: 6,
  marginLeft: 5,
  borderRadius: 999,
  background: "rgba(255,255,255,.62)"
}} />
          </div>
          <div style={{
  display: "grid",
  gridTemplateColumns: "minmax(20px, .42fr) minmax(0, 1fr)",
  gap: 9,
  minHeight: "clamp(106px, 18vw, 151px)",
  marginTop: "clamp(13px, 2.4vw, 20px)"
}}>
            <div style={{
  display: "grid",
  alignContent: "start",
  gap: 7,
  paddingRight: 7,
  borderRight: "1px solid rgba(255,255,255,.3)"
}}>
              {["86%", "61%", "72%"].map((width, index) => <span key={width} style={{
  width,
  height: 6,
  borderRadius: 999,
  background: index === 0 ? "rgba(255,255,255,.82)" : "rgba(255,255,255,.38)"
}} />)}
            </div>
            <div style={{
  display: "grid",
  gap: 8
}}>
              <span style={{
  border: "1px solid rgba(255,255,255,.48)",
  borderRadius: 10,
  background: "rgba(255,255,255,.2)"
}} />
              <span style={{
  border: "1px solid rgba(255,255,255,.34)",
  borderRadius: 10,
  background: "rgba(255,255,255,.1)"
}} />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>;

<ImportProjectCover />

이미 앱이나 프로젝트 작업을 진행해 왔다면, 이를 Replit으로 가져와서 Project에서 작업을 이어갈 수 있습니다. 가져오기는 Conversation의 근거나 컨텍스트로 파일을 첨부하는 것과 다릅니다.

## 지원되는 소스 선택

소스에 따라 무엇을 제공해야 하는지, 그리고 기존 작업이 Replit에 어떻게 반영되는지가 결정됩니다. 현재 가져오기 가이드는 다음 경로를 문서화합니다.

| 기존 작업           | 지원되는 소스                                                                                     |
| --------------- | ------------------------------------------------------------------------------------------- |
| 리포지토리 및 빌더 프로젝트 | **GitHub**, **Bitbucket**, **Vercel**, **Bolt**, **Lovable**, **Base44**, **이전 Agent 내보내기** |
| 디자인             | **Figma** 및 **Claude**                                                                      |
| 로컬 파일 및 데이터     | **ZIP** 및 **스프레드시트**(`.xlsx`, `.csv`, 또는 공개 Google Sheets URL)                              |

일부 빌더 가져오기는 원래 서비스에서 내보낸 GitHub 리포지토리를 사용합니다. 가져오기 전에 소스별 가이드를 검토하세요. 설정, 시크릿, 데이터베이스 값 또는 프로바이더별 서비스는 이후 추가 설정이 필요할 수 있습니다.

프롬프트 박스에서 **plus** 메뉴를 선택한 다음 **Import an existing project**를 선택하면 가져오기 플로우가 열립니다.

## 가져오기와 첨부, 무엇을 선택할까요?

* 기존 코드, 디자인 또는 구조화된 프로젝트 작업을 바탕으로 계속 빌드하고 싶을 때는 **Import a Project**를 사용하세요.
* 문서, 스프레드시트, 이미지 또는 스크린샷이 현재 Conversation의 질문이나 작업에 대한 컨텍스트를 제공할 때는 **Upload a file**을 사용하세요.

두 번째 경로에 대해서는 [파일 업로드 및 사용](/ko/chat/upload-and-use-files)을 참조하세요.

## 작업 이어가기

<section className="chat-mkt chat-workflow-grid has-visuals">
  <a className="chat-example has-visual" href="/ko/build/import-from-providers">
    <div className="chat-use-case-visual palette-blush">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="file-import" size={24} />
      </em>
    </div>

    <span>
      <Icon icon="file-import" size={19} />
    </span>

    <div className="chat-card-title">프로바이더에서 가져오기</div>
    <p>지원되는 소스를 선택하고 전체 가져오기 절차를 따르세요.</p>
    <div className="chat-card-link">Build 가이드 열기 →</div>
  </a>

  <a className="chat-example has-visual" href="/ko/features/projects-and-artifacts/projects">
    <div className="chat-use-case-visual palette-stone">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="diagram-project" size={24} />
      </em>
    </div>

    <span>
      <Icon icon="diagram-project" size={19} />
    </span>

    <div className="chat-card-title">Projects</div>
    <p>가져온 작업이 이어지는 구조화된 공간을 이해하세요.</p>
    <div className="chat-card-link">Projects에 대해 알아보기 →</div>
  </a>
</section>

Project가 Replit에 생성되면, 작업이 확립된 시각적 언어를 따라야 할 때 [디자인 시스템 사용](/ko/chat/use-a-design-system)을 활용하세요.