웹에서 “실시간”은 어떻게 구현될까?

WebRTC, WebSocket, Server-Sent Events 가 필요하다.

유튜브 라이브, 실시간 채팅, 알림 스트림처럼 요즘 웹 서비스에서 실시간 기능은 너무나 자연스럽다.

 

하지만 막상 구현하려고 하면 이런 질문이 생긴다.

• 새로고침 없이 어떻게 바로바로 반영될까?
• HTTP만으로 가능한 걸까?
• 영상과 채팅은 같은 기술을 쓸까?

이 글에서는 MDN 기준으로 웹에서 실시간 기능을 구현할 때 가장 많이 쓰이는 3가지 핵심 기술을 개념 + 간단한 코드 예제까지 함께 정리해본다.

 

웹 실시간 기술, 크게 보면 세 가지

웹에서 “실시간”을 담당하는 대표적인 기술은 다음과 같다.

• WebRTC — 영상·음성 같은 실시간 미디어 통신
• WebSocket — 양방향 실시간 메시지 통신
• Server-Sent Events(SSE) — 서버 → 클라이언트 이벤트 스트림

각각의 목적과 역할이 꽤 명확하게 나뉜다.

 

WebRTC — 브라우저 기반 실시간 미디어 통신

WebRTC(Web Real-Time Communication)는 브라우저 간에 영상, 음성, 데이터를 실시간으로 주고받기 위한 웹 표준이다.

 

주요 사용 사례는 다음과 같다.

• 화상 회의
• 라이브 스트리밍
• 화면 공유
• 음성 통화

WebRTC의 가장 큰 특징은
👉 플러그인 없이 브라우저만으로 실시간 미디어 통신이 가능하다는 점이다.

 

보통 네트워크 지연을 줄이기 위해 Peer-to-Peer(P2P) 방식으로 동작하며, 초기 연결을 위해 시그널링 서버가 함께 사용된다.

 

WebRTC 간단 예제 — 카메라/마이크 스트림 얻기

const stream = await navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true,
});

const video = document.querySelector("video")!;
video.srcObject = stream;

이 코드만으로도

• 사용자 카메라·마이크 접근
• 실시간 영상 출력

까지 가능하다.

 

실제 서비스에서는 이 스트림을 RTCPeerConnection으로 다른 사용자에게 전달한다.

 

WebSocket — 양방향 실시간 메시지 통신

WebSocket은 브라우저와 서버 사이에 지속적인 연결을 유지하면서 데이터를 양방향으로 실시간 전송할 수 있게 해준다.

 

이런 기능에 자주 사용된다.

• 실시간 채팅
• 라이브 댓글
• 게임 상태 동기화
• 실시간 알림

기존 HTTP 요청/응답과 달리, 한 번 연결되면 서버와 클라이언트가 자유롭게 메시지를 주고받을 수 있다.

 

WebSocket 간단 예제

클라이언트

const socket = new WebSocket("wss://example.com/chat");

socket.onmessage = (event) => {
  console.log("받은 메시지:", event.data);
};

socket.onopen = () => {
  socket.send("hello!");
};

서버 (Node.js)

import WebSocket from "ws";

const wss = new WebSocket.Server({ port: 8080 });

wss.on("connection", (ws) => {
  ws.on("message", (message) => {
    ws.send(`echo: ${message}`);
  });
});

이 구조가 대부분의 실시간 채팅 서비스의 기본 형태다.

 

Server-Sent Events — 서버 → 클라이언트 실시간 스트림

Server-Sent Events(SSE)는 서버가 클라이언트에게 지속적으로 이벤트를 푸시하는 방식의 기술이다.

 

특징은 아주 명확하다.

• 통신 방향: 서버 → 클라이언트 (단방향)
• 구현 난이도: 비교적 낮음
• 자동 재연결 지원

주요 사용 사례는 다음과 같다.

• 실시간 알림 피드
• 로그 스트리밍
• 상태 변경 알림

 

SSE 간단 예제

클라이언트

const eventSource = new EventSource("/events");

eventSource.onmessage = (event) => {
  console.log("서버 이벤트:", event.data);
};

서버 (Express)

app.get("/events", (req, res) => {
  res.setHeader("Content-Type", "text/event-stream");
  res.setHeader("Cache-Control", "no-cache");

  setInterval(() => {
    res.write(`data: ${Date.now()}\n\n`);
  }, 1000);
});

단, 클라이언트 → 서버 실시간 전송은 불가능하므로 양방향 통신이 필요하면 WebSocket을 선택해야 한다.

 

언제 어떤 기술을 선택하면 좋을까?

아주 단순하게 정리하면 다음 기준으로 나뉜다.

• 영상·음성·미디어 스트리밍 → WebRTC
• 실시간 채팅·메시지 → WebSocket
• 서버 알림·이벤트 푸시 → Server-Sent Events

실제 서비스에서는 이 기술들을 함께 조합해서 사용하는 경우가 대부분이다.

 

예를 들어

• 영상 스트리밍: WebRTC
• 채팅: WebSocket
• 방송 상태 알림: SSE

 

정리하자면...........

웹에서 실시간 기능은 더 이상 특별한 영역이 아니다.

브라우저는 이미 충분히 강력한 도구들을 제공하고 있다.

중요한 건 기술 자체보다도

• 지연에 민감한가?
• 양방향 통신이 필요한가?
• 구현 복잡도를 감당할 수 있는가?

이 질문에 대한 답을 먼저 정하는 것이라고 한다.

 

참고자료 및 출처 📎

• WebRTC API (MDN)
  https://developer.mozilla.org/ko/docs/Web/API/WebRTC_API
• WebSocket API (MDN)
  https://developer.mozilla.org/ko/docs/Web/API/WebSocket
• Server-Sent Events (MDN)
  https://developer.mozilla.org/ko/docs/Web/API/Server-sent_events