자바스크립트 AI 챗봇 만들기 Part 2 : 챗봇 UI 설계와 사용자 입력 처리
안녕한다! 1부에서는 챗봇 프로젝트의 개요를 소개하고 기본 환경을 설정했다. 이번 2부에서는 드디어 웹 인터페이스를 만든다. 콘솔에서 동작하던 챗봇을 브라우저로 옮기고, 사용자가 입력한 메시지를 받아 응답하는 기능을 구현한다.
이 포스팅을 끝내면 깔끔한 채팅창 UI와 기본적인 대화 로직을 갖춘 챗봇이 완성된다. 초보자도 쉽게 따라 할 수 있도록 HTML, CSS, 자바스크립트를 단계별로 설명한다. 그럼 바로 시작한다!
2부에서 무엇을 다루는가?
2부의 목표는 다음과 같다:
- HTML과 CSS로 채팅창 UI를 설계한다.
- 자바스크립트로 사용자 입력을 받아 화면에 출력한다.
- 미리 정의된 답변을 반환하는 기본 로직을 추가한다.
1부에서 만든 my-chatbot 폴더를 그대로 사용한다. 준비가 됐다면 파일을 수정하며 진행한다.
채팅창 UI 설계하기
먼저, 사용자가 메시지를 입력하고 대화를 볼 수 있는 UI를 만든다. HTML로 구조를 잡고 CSS로 스타일을 입힌다.
HTML 수정하기
1부의 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>
<div id="chat-container">
<div id="chat-messages"></div>
<div id="chat-input">
<input type="text" id="user-input" placeholder="메시지를 입력하세요">
<button id="send-btn">전송</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>코드 설명
- #chat-container: 전체 채팅창을 감싼다.
- #chat-messages: 대화 내용을 표시한다.
- #chat-input: 입력창과 전송 버튼을 담는다.
CSS 추가하기
style.css를 아래 코드로 수정한다:
body {
font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
margin: 0;
padding: 20px;
background: #f0f0f0;
}
#chat-container {
max-width: 600px;
margin: 0 auto;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
#chat-messages {
padding: 20px;
height: 400px;
overflow-y: auto;
}
#chat-input {
display: flex;
padding: 10px;
border-top: 1px solid #ddd;
}
#user-input {
flex: 1;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
#send-btn {
padding: 8px 16px;
margin-left: 10px;
background: #ff4e00;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
#send-btn:hover {
background: #e63900;
}스타일 설명
- #chat-container: 채팅창을 중앙에 배치하고 그림자를 추가한다.
- #chat-messages: 대화가 길어지면 스크롤이 생긴다.
- #chat-input: 입력창과 버튼을 가로로 나란히 배치한다.
브라우저에서 index.html을 열어보면 빈 채팅창이 보인다.
사용자 입력 처리하기
이제 자바스크립트로 입력을 받아 화면에 띄운다. script.js를 아래 코드로 바꾼다:
const messages = document.getElementById('chat-messages');
const userInput = document.getElementById('user-input');
const sendBtn = document.getElementById('send-btn');
function addMessage(text, isUser = false) {
const message = document.createElement('p');
message.textContent = text;
message.style.textAlign = isUser ? 'right' : 'left';
message.style.background = isUser ? '#ff4e00' : '#f0f0f0';
message.style.color = isUser ? '#fff' : '#333';
message.style.padding = '8px 12px';
message.style.margin = '5px 0';
message.style.borderRadius = '4px';
message.style.display = 'inline-block';
messages.appendChild(message);
messages.scrollTop = messages.scrollHeight; // 자동 스크롤
}
sendBtn.addEventListener('click', () => {
const inputText = userInput.value.trim();
if (inputText) {
addMessage(inputText, true);
userInput.value = '';
}
});코드 설명
- addMessage: 메시지를 화면에 추가한다. isUser가 true면 사용자 메시지로 오른쪽에 표시한다.
- sendBtn.addEventListener: 전송 버튼 클릭 시 입력값을 처리한다.
브라우저에서 테스트해본다. 메시지를 입력하고 전송하면 오른쪽에 주황색 말풍선이 나타난다.
엔터 키로 전송 추가
편의를 위해 엔터 키로도 전송되게 한다. script.js에 다음 코드를 추가한다:
userInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
const inputText = userInput.value.trim();
if (inputText) {
addMessage(inputText, true);
userInput.value = '';
}
}
});챗봇 응답 추가하기
사용자 입력에 챗봇이 답하도록 로직을 넣는다. script.js를 아래처럼 수정한다:
const messages = document.getElementById('chat-messages');
const userInput = document.getElementById('user-input');
const sendBtn = document.getElementById('send-btn');
function addMessage(text, isUser = false) {
const message = document.createElement('p');
message.textContent = text;
message.style.textAlign = isUser ? 'right' : 'left';
message.style.background = isUser ? '#ff4e00' : '#f0f0f0';
message.style.color = isUser ? '#fff' : '#333';
message.style.padding = '8px 12px';
message.style.margin = '5px 0';
message.style.borderRadius = '4px';
message.style.display = 'inline-block';
messages.appendChild(message);
messages.scrollTop = messages.scrollHeight;
}
function getResponse(input) {
if (input.includes('안녕')) {
return '안녕! 나도 반갑다.';
} else if (input.includes('뭐해')) {
return '너랑 대화하려고 기다린다!';
} else {
return '잘 모르겠다. 다른 걸 물어본다.';
}
}
function sendMessage() {
const inputText = userInput.value.trim();
if (inputText) {
addMessage(inputText, true);
const response = getResponse(inputText);
setTimeout(() => addMessage(response), 500); // 0.5초 지연
userInput.value = '';
}
}
sendBtn.addEventListener('click', sendMessage);
userInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
sendMessage();
}
});코드 설명
- getResponse: 입력값에 따라 답변을 반환한다.
- sendMessage: 사용자 메시지를 표시하고 챗봇 응답을 추가한다.
- setTimeout: 자연스러운 대화 느낌을 위해 응답을 약간 지연시킨다.
테스트해본다. "안녕"이나 "뭐해"를 입력하면 챗봇이 답한다.
UI 개선하기
UI를 더 멋지게 만든다. CSS에 애니메이션과 반응형 디자인을 추가한다.
CSS 수정
style.css에 다음 스타일을 추가한다:
#chat-messages p {
animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
#chat-container {
width: 100%;
margin: 0;
}
#chat-messages {
height: 300px;
}
#user-input, #send-btn {
font-size: 12px;
}
}설명
- fadeIn: 메시지가 나타날 때 부드럽게 페이드인 된다.
- 반응형: 작은 화면에서는 채팅창 크기를 조정한다.
마무리
웹 기반 챗봇의 기본 틀이 완성됐다. UI를 설계하고 사용자 입력을 처리하는 로직을 구현했다. 3부에서는 자연어 처리와 AI 로직을 추가해 챗봇을 더 똑똑하게 만든다.
'코딩 공부 > 자바스크립트 실습' 카테고리의 다른 글
| 자바스크립트 AI 챗봇 만들기 part4 (2) | 2025.02.28 |
|---|---|
| 자바스크립트 AI 챗봇 만들기 part3 (1) | 2025.02.28 |
| 자바스크립트 AI 챗봇 만들기 Part 1 (2) | 2025.02.28 |
| 자바스크립트로 만드는 실시간 채팅 앱 (Part 3) (1) | 2025.02.26 |
| 자바스크립트로 만드는 실시간 채팅 앱 (Part 2) (0) | 2025.02.26 |