> ## 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 AI로 효과적으로 프롬프트하기

> Replit Agent 사용 시 효과적인 프롬프트 작성 원칙과 예시를 알아보세요.

export const YouTubeEmbed = ({videoId, title = "YouTube video", startAt}) => {
  if (!videoId) {
    return null;
  }
  let url = "https://www.youtube.com/embed/" + videoId;
  if (startAt) {
    url = url + "?start=" + startAt;
  }
  return <Frame>
      <iframe src={url} title={title} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen></iframe>
    </Frame>;
};

효과적인 프롬프트는 유능한 어시스턴트에게 명확한 지시를 내리는 것입니다. [**Agent**](/references/agent/overview)를 잘 안내하면 아이디어에서 앱까지 빠르게 완성할 수 있습니다.

<YouTubeEmbed videoId="7m5SjKZBw6I" title="10 tips for better vibe coding" />

## 빠른 예시

모호한 프롬프트와 효과적인 프롬프트의 차이를 살펴보세요:

<AccordionGroup>
  <Accordion title="코드 수정" icon="bug">
    **모호한 예:** "코드 고쳐줘."

    **효과적인 예:** "사용자 입력을 처리할 때 스크립트가 실패합니다. 유효성 검사 함수에 문제가 있는 것 같습니다. `validate_input` 부분을 디버그하는 데 도움을 주실 수 있나요? 오류 메시지는 다음과 같습니다: \[세부 정보]"

    효과적인 프롬프트는 문제 영역, 의심되는 함수, 그리고 컨텍스트를 명확히 합니다.
  </Accordion>

  <Accordion title="기능 구현" icon="hammer">
    **모호한 예:** "웹사이트 만들어줘."

    **효과적인 예:** "홈, 자기소개, 문의 양식 섹션이 있는 간단한 포트폴리오 웹사이트를 만들어주세요. 깔끔하고 현대적인 디자인 테마와 플레이스홀더 콘텐츠를 사용하세요."

    효과적인 프롬프트는 목적, 핵심 기능, 원하는 디자인을 명확히 정의합니다.
  </Accordion>

  <Accordion title="성능 개선" icon="gauge-high">
    **모호한 예:** "느리게 만들지 마."

    **효과적인 예:** "더 큰 입력을 더 효율적으로 처리하도록 데이터 처리 함수를 리팩토링하세요. 다른 알고리즘이나 데이터 구조를 사용할 수 있을까요?"

    부정적인 제약 대신 Agent에게 *어떻게* 개선할지 알려주세요.
  </Accordion>

  <Accordion title="UI 변경" icon="paintbrush">
    **모호한 예:** "애니메이션 추가해줘."

    **효과적인 예:** "랜딩 페이지의 메인 이미지에 페이지가 처음 로드될 때 부드럽게 페이드 인되는 애니메이션을 추가해서 환영하는 느낌을 만들어주세요."

    특정 요소, 원하는 효과, 타이밍, 의도된 경험을 명확히 하세요.
  </Accordion>

  <Accordion title="복잡한 시스템" icon="server">
    **모호한 예:** "백엔드 만들어줘."

    **효과적인 예:** "서버 측 로직을 설정하세요. 사용자 인증(회원가입/로그인)을 구현하고 사용자 프로필 데이터를 안전하게 조회하는 API 엔드포인트를 만드세요."

    대형 작업을 구체적인 기능으로 나누세요.
  </Accordion>
</AccordionGroup>

## 핵심 원칙

<Frame>
  <img src="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/10-tips.png?fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=21e1e7269802faa767fef0187bdb6e3d" alt="Ten tips for effective prompting with Replit Agent" width="1259" height="1101" data-path="images/tutorials/10-tips.png" />
</Frame>

### 먼저 계획하기

<Tip>프롬프트를 입력하기 전에 앱의 기능과 사용자 흐름을 정리하세요. 명확한 계획은 더 집중된 프롬프트로 이어집니다.</Tip>

프로덕트 매니저처럼 애플리케이션 구조를 생각해보세요. 전체 목표를 논리적인 단계로 나누세요.

**대신에:** "태스크 관리 앱 만들어줘."

**이렇게:** "1. 입력 필드와 태스크 목록이 있는 기본 HTML 구조 만들기. 2. 태스크를 추가하는 JavaScript 추가하기. 3. 태스크를 저장하는 데이터베이스 사용하기. 4. 태스크 완료 처리 기능 추가하기."

그런 다음 각 단계별로 Agent에게 프롬프트하세요.

### 점진적으로 빌드하기

각 성공적인 단계 후 [**Checkpoints**](/references/agent/overview#checkpoints)를 사용해 진행 상황을 저장하세요. 무언가 잘못되면 작동하는 상태로 롤백하고 다른 접근 방식을 시도할 수 있습니다.

**대신에:** "완전한 e-커머스 플랫폼 만들어줘."

**이렇게:** "Replit Auth를 사용한 사용자 회원가입 및 로그인이 있는 e-커머스 사이트의 기본 풀스택 프로젝트를 설정하세요." 그런 다음 상품 목록, 장바구니, 결제 기능을 순서대로 추가하세요.

### 구체적으로 말하기

출력 형식, 제약 조건, 엣지 케이스를 정확하게 정의하세요.

**대신에:** "문의 양식 추가해줘."

**이렇게:** "`/contact`에 다음 필드가 있는 문의 양식 페이지를 만들어주세요:

* 이름 (필수)
* 이메일 (필수, 올바른 형식이어야 함)
* 메시지 (필수, 최소 10자)

제출 시 양식 데이터를 `contact@mydomain.com`으로 전송하세요."

### 긍정적인 언어 사용하기

피하고 싶은 것 대신 *원하는 것*을 말하세요.

**대신에:** "사용자 프로필 페이지를 헷갈리게 만들지 마세요."

**이렇게:** "깔끔한 사용자 프로필 페이지를 디자인하세요. 사용자 이름을 크게 표시하고, 이메일과 가입 날짜를 그 아래에 보여주세요. '프로필 편집' 버튼을 포함하세요."

### 간단하게 유지하기

명확하고 직접적인 언어를 사용하세요. 복잡한 요청은 글머리 기호로 나누세요.

**대신에:** "사용자 생성 콘텐츠 아티팩트의 동적 생성 및 검색을 용이하게 하는 데 필요한 서버 측 인프라를 구현하세요."

**이렇게:** "사용자가 블로그 게시물을 제출할 수 있는 백엔드 기능을 만드세요. 사용자는 제목과 본문을 입력해야 합니다. 게시물을 데이터베이스에 저장하세요."

## 컨텍스트 활용하기

### 관련 파일 제공하기

전체 프로젝트를 첨부하는 대신 특정 파일을 언급하세요.

**대신에:** (모든 것 첨부) "디자인 시스템에 맞춰 사용자 프로필 페이지를 구현하세요."

**이렇게:** "사용자 프로필 페이지를 만드세요. 서버 엔드포인트에서 사용자 데이터를 가져오세요. \[디자인 문서 URL]에 맞게 스타일링하고 이 목업에 맞추세요: \[`profile_mockup.jpg` 첨부]."

<Tip>관련 없는 작업으로 전환할 때는 새 채팅을 시작하세요. 이렇게 하면 누적된 컨텍스트로 인한 혼란을 방지할 수 있습니다.</Tip>

### 예시 보여주기

코드 스니펫, 샘플 데이터, 스크린샷 등 구체적인 예시를 제공해 모호함을 줄이세요.

**대신에:** "상품 카드를 더 좋게 만들어줘."

**이렇게:** "쇼핑 페이지의 상품 카드를 재디자인하세요. 각 카드에는 상품 이미지, 이름, 가격, '장바구니에 담기' 버튼이 있어야 합니다. 이 레이아웃과 비슷하게 만들어주세요: \[스크린샷 첨부]. 연한 회색 테두리를 사용하세요."

## 효과적으로 디버깅하기

오류가 발생하면 다음을 제공하세요:

* **정확한** 오류 메시지
* 관련 코드 스니펫
* 오류가 발생하는 파일 이름
* 달성하려는 목표
* 이미 시도한 단계들

**대신에:** "내 로그인 페이지가 안 됩니다."

**이렇게:** "`/login`에서 올바른 자격증명으로 로그인하면 브라우저 콘솔에 '사용자를 찾을 수 없습니다' 오류가 나타납니다. 데이터베이스 확인이 제대로 작동하지 않는 것 같습니다. `auth.js`의 로그인 처리 코드가 여기 있습니다."

## 조언 구하기

<Tip>빌드를 시작하기 전에 Plan 모드로 전환해 옵션을 탐색하세요. Agent에게 라이브러리, 접근 방식, 트레이드오프에 대해 물어보세요.</Tip>

**대신에:** "결제 추가해줘."

**이렇게:** "Replit에서 빌드된 웹 앱에서 신용카드 결제를 받을 수 있는 좋은 옵션은 무엇인가요? 통합하기 비교적 간단한 것이 필요합니다."

## 프롬프트 반복하기

첫 번째 프롬프트가 완벽하지 않아도 됩니다 — 그것은 정상입니다. 결과가 맞지 않으면:

* 더 많은 세부 정보 추가하기
* 예시 제공하기
* 지시 사항 단순화하기
* 다른 방식으로 설명하기

**초기:** "웹사이트 헤더 만들어줘."

**개선:** "사이트 로고가 왼쪽에 있고 탐색 링크(홈, 소개, 문의)가 오른쪽에 있는 고정 헤더 컴포넌트를 만들어주세요."

## 요약

효과적인 프롬프트의 핵심:

* 프롬프트 전 **계획하기**
* Checkpoints를 활용해 **점진적으로 빌드하기**
* 요구 사항에 대해 **구체적으로 말하기**
* 예시와 관련 파일로 **컨텍스트 제공하기**
* 결과가 맞지 않을 때 **반복하기**

이 원칙을 마스터하면 Agent로 더 빠르게 앱을 빌드할 수 있습니다.