🛠️ 챗봇 만들기 실전 가이드
초보자도 따라할 수 있는 단계별 챗봇 제작 과정
1준비하기
🎯 우리가 만들 챗봇 소개
프로젝트명: "카페봇(CafeBot)" - 카페 음료 주문을 도와주는 챗봇
주요 기능:
- 인사하기 및 메뉴 안내
- 음료 추천하기
- 주문 받기
- 주문 확인 및 완료
🖥️ 필요한 것들
- 텍스트 에디터: 메모장 또는 VS Code
- 웹 브라우저: Chrome, Firefox, Edge 등
- 폴더: 바탕화면에 "내챗봇" 폴더 생성
완전 초보자라면? VS Code를 설치하지 않아도 됩니다. 윈도우 메모장으로도 충분히 만들 수 있어요!
2HTML 기본 틀 만들기
📝 첫 번째 코드 작성
메모장이나 VS Code를 열고 다음 코드를 입력하세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>카페봇 - 주문 도우미</title>
</head>
<body>
<h1>☕ 카페봇에 오신 것을 환영합니다!</h1>
</body>
</html>
첫 테스트: 파일을 "index.html"로 저장하고 더블클릭해서 브라우저로 열어보세요!
저장 방법: 파일 → 다른 이름으로 저장 → 파일 형식: "모든 파일" → 파일명: "index.html"
3CSS로 채팅 창 디자인하기
🎨 예쁜 채팅 인터페이스 만들기
이제 index.html 파일의 내용을 다음과 같이 수정하세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>카페봇</title>
<style>
body {
font-family: '맑은 고딕', sans-serif;
background: linear-gradient(135deg, #fce7f3 0%, #e0f2fe 100%);
margin: 0;
padding: 20px;
min-height: 100vh;
}
.chat-container {
max-width: 500px;
margin: 0 auto;
background: white;
border-radius: 20px;
padding: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
h2 {
text-align: center;
color: #be185d;
}
.chat-messages {
height: 400px;
overflow-y: auto;
padding: 20px;
background: #fef9f3;
border-radius: 15px;
margin-bottom: 20px;
}
.chat-input {
display: flex;
gap: 10px;
}
input {
flex: 1;
padding: 12px;
border: 2px solid #fecdd3;
border-radius: 10px;
font-size: 1em;
}
input:focus {
outline: none;
border-color: #f472b6;
}
button {
padding: 12px 25px;
background: linear-gradient(135deg, #f9a8d4, #f472b6);
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
font-weight: bold;
}
button:hover {
transform: translateY(-2px);
}
</style>
</head>
<body>
<div class="chat-container">
<h2>☕ 카페봇</h2>
<div class="chat-messages" id="chatMessages"></div>
<div class="chat-input">
<input type="text" id="userInput"
placeholder="메시지를 입력하세요...">
<button onclick="sendMessage()">전송</button>
</div>
</div>
</body>
</html>
두 번째 테스트: 파일을 저장하고 브라우저에서 새로고침(F5)하세요. 예쁜 채팅 창이 나타납니다!
4JavaScript로 챗봇 두뇌 만들기
🧠 챗봇이 생각하고 대답하게 만들기
</body> 태그 바로 위에 다음 코드를 추가하세요.
<script>
// 1단계: 메뉴 데이터 정의
const menu = {
'아메리카노': 4000,
'카페라떼': 4500,
'카푸치노': 4500,
'녹차라떼': 5000
};
// 2단계: 주문 정보 저장 변수
let currentOrder = null;
// 3단계: 페이지 로드시 인사
window.onload = function() {
addBotMessage("안녕하세요! 카페봇입니다. 무엇을 도와드릴까요?");
addBotMessage("'메뉴'를 입력하시면 메뉴를 보여드립니다!");
};
// 4단계: 메시지 전송 함수
function sendMessage() {
const input = document.getElementById('userInput');
const message = input.value.trim();
if (message === '') return;
addUserMessage(message);
input.value = '';
setTimeout(() => {
processMessage(message);
}, 500);
}
// 5단계: 메시지 처리 - 챗봇의 두뇌!
function processMessage(message) {
const msg = message.toLowerCase();
if (msg.includes('안녕') || msg.includes('hi')) {
addBotMessage("안녕하세요! 주문 도와드릴게요 😊");
}
else if (msg.includes('메뉴')) {
let menuText = "📋 저희 메뉴입니다:\n\n";
for (let item in menu) {
menuText += `${item}: ${menu[item]}원\n`;
}
menuText += "\n어떤 음료를 주문하시겠어요?";
addBotMessage(menuText);
}
else if (menu[message]) {
currentOrder = {item: message, price: menu[message]};
addBotMessage(`${message} 주문하셨습니다. ${menu[message]}원입니다.`);
addBotMessage("'주문 확인'을 입력하시면 주문이 완료됩니다!");
}
else if (msg.includes('확인') || msg.includes('완료')) {
if (currentOrder) {
addBotMessage(`✅ 주문이 완료되었습니다!`);
addBotMessage(`${currentOrder.item} - ${currentOrder.price}원`);
addBotMessage("곧 준비해드리겠습니다. 감사합니다! 😊");
currentOrder = null;
} else {
addBotMessage("아직 주문하신 음료가 없어요!");
}
}
else {
addBotMessage("잘 이해하지 못했어요. '메뉴'를 입력하시면 메뉴를 보여드립니다!");
}
}
// 6단계: 사용자 메시지 표시
function addUserMessage(message) {
const div = document.createElement('div');
div.style.textAlign = 'right';
div.style.margin = '10px 0';
div.innerHTML = `<span style="display: inline-block;
background: linear-gradient(135deg, #f9a8d4, #f472b6);
color: white; padding: 10px 15px;
border-radius: 18px 18px 5px 18px;
max-width: 70%;">${message}</span>`;
document.getElementById('chatMessages').appendChild(div);
document.getElementById('chatMessages').scrollTop = 999999;
}
// 7단계: 봇 메시지 표시
function addBotMessage(message) {
const div = document.createElement('div');
div.style.margin = '10px 0';
div.innerHTML = `<span style="display: inline-block;
background: white; color: #1e293b;
padding: 10px 15px; border-radius: 18px 18px 18px 5px;
max-width: 70%; border: 2px solid #fecdd3;">${message.replace(/\n/g, '<br>')}</span>`;
document.getElementById('chatMessages').appendChild(div);
document.getElementById('chatMessages').scrollTop = 999999;
}
// 8단계: Enter 키로 전송
document.getElementById('userInput').addEventListener('keypress',
function(e) {
if (e.key === 'Enter') sendMessage();
}
);
</script>
</body>
</html>
세 번째 테스트: 파일을 저장하고 브라우저를 새로고침하세요. 이제 챗봇과 대화할 수 있습니다!
테스트 방법:
1. "메뉴" 입력 → 메뉴 목록 표시
2. "아메리카노" 입력 → 주문 접수
3. "주문 확인" 입력 → 주문 완료!
1. "메뉴" 입력 → 메뉴 목록 표시
2. "아메리카노" 입력 → 주문 접수
3. "주문 확인" 입력 → 주문 완료!
5추가 기능 넣기
💪 챗봇을 더 똑똑하게 만들기
processMessage 함수에서 else 부분 바로 위에 다음 코드들을 추가하세요.
🎯 추천 기능
else if (msg.includes('추천')) {
const recommendations = [
"오늘같은 날엔 시원한 아메리카노가 좋을 것 같아요!",
"부드러운 카페라떼는 어떠세요?",
"녹차라떼로 건강하게 시작해보세요!"
];
const random = Math.floor(Math.random() * recommendations.length);
addBotMessage(recommendations[random]);
}
🎯 영업시간 안내
else if (msg.includes('시간') || msg.includes('영업')) {
addBotMessage("저희 카페는 매일 오전 9시부터 오후 10시까지 영업합니다! 🕐");
}
완성! 이제 "추천", "영업시간" 같은 다양한 질문에도 답할 수 있어요!
6완성 코드 전체 보기
📄 최종 완성된 전체 코드
처음부터 끝까지 완성된 코드입니다. 복사해서 사용하세요!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>카페봇</title>
<style>
body {
font-family: '맑은 고딕', sans-serif;
background: linear-gradient(135deg, #fce7f3 0%, #e0f2fe 100%);
margin: 0; padding: 20px; min-height: 100vh;
}
.chat-container {
max-width: 500px; margin: 0 auto; background: white;
border-radius: 20px; padding: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
h2 { text-align: center; color: #be185d; }
.chat-messages {
height: 400px; overflow-y: auto; padding: 20px;
background: #fef9f3; border-radius: 15px; margin-bottom: 20px;
}
.chat-input { display: flex; gap: 10px; }
input {
flex: 1; padding: 12px; border: 2px solid #fecdd3;
border-radius: 10px; font-size: 1em;
}
input:focus { outline: none; border-color: #f472b6; }
button {
padding: 12px 25px;
background: linear-gradient(135deg, #f9a8d4, #f472b6);
color: white; border: none; border-radius: 10px;
cursor: pointer; font-weight: bold;
}
button:hover { transform: translateY(-2px); }
</style>
</head>
<body>
<div class="chat-container">
<h2>☕ 카페봇</h2>
<div class="chat-messages" id="chatMessages"></div>
<div class="chat-input">
<input type="text" id="userInput" placeholder="메시지를 입력하세요...">
<button onclick="sendMessage()">전송</button>
</div>
</div>
<script>
const menu = {
'아메리카노': 4000, '카페라떼': 4500,
'카푸치노': 4500, '녹차라떼': 5000
};
let currentOrder = null;
window.onload = function() {
addBotMessage("안녕하세요! 카페봇입니다. 무엇을 도와드릴까요?");
addBotMessage("'메뉴'를 입력하시면 메뉴를 보여드립니다!");
};
function sendMessage() {
const input = document.getElementById('userInput');
const message = input.value.trim();
if (message === '') return;
addUserMessage(message);
input.value = '';
setTimeout(() => processMessage(message), 500);
}
function processMessage(message) {
const msg = message.toLowerCase();
if (msg.includes('안녕') || msg.includes('hi')) {
addBotMessage("안녕하세요! 주문 도와드릴게요 😊");
}
else if (msg.includes('메뉴')) {
let menuText = "📋 저희 메뉴입니다:\n\n";
for (let item in menu) {
menuText += `${item}: ${menu[item]}원\n`;
}
menuText += "\n어떤 음료를 주문하시겠어요?";
addBotMessage(menuText);
}
else if (menu[message]) {
currentOrder = {item: message, price: menu[message]};
addBotMessage(`${message} 주문하셨습니다. ${menu[message]}원입니다.`);
addBotMessage("'주문 확인'을 입력하시면 주문이 완료됩니다!");
}
else if (msg.includes('확인') || msg.includes('완료')) {
if (currentOrder) {
addBotMessage(`✅ 주문이 완료되었습니다!`);
addBotMessage(`${currentOrder.item} - ${currentOrder.price}원`);
addBotMessage("곧 준비해드리겠습니다. 감사합니다! 😊");
currentOrder = null;
} else {
addBotMessage("아직 주문하신 음료가 없어요!");
}
}
else if (msg.includes('추천')) {
const recommendations = [
"오늘같은 날엔 시원한 아메리카노가 좋을 것 같아요!",
"부드러운 카페라떼는 어떠세요?",
"녹차라떼로 건강하게 시작해보세요!"
];
const random = Math.floor(Math.random() * recommendations.length);
addBotMessage(recommendations[random]);
}
else if (msg.includes('시간') || msg.includes('영업')) {
addBotMessage("저희 카페는 매일 오전 9시부터 오후 10시까지 영업합니다! 🕐");
}
else {
addBotMessage("잘 이해하지 못했어요. '메뉴'를 입력하시면 메뉴를 보여드립니다!");
}
}
function addUserMessage(message) {
const div = document.createElement('div');
div.style.textAlign = 'right';
div.style.margin = '10px 0';
div.innerHTML = `<span style="display: inline-block;
background: linear-gradient(135deg, #f9a8d4, #f472b6);
color: white; padding: 10px 15px;
border-radius: 18px 18px 5px 18px;
max-width: 70%;">${message}</span>`;
document.getElementById('chatMessages').appendChild(div);
document.getElementById('chatMessages').scrollTop = 999999;
}
function addBotMessage(message) {
const div = document.createElement('div');
div.style.margin = '10px 0';
div.innerHTML = `<span style="display: inline-block;
background: white; color: #1e293b;
padding: 10px 15px; border-radius: 18px 18px 18px 5px;
max-width: 70%; border: 2px solid #fecdd3;">${message.replace(/\n/g, '<br>')}</span>`;
document.getElementById('chatMessages').appendChild(div);
document.getElementById('chatMessages').scrollTop = 999999;
}
document.getElementById('userInput').addEventListener('keypress',
function(e) {
if (e.key === 'Enter') sendMessage();
}
);
</script>
</body>
</html>
7테스트하기
✅ 테스트 체크리스트
다음 항목들을 하나씩 테스트해보세요!
- ✅ 페이지 열면 자동으로 인사 메시지가 나타나나요?
- ✅ "메뉴" 입력하면 메뉴가 표시되나요?
- ✅ "아메리카노" 입력하면 주문이 접수되나요?
- ✅ "주문 확인" 입력하면 주문이 완료되나요?
- ✅ "추천" 입력하면 추천 메시지가 나오나요?
- ✅ "영업시간" 입력하면 시간 안내가 나오나요?
- ✅ Enter 키로도 메시지 전송이 되나요?
모든 항목이 작동하면 성공! 🎉
8문제 해결
🔧 자주 발생하는 문제
❌ 문제 1: 챗봇이 응답하지 않아요
해결 방법:
- F12 키를 눌러서 개발자 도구를 엽니다
- Console 탭을 클릭합니다
- 빨간색 에러 메시지가 있는지 확인합니다
- 코드에 오타가 없는지 다시 확인합니다
❌ 문제 2: 한글이 깨져요
해결 방법:
- 파일을 UTF-8 인코딩으로 저장했는지 확인
- <meta charset="UTF-8"> 태그가 있는지 확인
❌ 문제 3: 디자인이 이상해요
해결 방법:
- CSS 코드가 <style> 태그 안에 있는지 확인
- 브라우저 캐시를 삭제하고 새로고침 (Ctrl + F5)
디버깅 팁: console.log()를 사용해서 변수 값을 확인해보세요!
예: console.log("메시지:", message);
예: console.log("메시지:", message);
9더 발전시키기
🚀 추가 기능 아이디어
⭐ 초급 과제
- 메뉴 추가: 디저트나 다른 음료 추가하기
- 이모지 추가: 메뉴 이름 앞에 ☕ 🥛 등 이모지 넣기
- 색상 변경: 좋아하는 색으로 디자인 바꾸기
⭐⭐ 중급 과제
- 취소 기능: "취소" 입력하면 주문 취소
- 수량 선택: "아메리카노 2개" 같은 기능
- 총액 계산: 여러 개 주문하고 합계 표시
⭐⭐⭐ 고급 과제
- 시간 표시: 메시지마다 시간 표시
- 사용자 이름: 이름을 입력받아서 "○○님" 호칭
- 주문 내역: 모든 주문을 기록하고 보여주기
10다음 단계 학습
📚 계속 배우기
🎓 다음에 배울 것들:
- 1단계: JavaScript 심화 (배열, 객체, 함수)
- 2단계: 서버 통신 (API, AJAX)
- 3단계: 데이터베이스 (Firebase)
- 4단계: AI 연동 (ChatGPT API)
📖 추천 학습 자료:
- 생활코딩: 무료 웹 개발 기초 강의
- MDN Web Docs: developer.mozilla.org
- 노마드코더: 실전 프로젝트 강의
학습 팁: 매일 30분씩 꾸준히 연습하는 것이 가장 효과적입니다!
🎉 축하합니다!
첫 번째 챗봇 제작 완료!
이제 여러분은 챗봇을 만들 수 있는 개발자입니다! 🚀
📌 배운 내용 요약
- ✅ HTML로 구조 만들기
- ✅ CSS로 예쁘게 꾸미기
- ✅ JavaScript로 기능 구현하기
- ✅ 사용자 입력 처리하기
- ✅ 조건문으로 대화 만들기
계속 연습하고 개선하면서 더 멋진 챗봇을 만들어보세요! 💪
'AI' 카테고리의 다른 글
| ChatGPT GPTs 만들기 (1) | 2025.11.09 |
|---|---|
| Expert RAW 단계별 실전 가이드2 (2) | 2025.11.09 |
| 챗봇 초보자 가이드 (1) | 2025.11.08 |
| 내 손안의 AI 비서, 챗GPT와 친구되기 4/4 (5) | 2025.11.06 |
| 내 손안의 AI 비서, 챗GPT와 친구되기 3/4 (0) | 2025.11.06 |
