길리랩blog

WebRTC로 구현하는 브라우저 실시간 통신

WebRTC의 브라우저 기반 실시간 통신 구조와 MediaStream, RTCPeerConnection, DataChannel, STUN·TURN·ICE의 역할을 정리한다.

2026-08-14 · 최초 발행 2025-08-10

브라우저에서 피어 연결을 만드는 방식

WebRTC(Web Real-Time Communication)는 별도 플러그인이나 소프트웨어 설치 없이 브라우저 사이의 실시간 통신을 구현하는 개방형 표준이다. HTML5와 JavaScript API를 기반으로 음성, 영상, 일반 데이터를 공유할 수 있으며, 웹 애플리케이션의 실시간 커뮤니케이션 기반으로 사용된다.

주요 브라우저인 Chrome, Firefox, Safari, Edge 등에서 지원하며, 저지연 스트리밍과 P2P 데이터 교환을 제공한다. 표준은 W3C와 IETF가 관리한다.

미디어·피어 연결·데이터 전송 API

카메라와 마이크에서 스트림을 얻는 역할은 MediaStream(getUserMedia)이 맡는다.

// 카메라와 마이크 접근 예제
navigator.mediaDevices
  .getUserMedia({ audio: true, video: true })
  .then((stream) => {
    const videoElement = document.querySelector("video");
    videoElement.srcObject = stream;
  })
  .catch((error) => {
    console.error("미디어 접근 오류:", error);
  });

RTCPeerConnection은 브라우저 간 오디오·비디오 연결을 구성하고 유지한다. 이 객체에는 NAT와 방화벽 통과를 위한 ICE 프레임워크가 포함된다.

// RTCPeerConnection 생성 예제
const configuration = {
  iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
};
const peerConnection = new RTCPeerConnection(configuration);

// 로컬 스트림 추가
localStream.getTracks().forEach((track) => {
  peerConnection.addTrack(track, localStream);
});

// 원격 스트림 수신 처리
peerConnection.ontrack = (event) => {
  const remoteVideo = document.querySelector("#remoteVideo");
  if (remoteVideo.srcObject !== event.streams[0]) {
    remoteVideo.srcObject = event.streams[0];
  }
};

미디어 이외의 텍스트, 파일, 게임 데이터는 RTCDataChannel로 피어 간 전송할 수 있다.

// 데이터 채널 생성 예제
const dataChannel = peerConnection.createDataChannel("myDataChannel");

dataChannel.onopen = () => {
  console.log("데이터 채널 연결됨");
  dataChannel.send("안녕하세요!");
};

dataChannel.onmessage = (event) => {
  console.log("메시지 수신:", event.data);
};

NAT와 방화벽을 넘는 연결 협상

브라우저끼리 직접 통신하려면 각 피어가 도달 가능한 네트워크 경로를 찾아야 한다. WebRTC는 STUN, TURN, ICE, SDP를 조합해 이 과정을 처리한다.

STUN(Session Traversal Utilities for NAT)은 NAT 환경의 클라이언트가 공인 IP 주소와 포트를 파악하도록 돕는다. 클라이언트가 STUN 서버에 요청하면 서버가 공인 네트워크 정보를 응답한다.

직접 연결이 불가능하면 TURN(Traversal Using Relays around NAT)이 대체 경로가 된다. TURN 서버가 중계 역할을 수행하므로 P2P 연결을 만들 수 없는 상황에서도 통신할 수 있지만, 대역폭 사용량이 많아 일반적으로 마지막 수단으로 사용된다.

ICE(Interactive Connectivity Establishment)는 STUN과 TURN을 포함한 여러 방식을 사용해 P2P 연결에 적합한 경로를 정한다. 연결 후보인 ICE Candidate를 수집하고 시험해 NAT와 방화벽을 통과할 연결 방식을 선택한다.

SDP(Session Description Protocol)는 미디어 세션 초기화에 필요한 매개변수를 기술한다. 피어의 미디어 형식, 코덱, 해상도 등을 담고 Offer/Answer 모델로 세션 특성을 협상한다.

Offer와 Answer이 오가는 연결 과정

시그널링 서버는 Offer, Answer, ICE 후보를 피어 사이에 전달한다. 실제 미디어와 데이터는 P2P 연결이 수립된 뒤 브라우저 간에 교환된다.

⤢✕STUN/TURN 서버브라우저 B시그널링 서버브라우저 ASTUN/TURN 서버브라우저 B시그널링 서버브라우저 AgetUserMedia로 로컬 미디어 액세스getUserMedia로 로컬 미디어 액세스ICE 후보 수집 요청공인 IP 정보 반환ICE 후보 수집 요청공인 IP 정보 반환createOffer 생성setLocalDescriptionOffer SDP 전송Offer SDP 전달setRemoteDescriptioncreateAnswer 생성setLocalDescriptionAnswer SDP 전송Answer SDP 전달setRemoteDescriptionICE 후보 전송ICE 후보 전달ICE 후보 전송ICE 후보 전달P2P 연결 수립미디어/데이터 스트림 교환

통신 경로에 적용되는 보안

WebRTC는 설계 단계부터 보안을 고려한다. 모든 WebRTC 컴포넌트는 DTLS(Datagram Transport Layer Security)와 SRTP(Secure Real-time Transport Protocol)를 사용해 암호화된 통신을 제공한다.

시그널링 메커니즘은 일반적으로 SSL/TLS로 보호된 HTTPS 연결에서 수행된다. 카메라와 마이크 접근에는 명시적인 사용자 동의가 필요하며, RTCPeerConnection은 DTLS-SRTP로 피어 간 인증을 제공한다.

서비스에서 만나는 WebRTC

화상 회의 솔루션에서는 Zoom, Google Meet, Microsoft Teams 등이 WebRTC 기술을 활용하며, 웹 기반 클라이언트에서는 플러그인 없이 회의에 참여할 수 있다.

원격 의료에서는 환자와 의사 사이의 실시간 화상 상담에 활용된다. 저지연 통신은 긴급 상황에서 신속한 대응을 돕는다.

웹사이트에 내장된 실시간 채팅과 화상 상담도 적용 대상이다. 사용자는 별도 앱을 설치하지 않고 브라우저에서 고객 지원을 받을 수 있다.

온라인 교육 플랫폼에서는 실시간 화상 강의와 학습 도구에 쓰이며, 스크린 공유와 화이트보드 같은 교육 기능을 지원한다. 브라우저 기반 멀티플레이어 게임, 실시간 미디어 공유, 협업 플랫폼도 WebRTC의 활용 영역이다.

운영 환경에서 남는 제약

브라우저별 지원 수준은 동일하지 않으며, 모바일 브라우저 지원은 데스크톱보다 제한적일 수 있다. 기업 네트워크나 방화벽 환경에서는 연결 문제가 발생할 수 있다.

다자간 화상 회의처럼 참여자가 많아지는 상황에서는 추가 서버 인프라가 필요하다. 고화질 비디오 통신에는 상당한 대역폭도 요구된다.

확장되는 실시간 웹 통신의 범위

WebRTC는 AV1 등 효율적인 비디오 코덱 지원을 통해 품질 향상이 예상된다. WebRTC-NV(Next Version)는 개선된 성능과 기능을 제공하는 차세대 WebRTC로 언급된다.

5G 네트워크와의 결합, 실시간 가상현실 및 증강현실 애플리케이션 적용, 스마트 홈과 산업용 IoT 기기 연결도 확장 방향에 포함된다.

WebRTC실시간 통신P2P브라우저 API네트워크