Chat DIC - 대화형 LLM 서비스의 프런트엔드 성능 개선기

간단 소개

SK플래닛 Chat DIC 프런트엔드는 LLM 서비스의 실시간 대화 성능을 위해 SSE, Buffer, Windowing 기법을 적용하여 최적화했습니다.

AI Summary

실시간 스트리밍 처리: SSE 도입

Chat DIC는 LLM 서비스의 단방향 응답 특성을 고려하여 WebSocket 대신 **SSE(Server-Sent Events)**를 채택했습니다.
SSE는 HTTP 기반으로 구현이 쉽고, 브라우저의 자동 재연결 및 Polling 방식 대비 효율적인 트랜잭션 처리가 가능합니다.
Fetch API와 ReadableStream 객체를 활용하여 서버의 text/event-stream 응답을 파싱하고 실시간으로 출력합니다. 성능 최적화: Buffer 및 Windowing
비활성 탭에서 LLM 스트리밍 응답 렌더링 지연 문제를 해결하기 위해 Buffer를 도입, 탭 활성화 시 일괄 출력합니다.
대화가 길어질 때 DOM 노드 증가로 인한 성능 저하를 막기 위해 Virtualization 기반 Windowing 기법을 적용했습니다.
react-window 라이브러리를 사용하여 화면에 보이는 요소만 렌더링하고, DOM 노드 수를 일정하게 유지하여 브라우저 자원 사용량을 줄였습니다. 결론 및 목표
Chat DIC는 SSE, Buffer, Windowing 기법을 통해 실시간성, 확장성, 사용성을 높여 대규모 언어 모델과 사용자 간의 효율적인 대화 경험을 제공합니다.