챗봇 프로젝트 - 기본 페이지 만들기
프로젝트의 계획을 만들었으니 이제 챗봇의 얼굴인 페이지를 만들어보자
페이지는 우선 간단하게 chatarea 와 버튼으로 구성해 보았다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 제목 -->
<h1>챗봇 창</h1>
<!-- 전체 챗봇 영역 -->
<div id="chatbot_container">
<!-- 사용자 입력창 -->
<textarea name="user_input" placeholder="질문을 입력하세요"></textarea>
<!-- 전송 버튼-->
<button>질문하기</button>
<!-- 답변 영역 -->
<div id="chatbot_request"></div>
</div>
<!-- JS 연결 -->
<script src="../js/main.js"></script>
</body>
</html>
구성 설명
<body>
├─ <h1>챗봇 창</h1>
└─ <div id="chatbot_container"> <-- 전체 챗봇 영역
├─ <textarea> <-- 사용자 입력창
├─ <button> <-- 질문 전송 버튼
└─ <div id="chatbot_request"> <-- 챗봇 답변 영역
└─ <script src="../js/main.js"></script> <-- JS 연결
각 요소의 설명
- <h1> : 페이지 상단 챗봇 제목
- <div id="chatbot_container">
- 챗봇 UI 전체를 감싸는 컨테이너
- 나중에 위치 지정, 크기 등 여러 CSS 조절 예정
- JS에서도 전체 챗봇을 한번에 선책 제어 가능
- <textarea> - 사용자가 질문을 입력
- 질문 입력용
- 사용자가 직접 마우스로 택스트 박스의 크기 조정이 가능
- 텍스트 길이에 따라 늘어나도록 추후 JS로 자동 높이 조절 가능
- <button> - 질문 전송 버튼
- 클릭시 JS에서 입력값을 서버로 POST 전송
- 단답형 챗봇 응답 받기
- <div id="chatbot_request> - 챗봇 답변 영역
- 서버에서 받은 응답을 표시
- 추후 스크롤 배경 폰트 스타일 등 CSS적용 가능
- 채팅형으로 업데이트 예정
- <script>: JS 파일 연결
- 버튼 클릭 이벤트, fetch 요청, 답변 표시 등 동작 처리 담당
- 구조적으로는 chatbot_container 외부에 위치해도 상관없고,
- <body> 마지막에 두는 것이 일반적
- 브라우저가 HTML 요소를 모두 로드한 뒤 JS를 실행하도록 권장
출력될 화면을 확인해보자
'Project > GPT Api를 활용하여 챗봇 만들기' 카테고리의 다른 글
| [Project] 챗봇 만들기 프로젝트 6 (5) | 2025.08.15 |
|---|---|
| [Project] 챗봇 만들기 프로젝트 5 (3) | 2025.08.15 |
| [Project] 챗봇 만들기 프로젝트 4 (1) | 2025.08.15 |
| [Project] 챗봇 만들기 프로젝트 3 (3) | 2025.08.15 |
| [Project] 챗봇 만들기 프로젝트 1 (7) | 2025.08.14 |