저는 Next.js, Gemini API로 구축하고 Vercel에 배포한 Worklog Studio 랜딩 페이지에 무료 RAG (Retrieval-Augmented Generation) 기반 AI 채팅 어시스턴트를 추가했습니다. 이것이 무엇을 하는지, 그리고 왜 이 작업을 했는지 소개합니다.

Demo of the AI chat assistant answering a question about Worklog Studio's features

요약 (TL;DR;)

이 프로젝트의 소스 코드는 공개된 github 리포지토리 여기에서 확인하실 수 있습니다.

채팅 어시스턴트를 만든 이유

무엇보다도, 재미있기 때문입니다! 하지만 진지하게 말해서, 이제 아무도 긴 텍스트를 읽지 않습니다. 당신의 제품을 알고 있는 챗봇을 두는 것은 사용자가 당신이 전달하고자 하는 것에 참여하도록 동기를 부여하는 방법입니다.

제가 스스로에게 세운 엄격한 규칙은 다음과 같습니다: 어시스턴트는 무언가를 모를 때 반드시 모른다고 인정해야 합니다. 존재하지 않는 기능을 자신 있게 지어내는 챗봇은 아예 없는 것보다 더 나쁩니다.

어떻게 연결되어 있는가

Worklog Studio AI chat architecture diagram

브라우저가 Vercel에서 실행되는 Next.js 라우트로 질문을 보냅니다. 해당 라우트는 속도 제한기 (rate limiter)를 확인하고, 미리 계산된 작은 임베딩 (embeddings) 파일에서 가장 관련 있는 청크 (chunks)를 추출한 다음, 해당 청크와 질문을 Gemini로 보냅니다. 답변은 들어온 방식과 동일하게 스트리밍 (streaming) 방식으로 다시 전달됩니다.

페이지의 두 가지 진입점 (인라인 박스와 헤더 버튼)은 동일한 채팅 패널과 동일한 대화를 공유하므로, 대화 도중에 이들 사이를 전환해도 아무것도 잃지 않습니다.

벡터 데이터베이스 (vector database)는 없으며, 앱 데이터베이스를 사용하지 않고, 사용자 계정도 필요하지 않습니다. 대화 기록은 sessionStorage에 저장됩니다.

Worklog Studio란 무엇인가?

Worklog Studio는 소규모 데스크톱 시간 추적기 (time tracker)입니다. 현재로서는 유용하게 사용할 수 있는 최소한의 기능만을 갖추고 있습니다. 프로젝트 (Projects), 작업 (tasks), 시간 기록 (time entries)을 관리할 수 있으며, 각 기록에 댓글을 달아 실제로 무엇을 하고 있었는지 기억할 수 있습니다.

제가 이것을 만든 이유는, 제가 시도해 본 기존의 모든 추적기들이 무언가 부족하거나 제가 필요하지 않은 기능들로 너무 복잡했기 때문입니다. 이것은 오픈 소스 (open source)이며, 코드를 살펴보거나 기여하고 싶다면 여기 리포지토리 (repo)가 있습니다: github.com/vavilov2212/wl-studio.

왜 실제 서버가 필요했는가

이 사이트는 이전에는 GitHub Pages에 정적 내보내기 (static export) 형태로 배포되었는데, 일반적인 콘텐츠에는 괜찮지만 백엔드 (backend) 코드를 실행할 수는 없습니다. 이 기능에는 백엔드가 필요한데, Gemini API 키를 서버에 유지해야 하기 때문입니다. 그 키를 클라이언트 측 (client-side) 코드에 넣으면 개발자 도구 (dev tools)를 열어둔 누구라도 5초 만에 탈취할 수 있습니다.

그래서 사이트를 Vercel로 옮겼습니다. 동일한 리포지토리 내의 Next.js 앱이며, 배포 방식은 바뀌지 않습니다.

비용: 0원

Gemini 키는 Vertex AI 콘솔 (console)이 아니라 소비자용 AI Studio 흐름 (flow)에서 가져옵니다. 왜 그 차이가 중요한지는 파트 3에서 다루겠습니다.

다음 예고

내용이 워낙 방대하여 이 글을 세 개의 포스트로 나누려고 합니다.

• 파트 2: 실제 RAG 파이프라인 (pipeline), 본인 콘텐츠의 청킹 (chunking) 및 임베딩 (embedding), 그리고 검색 (retrieval) 코드가 추측하는 대신 언제 "모르겠습니다"라고 말할지 결정하는 방법에 대해 다룹니다. 이 단계에서는 벡터 데이터베이스 (vector database)를 사용하지 않습니다.
• 파트 3: 특히 Gemini API 활용법, 무료 티어 (free tier) 대 Vertex AI 비교, 그리고 모델에 과부하가 걸릴 때 어떤 일이 발생하는지에 대해 다룹니다.

함께 따라 해보고 싶다면 사이트 리포지토리는 worklog_studio_site이며, 시간 추적이 관심 분야라면 Worklog Studio 자체도 기여를 위해 열려 있습니다.

직접 어시스턴트(Assistant)를 체험해 보세요: worklog-studio-site.vercel.app. "Ask AI"를 클릭하여 무엇을 알고 있는지 확인해 보세요.