1. 코로나 시대에서의 WebRTC
저는, 회사 업무 시간에 절대로 글을 쓰지 않으며, 모든 글은 주말 또는 휴가 중에 작성합니다. 또한, 최근에 회사 업무로 WebRTC 기술을 잠시 검토했지만, 회사 업무 관련 내용은 회사의 허락 없이 절대 작성하지 않습니다. 회사 업무와 별개로, 일반적이고 개인적인 생각으로 작성한 글입니다.
Overview
작년 코로나 이후로, 필자는 계속 재택근무를 하고 있는데, 거의 매일 화상 회의를 하고 있다. 코로나가 당장 없어지지 않는다면 집에서 화상 회의로 팀원들과 업무 회의를 하는 삶은 당분간 지속될 것이다. 화상 회의 시 가장 많이 사용하는 서비스는 구글 Meet, Zoom인데, 이런 화상 회의 서비스들은 영상 및 음성 데이터를 통신할 때 어떤 기술을 사용할까?
이 글에서는, 화상 회의 서비스의 핵심 기술인 WebRTC에 대해서 소개할 예정이며, 화상회의 서비스를 직접 구축하면서 상세하게 기술 검토를 할 예정이다.
필자의 글이 항상 그랬듯이 생각의 흐름대로 작성한 글이라서 매우 지루하고 재미없는 글이 될 것이다. 게다가, WebRTC에 대한 상세 스펙 또한 상세하게 다루지는 않을 예정이다. 관심 있는 개발자는 레퍼런스를 직접 찾아보길 바라며... 가벼운 마음으로 편하게 읽어주길 바란다. WebRTC를 잘 아는 개발자는 필자의 글을 굳이 안 읽어도 될 것이다.
목차
[이번글] 1. 코로나 시대에서의 WebRTC
[다음글] 2. 화상 회의 서비스를 위한, WebRTC 개요
[미정] 3.WebRTC 시그널링 서버 구축 (스프링부트 기반의 WebSocket 서버)
[미정] 4.WebRTC 화상 회의 서비스 완성 (Vue.js & Nginx 웹서버)
잘못된 내용이 있다면 제보 부탁드립니다!
1. 코로나 시대에서의 WebRTC
1장에서는 WebRTC 사례에 대해서 살펴보겠다. WebRTC에 대한 상세 스펙이 궁금한 개발자는, WebRTC 문서를 참고하길 바란다.
코로나 시대에서의 재택근무, 화상 회의 서비스
1장의 제목을 "코로나 시대에서의 WebRTC"라고 지었다. 어그로를 끌려고 코로나 관련 제목으로 정한 것이 아니다. 실제로 우리는, 코로나 시대에서 WebRTC를 가장 많이 사용하고 있다. 우리는 거의 매일 화상회를 하며, 만날 수 없는 가족들과 영상통화를 한다. 화상회의 또는 영상통화에서 가장 많이 사용하는 기술이 바로 WebRTC이다. 대표적인 화상 회의 서비스는 Zoom과 구글 Meet이며, 대표적인 영상통화 서비스는 페이스북 메신저이다. 구글 Meet, Zoom, 페이스북 모두 영상 및 음성 데이터 전송 시 WebRTC를 사용한다.
WebRTC는 구글이 오픈소스로 처음 만들었고 W3C에서 초안을 제시한 기술 스펙으로, 플러그인 설치 없이 실시간으로 통신할 수 있도록 설계된 API이다. 음성 통화, 영상 통화, P2P 파일 공유 등 다양한 사례에서 사용이 된다.
구글 Meet 을 한 번도 사용해본 적이 없다면, 이 글을 읽기 전에 구글 Meet 를 먼저 사용해보고 돌아오길 바란다. 구글 Meet 은 PC(또는 노트북)에서 "크롬 브라우저"를 사용하면 별도의 소트프웨어 설치 없이 간편하게 화상 회의를 사용할 수 있다. (참고로, 다른 브라우저에서도 가능하지만, 크롬에 최적화된 서비스이다.) iOS 또는 안드로이드 OS 에서는 구글 Meet 앱을 설치하면 모바일에서도 간편하게 화상 회의에 접속할 수 있다.
Google Meet크롬 브라우저에서는 URL 입력창에 "chrome://webrtc-internals/" 를 입력하면, WebRTC 통신을 상세하게 확인할 수 있다.
(1장에서는 WebRTC에 대한 사례에 대해서만 소개하며, WebRTC에 대한 상세한 스펙은, 2장 이후에 다룰 예정이다.)
어쨌든, 구글 Meet 은 웹브라우저 및 모바일에서 화상 회의를 간편하게 사용할 수 있는데, 카메라에 의한 영상 정보와, 마이크에 의한 음성 정보를, WebRTC 스펙에 맞게 통신하게 된다. 이때, 중요한 특징은, 서로의 장비(웹브라우저, 모바일)에서 P2P 방식으로 직접 데이터를 직접 전송한다. 별도의 서버를 통해서 전송할 필요가 없다.
물론, 위 그림처럼 간단하지는 않다. 직접 통신하기 위해서는 서로의 주소를 알아야 한다. 상대방의 주소를 모르면 영상 및 음성 데이터를 어디로 보내야 할지 알 수가 없기 때문이다. (시그널링 서버를 구축해야 한다. 상세한 내용은 2주 차에...)
일단, WebRTC에 대해서
네트워크 지연 없이, 고품질의 영상&음성 데이터를 실시간으로 통신할 수 있다.
정도로 가볍게 이해해주길 바란다.
구글 Meet 외에 Zoom, 페이스북 역시 WebRTC를 사용하는데...
Zoom은 2019년에 데이터 통신 기술로, WebSocket에서 WebRTC로 기술을 전환한 것으로 추측된다.
페이스북 관련해서는, 공식 기술 블로그를 읽어보자.
https://engineering.fb.com/2020/12/21/video-engineering/rsys/
지금까지 해외 서비스인 구글 Meet, Zoom, 페이스북에 대해서 살펴보았다.
이제 국내 서비스를 검토해보자. 카카오 엔터프라이즈의 "카카오워크"는 작년 9월에 베타 버전을 출시한 기업용 업무 협업 서비스이다. "카카오워크"의 화상회의 기능 기능에서 WebRTC를 사용한 것으로 추측된다.
https://tech.kakaoenterprise.com/101
카카오워크와 유사한 서비스로, NHN의 Dooray라는 서비스가 있다. 공식 홈페이지에 별도로 언급하진 않았지만, NHN Dooray에서도 화상 회의 기능에 WebRTC를 사용하는 것 같다. 나무위키 페이지에 WebRTC라고 대놓고 작성되었다.
기획자가 작성했는지, 개발자가 작성했는지, 마케터가 작성했는지... 알 수는 없지만, 나무 위키에 이런 글을 작성할 사람은, NHN 관련 직원일 것이다. 그러므로, WebRTC를 사용했다는 문구는 팩트일 가능성이 높다.
카카오워크, NHN Dooray 외에 다수의 국내 서비스를 찾아봤는데, 다수의 서비스에서 WebRTC를 사용하는 것을 알게 되었다. 다른 회사들의 서비스는, 필자가 따로 언급은 하지 않겠다.
필자의 개인적인 생각이 아닌, 공식적인 문서를 참고해서 최대한 객관적으로 글을 작성하였습니다만,
혹시라도 잘못된 내용이 있다면 제보 부탁드립니다.
코로나 시대 인싸들과의 비대면 대화!
클럽하우스, 카카오 mm(음)
코로나 시대에서 가장 관심을 받은 서비스는 무엇일까?라고 필자에게 물어본다면... 필자는 1초의 망설임도 없이 "클럽하우스"라고 말할 것이다. 물론, 초반 관심에 비해서, 현재는 국내 관심도는 많이 줄어든 상황이지만, 아직까지 많은 사용자가 사용 중인 서비스이다. 클럽하우스는 음성 채팅 기반의 소셜 미디어 서비스이다. (참고로, 클럽하우스에 대해서 전혀 모른다면 직접 사용해보길 바란다. 필자가 구차하게 설명하는 것보다는, 직접 한번 사용해보면 어떤 서비스인지 금방 이해할 것이다.)
클럽하우스는 Agora를 사용하는데, Agora는 클럽하우스가 도입해서 더 유명해진 글로벌 음성&영상 플랫폼이다. 중요한 사실은, Agora의 음성&영상 통신의 핵심 기술이 WebRTC라는 사실이다. 국내에는 리모트몬스터라는 회사에서 유사한 서비스를 제공했는데, 참고로, 카카오엔터프라이즈에서 리모트몬스터를 인수하였다. 리모트몬스터 블로그에 작성된, 클럽하우스의 WebRTC에 대한 내용을 참고하길 바란다.
클럽하우스와 매우 유사한 카카오 mm(음)에서도 Agora를 사용하는데, 클럽하우스와 마찬가지로, 카카오 mm에서도 WebRTC를 사용한다고 봐도 무방할 것이다.
https://m.etnews.com/20210610000173
화상 회의 서비스인 Google Meet, Zoom 등은 영상 정보와 음성 정보를 모두 통신하는 서비스였다. 반면에, 클럽하우스와 같은 서비스는 음성 정보만 통신한다. 어쨌든, 위 서비스들은 영상, 음성 데이터를 실시간으로 네트워크 지연 없이 통신한다는 특징을 갖는다. 클럽하우스는, 멀리 떨어져 있는 외국의 수많은 사용자들과 네트워크 지연 없이 실시간으로 대화가 가능하다.
이런 서비스들이 가능한 이유는 바로 WebRTC를 사용했기 때문이다.
스트리밍 서비스
필자가 소개한 사례를 읽어보면, WebRTC라는 기술은, Peer To Peer 환경에서 영상&음성 데이터를 통신하기 위한 기술로만 오해할 수 있지만, 일반적인 방송 스트리밍 서비스에서도 사용이 가능하다. 물론, 통신 기술이 WebRTC로 동일하지만, 시스템 아키텍처는 각 서비스에 따라서 많이 다를 수는 있다.
사례로, 카카오 i connect 라는 스트리밍 서비스에서 WebRTC를 사용한다.
https://connectlive.kakaoi.ai/products/livecall
게임 스트리밍 & 원격 제어
갑자기 웬 게임...? 조금 의아하지만, 실제로 게임 업계에서는 WebRTC를 매우 많이 사용한다. 대표적인 사례로, 리니지로 유명한 NC 소프트에서는, 게임 스트리밍 서비스에서 WebRTC를 사용한다. 내 PC에 실행시켜놓은 게임을 외부 또는 친구들에게 실시간으로 스트리밍할 수 있고, 게임을 원격 제어할 수도 있는데, 이때 게임 영상 및 음성을 WebRTC로 통신하게 된다.
https://blog.ncsoft.com/platform-center-01yeti-20201120/게임 스트리밍, 게임 원격 제어에 사용되는 핵심 기술이 바로 WebRTC이며, P2P 기반으로 서버 부담 없이 실시간으로 게임을 스트리밍 할 수 있다. 자세한 내용은 NC 소프트의 기술블로그를 읽어보자.
https://blog.ncsoft.com/platform-center-01yeti-20201120/
게임 스트리밍뿐만 아니라, 클라우드 게임에서 WebRTC 가 매우 유용하게 사용될 것이다. 클라우드 게임에 대한 사례는 필자가 아직 찾지 못했지만, 분명히 어딘가에서는 WebRTC 기반의 클라우드 게임 서비스를 하고 있을 것이다.
IoT, 헬스케어 등 다양한 사례
화상 회의, 영상 통화, 방송 스트리밍, 게임 스트리밍 및 게임 원격 제어 등 다양한 업계에서 사용하는 WebRTC는 실시간 통신이 필요한 경우라면 어디에서든 사용할 수 있다. 국내 사례를 찾진 못했지만, 외국에서는 IoT, 헬스케어 등 다양한 사례로 사용하고 있다.
또한, 유니콘 기업인 하이퍼커넥트에서도 WebRTC 기술을 사용한다.
https://hyperconnect.com/ko/tech/webrtc/
WebRTC 사용해야 하는 경우?
기술에 정답은 없다. 이 글은 WebRTC를 찬양하는 글이 절대 아니다. 기술이란 것은 장단점이 있고, 필요한 경우에 적절하게 선택해서 사용해야 한다. WebRTC는 어떤 경우에 사용하면 좋을까?
구글 문서(https://cloud.google.com/architecture/gpu-accelerated-streaming-using-webrtc?hl=ko#when_to_use_webrtc)를 인용해보겠다.
WebRTC는 클라이언트 웹브라우저에 대한 지연 시간을 줄이는 것이 애플리케이션에 가장 중요할 때 가장 효과적입니다. 영상 채팅 및 다자간 통화 소프트웨어가 가장 일반적인 사용 사례에 포함됩니다. 사전 레코딩 또는 렌더링되는 동영상 콘텐츠 제공과 같이 지연 시간이 용인되는 스트리밍의 경우에는 WebRTC가 덜 효과적입니다. WebRTC의 H.264 프로필은 무손실 인코딩을 지원하지 않습니다. 무손실 포맷이 필요한 경우 Teradici의 PCoIP와 같은 다른 솔루션을 고려해야 합니다.
WebRTC 사용 목적은 다음과 같습니다.
- 브라우저 또는 휴대기기에 대한 짧은 지연 시간의 오디오 및 동영상 제공
- 바이너리 데이터 또는 키보드, 마우스, 게임 패드 입력과 같은 이벤트의 지연 시간이 짧은 스트리밍
- 브라우저 또는 휴대기기에 대한 게임 스트리밍
다음과 같은 목적으로는 WebRTC를 사용하지 않습니다.
- 사전 녹화된 미디어나 렌더링된 미디어의 대규모 배포
- 최신 브라우저에서 지원되지 않는 동영상 형식 스트리밍
- 이전 브라우저와의 호환성
화상 회의 서비스 직접 만들어보기
WebRTC 이해를 위해서, 화상 회의 서비스를 만들어보았다. 빨란 리본 라이언과 하얀 잠옷 라이언은 각자의 노트북에서 접속해서 화상 회의를 하고 있다.
샘플 코드는 구글링을 참고하였고, 주말 반나절 정도 소요가 되었다.
- 시그널링 서버 구축(스프링 부트, 웹소켓 서버)
- Vue.js 기반의 웹서버
WebRTC 기반의 화상 통화를 하기 위해서는, 반드시 서로의 정보를 전달받아야 한다. 이때 시그널링 서버를 사용하며, 시그널링 서버는 각각의 클라이언트와 양방향 통신을 해야 한다. 그래서 시그널링 서버는 웹소켓 서버로 구축하였다.
진행 중에 어려웠던 점은 아래와 같다.
- 시그널링 서버 구축에 대한 가이드 없음
- WebRTC API에 대한 이해도 부족
- 보안 설정 (https, wss 등)
크롬 브라우저에서는, WebRTC를 거의 완벽하게 지원한다. 그래서, 개발하는데 크게 어려움은 없었지만, 다른 브라우저 또는 네이티브 앱(iOs, 안드로이드)에서도 동작하기 위해서는, 별도의 추가 작업이 필요할 것이다. 참고로, 글 초반에 소개했던, webrtc-internals라는 도구를 사용해서, WebRTC 통신을 디테일하게 확인할 수 있다.
(자세한 내용은 나중에...)
허접한 글 마무리
허접하지만, 대충 글을 마무리하겠다. 다음 글에서는 WebRTC의 개요에 대해서 좀 더 자세히 작성할 예정이지만, 구글에 검색하면 WebRTC의 개요에 대한 글이 수십 개가 나올 것이다. 필자의 다음 글이 언제가 될지 모르니, 관심이 있는 개발자는 찾아보길 바란다.
만약 다음 글을 작성하게 된다면...
[2장. 화상 회의 서비스를 위한 WebRTC 개요] 에서는, WebRTC 와 WebSocket 의 차이, 시그널링 서버가 필요한 이유, WebRTC API, WebRTC 라이브러리 등 WebRTC 에 대한 잡다한 내용을 설명할 예정이다. (2장에서도 소스 코드는 한 줄도 없을 예정이다...)
3,4 장은 작성하지 않을 가능성이 높지만, 만약 작성하게 된다면...
[3장. WebRTC 시그널링 서버 구축]에서는, 웹소켓 기반의 시그널링 서버에 대해서 설명한다. 시그널링 서버 구축에 대한 명확한 가이드가 없기 때문에, 필자의 개인적인 생각이 많이 포함된 글이 될 것이다.
[4.WebRTC 화상 회의 서비스 구축]에서는, Vue.js 기반의 프론트엔드 화면을 만들어서, 화상 회의 서비스를 완성하겠다. 시그널링 서버와 연동하며, WebRTC 통신의 상세한 Flow를 그림 위주로 설명할 예정이다.
끝.
