[Spring] WebRTC 정리 - 시그널링 서버와 STUN/TURN 서버

handDoc 프로젝트를 하면서 '비대면 진료'를 구현하기 위해 실시간 화상, 음성, 메시지 채팅이 필요했고 우리는 WebRTC를 사용하기로 했다. WebRTC의 대부분이 프론트 기술이라 생각하여 백에서는 크게 구현할 부분이 없다고 생각했었지만 WebRTC에 필요한 시그널링 서버를 구현해야한다는 것을 알게 되었고, 그 과정에서 배운 내용을 정리해보려고 한다. 

 

1) WebRTC란 ?

WebRTC는 웹 기반 실시간 음성, 영상 통신 기술이다. 이 기술은 Google에서 개발되었으며, 브라우저 상에서 플러그인 없이 음성이나 영상을 전송할 수 있게 해준다. P2P 기술을 사용하며, 서버를 거치지 않고 브라우저 간에 직접적연 연결을 가능하게 한다. 

 

WebRTC의 구성 요소 

• 미디어 스트림 : 오디오, 비디오 데이터를 전송하는 역할을 한다. 
• 시그널링 : P2P 연결을 위한 정보 교환 역할을 한다. 
• NAT Traversal : 브라우저가 서로 다른 네트워크에 있을 때, 네트워크 간의 연결을 가능하게 한다. 

WebRTC의 종류

1) Mesh

모든 Peer가 서로 직접 연결해 스트림을 주고 받는 방식으로, 구현이 단순한고 1:1 통신에 적합하지만 참가자가 늘면 대역폭 부담이 커진다. 

 

2) MCU

서버가 여러 스트림을 하나씩 합성해 전달하는 방식으로, 클라이언트 부담은 적지만 서버 부하와 비용이 크다. 

 

3) SFU

모든 Peer가 서버에만 스트림을 보내고 서버가 이를 선택적으로 전달하는 방식으로, 확장성이 좋아 다대다 환경에서 자주 사용한다. 

---

2. 시그널링 서버 (Signaling) 

일단 시그널링 서버에 대해서 알기 위해서는 WebRTC에 대해서 알아야하고, WebRTC에 대해서 알려면 WebSocket을 알아야 하고, WebSocket을 알려면 HTTP를 알아야한다. 

 

HTTP

브라우저와 서버가 소통하는 프로토콜로, 데이터 교환의 가장 기본이 된다. 브라우저가 요청하면 서버가 응답하고 끝나는 단방향 구조를 가지고 있다. 이전 요청을 기억하지 않는 stateless 무상태를 채택하고, 브라우저의 요청에만 응답을 하기 때문에 실시간에 적합하지 않다. 

 

WebSocket 

브라우저와 서버간의 연결이 유지된다. 양방향으로 통신이 가능하며, 브라우저는 물론 서버도 요청없이 변화가 생기면 바로바로 메시지를 보낼 수 있게 된다. 이 연결은 누군가 끊기 전에는 끊어지지 않지만 여전히 중개 서버가 필요하여 서버 성능이나 비용 문제가 존재한다. 

 

📍WebRTC (Web Real Time Communication) 

웹이나 앱에서 별 다른 플러그인 없이 실시간으로 데이터를 교환하며 P2P(Peer to Peer) 실시간 커뮤니케이션이 가능하게 하는 기술이다. 음성, 영상, 데이터 모두 교환이 가능하며 서버를 거치지 않고 브라우저끼리 직접 연결하므로 지연이 적고 실시간성이 강화된다. 하지만, 연결 초기 실정 단계에서는 서버가 꼭 필요하다.

 

시그널링 서버

WebRTC 연결을 맺기 위해 브라우저 간 협상이 필요하다. 이 협상 메시지를 중간에서 전달해주는 서버가 필요한데 이것이 바로 시그널링 서버이다. 이 시그널링 서버는 WebSocket 같은 기술로 구현하는 경우가 많다. 

• 각 브라우저가 생성한 SDP(Session Description Protocol) 정보 교환 
• ICE Candidate (네트워크 정보) 교환 

→ 이 2가지 과정을 통해 최종적으로 브라우저 간 P2P 연결이 성립된다. 

 

시그널링 다이어그램 

 

3) STUN 서버 (Session Traversal Utilities for NAT)

클라이언트가 NAT나 방화벽 뒤에 있을 때, 자신의 공인 IP와 포트를 알아내기 위해 사용하는 서버이다. 

 

4) TURN 서버 (Traversal Using Relays around NAT) 

STUN 만으로는 연결이 불가능할 때 중계 서버(relay) 역할을 해서 P2P 통신을 대신 전달해 주는 서버이다. 

---

참고

https://littlezero48.tistory.com/260

https://musma.github.io/2023/08/21/WebRTC-화상회의-서버-구축.html

https://github.com/littlezero48/Study-Storage/tree/main/WebRTC

https://github.com/sync-without-async/Rehab-BackEnd