[친구하자] WebRTC란 무엇일까?

in ProjectDiary

친구하자 프로젝트 개발 중 Agora WebRTC 통화 구현 전 이해하기!

🧩 1. WebRTC의 정의

WebRTC (Web Real-Time Communication)는 웹 브라우저나 모바일 앱끼리 실시간 음성, 영상, 데이터를 직접 주고받을 수 있게 해주는 오픈소스 기술이다. 즉, 중간 서버를 거치지 않고 클라이언트 간 P2P 통신을 가능하게 만든다.

브라우저끼리 “전화기처럼” 연결된다고 생각하면 쉽다. 별도 플러그인이나 설치 과정 없이 JavaScript API로 바로 통화 기능을 구현할 수 있다.

🌐 2. WebRTC의 주요 구성 요소

구성 요소설명
MediaStream (getUserMedia)사용자의 카메라, 마이크 데이터를 캡처하는 API
RTCPeerConnection실제 P2P 연결을 담당. 네트워크 경로 설정, 코덱 협상, 암호화 등을 수행
RTCDataChannel파일 전송, 채팅 등 실시간 데이터 교환용 채널
ICE (Interactive Connectivity Establishment)NAT(공유기 등) 환경에서도 통신이 가능하도록 IP 후보 탐색 및 연결 시도
STUN / TURN 서버STUN: 공용 IP 확인용 / TURN: 직접 연결이 안될 때 중계 서버 역할

🛰️ 3. 동작 흐름 (Signaling 포함)

  1. Signaling 단계

    • 두 클라이언트가 연결 정보를 교환 (SDP, ICE candidates 등)
    • 이 단계는 WebRTC 외부에서 처리해야 하며, 보통 WebSocket, Socket.io, REST API 등을 사용

  2. P2P 연결

    • 서로의 연결 정보를 받은 뒤 RTCPeerConnection으로 직접 연결 시도
    • STUN 서버로 외부 IP 탐색, 필요 시 TURN 서버를 통한 중계

  3. 미디어 스트림 전송

    • 연결이 완료되면 오디오/비디오/데이터 스트림이 실시간으로 교환됨

⚙️ 4. 왜 Agora를 사용하는가

WebRTC 자체는 “기술 표준”일 뿐, 실서비스에는 보완이 필요하다. 예를 들어,

  • TURN 서버 트래픽 비용과 관리 부담
  • 네트워크 불안정 시 끊김
  • 다자간 통화 (SFU/Mesh 방식) 구현 복잡성

이 때문에 Agora, Twilio, Daily 같은 WebRTC 기반 클라우드 SDK를 이용하면 복잡한 signaling, TURN 운영, QoS 튜닝을 대신 처리해준다.

👉 친구하자 서비스에서도 Agora를 이용해

  • 빠른 1:1 매칭 통화
  • 안정적인 통화 품질
  • 통화 종료 후 감정분석 AI 연결

까지 구현할 수 있다.

여러 SDK를 비교한 후, 가격 성능 서비스 부분에서 Agora를 선택했다.

🔐 5. 보안 측면

  • 모든 WebRTC 통신은 DTLS (Datagram Transport Layer Security) 로 암호화
  • 미디어 스트림은 SRTP (Secure RTP) 로 암호화되어 안전하게 전송
  • HTTPS 환경에서만 동작 (브라우저 정책상 보안 채널 필수)

💡 6. 오늘의 정리

키워드요약
WebRTC브라우저 간 실시간 통신 기술
SignalingSDP/ICE 교환을 위한 외부 과정
STUN/TURNNAT 환경에서도 연결을 돕는 서버
AgoraWebRTC 기반 실시간 통화 SDK
보안DTLS + SRTP 기반 암호화

✍️ 7. 개인 메모

Agora SDK를 직접 사용하며 느낀 점

  • 브라우저 단에서 PeerConnection을 직접 제어하는 것보다 훨씬 안정적이다.
  • 특히 네트워크 품질이 낮은 환경에서 TURN 관리가 자동화되어 있다는 점이 큰 장점.
  • 이후 자체 STUN/TURN 구축을 통해 비용 절감을 검토할 예정.