AI 개발자 포트폴리오: RAG 챗봇과 문서 관계 그래프를 갖춘 개인 사이트
제 프로필·프로젝트·블로그를 하나의 문서 계층으로 묶고, 방문자가 "NestJS를 쓴 프로젝트가 있나요?"처럼 물으면 공개된 문서만 근거로 답하는 RAG 챗봇을 붙인 개인 포트폴리오입니다. 프로젝트와 블로그 글이 서로 어떻게 이어지는지는 그래프로 보여 줍니다.
2026.09 – 진행 중 · 기획·설계, 백엔드·프론트엔드 개발, RAG 측정과 결정, AI 협업 규칙 운영
- Java
- Spring Boot
- Spring AI
- JPA
- QueryDSL
- Flyway
- PostgreSQL
- pgvector
- OpenAI
- Next.js
- React
- Vite
- TanStack Query
- React Hook Form
- Zod
- Tailwind CSS
- react-force-graph
- Spring Boot 생태계에 대한 이해
- RAG 서비스에 대한 이해
- 채팅 서비스 구현
프로젝트 개요
제 프로필·프로젝트·블로그를 하나의 문서 계층으로 묶고, 방문자가 "NestJS를 쓴 프로젝트가 있나요?"처럼 물으면 공개된 문서만 근거로 답하는 RAG 챗봇을 붙인 개인 포트폴리오입니다. 프로젝트와 블로그 글이 서로 어떻게 이어지는지는 그래프로 보여 줍니다.
혼자 진행하는 사이드 프로젝트로, 기획·설계·백엔드·프론트엔드·RAG 측정을 모두 맡았습니다. 백엔드는 Spring Boot를 배우면서 만들었고, 개발은 Claude Code·Codex와 문서 기반으로 협업했습니다. 설계 결정은 ADR로 남기고 측정은 실제 모델로 직접 실행했습니다. 월 운영비 10만 원(서버·DB·API·도메인 포함) 안에서 운영하도록 설계했습니다.
| 항목 | 내용 |
|---|---|
| 팀 구성 | 1명(본인), AI 에이전트(Claude Code·Codex) 협업 |
| 나의 역할 | 기획·설계, 백엔드·프론트엔드 개발, RAG 측정과 결정, AI 협업 규칙 운영 |
학습 내용
- Spring Boot 생태계에 대한 이해: 백엔드를 Spring Boot로 만들면서 JPA·QueryDSL로 데이터 접근을, Flyway로 스키마 변경 이력을, Spring AI로 모델 호출을 다뤘습니다. 관리자 화면은 GitHub OAuth로 본인 계정만 들어올 수 있게 했고, 백엔드 테스트 120건을 작성했습니다.
- RAG 서비스에 대한 이해: 프로젝트·블로그·프로필·FAQ를 공통 문서로 묶어 색인하고, 섹션 단위로 청킹해 pgvector로 근거를 찾는 흐름을 만들었습니다. 청킹 규칙과 근거 판정 방식은 설계 때 세운 가정 대신 측정 결과를 보고 정했고, 샘플 질문 7개에서 기대 출처를 모두 찾았습니다.
- 채팅 서비스 구현: 답변은 SSE로 처리 상태, 참고 문서, 답변 조각을 차례로 보냈습니다. 방문자 로그인 없이 서버가 발급한 식별 값과 비밀키로 대화를 나눴고, 대화는 마지막 활동 후 24시간이 지나면 지우며 모델에는 최근 3턴만 보냈습니다. 비용은 IP당 하루 20개, 전체 300개 질문 제한으로 묶었습니다.
주요 화면
홈
방문자가 바로 질문할 수 있는 입력창과 추천 질문, 프로젝트·블로그·소개로 가는 카드를 첫 화면에 두었습니다.