개인프로젝트(6) : GPT 챗봇 기능 통합 및 테스트 과정

윤준상·2025년 4월 24일
0
post-thumbnail

오늘 하루는 유독 마음이 무거웠다.

며칠 전, AMR(자율 이동 로봇)과 디지털 트윈 시스템을 기반으로 하는 회사에 프로그램 개발자 포지션으로 면접을 봤다.
C#과 Python, 그리고 Unity를 활용해 ARM과 API를 연동하는 기술들이 주된 업무였고, 나 역시 그런 기술적 환경에 흥미를 느껴 지원하게 되었다.

면접 자체는 분위기도 나쁘지 않았고, 질문에 차분하게 답변도 잘한 편이었다.
하지만 시간이 지나며 문득 드는 생각은,
“내가 아직 이쪽 전문성을 증명할 수 있는 스펙이 부족했나 보다.”

자격증, 어학점수 같은 기본적인 부분부터, 해당 기술에 대한 실무경험이 적다는 걸 그 자리에서 실감했다.
그 회사가 정말 가고 싶었기 때문에 더 아쉬움이 크게 느껴졌다.

면접에서는 이틀 내 결과를 알려주겠다고 했지만, 오늘로 3일째.
연락이 없다는 건 사실상 탈락이라는 뜻일지도 모르겠다.
아쉬움은 남지만, 다시 마음을 추슬러야겠다고 생각했다.

그래서 오늘은 다시 내 프로젝트로 돌아왔다.
SpringBoot + React 기반의 챗봇 기능을 붙이기 위해 GPT API 연동을 구현했다.
WebClient를 통해 요청을 보내고, 사용자 메시지에 응답하도록 백엔드 로직을 작성하고, 프론트에서도 반응형으로 메시지를 출력하도록 구성했다.

마음 한구석은 아직 무겁지만,
하나씩 구현해가며 중심을 다시 세우는 중이다.

🧪 챗봇 기능 연동 일지 (React + Spring Boot + OpenAI API)

🧱 오늘의 목표

React 프론트에서 질문을 입력하면, Spring Boot 백엔드를 거쳐 GPT가 답변해주는 반려견 상담 챗봇을 구현하는 것!


🖼️ 프론트 작업

1. 🧠 ChatbotPage.js 구현

  • useState로 질문과 답변을 관리
  • Axios로 POST 요청 전송
  • GPT 응답이 오면 assistant 역할로 출력

2. 🔗 라우팅 연결

  • App.js/chatbot 경로를 추가하고 ChatbotPage 컴포넌트 렌더링
  • 헤더에 버튼 하나 추가해서 챗봇 페이지 쉽게 접근 가능하게 만듦

3. ✨ 커밋 로그

git add src/App.js
git commit -m "fix: App 컴포넌트에서 라우팅 경로 수정 및 챗봇 페이지 연결"

git add src/components/Header.js
git commit -m "feat: 헤더에 챗봇 페이지로 이동하는 버튼 추가"

git add src/pages/Post.js
git commit -m "refactor: 게시글 상세페이지에 채팅 버튼 추가"

git push origin main

⚙️ 백엔드 작업

1. 🔐 SecurityConfig 설정

  • /api/chatbot/ask 경로 인증 필요하도록 설정 (requestMatchers)
  • JWT 필터 적용 (addFilterBefore)

2. 🧼 JwtAuthenticationFilter 수정

  • chatbot 경로는 인증 없이 통과 가능하도록 예외 처리 추가

3. 🧠 GPTService 연결

  • WebClient 사용해서 OpenAI API에 질문 전달
  • model은 gpt-4o, 시스템 프롬프트는 반려견 상담 챗봇으로 설정

4. 🚨 에러 처리

  • 403 Forbidden: 인증 없이 접근 시 발생 (→ 수정 완료)
  • 429 Too Many Requests: GPT API 쿼터 초과 (크레딧 부족으로 결제 필요)

💰 결제 확인

  • 기존 무료 크레딧 소진되어 $0.00
  • 테스트용으로 $5 충전 (OpenAI API는 ChatGPT 유료 플랜과는 별개)

✅ 결과

  • Postman으로 정상 응답 받음


📌 회고

오늘의 한줄 요약: 백엔드 연결까지는 성공! 이제 챗봇 똑똑하게 만드는 건 과금 싸움이다 💸

앞으로는 하나씩 구현하면서, 천천히 실력도, 내 마음도 다시 채워나가자.

profile
흘러가되 원하는 방향으로

0개의 댓글