SSE로 AI 지연 시간(Latency) 잡기
AI 자동 완성 기능을 개발했습니다. 하지만 사용자들은 싫어했습니다.
키를 누를 때마다 AI 모델에 요청을 보냈습니다. 사용자는 전체 응답을 받기 위해 2~3초를 기다려야 했습니다. UI가 고장 난 것처럼 느껴졌습니다.
디바운싱(debouncing), 캐싱(caching), 로딩 스피너(loading spinners)를 모두 시도해 보았습니다. 하지만 아무것도 효과가 없었습니다. 핵심 문제는 그대로였습니다. 사용자는 데이터를 확인하기 위해 전체 답변이 나올 때까지 기다려야만 했습니다.
저는 Server-Sent Events(SSE)를 사용하여 응답을 청크(chunk) 단위로 스트리밍함으로써 이 문제를 해결했습니다.
기존의 느린 흐름:
- 사용자가 문자를 입력함
- 300ms 디바운싱
- HTTP POST 요청
- 서버가 AI API 호출 (1~2초)
- 서버가 전체 응답을 반환
- 클라이언트 렌더링
사용자는 2초 동안 아무것도 볼 수 없었습니다.
폴링(polling)도 고려했지만, 오버헤드가 너무 큽니다. 웹소켓(WebSockets)도 가능하지만, 단방향 스트림에는 너무 무겁습니다.
저는 SSE를 선택했습니다. SSE는 서버가 하나의 긴 연결을 통해 텍스트 이벤트를 보내는 표준 방식입니다.
AI에 SSE가 적합한 이유:
- 단방향(서버에서 클라이언트로) 방식임
- 텍스트 기반의 JSON 청크를 사용함
- 재연결을 자동으로 처리함
- 추가 라이브러리가 필요 없음
결과는 즉각적이었습니다. 첫 단어가 300ms 이내에 나타났습니다. 사용자는 제안이 글자 하나하나씩 만들어지는 것을 볼 수 있었습니다.
지표가 개선되었습니다:
- 첫 시각적 응답 시간: 2.1초 $\rightarrow$ 0.3초
- 사용자 참여도: 40% 증가
- 사용자 불만: 0건
스트리밍은 인지(perception)의 문제입니다. 느리더라도 점진적으로 진행되는 UI가, 빠르지만 정적인 UI보다 낫습니다. 사용자는 전체 텍스트 블록이 나올 때까지 기다리는 것보다 답변이 단어별로 나타나는 것을 보는 것을 선호합니다.
AI 기능이 느리게 느껴진다면, 먼저 스트리밍을 시도해 보세요.
Optional learning community: https://t.me/GyaanSetuAi