“AI 챗봇 하나 만들어보고 싶은데 코딩이 막막했다”면, 2026년엔 30분이면 충분해요. Cursor나 Claude Code 같은 AI 도구에 프롬프트로 시키고, Vercel AI SDK로 Claude·GPT를 연결하면 대화하는 챗봇이 브라우저에서 돌아갑니다. 이 글은 챗봇의 3가지 부품, 30분 4단계 만들기(실제 프롬프트 예시 포함), 두뇌(Claude vs GPT) 고르는 법, 그리고 배포까지를 코드 한 줄 직접 안 짜도 따라올 수 있게 정리했어요.
📌 더 가벼운 첫 프로젝트를 원하면 바이브코딩 투두앱 30분 만들기가 좋은 출발점이에요. 챗봇은 거기에 “AI 두뇌”를 하나 더 붙인 셈입니다.
📑 목차
💡 30분이면 진짜 되나 — 챗봇이 쉬워진 이유
무엇이 달라졌나
핵심은 두 가지가 동시에 쉬워졌다는 거예요. 첫째, Vercel AI SDK 같은 도구가 “화면 ↔ AI 모델” 연결을 표준화해서, 예전엔 며칠 걸리던 배선 작업이 몇 줄로 줄었어요. 둘째, AI 코딩 도구가 그 몇 줄마저 대신 써줍니다. 둘이 겹치니 진입 장벽이 확 낮아진 거죠.
그래서 지금은 “코드를 배워서 챗봇을 만든다”가 아니라 “AI에게 시켜서 만들고, 작동을 확인한다”가 됩니다. 코딩 경험이 없어도 충분히 따라올 수 있는 순서예요.
이 글이 만드는 결과물
목표는 단순해요. 입력창에 메시지를 치면 Claude나 GPT가 답하는, 브라우저에서 도는 채팅 화면 하나. 거기에 배포까지 해서 친구에게 링크로 보여줄 수 있는 상태까지가 이 글의 끝입니다. 복잡한 기능은 일단 빼고, “대화가 되는 가장 작은 챗봇”을 30분에 완성하는 데 집중해요.
🧰 준비물 — 도구와 API 키
필요한 건 네 가지예요. 대부분 무료로 시작할 수 있고, API 키만 약간의 비용이 들 수 있어요.
| 준비물 | 역할 | 비고 |
|---|---|---|
| Next.js 프로젝트 | 챗봇이 올라갈 웹앱 | AI에게 시키면 생성·세팅까지 자동 |
| Cursor 또는 Claude Code | 코드를 대신 써주는 AI 도구 | 프롬프트로 지시 |
| Vercel AI SDK | 화면과 AI 모델을 잇는 연결 | 설치·연결도 AI가 처리 |
| Claude 또는 GPT API 키 | 답을 생성하는 두뇌 | 각 사이트에서 발급, 소량 유료 |
API 키는 안전하게
API 키는 “내 계정으로 AI를 쓰는 비밀번호” 같은 거라, 코드에 그대로 박으면 안 돼요. .env 파일에 따로 넣고 관리하는 게 기본입니다. 키 관리가 처음이면 별도 정리한 .env 파일이란? API 키 안전하게 관리하는 방법을 먼저 보고 오시면 이 단계에서 안 헤매요.
도구 설치·환경 세팅 자체가 막막하면 설치를 자동으로 끝내주는 도구로 첫 관문을 건너뛰고 만들기에 바로 들어가시는 걸 권해요.
🧩 AI 챗봇의 3가지 부품
왜 부품으로 나눠서 보나
구조를 셋으로 나눠두면 AI에게 시킬 때 말이 정확해져요. “화면을 만들어줘”, “Claude에 연결해줘”, “모델을 GPT로 바꿔줘”처럼 부품 단위로 요청하면 결과가 깔끔합니다. 용어를 외울 필요는 없고, 무엇을 바꾸고 싶은지만 분명하면 돼요.
특히 두뇌(③)는 나중에 통째로 갈아끼울 수 있어요. Claude로 시작했다가 GPT로 바꾸는 게 “모델 이름 한 줄” 수준이라, 처음 선택에 너무 고민하지 않아도 됩니다.
🛠 30분 4단계 만들기 — 프롬프트로
1단계 — 프로젝트 만들기
AI 도구에 첫 프롬프트를 줍니다. 빈 Next.js 웹앱이 생기는 게 목표예요.
Next.js 프로젝트를 하나 만들어줘.
Vercel AI SDK를 설치하고, 나중에 챗봇 화면을 붙일 거야.
지금은 "안녕"만 보여주는 빈 페이지면 돼.
실행해서 브라우저에 뜨는지까지 확인하는 법을 알려줘.브라우저에 페이지가 뜨면 1단계 성공이에요.
2단계 — API 키 연결
두뇌를 붙이려면 API 키가 필요해요. Claude나 GPT 중 하나를 골라 키를 발급받아 연결합니다.
Anthropic(또는 OpenAI)에서 발급받은 API 키를 .env 파일에 안전하게 넣고,
Vercel AI SDK가 그 키로 Claude(또는 GPT)에 연결되게 설정해줘.
키가 코드에 노출되지 않게 하는 게 중요해.키를 어디서 발급받는지 모르면 “Claude API 키 발급 방법 알려줘”라고 먼저 물어보면 돼요.
3단계 — 대화 화면 붙이기
이제 진짜 챗봇 화면이에요. 입력창과 대화 목록, 그리고 답이 한 글자씩 흐르는 스트리밍까지 한 번에 부탁합니다.
Vercel AI SDK로 채팅 화면을 만들어줘.
- 메시지 입력창 + 보낸 메시지와 답이 쌓이는 대화 목록
- 답은 한 글자씩 흐르는 스트리밍으로
- 엔터로 전송, 로딩 중 표시도 넣어줘메시지를 쳤을 때 AI가 답하면 3단계 성공이에요. 여기까지면 이미 “내 챗봇”이라고 부를 만합니다.
4단계 — Vercel 배포
마지막으로 세상에 내보내요. 내 컴퓨터에서만 도는 걸 링크로 공유 가능하게 만드는 단계입니다.
이 챗봇을 Vercel에 배포해줘.
API 키는 Vercel 환경 변수에 넣어서 안전하게 연결하고,
배포 후 접속 링크를 어떻게 확인하는지 알려줘.배포 링크가 나오면 끝이에요. 배포가 처음이면 별도 정리한 Vercel 무료 배포 완전 가이드를 같이 보시면 막히는 부분이 줄어요.
좋은 프롬프트가 결과를 좌우해요. 요청을 더 잘 쓰는 법은 별도 정리한 AI에게 코딩 요청하는 프롬프트 작성법 10가지에서 익힐 수 있어요.
🧠 두뇌 고르기 — Claude vs GPT
챗봇의 답 품질은 두뇌(LLM)가 좌우해요. Claude와 GPT 둘 다 훌륭하고, 무엇으로 시작해도 됩니다. 성격 차이만 알아두세요.
성격 차이 한눈에
| 기준 | Claude | GPT |
|---|---|---|
| 강점 | 긴 문맥·정확성·안전한 톤 | 범용성·생태계·확장 |
| 잘 맞는 챗봇 | 문서 상담·요약·정중한 응대 | 잡담·범용 비서·빠른 응답 |
| 교체 | Vercel AI SDK면 모델 이름 한 줄만 바꿔 서로 교체 가능 | |
처음이면 둘 중 손에 잡히는 걸로 시작해서, 답이 마음에 안 들면 다른 쪽으로 바꿔보는 게 가장 빠른 비교예요. 한 줄만 고치면 되니 부담이 없습니다.
⚠️ 막히기 쉬운 5가지와 대처
챗봇 만들 때 자주 멈추는 지점이에요. 미리 알아두면 덜 당황합니다.
① API 키를 코드에 그대로 박는다
가장 위험한 실수예요. 키가 코드에 노출되면 남이 내 계정으로 비용을 쓸 수 있어요. 반드시 .env와 배포 환경 변수에 넣고, 화면(프론트엔드) 코드에는 키가 안 보이게 해야 합니다. AI에게 “키가 노출되지 않게 해줘”를 꼭 같이 말하세요.
② 한 번에 전부 만들어달라고 한다
“챗봇 완성해줘”처럼 통째로 시키면 결과가 엉성해요. 프로젝트 → 연결 → 화면 → 배포 순서로 한 단계씩 쪼개 시키면 각 단계가 훨씬 정확해집니다.
③ 비용을 안 보고 큰 모델만 쓴다
가장 비싼 모델이 항상 정답은 아니에요. 간단한 챗봇이면 가볍고 저렴한 모델로도 충분합니다. 큰 모델은 답이 좋지만 호출마다 비용이 붙으니, 처음엔 저렴한 모델로 만들고 필요할 때 올리세요.
④ 스트리밍이 안 돼서 답답해한다
답이 한 번에 뚝 나오면 느리게 느껴져요. “답을 한 글자씩 흐르는 스트리밍으로 해줘”를 빼먹으면 이렇게 됩니다. 프롬프트에 스트리밍을 명시하면 체감 속도가 확 좋아져요.
⑤ 에러 메시지를 혼자 해석하려 한다
빨간 에러가 나면 그 메시지를 그대로 복사해 AI에게 주는 게 가장 빨라요. 대부분 원인을 짚어 고쳐줍니다. 혼자 추측하다 시간을 버리지 마세요.
🚀 다음 단계 — 다듬기·배포·확장
대화가 되는 챗봇이 생겼으면, 이제 쓸모 있게 키울 차례예요.
성격 입히기 — 시스템 프롬프트
챗봇에 “넌 친절한 여행 플래너야” 같은 역할을 주면 답의 톤과 전문성이 확 달라져요. 이걸 시스템 프롬프트라고 하는데, “이 챗봇이 여행 상담만 하도록 성격을 정해줘”처럼 시키면 됩니다. 한 줄 추가로 평범한 챗봇이 특정 용도 도구가 돼요.
꾸미기와 공유
채팅 창 디자인을 다듬고, 모바일에서도 잘 보이게 하고, 도메인을 연결하면 제법 그럴듯해져요. 배포 링크를 친구에게 보내 “이거 내가 만들었어”라고 말할 수 있는 단계입니다.
수익화로 잇기
특정 용도(상담·요약·생성) 챗봇은 작게 수익으로 이어질 수 있어요. 현실적인 경로는 별도 정리한 바이브코딩 앱으로 돈 버는 5가지 방법에서 단계별로 다룹니다. 처음엔 완성·공개 경험을 쌓는 걸 먼저 권해요. 같은 흐름으로 다른 실전 프로젝트가 궁금하면 Godot로 횡스크롤 게임 만들기도 좋은 다음 도전이에요.
AI 챗봇은 화면·연결(Vercel AI SDK)·두뇌(Claude/GPT) 3부품이면 돼요. 프로젝트 → API 키 → 대화 화면 → 배포를 프롬프트 하나씩으로 쌓고 매 단계 실행해 확인하면 30분 안에 완성됩니다. API 키는 .env에 안전하게, 두뇌는 한 줄로 교체 가능하니 처음 선택에 너무 고민 마세요.
❓ FAQ
질문을 누르면 답변이 펼쳐집니다.
🔰 시작 전 궁금한 것들
Q. 코딩을 하나도 몰라도 정말 만들 수 있나요?
Q. API 키는 꼭 유료인가요?
Q. Claude랑 GPT 중 뭘로 시작해야 하나요?
⚙ 만들다 마주치는 상황
Q. 답이 한 번에 뚝 나와서 느려 보여요.
Q. API 키가 화면에 노출됐다는 경고가 떠요.
Q. 에러가 나는데 뭐가 문제인지 모르겠어요.
Q. 만들다 막히면 처음부터 다시 해야 하나요?
🚀 완성한 뒤
Q. 챗봇에 특정 역할을 주려면 어떻게 하나요?
Q. 만든 챗봇을 친구에게 어떻게 보여주나요?
Q. 다음엔 뭘 만들어보면 좋을까요?
이 글의 도구·기능 설명(Vercel AI SDK·Claude·GPT API 등)은 작성 시점 기준이며, 버전·요금·사용법은 빠르게 바뀝니다. 실제 작업 전에 각 도구의 공식 문서를 확인하시는 게 정확해요. API 사용에는 비용이 발생할 수 있으니 요금 정책과 사용량 한도를 미리 확인하시길 권장드립니다. AI가 생성한 코드는 실행·배포 전 한 번 점검하시는 게 안전해요.
📚 바이브코딩 실전 프로젝트
- 30분 첫 앱 : 바이브코딩 투두앱 만들기 — 30분 완성
- 1시간 랜딩 : AI 랜딩 페이지 만들기 5단계 — 1시간 완성
- 블로그 만들기 : 바이브코딩 블로그 만들기 — Next.js + MDX 45분
- 게임 만들기 : Godot로 쿠키런 같은 횡스크롤 게임 만들기
🔗 추가 관련 글
- .env 파일이란? API 키 안전하게 관리하는 방법 (2026)
- 바이브코딩 배포 방법 — Vercel 무료 배포 완전 가이드 (2026)
- AI에게 코딩 요청하는 프롬프트 작성법 10가지 (2026)
- Cursor vs Claude Code — 더 나은 선택은? (2026)
- 바이브코딩으로 만든 앱으로 돈 버는 5가지 방법 (2026)
📚 참고 자료
IT 기획 10년차 / 비전공자를 위한 바이브코딩 블로그 운영 / vibe-start.com 제작
Building VibeStart — the fastest path for non-devs into AI coding. Launching on Product Hunt 2026-05-26.
