Replit AI를 잘 쓰기 위한 똑똑한 질문법
Replit Agent와 Assistant를 제대로 활용하려면, ‘프롬프트’를 똑똑하게 쓰는 게 핵심입니다.
프롬프트는 AI에게 주는 ‘지시문’입니다.
AI는 똑똑하지만 눈치가 없어요. 말한 대로는 잘하지만, 말하지 않으면 모릅니다.
즉, 명확하고 간단하면서, 필요한 맥락을 담은 프롬프트가 좋아요.
이렇게 하면 아이디어에서 실제 앱까지 훨씬 빠르게 갈 수 있어요.
❌ Bad Prompt | ✅ Good Prompt
| ✍️ 설명 | ❌ 나쁜 프롬프트 | ✅ 좋은 프롬프트 |
|---|---|---|
| 구체적인 맥락 제공: 문제 발생 위치, 관련 함수, 오류 메시지를 함께 제시해 AI가 더 정확하게 도움을 줄 수 있습니다. | "코드 좀 고쳐줘." | "사용자 입력을 처리할 때 스크립트가 오류가 납니다. validate_input 함수에 문제가 있는 것 같아요. 관련 오류 메시지는 다음과 같습니다: [오류 내용]" |
| 명확한 목적과 조건 제시: 필요한 구성 요소와 디자인 방향, 콘텐츠 상태까지 구체적으로 제시해 결과물이 명확해집니다. | "웹사이트 만들어줘." | "홈, 자기소개, 연락처 양식으로 구성된 간단한 포트폴리오 웹사이트를 만들어주세요. 깔끔하고 현대적인 느낌의 디자인을 원하고, 콘텐츠는 예시용으로 넣어주세요." |
| 부정 표현 대신 개선 방향 제시: 단순히 '안 된다'가 아닌, 어떤 점을 어떻게 개선할 수 있을지를 구체적으로 알려줍니다. | "느리게 만들지 마." | "데이터 처리 함수가 더 큰 입력값도 빠르게 처리할 수 있도록 개선해주세요. 알고리즘이나 자료구조를 바꿔보는 건 어떨까요?" |
| 구체적 대상과 효과 설명: 어떤 요소에, 언제, 어떤 방식으로 효과를 줄지와 그 이유까지 설명해 더 나은 결과를 이끌어냅니다. | "애니메이션 넣어줘." | "랜딩 페이지의 메인 이미지가 페이지 로딩 시 부드럽게 나타나도록 페이드인 애니메이션을 추가해주세요. 사용자에게 따뜻한 첫인상을 주고 싶어요." |
| 큰 작업을 나누어 요청: ‘백엔드 구축’이라는 추상적인 요청을 실제 기능 단위로 나누어 구체적으로 전달합니다. | "백엔드 만들어줘." | "서버 측 기능을 구성해주세요. 회원가입/로그인을 포함한 사용자 인증과, 사용자 프로필 정보를 안전하게 불러오는 API 엔드포인트가 필요합니다." |
- 오류 상황 발생 시 Console 탭에서 에러를 그대로 복사해서 → GPT에게 물어보세요!
바이브코딩(Replit) 핵심 원칙 10가지
1. 한 번에 하나씩: Checkpoint
- 한 번에 모든 걸 다 만들라고 하지 말고, 한 걸음씩 진행하세요.
- ❌ “전자상거래 앱 만들어줘.”
- ✅ “사용자 가입/로그인이 가능한 기본 백엔드부터 시작하자.”
💡
Replit의 ‘체크포인트’ 기능을 활용하면 각 단계마다 저장하고 되돌리기 쉬워요.
2. 고장 났다면 힌트를 주자: Debug
“안 돼요” 말고, 어떻게 안 되는지 알려주세요.
- ❌ “로그인 안 돼요.”
- ✅ “/login 페이지에서 제대로 입력해도 ‘사용자 없음’ 오류가 떠요. auth.js에 있는 로그인 처리 코드는 이래요: [코드]”
3. 모르면 물어보자: Discover
이 기능 어떤 기술로 만들 수 있을까? 물어보세요!
- ❌ “결제 기능 넣어줘.”
- ✅ “Replit에서 간단하게 쓸 수 있는 카드 결제 방식엔 뭐가 있을까?”
4.답이 맘에 안 들면 다시 말하자: Experiment
AI 답변이 애매하면, 말투를 바꿔보세요.
- 처음: “헤더 만들어줘.”
- 다시: “로고 왼쪽, 메뉴 오른쪽에 있는 고정형 헤더 만들어줘.”
5. 하지 말라는 말 대신, 하라는 말로: Instruct
“이건 하지 마세요” 말고, “이렇게 해주세요”라고 말하세요.
- ❌ “프로필 페이지 너무 복잡하게 하지 마.”
- ✅ “사용자 이름, 이메일, 가입 날짜를 보여주는 깔끔한 프로필 페이지 만들어줘. ‘프로필 수정’ 버튼도 넣어줘.”
6. 관련된 정보만 보여주기: Select
전체 프로젝트 말고, 필요한 파일만 보여주세요.
- ❌ (전체 프로젝트 첨부)
- ✅ “사용자 정보 페이지를 만들고 싶어요. /profile.js 파일을 참고해서, 이 디자인을 따라 만들어주세요: [디자인 첨부]”
7. 보여주는 게 빠르다: Show
예시 코드, 데이터 구조, 화면 이미지 등을 보여주세요.
- ❌ “상품 카드 예쁘게 해줘.”
- ✅ “상품 이미지, 이름, 가격, 장바구니 버튼이 들어간 카드로 만들어줘. 이런 느낌이었으면 해요: [이미지]”
8. 말은 짧고 쉽게: Simplify
긴 문장보단 짧고 쉬운 말이 좋아요.
- ❌ “서버 측 콘텐츠 저장 기능을 구현하세요.”
- ✅ “사용자가 제목과 내용을 써서 글을 등록할 수 있게 해줘. 글은 Replit 데이터베이스에 저장해줘.”
9. 결과와 조건은 분명하게: Specify
출력 형식, 조건, 꼭 필요한 기능을 명확하게 알려주세요.
- ❌ “연락 폼 만들어줘.”
- ✅ “/contact 페이지에 이름(필수), 이메일(필수, 형식 확인), 메시지(10자 이상) 입력 칸을 만들어줘. 작성하면 contact@mydomain.com으로 보내줘.”
10. 먼저 생각하고 물어보자: Test
시작하기 전에 큰 그림을 먼저 그려보세요.
- ❌ “할 일 앱 만들어줘.”
- ✅ “1. 입력창이랑 목록 구조 만들기 → 2. 할 일 추가 기능 → 3. 데이터 저장 기능 → 4. 완료 체크 기능” (이렇게 나눠서 요청하기)
Replit을 잘 쓰고 싶다면, 이렇게 해보세요
- 큰 목표는 잘게 쪼개기
- 정확한 맥락과 목적 알려주기
- 예시와 이미지 보여주기
- 쉬운 말로 간단하게 설명하기
- 출력 조건을 분명히 하기
- 계획을 먼저 세우기
AI는 똑똑한 도구입니다. 좋은 지시가 있어야 좋은 결과가 나옵니다. AI를 ‘팀원’처럼 생각하고, 어떻게 하면 잘 설명할 수 있을지 고민해보세요.
그러면 아이디어가 진짜 결과물로 훨씬 빠르게 바뀝니다!
👉 Replit 가이드 정주행하기
