SK플래닛 TECH TOPIC · 2025. 11. 01.
Chat DIC - 대화형 LLM 서비스의 프런트엔드 성능 개선기
AI 엔지니어링 브리핑
Chat DIC는 LLM 답변을 실시간으로 보여주면서도 긴 대화와 비활성 탭에서도 빠르고 자연스럽게 작동하도록 프런트엔드를 개선한 사례입니다.
문제 & 배경
- 문제 & 배경: LLM 답변을 실시간으로 표시하는 과정에서 비활성 탭의 출력이 늦어지고, 대화가 길어질수록 화면에 그릴 요소가 많아져 브라우저가 느려지는 문제가 있었습니다.
기술 & 해결책
- 기술 & 해결책: 서버에서 한 방향으로 답변을 보내는 특성에 맞춰 SSE와 Fetch API로 응답을 스트리밍하고, 비활성 탭의 데이터는 Buffer에 모았다가 복귀 시 한꺼번에 출력했으며, react-window의 Windowing으로 화면에 보이는 대화만 렌더링했습니다.
교훈 & 주의점
- 교훈 & 주의점: SSE는 WebSocket보다 구현이 간단하고 실시간 응답에 적합하며, 스트리밍에는 ReadableStream을 지원하는 Fetch API를 사용하고 Buffer와 Windowing을 함께 적용하면 긴 대화에서도 자연스럽고 쾌적한 사용 경험을 유지할 수 있습니다.
함께 읽을 글
내용이 비슷해요내용이 비슷한 글을 먼저 보여드려요. 같은 문제나 해결책을 다룬다는 뜻은 아니에요.