💡 Projects/드로잉 게임 [눈치 코치 캐치!]

[눈치 코치 캐치!] WebRTC 한 방에 정리하기

오늘 ONEUL 2023. 1. 16. 23:59

 

시작하기 전에

이번 프로젝트에서 실시간 게임을 개발하고 있다.
웹 게임이지만 함께 있는 듯한 느낌을 주기 위해 음성 채팅 기능을 고려하게 되었고, WebRTC를 접하게 되었다.
이것만으로 영상 통화도 가능하다고?! 그래서 WebRTC가 뭔데..! 지금부터 차근차근 알아보자.

 

 

WebRTC가 뭔데?

드라이버나 별도의 플러그인 설치 없이 실시간 소통(비디오, 오디오)이 가능하도록 만들어주는 기술.
기본적으로는 P2P (Peer to Peer), 즉 두 단말이 서로 1:1 통신을 하게 되어있다.

웹에서 실시간 미디어 스트림을 송수신할 수 있는 유일한 표준이고 또 유일한 P2P 표준이기도 하다.
WebRTC는 표준임과 동시에 표준을 구현한 오픈소스 프로젝트의 이름이라고 한다.

(사실 프로젝트가 먼저 있었고 표준화는 나중에 되었는데, 통신사와 통신 솔루션 기업이 독점하고 있던 핵심 통신 기술을 구글이 주도해서 오픈소스화 및 표준화를 진행했다고..! 무려 2011년 말에 완료했다고 한다. 갓구글👍)

 

 

WebRTC 특징은 뭐가 있을까?

  • 각각의 기기가 서버의 도움 없이 연결되기 위해 Signaling 서버가 필요하다.
  • P2P 연결이 불가능한 상황을 대비해 TURN 서버가 필요하다.
  • P2P와 UDP 기반의 프로토콜로 현존하는 기술 중 Latency가 가장 짧다.
  • HTTPS가 강제되기 때문에 중간자 공격에 대한 보안이 보장된다.

 

 

우리 생활 속의 WebRTC

  • WebRTC를 이용한 서비스는 1:1, 1:N, N:N 이렇게 크게 3가지 방식으로 사용된다.
  • 1:1 방식 서비스 - 기존의 VoIP(Voice over Internet Protocol) 기술이나 전화서비스를 대체할 수 있다. 대표적으로 카카오톡의 보이스톡, 하이퍼커넥트의 Azar(소셜앱)가 있다.
  • 1:N 방송 서비스 - 요즘 각광받는 라이브 커머스나 라이브 옥션 등 시청자와 소통하는 서비스에서 주로 사용된다.
  • N:N 회의형 서비스 - 화상회의에 주로 사용된다. 스푼라디오, 클럽하우스 같은 서비스는 대표적인 N:N 회의형 킬러 서비스이다.

 

 

그래서 어떻게 P2P가 어떻게 동작하는데?

각각의 웹 브라우저는 다음의 과정들을 거쳐야 한다.

  1. 각 브라우저가 P2P 커뮤니케이션에 동의
  2. 서로의 주소를 공유
  3. 보안 사항 및 방화벽 우회
  4. 멀티미디어 데이터를 실시간으로 교환

자, 여기서 2번과 3번을 브라우저가 스스로 할 수 있을까?
브라우저는 외부에서 접근할 수 있는 주소가 없기 때문에 통신 설정 초기에는 중재자(Signaling 서버)의 역할이 필요하다.

 

 

Signaling은 또 뭔데?

  • Signaling은 통신을 조율할 메시지를 주고받는 일련의 과정이다.
  • 더 자세히 말하면 RTCPeerConnection 통신에 사용할 프로토콜, 채널, 미디어 코덱 및 형식, 데이터 전송 방법, 라우팅 정보와 NAT 통과 방법을 포함한 통신 규격을 교환하기 위해 두 장치의 제어 정보를 교환하는 과정을 의미한다.
  • Signaling을 위한 구체적인 구현 방법과 프로토콜은 WebRTC에 명세되어 있지 않기 때문에, 개발자는 자신에게 맞는 최적의 방법을 선택적으로 적용해야 한다.
  • Signaling 서버를 직접 구축한다면 WebSocket, SSE, Polling과 같은 방법을 적용할 수 있다. (참고로 나는 WebSocket을 적용해서 구현하였다.)

 

 

방화벽과 NAT 트래버셜

  • 보통 public 공유기에는 여러 private IP 주소가 라우팅 되어 있다.
  • private IP를 할당받은 디바이스는 자신의 public 주소를 모른다.
  • 공유기에 연결한 노트북을 가지고 다른 디바이스와 연결하려면? 자신의 public 주소를 알아야 한다.
  • 근데 라우터에 특정 주소나 포트와의 연결을 차단하는 방화벽이 설정되어 있다면?
  • 라우터를 통과해서 연결할 방법을 찾는 과정 = NAT 트래버셜(NAT traversal)

👇 더 자세히 알고 싶다면? 👇

더보기

일반적인 컴퓨터에는 공인 IP가 할당되어 있지 않습니다. 그 원인으로는 방화벽(Firewall), 여러 대의 컴퓨터가 하나의 공인 IP를 공유하는 NAT, 유휴 상태의 IP를 일시적으로 임대받는 DHCP 때문입니다. 이 때문에 단순히 공인 IP만을 알아낸다고 해서, 특정한 사용자를 가리킬 수는 없습니다. 공인 IP뿐만 아니라 해당 네트워크에 연결된 사설 IP 주소까지 알아내야 특정한 사용자를 지정할 수 있게 되죠.

일반적으로는 라우터가 NAT 역할을 합니다. 외부에서 접근하는 공인 IP와 포트 번호를 확인하여 현재 네트워크 내의 사설 IP들을 적절히 매핑시켜주죠. 그러니까 어떤 브라우저 두 개가 서로 직접 통신을 하려면, 각자 현재 연결된 라우터의 공인 IP 주소와 포트를 먼저 알아내야 합니다.

하지만 어떤 라우터들은 특정 주소나 포트와의 연결을 차단하는 방화벽 설정이 되어 있을 수도 있습니다. 이처럼 라우터를 통과해서 연결할 방법을 찾는 과정을 NAT 트래버셜(NAT traversal)이라고 합니다.

📚 출처 재그지그의 개발 블로그

 

 

STUN(Session Traversal Utilities for NAT)

  • NAT 트래버셜 작업을 해주는 게 바로 STUN 서버!
  • STUN 방식은 단말이 자신의 공인 IP 주소와 포트를 확인하는 과정에 대한 프로토콜이다.
  • 즉, WebRTC 연결을 시작하기 전에 STUN 서버를 향해 요청을 보내면, STUN 서버는 NAT 뒤에 있는 peer들이 서로 연결할 수 있도록 공인 IP와 포트를 찾아준다.
  • 이제 노트북은 STUN 서버를 통해 본인의 공인 IP 주소를 알 수 있다.

 

 

TURN(Traversal Using Relay NAT)

  • STUN 서버를 이용하더라도 라우터들의 방화벽 정책이나, 이전에 연결된 적이 있는 네트워크만 연결할 수 있게 하는 제한(Symmetric NAT) 때문에 자기 주소를 찾지 못할 수도 있다.
  • 이때, 대안으로 사용하는 게 TURN 서버!
  • TURN 방식은 네트워크 미디어를 중개하는 서버를 이용하는 것이다. (엄밀히 말하면 P2P 통신이 아니다.)

 

 

Candidate

  • STUN, TURN 서버를 이용해서 획득했던 IP 주소와 프로토콜, 포트의 조합으로 구성된 연결 가능한 네트워크 주소들을 후보(Candidate)라고 부른다.
  • 이 과정은 후보 찾기(Finding Candidate)라고 부른다.
  • 후보들을 수집하면 일반적으로 3개의 주소를 얻게 된다.
    • 자신의 사설 IP와 포트 넘버
    • 자신의 공인 IP와 포트 넘버 (STUN, TURN 서버로부터 획득 가능)
    • TURN 서버의 IP와 포트 넘버 (TURN 서버로부터 획득 가능)
  • 이 모든 과정은 ICE(Interactive Connectivity Establishment)라는 프레임 워크 위에서 이루어진다.

 

 

WebRTC를 구성하는 프로토콜

WebRTC는 크게 4단계를 거쳐 이루어지며, 각 단계마다 사용하는 프로토콜이 다르다.

  • Signaling : SDP (Session Description Protocol)
  • Connection : ICE (Interactive Connectivity Establishment)
  • Security : DTLS (Datagram Transport Layer Security), SRTP (Secure Real-time Transport Protocol)
  • Communicating : RTP (Real-time transport Protocol), SCTP (Stream Control Transmission Protocol), RTCP (Real-time Transport Control Protocol)

 

 

SDP(Session Description Protocol)

  • SDP는 WebRTC에서 스트리밍 미디어의 해상도나 형식, 코덱 등의 멀티미디어 컨텐츠의 초기 인수를 설명하기 위해 채택한 프로토콜이다.
  • 어떤 peer가 미디어 스트림을 교환할 것이라고 제안(offer)을 하면, 상대방으로부터 응답(answer)이 오기를 기다리는 제안 응답 모델(offer/answer)을 갖고 있다.
  • 일반적인 Web에서는 JSON을 사용해 통신하지만 SDP는 Key=value 형태로 데이터를 전송한다.

 

SDP는 이런 모습이다!

 

 

ICE(Interactive Connectivity Establishment)

  • ICE는 2개의 단말이 P2P 연결을 가능하게 하도록 최적의 경로를 찾아주는 프레임워크이다.
  • ICE 프레임워크는 STUN, 또는 TURN 서버를 이용해 상대방과 연결 가능한 후보(Candidate, 연결 가능한 네트워크 주소)들을 갖고 있다.
  • 상대방으로부터 응답(answer)을 받으면, 각자의 peer가 수집한 ICE 후보 중 최적의 경로를 결정하고 협상하는 프로세스가 발생한다.
  • 최적의 ICE 후보가 선택되면, peer 간의 P2P 연결이 완전히 설정되고 활성화된다.
  • 이후 각 peer에 의해 로컬 데이터 스트림의 엔드포인트가 생성되며, 이 데이터는 양방향 통신 기술을 사용하여 최종적으로 양방향으로 전송된다.
  • NAT 보안 이슈로 최선의 ICE 후보를 찾지 못했다면? 폴백으로 세팅한 TURN 서버를 P2P 대용으로 설정한다.(이때는 굳이 P2P로 데이터를 연결하고 전송하는 방법을 알 필요가 없다.)

 

 

WebRTC를 구현하기 위한 서버

Mesh(Peer to Peer)

  • 클라이언트 간의 다중 연결 방식이다.
  • 서버 자원을 사용하지 않는 대신 각 클라이언트의 네트워크 I/O 부하가 높게 발생할 수 있다.
  • 연결해야 할 클라이언트가 많을 경우 부하를 줄일 수 있는 알고리즘 구현이 필요하다.

 

SFU(Selective Forwarding Unit)

  • 서버를 이용하여 클라이언트의 미디어 스트림을 중계하는 역할을 수행하게 한다.
  • 연결된 클라이언트 수만큼의 업로드 트래픽이 발생하는 P2P 방식과 달리 SFU는 업로드 커넥션을 1개만 유지하면 나머지는 서버에서 각 클라이언트로 분배하여 내려준다.
  • 개별 클라이언트는 접속한 클라이언트 수만큼의 영상과 음성을 디코딩해야 한다.
  • 대표적으로 Zoom이 사용하고 있는 구조이다.

 

MCU(Multipoint Contorol Unit)

  • 서버를 이용하여 업로드된 미디어스트림을 하나로 합쳐서 클라이언트에 1개의 미디어스트림을 내려주는 구조이다.
  • P2P와 SFU에서 발생하는 트래픽을 줄일 수 있으나 미디어스트림을 합치는 동작에서 서버에 자원을 많이 소모하게 된다.

 

 

앞으로 이걸 어떻게 구현하지?

WebRTC에 대해 전혀 몰랐고 처음 도전해 보는 기술이기 때문에 여러 시행착오가 있겠지만,
이후에는 최대 8명의 음성채팅 구현을 위해서 어떤 방식을 고민했고, 어떻게 WebRTC를 이용했는지에 대한 내용도 담아보려 한다.

이 글이 누군가에게는 도움이 되었기를!

 

 

 

📚 참고 자료

재그지그의 블로그 - WebRTC는 어떻게 실시간으로 데이터를 교환할 수 있을까?
👉 WebRTC의 전체적인 흐름에 대해 파악하기 좋습니다.

kakao Tech Blog - WebRTC 응용 서비스를 개발하는 2가지 방법
👉 WebRTC의 역사나 다양한 활용 분야에 대해 자세히 설명되어 있습니다.

InSpirit님의 블로그 - WebRTC 개념과 통신방식, 프로토콜
👉 WebRTC의 프로토콜에 대해 자세히 설명되어 있습니다.

Juneyr.dev - 실시간 통화 어떻게 하는거지 : WebRTC 기초
👉 WebRTC가 알기 쉽게 설명되어 있습니다.

 

저작자표시 비영리 변경금지