AI 텍스트 스트리밍을 위한 SSE(Server-Sent Events) 구현 가이드

핵심 기술

AI 모델로부터 생성된 텍스트를 브라우저로 지연 없이 실시간 스트리밍하기 위해 Server-Sent Events (SSE) 프로토콜을 도입하고 구현하는 과정과 그 이점을 상세히 설명합니다.

기술적 세부사항

• 문제점: AI 생성 텍스트 스트리밍 시 수백 밀리초의 지연도 사용자 경험을 저해하며, 기존 폴링 방식으로는 처리량 및 지연 시간 요구사항을 충족하기 어려웠습니다.
• SSE 선택 이유:
  • 가벼운 프로토콜: 단일 HTTP 연결, 최소한의 오버헤드
  • 자동 재연결: 개발 시간 단축 및 안정성 향상
  • 네이티브 브라우저 지원: 추가 라이브러리 불필요
  • 단방향 스트리밍에 최적화: AI 텍스트 생성 흐름과 완벽하게 일치
• 기술 비교: WebSockets, Long Polling, SSE의 프로토콜 오버헤드, 재연결, 지원 여부, 메모리 사용량 등을 비교하여 SSE의 장점을 강조합니다.
• 서버 측 구현 (NestJS):
  • SSE 헤더를 포함하는 POST 라우트(/api/run) 정의
  • AI 생성 텍스트 청크를 타임스탬프 기반 ID를 포함한 JSON 페이로드로 포맷
  • OpenAI 스트리밍 API를 호출하여 청크를 받고, 각 청크를 응답 스트림에 작성
  • 스트림 종료 시 done 이벤트 전송 및 연결 종료
  • 오류 발생 시 error 이벤트 전송 및 연결 종료
• 클라이언트 측 구현:
  • EventSource를 사용하여 SSE 엔드포인트에 연결
  • onmessage 이벤트 리스너로 JSON 페이로드 파싱 및 내부 버퍼에 내용 추가
  • done 페이로드 수신 시 연결 종료
  • onerror 리스너를 통한 오류 처리 및 리소스 정리
  • processChunk 메서드로 내용 연결 및 UI 업데이트 트리거
• 생산성 및 안정성 확보 방안:
  • Connection Tracking: safeWrite 헬퍼 함수로 응답 종료 및 유효성 검사
  • Cleanup on Disconnect: 클라이언트 연결 종료 시 AI 스트리밍 요청 중단 처리
• 보안 조치:
  • 인증: Authorization 헤더에서 Bearer 토큰 추출 및 JWT 검증
  • Rate Limiting: 사용자 ID 기반 속도 제한 적용
• SSE의 한계: 이진 데이터 스트리밍, 양방향 통신, 구형 브라우저 지원 등에서는 WebSockets이 더 적합할 수 있음을 언급합니다.

개발 임팩트

• 메모리 사용량: 활성 연결당 약 40KB로 효율적입니다.
• 동시 연결 수: 1GB RAM 서버에서 1000-2000개의 연결을 안정적으로 처리합니다.
• 지연 시간: AI 토큰 생성부터 브라우저 렌더링까지 평균 100ms로 낮게 유지됩니다.
• CPU 사용량: 이전 폴링 방식 대비 최대 40% 감소하는 성능 개선을 달성했습니다.

커뮤니티 반응

원문에서 직접적인 커뮤니티 반응 언급은 없으나, 실시간 데이터 스트리밍 및 브라우저 확장 기능 개발자에게 유용한 정보를 제공하여 긍정적인 반응을 기대할 수 있습니다.