개발

[AI] 대화형 AI와 백엔드 통신 방법 (WebSocket vs. SSE)

로그뉴 2025. 2. 7. 18:00

1. WebSocket vs SSE 비교

특징WebSocketSSE (Server-Sent Events)
통신 방식 양방향 (full-duplex) 단방향 (server -> client)
연결 유지 지속적인 연결 유지 (클라이언트와 서버가 모두 메시지 전송 가능) 지속적인 연결 유지 (서버에서 클라이언트로만 데이터 전송 가능)
브라우저 지원 대부분의 최신 브라우저 지원 대부분의 최신 브라우저 지원 (IE 지원 X)
재연결 직접 구현 필요 자동 재연결 지원 (EventSource API)
사용 사례 채팅, 온라인 게임, 금융 거래 실시간 알림, 데이터 스트리밍, 로그 업데이트

2. 대화형 AI와의 통신에서 적합한 방식

  • WebSocket이 더 적합한 경우
    • AI가 클라이언트의 입력을 실시간으로 받아야 하고, 결과를 즉시 반환해야 하는 경우 (예: 실시간 채팅 AI, 협업 문서 편집)
    • AI가 사용자의 중간 입력을 실시간 반영하여 동적으로 응답을 생성하는 경우 (예: AI 코딩 도우미)
    • 일반적인 챗봇처럼 AI가 클라이언트의 요청을 받아 응답하는 패턴이 많을 경우
  • SSE가 더 적합한 경우
    • AI가 한 번의 요청에 대해 지속적으로 데이터를 스트리밍하는 경우 (예: ChatGPT처럼 길게 이어지는 답변)
    • 일방적인 데이터 전송이 주된 경우 (예: 뉴스 업데이트, 실시간 알림)
    • 재연결이 중요한 경우 (SSE는 기본적으로 자동 재연결 기능을 제공)

3. 대화형 AI 에서의 적용

AI가 유저와의 대화를 기반으로 추천을 해주거나, 지속적인 이벤트 업데이트가 필요하다면

  • WebSocket: 유저가 여러 가지 조건을 변경하면서 AI의 추천이 계속 바뀌는 경우 적합.
  • SSE: AI가 특정 조건에 맞는 추천을 한 번 생성한 후 지속적으로 스트리밍할 때 적합.

결론

👉 실시간 대화 및 쌍방향 커뮤니케이션이 필요한 경우 → WebSocket
👉 AI 응답이 일방향 스트리밍(단방향 푸시) 형태라면 → SSE

AI가 실시간 대화형 추천 기능을 담당한다면 WebSocket을, 추천 정보를 스트리밍하듯 보여준다면 SSE를 사용하는 게 좋다.

 
 
 

내가 WebSocket 으로 선택한 이유

  1. 사용자가 AI 답변 중에 조건을 수정할 수 있음 → 양방향 통신 필요
    • SSE는 서버에서 클라이언트로만 데이터를 보낼 수 있어서, 사용자가 조건을 바꿀 때마다 새로운 HTTP 요청을 보내야 함.
    • WebSocket을 쓰면 AI가 답변을 보내는 중에도 사용자가 즉시 조건을 수정하고 다시 요청할 수 있음.
    • 즉, 연속적인 요청-응답 구조가 필요하므로 WebSocket이 적합!
  2. AI가 실시간으로 업데이트하면서 보내야 할 수도 있음
    • AI가 "추천을 한 번에 다 생성하는게 아니라, 단계별로 점진적으로 응답을 보내는 방식"이라면?
    • WebSocket을 쓰면 한 번의 연결에서 스트리밍 방식으로 응답을 보낼 수 있음.
    • 반면 SSE는 서버 → 클라이언트 방향이므로, 사용자가 중간에 요청을 수정하려면 새로운 SSE 연결을 만들어야 함.
  3. 사용자 경험 (UX) 개선
    • WebSocket을 쓰면,
      • 사용자가 조건을 변경하면 기존 응답을 즉시 취소하고 새로운 플랜을 받을 수 있음.
      • AI가 실시간으로 상태 업데이트할 수 있어서,
        "지금 추천 생성 중... 🔄" 같은 UI를 쉽게 만들 수 있음.

결론

👉 사용자가 AI 응답 중에도 조건을 수정할 수 있는 경우 → WebSocket이 더 적합!
👉 한 번 요청하면 AI가 일방적으로 최종 결과를 전달하는 경우 → SSE 가능

💡 추천 아키텍처 예시 (WebSocket 사용)

  1. 사용자가 WebSocket 연결 생성 (ws://server/ai-recommend)
  2. 사용자가 추천 요청 ({"action": "request_plan", "criteria": {...}})
  3. AI가 실시간으로 응답을 보냄 ({"status": "processing", "step": 1, "data": {...}})
  4. 사용자가 조건을 변경하면 즉시 새로운 요청을 전송
  5. 서버는 기존 추천을 취소하고 새로운 추천을 보내줌

이렇게 하면 빠르게 응답을 주고받으면서 실시간 인터랙션이 가능한 AI 추천 시스템을 만들 수 있다.