> ## 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에서 열기

> 앱이나 웹사이트에서 방문자가 바로 빌드를 시작할 수 있는 Open in Replit 버튼을 만드는 방법을 알아보세요.

export const CreateUrlLinkBuilder = () => {
  if (typeof document !== 'undefined' && !window.LZString) {
    const script = document.createElement('script');
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.5.0/lz-string.min.js';
    document.head.appendChild(script);
  }
  const getLink = () => {
    if (typeof document === 'undefined' || !window.LZString) {
      return 'https://replit.com/?stack=Design&prompt=';
    }
    const promptEl = document.getElementById('create-url-prompt');
    const stackEl = document.querySelector('input[name="stack-mode"]:checked');
    const referrerEl = document.getElementById('create-url-referrer');
    const prompt = promptEl?.value || '';
    const stack = stackEl?.value || 'Design';
    const referrer = referrerEl?.value || '';
    if (!prompt.trim()) {
      return '';
    }
    const encoded = window.LZString.compressToEncodedURIComponent(prompt);
    let url = `https://replit.com/?stack=${stack}&prompt=${encoded}`;
    if (referrer.trim()) {
      url += `&referrer=${encodeURIComponent(referrer)}`;
    }
    return url;
  };
  const updateOutputs = () => {
    if (typeof document === 'undefined') return;
    const link = getLink();
    const badgeUrl = 'https://replit.com/badge?caption=Build%20with%20Replit';
    const emptyPlaceholder = 'Enter a prompt above to generate a link';
    const badgeMarkdown = link ? `[![Build with Replit](${badgeUrl})](${link})` : emptyPlaceholder;
    const outputEl = document.getElementById('create-url-output');
    const badgeMarkdownEl = document.getElementById('create-url-badge-markdown');
    if (outputEl) outputEl.textContent = link || emptyPlaceholder;
    if (badgeMarkdownEl) badgeMarkdownEl.textContent = badgeMarkdown;
  };
  const handleBadgeClick = e => {
    e.preventDefault();
    const link = getLink();
    if (link) {
      window.open(link, '_blank');
    }
  };
  return <div className="space-y-4">
      <div>
        <label htmlFor="create-url-prompt" className="block text-sm font-medium mb-1">
          Prompt
        </label>
        <textarea id="create-url-prompt" onInput={updateOutputs} placeholder="Create a todo app with a clean, modern design" rows={4} className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100" />
      </div>
      <div>
        <label className="block text-sm font-medium mb-2">Stack mode</label>
        <div className="flex gap-4">
          <label className="flex items-center cursor-pointer">
            <input type="radio" name="stack-mode" value="Design" defaultChecked onChange={updateOutputs} className="mr-2" />
            <span className="text-sm">Design</span>
          </label>
          <label className="flex items-center cursor-pointer">
            <input type="radio" name="stack-mode" value="Build" onChange={updateOutputs} className="mr-2" />
            <span className="text-sm">Build</span>
          </label>
        </div>
      </div>
      <div>
        <label htmlFor="create-url-referrer" className="block text-sm font-medium mb-1">
          Referrer <span className="text-gray-500 font-normal">(optional)</span>
        </label>
        <input id="create-url-referrer" type="text" onInput={updateOutputs} placeholder="Your website or app name" className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100" />
        <p className="mt-1 text-xs text-gray-500">
          The name or URL of the page containing this link. Used for
          attribution.
        </p>
      </div>
      <div>
        <label className="block text-sm font-medium mb-1">Generated link</label>
        <pre className="w-full p-3 bg-gray-100 dark:bg-gray-800 rounded-md text-sm break-all select-all cursor-text">
          <code id="create-url-output">
            https://replit.com/?stack=Design&amp;prompt=
          </code>
        </pre>
      </div>
      <div>
        <label className="block text-sm font-medium mb-1">Badge preview</label>
        <div className="p-3 bg-gray-100 dark:bg-gray-800 rounded-md">
          <a href="#" onClick={handleBadgeClick} style={{
    cursor: 'pointer'
  }}>
            <img src="https://replit.com/badge?caption=Open%20in%20Replit" alt="Open in Replit badge" noZoom />
          </a>
        </div>
      </div>
      <div>
        <label className="block text-sm font-medium mb-1">Badge markdown</label>
        <pre className="w-full p-3 bg-gray-100 dark:bg-gray-800 rounded-md text-sm break-all select-all cursor-text">
          <code id="create-url-badge-markdown">
            [![Open in
            Replit](https://replit.com/badge?caption=Open%20in%20Replit)](https://replit.com/?stack=Design&amp;prompt=)
          </code>
        </pre>
      </div>
    </div>;
};

<Frame caption="이 배지를 클릭하면 Replit이 자동으로 열리고 프롬프트와 설정이 채워집니다.">
  <div style={{ padding: '2rem', display: 'flex', justifyContent: 'center' }}>
    <a href="https://replit.com/?stack=Build&prompt=A4Jw9gtsAuQ&referrer=replit-docs" target="_blank">
      <img src="https://replit.com/badge?caption=Open%20in%20Replit" alt="Open in Replit" noZoom />
    </a>
  </div>
</Frame>

## 링크 만들기

링크를 만들려면 아래 형식을 사용하세요.

```
https://replit.com/?stack=Build&prompt=A4Jw9gtsAuQ&referrer=replit-docs
```

### URL 파라미터

URL에 다음 파라미터를 포함해야 합니다.

| 파라미터       | 유형     | 설명                                                                                                                                                                      | 필수/선택 |
| ---------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----- |
| `stack`    | string | 사용할 빌드 모드. `Design` 또는 `Build` 중 하나여야 합니다. `Design`은 시각적 프로토타이핑을 위한 [Canvas](/learn/design/canvas)를 엽니다. `Build`는 전체 앱 개발을 위한 [Agent](/references/agent/overview)를 엽니다. | 필수    |
| `prompt`   | string | 빌드할 애플리케이션을 설명하는 텍스트로, **[LZ-string](https://pieroxy.net/blog/pages/lz-string/index.html)을 사용하여 압축**해야 합니다. 압축 전 프롬프트는 최대 50,000자까지 가능합니다.                              | 필수    |
| `referrer` | string | 이 링크가 포함된 페이지의 이름 또는 URL. 출처 추적에 사용됩니다.                                                                                                                                 | 선택    |

<Note>
  `prompt` 파라미터는 URL에 추가하기 전에 LZ-string 압축을 적용해야 합니다.
  이렇게 하면 URL이 브라우저 길이 제한 내에 유지되고 올바르게 파싱됩니다.
</Note>

### 대화형 링크 빌더

아래 도구를 사용하여 **Open in Replit** 링크를 생성하세요. 프롬프트를 입력하고 스택 모드를 선택하면 LZ-string 압축이 적용된 링크가 자동으로 생성됩니다.

<CreateUrlLinkBuilder />

### 프롬프트 압축하기

유효한 **Open in Replit** 링크를 만들려면 LZ-string 압축을 사용하여 프롬프트를 압축해야 합니다. 방법은 다음과 같습니다:

#### JavaScript/TypeScript

```javascript theme={null}
import LZString from 'lz-string';

const prompt = 'Create a todo app with a clean, modern design';
const compressed = LZString.compressToEncodedURIComponent(prompt);
const url = `https://replit.com/?stack=Design&prompt=${compressed}`;
```

#### Python

```python theme={null}
import lzstring

prompt = "Create a todo app with a clean, modern design"
compressed = lzstring.LZString().compressToEncodedURIComponent(prompt)
url = f"https://replit.com/?stack=Design&prompt={compressed}"
```

<Tip>
  압축된 문자열이 URL에 안전하도록 `compressToEncodedURIComponent`를 사용하세요.
</Tip>

### 예시

**기본 프롬프트로 Canvas 열기**

```
https://replit.com/?stack=Design&prompt=AoUwTgzg9gdghgGwAQAcpgC4DMoIJZRIR4YgB0QA
```

**상세 프롬프트로 Build 모드 열기**

```
https://replit.com/?stack=Build&prompt=LIQw1gpgBCUE4HsQBMC2IAOUMBsQDt8BLfAcygBcEEcoB3ACwjmg0WQFcBjCqdfEKWYBnKFwJiWICtALIoANyLCOIHEQBe0AI6q4MuDgCe2dt16IU6DMIB0UAJL4uODsmjI4g0iABGOaHE4ZFEAMwQ4KBIiCiJpIgUIYQAaUyIImJMKQRSYfHkuGgixBGQScl8siBBUewARJKJSfCjeOhiGGFMEUKThdIFaWNQIdXxoJQg6PIKAglTUUuYWgFUHWyA&referrer=replit%20docs
```

## 스택 모드

### Canvas

`stack=Design`을 사용하면 프롬프트가 [Canvas](/learn/design/canvas)에서 열립니다. Canvas는 다음에 최적화되어 있습니다:

* 시각적 디자인 및 UI 프로토타이핑
* 레이아웃과 스타일링의 빠른 반복
* 디자인 목업 제작
* 프론트엔드 중심 개발

### Build 모드

`stack=Build`를 사용하면 프롬프트가 [Agent](/references/agent/overview)에서 열립니다. Agent는 다음에 최적화되어 있습니다:

* 풀스택 애플리케이션 개발
* 백엔드 로직 및 API
* 데이터베이스 연동
* 복잡한 기능과 기능 구현

## 모범 사례

* 최적의 생성 결과를 위해 핵심 기능에 집중한 간결한 프롬프트를 사용하세요.
* 빌드하고자 하는 것을 설명하는 명확하고 구체적인 언어를 사용하세요.
* 사용 목적에 맞는 적절한 `stack` 모드를 선택하세요 (UI/UX는 Design, 전체 앱은 Build).
* 공유 전에 압축된 URL이 올바르게 파싱되는지 테스트하세요.
* 프롬프트를 작성할 때 대상 사용자의 기술 수준을 고려하세요.

### 사용자 인증

Replit 인증 상태에 관계없이 앱을 만들기 전에 입력이 필요합니다. 일반적으로 프롬프트를 제출하는 것을 의미합니다.

### 오류 처리

URL이 잘못되었거나 파라미터가 유효하지 않으면 Replit이 프롬프트를 채우지 않습니다. 가능한 원인은 다음과 같습니다:

* 필수 파라미터 누락 (`stack` 또는 `prompt`)
* 유효하지 않은 `stack` 값 (`Design` 또는 `Build`이어야 함)
* `prompt` 파라미터 압축 해제 실패
* 브라우저 "URL이 너무 김" 오류 (압축으로 완화 가능)

### 보안 고려사항

<Warning>
  **Open in Replit** 링크는 의도하지 않은 동작이나 보안 취약점이 있는 앱을 만드는 데
  사용될 수 있습니다. 신뢰할 수 있는 출처의 링크만 클릭하세요.
</Warning>

**Open in Replit** 링크를 공유할 때:

* 공개적으로 공유하기 전에 프롬프트를 신중하게 검토하세요
* 생성될 앱의 보안 영향을 고려하세요
* 프롬프트에 민감한 정보를 포함하지 마세요
* 링크가 무엇을 만들지 투명하게 공개하세요

## 관련 리소스

* [Canvas 문서](/learn/design/canvas)
* [Agent 문서](/references/agent/overview)
* [Replit AI 연동](/references/integrations/overview)