Supabase 연결로 대화 요약봇 만들기! 삽질 끝에 얻은 인사이트

소개

대화 내용을 요약해주는 챗봇을 만들고 싶었어요. 그런데 단순한 1턴 챗이 아니라, 이전 대화들도 기억해야 제대로 요약할 수 있더라고요. 그래서 대화 내용을 저장하고 불러오는 DB가 필요했고, 그 과정에서 Supabase를 써보고 싶었어요.

Supabase는 Firebase처럼 사용하기 쉽다고 해서 선택했지만, 직접 연결해보는 건 처음이라 궁금한 점도 많았고, 꽤 여러 번 막혔던 기억이 나네요 😅

진행 방법

🛠 사용 도구 및 기술

Supabase (PostgreSQL 기반 DB)
FastAPI (백엔드 서버)
JavaScript (메신저 봇 클라이언트)
OpenAI API (요약 모델)
Cursor (프론트/백 통합 코드 분석용)
ChatGPT (PRD 및 초기 개발 아이디어 구성)

🏗 프로젝트 구조 및 PRD 작성

이 프로젝트의 초기 설계와 PRD 작성을 ChatGPT w/ 현우님 지침파일과 함께 진행했어요.
대화를 반복하면서 고민을 정리하니 훨씬 탄탄한 구조가 나왔습니다 💬
초기 단계에서 아래 스크립트를 개발했습니다:
- 메신저봇 R 스크립트 (JavaScript)
- Supabase SQL 스크립트
- FastAPI 백엔드 스크립트

아래와 같은 프롬프트로 시작해서 PRD를 채워나갔어요.

메신저봇을 만드는데 하루동안 대화내역을 SUPABASE에 저장하고 해당 DB를 꺼내 요약하는 봇을 만들고 싶어

아래와 같이 GPT가 묻는 질문들을 채워나가며 PRD를 구체화했습니다.

2단계부터 꼼꼼하게 빠진 게 없는지 체크하며 넘어갔어요. 최최최최최종?

중간 중간에 아래 프롬프트와 같이 검토 요청을 하면 꼼꼼하게 챙겨줘서 좋았어요. 나중에 덧붙이는 것보다 초기 설계를 탄탄하게!!

4단계 시작 전에 현재까지 정해진 사항 중에 추가로 확인할 사항이 없을지 천천히 검토해줘

아래와 같이 스텝 별로 잘 점검해주네요.

이렇게 저렇게 해서 아래와 같이 코드를 달라고 했습니다.

FastAPI server 코드도 "짜줘"

Supabase SQL 코드 "짜줘"

이런 식으로 초기 뼈대 스크립트를 제작하였습니다. 현우님이 PRD 구성을 위한 지침 파일을 매우 잘 만들어주셔서 손쉽게 나오네요.

⚙️ 시스템 구성 흐름

메신저봇 R(JavaScript) → Supabase에 대화내용을 실시간 저장
요약 요청 시 → FastAPI 서버를 통해 해당 방의 대화내역을 조회
Gemini-Pro API를 이용해 요약 수행 후 → 다시 자바스크립트로 전송 및 표시

💡 주요 구성 요소

Supabase 연결 및 RLS 삽질기

DB에 insert는 되는데 select가 안 돼서 데이터가 저장만 되고 읽히지 않는 현상이 발생
나중에 알고 보니 RLS(Row Level Security) 설정에서 select 권한을 안 넣은 게 원인이었어요
꼭 insert뿐만 아니라 select 권한도 명시해줘야 정상 작동합니다!

FastAPI 서버 구조

라우터를 /search, /summarize 등으로 분리해 관리
router function을 사용해서 endpoint(?)를 모듈화하니 확장/관리하기 훨씬 편했어요

fastAPI main.py 예시파일

from fastapi import FastAPI
from routers.search_router import router as search_router
from routers.summarize_router import router as summarize_router  

app = FastAPI(title="메신저봇 FastAPI 서버")

app.include_router(search_router)
app.include_router(summarize_router)

router 구조 예시 파일

메신저 봇 JavaScript 연동

JS로 만든 봇에서 !요약 명령어가 동작하지 않음 → 로그도 안 찍혀서 디버깅이 어려웠어요
해결 방법: 예제로 잘 작동하는 코드를 참고해서 구조/이벤트 등록 방식 비교

로그가 나오지 않는데 로그가 나오지 않는 이유를 @/per-fastapi-bot 해당 코드 참고해서 원인분석을 해봐

이렇게 진행하니 원인을 잘찾아주네요.

JS + Python 코드를 함께 열어두기 (Cursor 추천!)

FastAPI 쪽 Python 코드와 메신저 JS 코드를 Cursor에서 함께 열어두면 연동 구조 파악이 쉬움

자바스크립트를 호출해놓고 아래와 같이 물어볼 수도 있어요.

!메시지확인 명령어는 사용이되는데 !요약 명령어는 제대로 동작하지 않아 @summarize_router.py 스크립트를 변경해야할까?

위와 같이 로그 캡처본을 같이 올려주니 Cursor가 원인을 잘 찾아줍니다.

눈물의 성공기.. 3가지 플랫폼(Javascript, FastAPI server, Supabase) 에 모두 익숙하지 않으니 각 플랫폼에서 하나씩 에러가 발생 했을 때 원인을 찾기 힘들었네요. 디버깅용 로그를 많이 남겨서 AI가 현상을 잘 파악하게 하는 게 도움이 많이 된 것 같습니다.

결과와 배운 점

Supabase의 RLS 설정이 직관적이면서도, 권한 세팅 하나 빠지면 정말 오래 헤맬 수 있어요 😵
insert뿐 아니라 select 권한도 꼭 확인할 것!
FastAPI의 router 구조를 활용하면 확장성이 좋아져요
메신저 봇 로그가 안 나올 때는 코드보단 이벤트 등록 구조를 먼저 의심해보는 게 좋습니다
JS/Python이 함께 동작할 땐 두 언어를 한 화면에 함께 보는 연습이 큰 도움이 됩니다 (Cursor 최고)
PRD 작성할 때 ChatGPT(w/ 현우님 지침파일)를 활용하면 사고의 폭이 넓어지고, 빠짐없는 구성에 도움이 됩니다

🚀 Supabase 연동, 어렵지만 천천히 하나씩 따라가다 보면 누구나 할 수 있어요! 저처럼 삽질하지 마시고 권한 설정부터 꼼꼼히 챙기세요 😄

⏰ 가장 빠르게 AI를 배우는 곳 | AI스터디 18기 사전모집 OPEN🚀