AI 이미지 생성 프로젝트 ( AI Seller ) - [8] / 트러블슈팅(SSE)

문제 상황

대량의 이미지(50장) 업로드 및 처리 과정에서 사용자가 작업 진행 상태를 알 수 없는 문제가 발생했습니다

사용자와 개발자 모두 처리 상태를 확인하기 위해 새로고침하거나 개발자 도구를 확인해야 하는 불편함이 있었고, 새로고침 시 요청이 사라지는 문제가 발생하여 이탈율이 높아졌습니다.

 

원인 분석/ 해결 방안

긴 작업 시간 동안 서버에서 진행 상황을 클라이언트에 전달할 방법이 없었습니다. 실시간 양방향 통신이 가능한 WebSocket을 고려했으나, 단순 진행률 전송에는 과도한 기능으로 판단하였습니다. 추가 조사를 통해 서버에서 클라이언트로의 단방향 실시간 통신이 가능한 SSE(Server-Sent Events) 이라는것을 알게 되었습니다

 

개선 결과

SSE를 활용하여 다음과 같은 진행률 전송 구현하였습니다. 이미지 업로드 시작 (10%) 워크플로우 전송 (50%) 결과 대기 (90%) 전송받은 진행률을 프로그레스 바로 시각화하여 사용자에게 표시