React-Native

부틀리 시간 몇 시간으로 AI 챗봇을 엔드투엔드 구현한 이야기

인어공쭈 2025. 11. 10. 15:38

React로 시작해 인턴을 만들었습니다

AI 챗봇 ‘하리니’ 개발 회고

이미 몇달이나 지나서 앱에 올라갔지만 그냥 넘어가긴 아쉬워서 쓰는 글

부틀리(Bootly): 하고 싶은 걸 해보는 시간

저희 회사에는 부틀리(Bootly)라는 문화가 있습니다.
한 달에 한 번, 정해진 토픽 아래 일주일에 몇 시간 정도를 본업 외의 무언가에 도전해보는 시간이죠.
누군가는 새로운 기능을 실험하고, 누군가는 데이터를 분석하거나 디자인을 다시 뜯어봅니다.

저는 이번에, 조금 다른 걸 해보기로 했습니다.

“CX팀을 도와줄 챗봇을 직접 만들어보자.”

CX의 한숨에서 시작된 프로젝트

시작은 단순했습니다.
옆자리 CX 담당자분이 “오늘도 문의가 너무 많아요…”라고 말하던 그날.
유저 수는 빠르게 늘고 있었고, 매일 쏟아지는 문의는 하루를 꽉 채우고 있었습니다.

그 말을 듣고 문득 생각했습니다.

“이건 진짜 자동화가 필요하겠다.”


그래서 CX 담당자분과 함께 ‘우리만의 CX 챗봇’을 만들어보기로 했습니다.
기획은 CX팀이, 개발은 제가 맡았습니다.

 

“인턴 하리니”의 탄생

 

이름은 ‘인턴 하리니’.
처음엔 정말 인턴처럼, 어설프지만 성실했습니다. 🐣

목표는 단 하나.
반복되는 FAQ 문의를 대신 응대해, CX팀이 더 중요한 일에 집중할 수 있도록 하는 것.

한 달 동안 다음을 진행했습니다:

  • CX 데이터 분석 및 FAQ JSON 구축
  • 사용자 문의 패턴 정리
  • Gemini 기반 LLM 연동
  • 프론트(React) + 백엔드(Express) 구현

 

기술적인 구성

 

Frontend

  • React + TypeScript
  • 간단한 채팅 UI, 입력/응답 인터랙션
  • 상태 관리 및 로딩 처리

Backend

  • Express + Node.js
  • /classify: 문의 내용 분류
  • /response: 카테고리 기반 답변 반환
  • LLM: Google Gemini 2.0 Flash

Data Layer

  • CX팀이 직접 정제한 FAQ JSON
  • 각 항목별 카테고리, 키워드, 응답 텍스트 구조화
const classifyInquiry = async (text) => {
  const keywords = await gemini.extractKeywords(text);
  const matched = faq.find((item) =>
    item.keywords.some((k) => keywords.includes(k))
  );
  return matched?.response || "이건 조금 더 공부 중이에요 🫢";
};

 

Google ADK로 cs_ai_agent 구현

챗봇을 한 단계 업그레이드하기 위해 **Google ADK(Agent Development Kit)**를 사용했습니다.
FAQ와 VOCS 데이터를 instruction에 넣어, 반복되는 문의를 자동으로 처리하도록 설계했죠.

  • 구현 방식: instruction embedding → RAG/벡터 검색 없이 단순 구현
  • 모델: Gemini 2.0 Flash
  • 데이터: FAQ 40개+, VOCS 1800개+
  • 실행: InMemoryRunner를 사용, 비동기 스트리밍으로 실시간 응답

장점: 단순, 빠른 프로토타입 가능
한계: 데이터가 늘어나면 토큰 사용량 증가, RAG 전환 필요


결과: 부틀리 1등, 그리고 상용화

 

한 달 뒤, 이 프로젝트는 부틀리 1등으로 선정되었습니다.
그리고 다른 기획자, 백엔드, AI 담당자분들이 합류해
‘인턴 하리니’는 정식 앱 기능으로 상용화되었죠.

지금은 유저의 문의를 자동으로 처리하고,
CX팀의 하루를 조금 더 여유롭게 만들어주고 있습니다.

회고: 중요한 건 ‘관찰’

이 프로젝트를 하면서 가장 크게 느낀 건,
좋은 아이디어는 꼭 회의실에서 나오지 않는다는 점이었습니다.

옆자리의 한숨, “이거 좀 불편해요” 같은 말 한마디가
가장 강력한 문제 정의가 될 수 있습니다.

그걸 기술로 해결해보는 시도
그게 결국 개발자의 재미 아닐까요?

마무리하며

React로 시작해 인턴을 만들 줄은 몰랐습니다.
하지만 덕분에, 기술이 사람을 돕는 방식에 대해 다시 생각하게 됐습니다.

“코드는 결국, 옆자리 사람을 도와주는 도구다.”



다음 부틀리에서는 또 어떤 실험이 탄생할지, 기대가 됩니다 :)

 

반응형