0919 Full-Stack: AI Conversation Enhancement and API Stabilization
✅ 1. 백엔드(BE): AI 대화 기록 관리 및 안정성 강화
- 단발적인 AI 요청 처리를 넘어, 사용자와 AI 간의 대화 기록을 데이터베이스에 저장하고, 안정적인 API 운영을 위한 레이트 리미터(Rate Limiter)와 API 문서화(Swagger)를 도입했습니다.
➕ 주요 개념
-
대화 히스토리 영속성:
AIConversation엔티티: 사용자와 AI 간의 대화(프롬프트, 응답, 대화 유형 등)를 저장하기 위한 엔티티를 설계했습니다.AIConversationService:AIService에서 AI 응답이 성공적으로 생성된 후, 이 서비스를 호출하여 대화 내용을 DB에 영속적으로 저장하는 로직을 추가했습니다. 이를 통해 사용자는 과거 대화 기록을 언제든지 다시 조회할 수 있게 되었습니다.
-
API 레이트 리미터 (Rate Limiter):
- 개념: 특정 시간 동안 특정 사용자(또는 IP)가 API를 호출할 수 있는 횟수를 제한하는 기술입니다.
- 목적: 악의적인 사용자의 과도한 요청(어뷰징)으로부터 서버를 보호하고, 모든 사용자에게 공정한 리소스를 할당하여 서비스의 안정성을 확보합니다.
- 구현: Spring의
HandlerInterceptor를 사용하여 API 컨트롤러가 실행되기 전에 요청을 가로챘습니다.RateLimiterService는 인메모리 캐시(e.g., Caffeine, Guava) 등을 활용하여 사용자별 요청 횟수를 추적하고, 한도를 초과하면RATE_LIMIT_EXCEEDED에러를 발생시켜 요청을 차단했습니다.
-
API 문서화 (Swagger / OpenAPI):
- 개념: 개발자가 API의 명세(엔드포인트, 요청/응답 DTO, 파라미터 등)를 쉽게 이해하고 테스트할 수 있도록 자동으로 문서를 생성해주는 도구입니다.
- 구현:
springdoc-openapi의존성을 추가하고, 컨트롤러와 DTO에@Operation,@Schema와 같은 어노테이션을 추가하여 각 API의 기능과 데이터 모델을 상세히 설명했습니다. - 효과: 프론트엔드 개발자나 다른 팀원과의 협업 효율성을 높이고, API의 유지보수성을 향상시켰습니다.
✅ 2. 프론트엔드(FE): AI 대화 컨텍스트 관리 및 히스토리 UI 구현
- AI가 이전 대화 내용을 기억하고 더 맥락에 맞는 답변을 생성하도록 컨텍스트 관리 기능을 추가하고, 사용자가 과거 대화 기록을 탐색할 수 있는 히스토리 패널을 구현했습니다.
➕ 주요 개념
-
대화 컨텍스트(Context) 유지:
- 문제점: LLM은 기본적으로 Stateless이므로, 이전 대화 내용을 기억하지 못합니다.
- 해결책: AI에게 질문을 보낼 때, 현재 질문뿐만 아니라 이전 대화 내용의 요약본을 함께 전송했습니다.
- 구현: 프론트엔드의
aiService.js에서, 새로운 질문이 발생하면 Zustand 스토어에 저장된 최근 대화 기록을 바탕으로 간단한 컨텍스트 문자열을 생성하고, 이를 API 요청 본문에 포함시켜 서버로 전달했습니다.AIService는 이 컨텍스트를 프롬프트에 포함하여 AI에게 더 풍부한 맥락을 제공합니다.
-
대화 히스토리 UI:
- 컴포넌트 분리:
HistoryPanel,HistoryList,HistoryItem,HistoryDetail등 대화 기록을 보여주는 UI를 여러 개의 전문화된 컴포넌트로 구현했습니다. - 기능:
- 목록 조회: 백엔드 API(
GET /api/ai/conversations)를 호출하여 최근 대화 기록 목록을 불러옵니다. - 상세 보기: 목록에서 특정 항목을 클릭하면, 해당 대화의 전체 내용(프롬프트, 응답)을 상세하게 볼 수 있습니다.
- 검색 및 필터: 사용자가 원하는 대화 기록을 쉽게 찾을 수 있도록 키워드 검색 및 대화 유형(코드 리뷰, 질문 등) 필터 기능을 추가했습니다.
- 목록 조회: 백엔드 API(
- 컴포넌트 분리:
-
Zustand를 이용한 상태 관리 (
useHistoryStore):- 히스토리 패널의 열림/닫힘 상태, 현재 선택된 히스토리 항목, 검색어 등 복잡한 UI 상태를 Zustand 전역 스토어를 통해 관리했습니다.
- 이를 통해 AI 어시스턴트 패널과 히스토리 패널이 서로의 상태를 공유하고 유기적으로 동작(e.g., 히스토리 패널 열기 버튼)할 수 있게 되었습니다.
✅ 3. 개발 편의성 및 경험 개선
- 개발 과정의 효율성을 높이고, 사용자 경험을 개선하기 위한 다양한 작업을 진행했습니다.
-
개발 환경용 테스트 토큰:
- 개발 중 API를 테스트할 때마다 매번 로그인하는 번거로움을 줄이기 위해, 개발 환경(
application-dev.yml)에서만 유효한 고정된 테스트용 JWT를 허용하도록JwtAuthenticationFilter를 개선했습니다.
- 개발 중 API를 테스트할 때마다 매번 로그인하는 번거로움을 줄이기 위해, 개발 환경(
-
토큰 사용량 추정:
- AI 어시스턴트 패널에서도 코드 리뷰 기능과 마찬가지로, 사용자가 입력한 텍스트를 기반으로 예상 토큰 사용량을 추정하여 보여주는 기능을 추가했습니다.
-
아이콘 라이브러리 도입:
- UI의 시각적 완성도를 높이기 위해
@heroicons/react와 같은 아이콘 라이브러리를 도입하여, 직관적이고 일관된 아이콘을 앱 전반에 사용했습니다.
- UI의 시각적 완성도를 높이기 위해
📌 요약
- 백엔드는
AIConversation엔티티를 통해 AI 대화 기록을 DB에 영속적으로 저장하고, API 레이트 리미터를 도입하여 서비스 안정성을 확보했으며, Swagger를 통해 API 문서화를 자동화했습니다. - 프론트엔드는 이전 대화 내용을 요약하여 함께 전송하는 방식으로 AI의 대화 컨텍스트 유지 기능을 구현했으며, 사용자가 과거 대화를 탐색할 수 있는 히스토리 패널을 완성했습니다.
- 개발 편의성을 위해 테스트용 JWT를 허용하고, 토큰 사용량 추정, 아이콘 라이브러리 도입 등 개발과 사용자 경험 양쪽을 모두 개선하는 작업을 진행했습니다.
