WebRTC + SIP 게이트웨이: 브라우저에서 바로 전화 걸기

브라우저에서 바로 전화를 걸 수 있으면 좋겠다 — 이 생각 해본 적 있으신가요?

CRM 화면에서 고객 정보를 보다가, 별도의 전화 앱이나 소프트폰 없이 브라우저의 버튼 하나로 바로 전화를 거는 겁니다. 해외에서는 Twilio의 Client SDK로 이미 많이 쓰는 패턴인데, 한국에서는 070 번호 연동이 안 돼서 직접 구축해야 했습니다.

WebRTC와 SIP 게이트웨이를 연결하면 됩니다. 원리는 간단한데, 한국 환경에서의 삽질 포인트가 꽤 있습니다.

WebRTC와 SIP, 뭐가 다른가

WebRTC: 브라우저의 실시간 통신

WebRTC(Web Real-Time Communication)는 브라우저 간 음성/영상을 P2P로 주고받는 표준입니다. Chrome, Firefox, Safari 모두 지원하고, 별도 플러그인 설치가 필요 없습니다. Zoom, Google Meet 등이 WebRTC 기반입니다.

하지만 WebRTC만으로는 일반 전화(PSTN)에 연결할 수 없습니다. WebRTC는 브라우저끼리 통신하는 프로토콜이고, 전화망은 SIP/RTP라는 다른 프로토콜을 씁니다.

SIP: 전화망의 프로토콜

SIP(Session Initiation Protocol)는 인터넷 전화의 표준입니다. SIP API 한국 가이드에서 자세히 다뤘는데, 한국 070 번호는 모두 SIP 기반으로 동작합니다. 전화를 걸고 받으려면 SIP 서버(FreeSWITCH, Asterisk 등)를 통해 통신사 SBC에 연결해야 합니다.

게이트웨이: 두 세계를 잇는 다리

WebRTC ↔ SIP 게이트웨이는 브라우저의 WebRTC 신호를 SIP으로 변환하고, SIP의 응답을 다시 WebRTC로 변환하는 중간 다리입니다. 이걸 통해 브라우저에서 070 번호로 직접 전화를 걸 수 있게 됩니다.

아키텍처 구성

전체 흐름

┌───────────┐     WebRTC     ┌──────────────────┐     SIP/RTP     ┌─────────────┐
│  브라우저   │ ◄──────────► │  WebRTC-SIP GW    │ ◄────────────► │  SIP 트렁크   │
│  (Chrome)  │   SRTP/DTLS   │  (미디어 변환)     │   SRTP/RTP     │  (통신사 SBC) │
└───────────┘               └──────────────────┘               └──────┬──────┘
                                                                      │ PSTN
                                                                ┌─────▼─────┐
                                                                │  전화 상대방 │
                                                                └───────────┘

AI 전화 시스템 아키텍처에서 설명한 5단계 파이프라인의 SIP Gateway 앞에 WebRTC 레이어를 하나 더 얹는 구조입니다.

시그널링 서버

WebRTC 연결을 수립하려면 시그널링 서버가 필요합니다. 브라우저가 SDP(Session Description Protocol) offer를 보내면, 게이트웨이가 이를 SIP INVITE로 변환합니다. 응답이 오면 반대로 SIP 200 OK를 SDP answer로 변환해서 브라우저에 전달합니다.

미디어 처리

WebRTC는 DTLS-SRTP로 암호화된 미디어를 사용하고, 한국 SIP 트렁크는 SRTP 또는 평문 RTP를 사용합니다. 게이트웨이에서 이 암호화 방식을 변환해야 합니다. 코덱도 다를 수 있는데, WebRTC는 주로 Opus 코덱을 쓰고 SIP은 G.711 (PCMA/PCMU)을 많이 씁니다. 트랜스코딩이 필요합니다.

한국 환경에서의 주의점

NAT 트래버설

한국 ISP들은 대부분 NAT 환경이고, 일부는 Symmetric NAT라서 STUN만으로는 연결이 안 됩니다. TURN 서버를 반드시 구축해야 합니다. TURN 서버 없이 "테스트에서는 됐는데 실제 환경에서 안 된다"는 경우의 90%가 NAT 문제입니다.

한국 통신사 SBC 호환성

한국 통신사 SBC(Session Border Controller)는 SDP 협상에서 까다로운 경우가 많습니다. 070 번호 API에서도 언급했듯이, SDP offer의 코덱 순서나 ICE candidate 형식에 민감하게 반응합니다. 패킷 덤프(tcpdump, Wireshark)를 떠가면서 디버깅해야 하는 경우가 자주 생깁니다.

SRTP 필수

한국 개인정보보호법상 음성 통화 데이터도 암호화 전송이 권장됩니다. AI 전화 보안 컴플라이언스에서 다뤘듯이 SRTP 암호화는 선택이 아니라 필수입니다. WebRTC 쪽은 기본적으로 DTLS-SRTP를 사용하므로, SIP 쪽도 SRTP를 활성화해야 엔드투엔드 암호화가 보장됩니다.

직접 구축 vs API 활용

직접 구축하려면

FreeSWITCH의 mod_verto나 Opeansips + RTPEngine 조합으로 WebRTC-SIP 게이트웨이를 구축할 수 있습니다. 하지만 SIP 트렁크 계약, SRTP 설정, TURN 서버 운영, 코덱 트랜스코딩까지 직접 해야 합니다. SIP API 한국 가이드에서 경험담을 공유했는데, 최소 1~2주의 삽질이 필요합니다.

API로 해결하기

ClawOps API를 사용하면 SIP 인프라, 070 번호, WebSocket 기반 음성 스트리밍을 제공하므로 별도의 SIP 게이트웨이 구축 없이 브라우저에서 전화 기능을 구현할 수 있습니다.

// 브라우저에서 전화 걸기 (예시)
const response = await fetch('https://api.claw-ops.com/v1/accounts/{id}/calls', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    to: '01012345678',
    from: '070-1234-5678',
    webhookUrl: 'https://your-server.com/status'
  })
});

SIP 트렁크 계약, NAT 트래버설, 코덱 변환 — 전부 ClawOps가 처리합니다. 개발자는 브라우저 UI와 비즈니스 로직에만 집중하면 됩니다.

결론

WebRTC + SIP 게이트웨이를 활용하면 브라우저에서 바로 070 전화를 걸고 받을 수 있습니다. CRM, 관리자 대시보드, 고객 지원 도구에 전화 기능을 네이티브로 통합할 수 있다는 뜻입니다. 다만 한국 환경에서는 NAT, SBC 호환성, SRTP 등의 이슈를 반드시 고려해야 합니다.

직접 구축이 부담스럽다면 ClawOps의 전화 인프라 API로 빠르게 시작할 수 있습니다. 무료 Trial로 브라우저 전화를 직접 테스트해보세요.

참고 링크

• ClawOps — AI 전화 에이전트 플랫폼
• W3C WebRTC 표준 스펙
• IETF RFC 7118 — SIP over WebSocket

https://claw-ops.com