자바스크립트로 나만의 AI 챗봇 만들기: 1부

자바스크립트 AI 챗봇 만들기 Part 1 : 프로젝트 소개 및 기본 환경 설정

안녕한다! 이번 포스팅부터 자바스크립트를 활용해 나만의 AI 챗봇을 만드는 여정을 시작한다. 총 5부작으로 진행되는 이 시리즈는 초보자도 따라 할 수 있도록 단계별로 구성한다. 첫 번째 포스팅인 오늘은 프로젝트 개요를 소개하고, 개발을 시작하기 위한 기본 환경을 설정하는 방법을 다룬다.


이 시리즈를 완성하면 웹에서 동작하는 챗봇을 만들 수 있다. 이 챗봇은 단순히 대화만 하는 것이 아니라 날씨 정보를 알려주거나 할 일을 관리하는 실용적인 기능도 갖춘다.


이 프로젝트는 무엇인가?

먼저, 우리가 만들 챗봇이 어떤 모습인지 간단히 소개한다. 이 섹션에서는 챗봇의 정의, 자바스크립트를 선택한 이유, 그리고 완성된 결과물의 모습을 살펴본다.


챗봇이란?

챗봇(Chatbot)은 "채팅"과 "로봇"의 합성어다. 사람과 텍스트나 음성으로 소통할 수 있는 프로그램을 뜻한다. 예를 들어, 고객센터에서 자주 묻는 질문에 답해주는 도우미나 메신저 앱에서 간단한 명령을 처리하는 봇을 떠올리면 된다. 이번 프로젝트에서는 자바스크립트를 사용해 이런 챗봇을 직접 만든다.


왜 자바스크립트인가?

자바스크립트는 웹 개발의 핵심 언어다. 브라우저에서 바로 실행되니까 복잡한 설정 없이도 결과를 확인할 수 있다. 게다가 Node.js 덕분에 서버에서도 활용할 수 있고, TensorFlow.js 같은 라이브러리로 AI 기능까지 추가할 수 있다. 이번 시리즈에서는 브라우저 기반 챗봇을 만들기 때문에 자바스크립트의 이런 장점을 최대한 활용한다.


완성된 챗봇은 어떤 모습인가?

5부까지 진행하면 챗봇은 이런 기능을 갖춘다:

- 사용자가 "안녕"이라고 입력하면 "안녕! 오늘 기분이 어때?" 같은 자연스러운 답변을 한다.

- "오늘 서울 날씨 어때?"라는 질문에 실제 날씨 데이터를 가져와 대답한다.

- "오늘 7시에 회의 추가해줘" 같은 요청으로 할 일을 관리한다.

이 모든 것이 깔끔한 웹 인터페이스에서 동작한다. 기대된다!


개발 환경 준비하기

이제 본격적으로 개발을 시작하려면 몇 가지 도구를 준비한다. 하나씩 설치하고 설정하는 과정을 자세히 설명한다.


필요한 도구들

이번 프로젝트에 필요한 도구는 다음과 같다:

- Node.js: 자바스크립트를 브라우저 밖에서 실행할 수 있게 해주는 런타임이다. npm이라는 패키지 관리자도 같이 설치된다.

- npm: Node.js와 함께 제공되며, 필요한 라이브러리를 쉽게 설치할 수 있다.

- VS Code: 코드를 편리하게 작성할 수 있는 에디터다. 다른 에디터를 써도 되지만 VS Code를 추천한다.

- 웹 브라우저: 크롬이나 파이어폭스를 추천한다. 개발자 도구로 디버깅할 때 유용하다.


Node.js 설치하기

Node.js 설치 방법은 간단하다. 아래 단계를 따른다:

1. nodejs.org에 접속한다.

2. LTS(Long Term Support) 버전을 다운로드한다. 2025년 2월 기준으로 최신 LTS 버전을 선택하면 안정적으로 사용할 수 있다.

3. 다운로드한 설치 파일을 실행하고 기본 설정으로 "Next"를 눌러가며 설치한다. npm도 자동으로 설치된다.

4. 설치가 끝났으면 터미널을 열고 다음 명령어를 입력해 확인한다:

node -v

버전 번호(예: v18.19.0)가 출력되면 성공이다. 이어서 npm도 확인한다:

npm -v

이 역시 버전 번호가 나오면 준비가 완료된다.

"명령어를 찾을 수 없다"는 오류가 나오면 컴퓨터를 재부팅하거나 Node.js를 다시 설치한다. 환경 변수 설정이 제대로 안 됐을 가능성이 있다.


VS Code 설치하기

VS Code 설치도 쉽다:

1. code.visualstudio.com에 접속한다.

2. 운영체제에 맞는 버전을 다운로드한다.

3. 설치 파일을 실행하고 기본 설정으로 진행한다.

4. VS Code를 열고 "Extensions" 메뉴에서 다음 확장을 설치하면 좋다:

- Prettier: 코드를 깔끔하게 정리한다.

- Live Server: HTML 파일을 실시간으로 브라우저에서 확인할 수 있다.


프로젝트 폴더 설정하기

이제 챗봇 프로젝트를 위한 기본 구조를 만든다. 간단한 파일 몇 개로 시작한다.


폴더 생성

1. 원하는 위치(예: 바탕화면)에 새 폴더를 만들고 이름을 my-chatbot으로 정한다.

2. VS Code에서 "File > Open Folder"를 선택해 my-chatbot 폴더를 연다.


기본 파일 생성

다음 세 파일을 만든다:

- index.html: 챗봇의 기본 구조를 담당한다.

- style.css: 인터페이스 스타일링을 담당한다.

- script.js: 챗봇 로직을 담을 자바스크립트 파일이다.

VS Code에서 "New File" 버튼을 눌러 각 파일을 만들고 아래 코드를 붙여넣는다.


index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나만의 AI 챗봇</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>안녕! 나만의 챗봇에 오신 걸 환영해요</h1>
    <script src="script.js"></script>
</body>
</html>

style.css

body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin-top: 50px;
}

h1 {
    color: #333;
}

script.js

console.log("챗봇 프로젝트 시작!");
alert("안녕! 이건 첫 번째 테스트야.");

실행해보기

1. index.html 파일을 오른쪽 클릭하고 "Open with Live Server"를 선택한다. (Live Server 확장이 설치돼 있어야 한다.)

2. 브라우저가 열리며 제목과 알림창이 뜨면 성공이다.

3. F12를 눌러 개발자 도구를 열고 "Console" 탭에서 메시지를 확인한다.


첫 번째 챗봇: 콘솔에서 대화하기

이제 간단한 챗봇을 만든다. 웹 UI는 2부에서 다루고, 우선 터미널에서 동작하는 버전을 구현한다.


콘솔 챗봇 코드 작성

script.js를 아래 코드로 바꾼다:

const readline = require('readline');

const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

function startChat() {
    rl.question('안녕! 무엇에 대해 이야기하고 싶어? ', (answer) => {
        console.log(`너가 말한 거: ${answer}`);
        if (answer.includes('안녕')) {
            console.log('안녕! 나도 반갑네.');
        } else {
            console.log('음, 그건 좀 어려운 질문인데... 다른 걸 물어볼래?');
        }
        rl.close();
    });
}

startChat();

실행하기

1. VS Code에서 "Terminal > New Terminal"을 클릭해 터미널을 연다.

2. 다음 명령어를 입력해 실행한다:

node script.js

3. 질문이 나오면 "안녕" 같은 답변을 입력한다.


코드 설명

- readline: Node.js 내장 모듈로, 사용자 입력을 읽는다.

- rl.question: 질문을 던지고 답변을 기다린다.

- answer.includes: 입력값에 따라 다른 답변을 출력한다.


마무리

첫 번째 챗봇을 만들었다. 지금은 콘솔에서 동작하지만, 2부에서는 웹 페이지에 채팅 UI를 추가한다.


저작자표시

'코딩 공부 > 자바스크립트 실습' 카테고리의 다른 글

자바스크립트 AI 챗봇 만들기 part3  (1) 2025.02.28
자바스크립트 AI 챗봇 만들기 Part 2  (0) 2025.02.28
자바스크립트로 만드는 실시간 채팅 앱 (Part 3)  (1) 2025.02.26
자바스크립트로 만드는 실시간 채팅 앱 (Part 2)  (0) 2025.02.26
자바스크립트로 만드는 실시간 채팅 앱 (Part 1)  (0) 2025.02.25

+ Recent posts

티스토리툴바