Chat DIC 프런트엔드 성능 개선기

이 게시물은 SK플래닛의 Chat DIC 사내 프로젝트에서 실시간 대화형 LLM 서비스의 프런트엔드 성능 최적화 기술을 소개합니다.

주요 적용 기술

• SSE(Server-Sent Events)를 활용한 단방향 실시간 스트리밍 처리
• Buffer 적용으로 브라우저 탭 비활성 시 지연 문제 해결
• 가상 DOM 기반의 Windowing 기법으로 렌더링 최적화

개선 효과

• 적은 코드로 안정적이며 자연스러운 실시간 응답 출력 구현
• 탭 전환 시에도 지연 없는 대화 경험 제공
• 대화 길이 증가에도 쾌적한 브라우저 성능 유지

기술적 배경

• WebSocket 대신 SSE를 선택해 통신 단순화 및 브라우저 호환성 확보
• Fetch API를 사용하여 스트리밍 응답을 ReadableStream으로 처리
• react-window 라이브러리를 활용해 렌더링 범위를 동적으로 조절