Home / AI / AI 용어사전 / WebSocket — AI가 실시간으로 답을 스트리밍하는 통신 원리

TERM

WebSocket — AI가 실시간으로 답을 스트리밍하는 통신 원리

게시일 2026-04-30수정일 2026-04-30

On this page

ChatGPT가 글자를 한 자씩 타이핑하듯 출력하는 화면, 그 뒤에는 WebSocket이 있다. 일반 HTTP 요청은 응답 후 연결이 끊기지만, WebSocket은 연결을 유지하며 서버가 먼저 데이터를 밀어낼 수 있다. 실시간 AI 인터페이스의 기반 기술이다.

정의

WebSocket은 클라이언트와 서버 사이에 지속적인 양방향 연결을 제공하는 통신 프로토콜이다. http가 요청(Request) → 응답(Response) 후 연결을 닫는 단발성 구조인 것과 달리, WebSocket은 한 번 연결되면 양측 모두 언제든지 데이터를 보낼 수 있다.

RFC 6455로 표준화되었으며, ws://(비암호화) 또는 wss://(TLS 암호화) 스키마를 사용한다. 브라우저는 기본적으로 WebSocket API를 지원하며, 서버 측에서는 Node.js의 ws 라이브러리, Python의 websockets 패키지 등으로 구현한다.

WebSocket 연결은 HTTP 핸드셰이크에서 시작한다. 클라이언트가 Upgrade: websocket 헤더를 보내면, 서버가 101 Switching Protocols로 응답하며 연결이 WebSocket 프로토콜로 업그레이드된다. 이후 HTTP 오버헤드 없이 경량 프레임 단위로 데이터를 주고받는다.

HTTP vs WebSocket: AI 스트리밍 비교

AI 답변을 받는 방식을 비교하면 차이가 명확해진다.

HTTP (일반 요청-응답):

클라이언트 → [POST /v1/chat/completions] → 서버
            ← [응답 전체 JSON, 10초 후] ←
            (연결 종료)

답변이 완성될 때까지 기다렸다가 한 번에 받는다. 답변이 길수록 빈 화면 시간이 늘어난다.

HTTP SSE (Server-Sent Events) — 현재 대부분의 AI API가 채택한 방식:

클라이언트 → [POST, stream: true] → 서버
            ← "안녕"
            ← "하세요"
            ← "."
            (스트리밍 완료 후 연결 종료)

WebSocket — 양방향 실시간 연결:

클라이언트 ←→ 서버 (연결 유지)
클라이언트 → "질문1"
           ← "답변1 토큰1"
           ← "답변1 토큰2"
클라이언트 → "질문2" (연결 끊지 않고 바로 전송)

OpenAI Realtime API, Claude의 실시간 음성 대화 기능은 WebSocket 방식을 사용한다. 음성 스트리밍처럼 연속적인 양방향 데이터가 필요한 경우다.

구현 예시

// 브라우저에서 WebSocket 연결
const socket = new WebSocket('wss://api.example.com/v1/stream');

socket.onopen = () => {
  socket.send(JSON.stringify({ message: 'AI에게 질문' }));
};

socket.onmessage = (event) => {
  const token = JSON.parse(event.data);
  // 토큰을 받을 때마다 화면에 추가 → 타이핑 효과
  document.getElementById('output').textContent += token.text;
};

socket.onerror = (error) => {
  console.error('WebSocket 오류:', error);
};

socket.onclose = () => {
  console.log('연결 종료');
};

실시간 AI 채팅 인터페이스는 대부분 이 패턴으로 구현된다. onmessage 콜백에서 토큰을 받을 때마다 UI를 업데이트해 타이핑 효과를 만든다.

활용 사례

AI 실시간 채팅: ChatGPT, Claude.ai 웹 인터페이스에서 답변이 스트리밍되는 방식. 사용자 경험상 빠르게 응답하는 것처럼 느껴지고, 첫 토큰까지의 대기 시간(Time to First Token)이 짧아진다.

AI 음성 대화: OpenAI Realtime API는 WebSocket으로 음성 데이터를 실시간 스트리밍한다. 마이크 입력 → 서버 처리 → 음성 출력이 수백 ms 지연으로 이루어지며, 자연스러운 대화 흐름을 가능하게 한다.

실시간 협업 도구: Figma, Notion 같은 협업 도구에서 여러 사용자의 편집 내용이 실시간으로 반영되는 것도 WebSocket 기반이다. AI 공동 편집 기능도 같은 원리로 확장된다.

멀티플레이어 게임 · 라이브 데이터: 위치 동기화, 실시간 채팅, 주식·코인 가격 피드처럼 서버가 클라이언트에게 먼저 데이터를 push해야 하는 모든 경우에 WebSocket이 쓰인다.

정의

WebSocket은 클라이언트와 서버 사이에 지속적인 양방향 통신 채널을 유지하는 프로토콜이다. HTTP와 달리 한 번 연결이 수립되면 어느 쪽이든 먼저 데이터를 보낼 수 있으며, 연결을 명시적으로 닫기 전까지 유지된다. rfc-6455 표준으로 정의돼 있으며, ws:// (비암호화) 또는 wss:// (TLS 암호화) 스킴을 사용한다.

상세 설명

HTTP와의 근본적 차이

기존 http 통신은 요청-응답 모델이다. 클라이언트가 요청을 보내면 서버가 응답하고, 그 즉시 연결이 끊긴다. 다음 데이터가 필요하면 다시 연결을 맺고 요청을 보내야 한다.

이 구조에서 실시간성을 흉내 내려면 폴링(Polling)을 써야 했다. 클라이언트가 0.5초마다 "새 데이터 있어?"라고 서버에 반복 요청하는 방식이다. 서버 부하가 높고 지연도 발생한다.

WebSocket은 이 문제를 근본적으로 해결한다.

HTTP 폴링:
클라이언트 → 서버: "새 데이터?"  (0.5초마다 반복)
서버 → 클라이언트: "없음"
서버 → 클라이언트: "없음"
서버 → 클라이언트: "데이터 있음: ..."

WebSocket:
클라이언트 → 서버: 연결 수립 (한 번)
서버 → 클라이언트: "안녕" (데이터 생기면 바로 push)
서버 → 클라이언트: "하세" (다음 토큰 즉시 전송)
서버 → 클라이언트: "요" (스트리밍 완료)

WebSocket 핸드셰이크

WebSocket 연결은 HTTP 업그레이드 요청으로 시작된다.

클라이언트 → 서버:
GET /chat HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==

서버 → 클라이언트:
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade

101 Switching Protocols 응답 이후부터는 HTTP가 아닌 WebSocket 프레임으로 통신이 전환된다. 이 시점부터 서버는 언제든 클라이언트로 데이터를 밀어줄 수 있다.

SSE와의 비교

AI 스트리밍에는 WebSocket 외에 SSE(Server-Sent Events)도 널리 쓰인다. Claude API와 OpenAI API의 스트리밍 응답이 실제로 SSE 방식을 사용한다.

| 구분 | WebSocket | SSE | |------|-----------|-----| | 방향 | 양방향 | 서버→클라이언트 단방향 | | 프로토콜 | ws://, wss:// | 일반 HTTP | | 연결 관리 | 명시적 | 자동 재연결 | | 주요 활용 | 채팅, 게임, 협업 도구 | LLM 스트리밍, 알림 |

단순히 AI 응답을 스트리밍하는 용도라면 SSE가 더 간단하다. 실시간 채팅처럼 클라이언트도 서버로 데이터를 자주 보내야 한다면 WebSocket이 적합하다.

예시

JavaScript에서 WebSocket 연결을 맺고 AI 응답을 실시간으로 수신하는 예시:

const socket = new WebSocket('wss://your-ai-server.com/stream');

socket.addEventListener('open', () => {
  // 연결 수립 후 메시지 전송
  socket.send(JSON.stringify({
    prompt: "트랜스포머 아키텍처를 설명해줘",
    stream: true
  }));
});

socket.addEventListener('message', (event) => {
  const chunk = JSON.parse(event.data);
  if (chunk.type === 'token') {
    // 토큰 단위로 화면에 붙여넣기
    document.getElementById('output').textContent += chunk.text;
  } else if (chunk.type === 'done') {
    socket.close();
  }
});

socket.addEventListener('error', (err) => {
  console.error('WebSocket 오류:', err);
});

활용 사례

AI 스트리밍 응답: ChatGPT, Claude 웹 인터페이스에서 토큰이 실시간으로 출력되는 경험. 사용자는 전체 응답을 기다리지 않고 즉시 읽기 시작할 수 있음
실시간 AI 코드 어시스턴트: Cursor, GitHub Copilot이 코드 입력 중 실시간으로 제안을 업데이트하는 방식
협업 도구: Figma, Google Docs처럼 여러 사용자가 동시에 편집할 때 변경사항을 실시간 동기화
AI 에이전트 로그 스트리밍: 장시간 실행되는 AI 에이전트의 진행 상황을 실시간으로 UI에 표시
주식·코인 실시간 데이터: 가격 변동을 폴링 없이 서버에서 바로 클라이언트로 푸시

WebSocket — AI가 실시간으로 답을 스트리밍하는 통신 원리

정의

HTTP vs WebSocket: AI 스트리밍 비교

구현 예시

활용 사례

관련 용어

정의

상세 설명

HTTP와의 근본적 차이

WebSocket 핸드셰이크

SSE와의 비교

예시

활용 사례

관련 용어