자바스크립트 AI 챗봇 만들기 part5 : 성능 최적화, 배포, 그리고 추가 개선 아이디어
part4까지 챗봇에 QnA 모델과 날씨 API를 적용해 똑똑하고 실용적으로 만들었다. 이번 part5에서는 프로젝트를 마무리한다. 성능을 최적화하고, 초보자도 쉽게 따라 할 수 있도록 GitHub Pages로 배포한다. 추가 개선 아이디어도 제안한다.
이제 챗봇을 세상에 공개하고 더 발전시킬 준비를 한다. 모든 과정을 상세히 다룬다.
part5에서 무엇을 다루는가?
part5의 목표는 다음과 같다:
- 성능을 최적화한다: 로드 시간과 응답 속도를 개선한다.
- GitHub Pages로 배포한다: 초보자를 위한 단계별 가이드를 제공한다.
- 추가 개선 아이디어를 탐구한다: 실용적이고 흥미로운 방향을 제시한다.
part4의 my-chatbot 폴더를 사용한다.
성능 최적화하기
챗봇이 빠르고 안정적으로 동작하도록 성능을 개선한다. QnA 모델과 API 호출에 초점을 맞춘다.
1. 모델 로드 상태 표시
QnA 모델 로드에 시간이 걸리니 사용자에게 상태를 알린다:
async function loadQnAModel() {
addMessage('QnA 모델을 로드 중이다... 잠시 기다린다.');
try {
qnaModel = await qna.load();
console.log('QnA 모델이 로드됐다');
addMessage('챗봇 준비가 완료됐다! 질문을 기다린다.');
} catch (err) {
console.error('모델 로드 실패:', err);
addMessage('모델 로드에 실패했다. 기본 응답만 제공한다.');
}
}
설명
- 로드 중 메시지를 표시해 사용자 경험을 개선한다.
2. API 호출 캐싱
날씨 API를 반복 호출하면 비효율적이다. 캐싱을 추가한다:
const weatherCache = {};
async function getWeather(city) {
if (weatherCache[city]) {
return weatherCache[city];
}
const apiKey = 'YOUR_API_KEY';
try {
const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric&lang=ko`);
const data = await response.json();
if (data.cod === 200) {
const result = `${city}의 날씨는 ${data.weather[0].description}, 온도는 ${data.main.temp}°C다.`;
weatherCache[city] = result;
return result;
}
return '도시를 찾을 수 없다. 정확한 이름을 입력한다.';
} catch (error) {
console.error('날씨 API 오류:', error);
return '날씨 데이터를 가져오지 못했다.';
}
}
설명
- weatherCache: 동일한 도시의 결과를 재사용한다.
3. 이벤트 디바운싱
연속 입력으로 성능이 저하되지 않게 디바운싱을 적용한다:
function debounce(func, wait) {
let timeout;
return function (...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func(...args), wait);
};
}
const debouncedSendMessage = debounce(sendMessage, 300);
sendBtn.addEventListener('click', debouncedSendMessage);
userInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
debouncedSendMessage();
}
});
설명
- 300ms 동안 추가 입력이 없으면 실행한다.
GitHub Pages로 배포하기
이제 챗봇을 무료로 배포한다. GitHub Pages는 정적 파일 호스팅에 적합하다. 초보자도 할 수 있게 모든 단계를 상세히 설명한다.
1. Git 설치하기
Git이 없으면 먼저 설치한다:
- git-scm.com에 접속한다.
- 운영체제에 맞는 버전을 다운로드한다 (예: Windows 64-bit).
- 설치 파일을 실행하고 기본 설정으로 "Next"를 눌러 진행한다.
- 설치 후 터미널에서 확인한다:
git --version버전 번호(예: 2.39.0)가 나오면 성공이다.
2. GitHub 계정 만들기
GitHub 계정이 없다면 생성한다:
- github.com에 접속한다.
- "Sign Up"을 클릭한다.
- 이메일, 사용자 이름(예: `myusername`), 비밀번호를 입력한다.
- 인증 메일을 확인하고 로그인한다.
이미 계정이 있다면 로그인만 한다.
3. 새 저장소 생성하기
프로젝트를 저장할 공간을 만든다:
- GitHub에 로그인한다.
- 오른쪽 상단 "+" 버튼을 누르고 "New Repository"를 선택한다.
- 저장소 이름은 my-chatbot으로 한다.
- "Public"을 선택한다 (누구나 볼 수 있다).
- "Add a README file"은 체크하지 않는다.
- "Create Repository"를 클릭한다.
- 생성된 저장소 URL을 복사한다. 예: https://github.com/myusername/my-chatbot.git
4. 로컬에서 Git 초기화하기
my-chatbot 폴더에서 Git을 설정한다:
- VS Code에서 my-chatbot 폴더를 연다.
- "Terminal > New Terminal"을 클릭해 터미널을 연다.
- 다음 명령어를 순서대로 입력한다:
git initGit 저장소가 초기화된다.
git add .모든 파일(index.html, style.css, script.js)을 스테이징한다.
git commit -m "Initial commit"변경 사항을 커밋한다.
5. GitHub에 업로드하기
로컬 파일을 GitHub로 보낸다:
- 저장소 URL을 연결한다:
git remote add origin https://github.com/myusername/my-chatbot.git- "myusername"을 본인의 GitHub 사용자 이름으로 바꾼다.
- 업로드한다:
git push -u origin main- 처음 푸시하면 로그인 창이 뜬다. GitHub 계정으로 로그인한다.
- GitHub 저장소에 접속해 파일이 업로드됐는지 확인한다.
6. GitHub Pages 활성화하기
웹사이트로 배포한다:
- GitHub 저장소(myusername/my-chatbot)로 간다.
- 상단 "Settings" 탭을 클릭한다.
- 왼쪽 메뉴에서 "Pages"를 선택한다.
- "Branch" 섹션에서 "main"을 선택하고 "Save"를 누른다.
- "Your site is ready to be published at" 메시지가 나타난다.
- 몇 분(5~10분) 기다린 후 URL을 확인한다. 예: https://myusername.github.io/my-chatbot/
- URL을 브라우저에서 열어 챗봇이 동작하는지 확인한다.
7. 배포 문제 해결
배포 중 문제가 생길 수 있다. 흔한 오류와 해결법을 정리한다:
- **"git push" 실패**:
git pull origin main --rebase충돌을 해결하고 다시 푸시한다.
- **페이지가 안 보임**: 10분 이상 기다려도 안 되면 "Settings > Pages"에서 브랜치가 "main"인지 다시 확인한다.
- **API 오류**: API 키가 브라우저에 노출돼 차단될 수 있다. 배포 후 개선 방법에서 다룬다.
추가 개선 아이디어
챗봇을 더 발전시킬 구체적인 아이디어를 제안한다.
1. API 키 보호
현재 API 키가 클라이언트에 노출된다. 서버를 추가해 보호한다:
// Node.js 서버 예시 (server.js)
const express = require('express');
const fetch = require('node-fetch');
const app = express();
app.get('/weather/:city', async (req, res) => {
const apiKey = 'YOUR_API_KEY';
const city = req.params.city;
const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric&lang=ko`);
const data = await response.json();
res.json(data);
});
app.listen(3000, () => console.log('서버 실행'));
설명
- 클라이언트에서 `/weather/서울`로 요청하면 서버가 API를 호출한다.
2. 음성 입력
Web Speech API로 음성을 추가한다:
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'ko-KR';
recognition.onresult = (event) => {
userInput.value = event.results[0][0].transcript;
sendMessage();
};
sendBtn.insertAdjacentHTML('afterend', '<button id="voice-btn">음성</button>');
document.getElementById('voice-btn').addEventListener('click', () => recognition.start());
설명
- 음성 버튼으로 말을 텍스트로 변환한다.
3. 다국어 지원
번역 기능을 추가한다:
async function translateText(text, targetLang) {
const response = await fetch(`https://api.example.com/translate?text=${text}&target=${targetLang}`);
const data = await response.json();
return data.translatedText;
}
async function getResponse(input) {
let response = await originalGetResponse(input); // 기존 getResponse
if (input.includes('영어로')) {
response = await translateText(response, 'en');
}
return response;
}
설명
- 무료 번역 API(예: Google Translate 무료 대안)를 사용한다.
마무리
part5 시리즈를 완성했다. 챗봇은 이제 QnA 모델로 질문에 답하고, 날씨를 알려주며, GitHub Pages에 배포됐다. 성능 최적화와 배포 과정을 통해 실전에 사용할 준비가 된다. 추가 아이디어로 더 발전시킨다. 다음 실습은 무엇으로 할지 고민해봐야겠다.
'코딩 공부 > 자바스크립트 실습' 카테고리의 다른 글
| 자바스크립트 AI 챗봇 만들기 part4 (2) | 2025.02.28 |
|---|---|
| 자바스크립트 AI 챗봇 만들기 part3 (1) | 2025.02.28 |
| 자바스크립트 AI 챗봇 만들기 Part 2 (0) | 2025.02.28 |
| 자바스크립트 AI 챗봇 만들기 Part 1 (2) | 2025.02.28 |
| 자바스크립트로 만드는 실시간 채팅 앱 (Part 3) (1) | 2025.02.26 |
