실시간 영상 통신을 안정적으로 서비스하는 것은 생각보다 복잡했습니다. 특히 네트워크 환경이 불안정한 해외 사용자를 대상으로 할 경우, 그 어려움은 더 커집니다.

이번 글에서는 기존 WebRTC 기반 1:1 연결 구조에서 Agora RTC SDK로 전환하게 된 계기와, 그 과정에서 네트워크 품질 측정과 Agora 구조를 소개하고자 합니다.

왜 Agora SDK 였을까?

기존 WebRTC 기반 연결 구조는 다음과 같은 문제점을 가지고 있었습니다.

  • STUN/TURN 서버 인프라 구축 비용 증가
  • 해외 네트워크 접속 불안정
  • 연결 전 품질 측정의 어려움

👉 이전 글: 해외 사용자 대상 WebRTC 연결, 어떻게 진단했을까?

초기에는 Sendbird 또한 후보군에 포함되어 있었습니다.
당시 팀원들과의 기술 검토 회의에서는 다음과 같은 논의가 오갔습니다:

  • Sendbird는 채팅과 푸시 알림 중심으로 강점을 갖고 있고,
  • 반면 Agora는 영상 연결 자체에 특화된 SDK이며, 특히 가상 배경 처리 / 화면 공유 / 네트워크 품질 측정 API 등 영상 통신의 핵심 기능에 집중된 구조
  • 실제로 Agora의 VirtualBackgroundExtension은 우리가 요구한 가상 배경 적용 기능을 공식 지원하고 있었고, 다자간 영상 통화 안정성도 검증된 상태였습니다

이러한 점에서 Agora가 우리 프로젝트의 핵심 요구사항에 더 적합하다고 판단하여 최종적으로 선택하게 되었습니다.

팀원들과 생각한 AgoraSDK의 장점

Agora는 단순한 P2P 연결을 넘어서 다음과 같은 강점을 제공합니다.

  • Cloud 기반 인프라: TURN 서버 증설 없이 1:N 연결 가능
  • 적응형 스트리밍: 네트워크 품질에 따라 자동 화질 조정
  • 연결 품질 측정 API 제공: network-quality 이벤트를 통해 실시간 네트워크 상태 모니터링
  • 화면 공유, 가상 배경 등 기능 내장
  • 자체 어드민 페이지 제공으로 실시간 이슈 대응

Agora 연결 흐름 요약

Agora SDK의 기본 연결 흐름은 다음과 같습니다.

  1. 오디오 및 비디오 트랙 생성
  2. 채널 및 토큰을 기반으로 조인
  3. 트랙 publish
  4. 원격 사용자 subscribe
// 1. 트랙 생성
const [micTrack, camTrack] = await AgoraRTC.createMicrophoneAndCameraTracks();

// 2. 채널 조인
await agoraClient.join(APP_ID, channel, token, uid);

// 3. publish
await agoraClient.publish([micTrack, camTrack]);

// 4. remote user subscribe
agoraClient.on("user-published", async (user, mediaType) => {
  await agoraClient.subscribe(user, mediaType);
});

실제 구현에서는 enableDualStream, volume-indicator, network-quality 등 이벤트를 함께 활용해 사용자 경험을 개선하고 있습니다.

네트워크 품질 테스트 hook 구성

기존 WebRTC 기반 서비스에서는 영상 연결 네트워크 품질 진단 기능이 없었습니다. 이로 인해 연결 후 끊김이나 오류가 발생하고, 사용자 불만이 증가하는 문제가 있었습니다.

이를 해결하기 위해 Agora SDK를 기반으로 다음과 같은 네트워크 품질 진단 전용 훅을 구현했습니다.

  • 네트워크 품질을 실시간 확인하고, 품질이 나쁠 경우 사용자에게 경고
  • uplink/downlink 모두 확인
  • 5초 내로 진단 완료 → 자동 연결 종료
구성 요소설명
uplinkClient로컬 트랙 publish 전용 클라이언트
downlinkClient원격 사용자 subscribe 전용 클라이언트
microphoneTrack, cameraTrack테스트용 로컬 트랙
handleConnectionnetwork-quality 이벤트 핸들러
closeConnection5초 후 자동 종료 처리

useNetworkCheck.ts

const useNetworkCheck = () => {

  ... // 생략

  const uplinkClient = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
  const downlinkClient = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });

  // 트랙 생성 및 채널 조인
  const [mic, cam] = await AgoraRTC.createMicrophoneAndCameraTracks();
  await uplinkClient.join(APP_ID, channelName, token, "uplink");
  await downlinkClient.join(APP_ID, channelName, token, "downlink");

  // 네트워크 품질 체크 핸들러
  uplinkClient.on("network-quality", handleConnection);
  downlinkClient.on("network-quality", handleConnection);

  ... // 생략

  const handleConnection = ({
    uplinkNetworkQuality,
    downlinkNetworkQuality,
  }) => {
    if (uplinkNetworkQuality > 3 || downlinkNetworkQuality > 3) {
      connectionRef.current = "fail";
    } else {
      connectionRef.current = "success";
    }
  };

  return {...}

};

useNetworkCheck.ts hook을 도입함으로써, 다음과 같은 효과를 얻었습니다:

  • 영상 통화 단계에서 사용자에게 실간 문제를 안내할 수 있게 됨
  • 문제 발생 시 연결 중단 후 안내 메시지 출력
  • 고객 신뢰도 및 진료 품질 모두 개선

Agora Admin을 통한 품질 분석

Agora의 Admin Console에서는 실제 통화 후 다음과 같은 품질 데이터를 시각적으로 분석할 수 있습니다.

  • 타임라인에서는 각종 이벤트들을 시간대별로 확인할 수 있습니다.

  • Sender/Receiver별, Audio/Video별 품질 추이도 확인할 수 있습니다.

  • ㄴ 에러가 발생하면 빨간 경고선, bitrate 하락, packet loss 등의 지표가 시각적으로 드러납니다.

agora network

마무리하며

WebRTC에서 Agora로 전환하며 WebRTC는 유연하지만, 다자간 연결과 글로벌 품질 보장을 위해서는 인프라 확장이 필수였고, 이는 유지보수 부담과 불확실성을 동반했습니다.

Agora는 다음과 같은 점에서 큰 도움이 되었습니다:

  • Cloud 인프라 기반의 안정적인 연결
  • 영상 중심 기능(가상 배경, 화면 공유, 네트워크 측정) 지원
  • 품질 테스트, 트랙 관리, 화질 조정 등 통합 관리 구조

또한 팀 회의를 통해 기술 비교 → 요구사항 정의 → 직접 PoC 테스트 과정을 거치며, 기술 선택에 대한 명확한 기준과 확신을 갖게 된 것도 큰 의미가 있었습니다.