[Project] 챗봇 만들기 프로젝트 1

AI 개발자 마스터 국비 교육 과정을 듣기 4개월차

 

드디어 마지막 미니 프로젝트 HTML 홈페이지 제작 프로젝트가 시작 되었다. 

 

오랜지 주스에 첨가되는 0.9%의 오랜지 향처럼 AI 개발자교육생 답게, 

조금이라도 특별한 "킥"을 추가를 해야 하는게 맞다고 생각이 들었다. 

그렇게 이번 프로젝트에서 가장 중책(?)인 챗봇 개발(?) 을 담당하였다. 

 

이번 프로젝트는 이전 LLM 미니 프로젝트에서 개발한 버트 모델을 기반하여 한 프로젝트의  연장선으로

홈페이지를 직접 구현 해 보기는 연장선이다. . 

 

프로젝트 폴더 구조 

 

시작 하기 전에 트리 구조 부터 만들어보았다. 

• 메인 폴더: CHATBOT.PYTHON
• 하위 폴더: HTMLtempates, CSS, js

CHATBOT.PYTHON
├── HTMLtemplet
├── CSS
└── JS

 

• HTML_templates : 챗봇 페이지 구성
• CSS : 스타일링
• js : 페이지 동작 

챗봇 모델 선택

챗봇의 모델은 GPT 5-nano를 사용 한다.

이 프로젝트 제작 시기 시점에 따끈따끈 한 갓 태어난 녀석이다. 

 

GPT는 GPT5-nano이외에도 다른 모델들이 있으나  Nano는 지연시간을 최우선으로 설계된 초경량 모델이다

즉, 속도가 매우 빠르고 챗봇처럼 간단하고 빠른 응담 위주로 사용하는 사례에 훨씬 적합 하다고 한다.

 

그리고 가장 중요한 장점은!

 

제일 싸다… 💸
돈이 없는 백수의 슬픔을 달래주는 모델

 

프로젝트에 필요 파일과 역할 설명

CHATBOT.PYTHON
├── HTMLtemplet
│   └── index.html
├── CSS
│   └── style.css
├── JS
│   └── main.js
├── app.py
└── .env

폴더를 만들었으니 각각의 폴더에 필요한 파일들을 생성하자.

1️⃣ HTML_templates/index.html

• 역할: 챗봇 페이지의 UI 담당.
• 내용:
  • 텍스트 입력창(textarea)
  • 전송버튼(buttun 또는 submit)
  • 챗봇 답변을 보여주는 영역 
• 설명: 사용자가 질문을 입력시 js에서 API로 요청을 보내고 그 응답을 화면에 표시 
• 비고: 추후 이름 변경 예정

2️⃣ CSS/style.css

• 역할: 챗봇 페이지 스타일링
• 내용:
  • 입력창, 버튼 답변 영역의 크기, 색상 폰트 등등
  • 페이지 레이아웃
• 설명: UI를 보기좋게 꾸며주는 역할 담당

3️⃣ JS/main.js

• 역할: 프론트엔드 동작 처리
• 내용:
  • 버튼 클릭 이벤트
  • fetch를 사용하여 Flask 서버에 post 요청 전송
  • 서버 응답받아 화면에 전달
• 설명:
  • 사용자 입력 → 서버(쳇봇에 전달)  → 챗봇 응답 → 서버(화면에 전달) → 화면 출력 흐름 담당
  • textarea 자동 높이 조절 기능 포

4️⃣ app.py

• 역할: Flask 서버 + GPT-5 Nano API 연동
• 내용:
  • Flask 앱 초기화
  • Post 라우트 생성
  • 사용자 질문을 gpt에 전달 결과를 json으로 반환
• 설명: 프론트엔드와 GPT API를 연결 하는 중심 서버 역할

5️⃣ .env

• 역할: OpenAI API Key 보관
• 내용
  • OPNEAI_API_KEY = sk-......
• 설명: API 키를 코드에 노출 시키지 않기 위해 환경 변수로 처리
• 비고: 해당 내용을 코드에 작성 하고 = 뒤는 API 키를 GPT 페이지에서 받아오면 끝
  * 해당 키는 노출 시키면 안되기에 제작 과정에서 제외 함

준비 운동은 끝났다. 

 

이제 시작하자. 

 

 

* 1주간 포스팅은 개발일지로 작성 될 예정 입니다. 
개인 공부는 프로젝트 끝나면 다시 진행 하겠습니다. 

 

저의 허접한 개인 공부 포스팅을 기다리고 계신분이 계시다면...

정말.. 정말... 감사합니다....  🙏 🙇 🙇‍♂️ 🙇‍♀️ 🙏 (샤라웃 to my subscribers!!)
프로젝트 후에 찾아 뵙겠습니다.