SK플래닛, Chat DIC 프런트엔드 성능 개선기: SSE 스트리밍과 가상화 기법 적용

SK플래닛 Data Infrastructure팀이 개발한 SQL Assistant 및 Table 메타 검색 시스템 Chat DIC의 프런트엔드 성능 개선 사례를 공개했다. React와 Vite 기반의 이 서비스는 실시간 대화형 LLM 특성에 맞춰 SSE(Server-Sent Events), Buffer, Virtualization 기술을 도입해 사용자 경험을 최적화했다.

SSE 채택 및 스트리밍 처리 LLM 응답은 서버에서 클라이언트로의 단방향 통신이므로, 복잡한 양방향 통신인 WebSocket 대신 SSE를 채택했다. SSE는 브라우저가 자동 재연결을 처리하고 HTTP/2와 호환성이 높아 구현 난이도가 낮다. axios는 ReadableStream을 반환하지 않아 스트리밍에 부적합하므로, JavaScript 기본 ReadableStream API를 사용해 text/event-stream 형식의 데이터를 파싱했다.

Buffer 적용으로 렌더링 지연 해소 탭 비활성화 시 브라우저의 리소스 제한(Throttling)으로 인해 서버 응답 렌더링이 지연되는 문제를 해결했다. 탭이 비활성화된 동안 들어오는 스트리밍 데이터를 bufferRef에 임시 저장하고, 탭이 다시 활성화되면(visibilitychange 이벤트) 내용을 일괄 출력하는 방식을 적용했다. 이를 통해 탭 복귀 시에도 끊김 없이 자연스럽게 대화가 이어지는 경험을 제공한다.

Virtualization으로 DOM 노드 최적화 대화가 길어질수록 DOM 노드 수 증가로 인한 렌더링 속도 저하를 방지하기 위해 react-window 라이브러리를 활용한 Windowing 기법을 적용했다. 화면에 보이는 UI 요소만 실제로 렌더링하고 나머지는 제거하며, useDynamicRowHeight Hook과 defaultRowHeight: 50 설정으로 메시지 길이에 따라 행 높이를 동적으로 조정했다. 결과적으로 DOM 노드 수가 일정 수준으로 유지되어 자원 사용량이 대폭 감소하고 스크롤 성능이 향상되었다.