UX를 위해 AI 채팅 반응 속도를 84.87%까지 개선한 방법 😎

AI 채팅의 반응 속도를 개선한 경험을 나눠보려고 합니다.

저희는 '마법의 소라고둥'을 개발하면서, AI가 생성하는 답변을 실시간으로 사용자에게 보여주도록 수정하는 작업을 해보았는데요.

그 결과 사용자가 첫 컨텐츠를 확인하기까지의 시간이 약 85% 개선되었습니다.

그럼 어떤 방법으로 이렇게 개선할 수 있었는지 알아볼까요?

AI 채팅 기능은 server에서 Clova Studio API에 요청을 보내고, 그 응답을 받아 client에 socket 이벤트로 전달해주는 구조로 되어있습니다.

그런데 AI가 답변을 생성하기까지 시간이 걸려, 사용자가 AI의 답변이 모두 생성될 때까지 응답을 보지 못하고 기다려야 한다는 불편함이 있었습니다.

오른쪽 영상을 보면, 사용자는 기다렸다가 완성된 메세지를 한번에 확인하게 되는 것을 볼 수 있습니다.

사용자의 불편함을 stream을 사용해 개선해보았습니다.

기존에는 server가 Clova Studio API 응답을 완전한 문장으로 받아서 이를 한번에 client에게 전달해주는 방식이었다면,
이번에는 stream으로 응답을 받아 server가 stream을 읽어들이면서 token 단위로 client에게 전달해주는 방식으로 개선하고자 하였습니다.

앞의 방식을 적용하기 위해서 Clova API 응답을 stream으로 한번 받아보았는데요.

그런데 받아온 stream을 읽어보니, stream의 데이터 조각인 chunk의 형식이 제각 생각했던 형태와 많이 달랐습니다.

필요한 것은 token인데, 부가적인 정보들이 포함되어 있었고, 하나의 chunk에 데이터 덩이리들이 여러 개가 함께 오거나 중간에 데이터가 잘려서 오는 경우도 있었습니다.

그래서 저희는 응답으로 받은 stream을 token 단위로 변형하는 과정이 필요하다고 판단했습니다.

이 부분은 TransformStream을 활용해 해결할 수 있었습니다.

Web API에서 제공하는 TransformStream을 활용하면 stream에서 각 chunk들을 변형하는 pipe 라인을 추가해 새로운 stream을 생성할 수 있습니다.

원래 chunk를 파싱해서 오른쪽처럼 토큰 단위 chunk로 변형하는 TransformStream 객체를 만들었고, Clova Studio API에서 받아온 stream에 Transform을 pipe 라인으로 연결해서 변형된 stream를 생성해주었습니다.

변형한 stream을 읽어들이면서 token 단위로 client에게 전송하면 오른쪽과 같이 사용자는 실시간으로 메세지가 업데이트되는 것을 확인할 수 있었습니다.

이런 과정을 거쳐서 다음과 같이 개선할 수 있었습니다.

표를 보시면 실제 시간과 체감 시간이 구분되어 있는데, 이 부분은 사용자가 카드를 선택하고 나서 보여지는 애니메이션 효과 덕분에 사용자가 체감하는 시간을 더 짧아졌습니다.

결과적으로 사용자는 카드를 선택하자마자 실시간으로 결과가 업데이트되는 것을 확인할 수 있어 사용자 결험이 크게 개선되었습니다.