실시간 영상

웹RTC(WebRTC)

WebRTC는 브라우저나 앱에서 음성·영상·데이터를 실시간으로 주고받는 기술 모음입니다.

쉬운 설명

웹에서 스터디 화상 통화나 음성 대화 기능을 만들 때 WebRTC를 만날 수 있어요. 카메라와 마이크 입력을 받아 상대방에게 전달하는 기능에 사용할 수 있어요. 내 미리보기 화면이 보이는 것과 상대방에게 영상이 전달되는 것은 다른 단계예요. 연결을 준비할 정보 교환과 필요한 중계 서버도 함께 구성해야 해요.

이런 상황에서 만나요

두 사람이 접속하는 스터디 통화 앱을 만들었는데 내 화면만 보이고 상대방 화면은 비어 있다고 해 볼게요. 장치 권한, 연결 상태, 상대방의 미디어 수신을 나누어 확인해요.

내 화면과 상대 화면의 상태를 따로 확인해요

설명용 화면
1내 장치 상태

카메라 허용

마이크 허용

2통화 화면 예시
스터디 통화 · 연결 확인 중
나

로컬 입력 준비됨

상대방

영상 수신 대기

내 미리보기와 상대 연결은 별도 상태예요.
3다음 확인

연결 정보 교환

연결 경로와 중계

상대 미디어 수신

  1. 1입력 장치 사용 권한을 확인한 상태의 예시예요.
  2. 2내 입력이 보여도 상대 영상이 도착했는지는 따로 확인해요.
  3. 3권한 문제와 기기 사이의 연결 문제를 구분해요.
WebRTC 통화의 점검 상황을 재구성한 설명용 화면입니다. 실제 카메라나 마이크를 사용하지 않으며 인물 영상 대신 상태를 표시했습니다.

아래 화면은 내 카메라 입력은 준비됐지만 상대 영상은 아직 도착하지 않은 상태의 예시예요. 권한 허용만으로 통화 연결까지 끝난 것은 아니에요. 두 기기에서 연결 상태와 실제 송수신을 확인하고 다른 네트워크에서도 시험해요.

헷갈리기 쉬운 점

WebRTC면 서버 없이 두 기기가 항상 직접 연결되나요?

아니에요. 연결 정보를 주고받는 시그널링이 필요하고, 직접 연결이 어려우면 TURN 같은 중계가 필요할 수 있어요. 여러 명이 참여하는 통화에서는 미디어를 전달하는 서버를 사용하는 구성도 있어요.

카메라·마이크 요청은 사용자가 이해할 수 있는 시점에 하고, 거절했을 때의 안내도 준비해요. 브라우저의 미디어 접근에는 HTTPS 같은 보안 컨텍스트와 권한이 필요해요. localhost 개발 환경과 공개 배포 환경의 조건도 구분해요.

왜 알아야 할까요?

“통화가 안 돼요”를 장치 입력 문제와 상대 연결 문제로 나눠 설명할 수 있어요. 내 미리보기만 보고 기능이 완성됐다고 판단하지 않고 실제 통화 조건을 시험할 수 있어요.

조금 더 자세히

WebRTC는 Web Real-Time Communication의 줄임말입니다. 카메라·마이크 입력은 미디어 캡처 API와 함께 사용하고, RTCPeerConnection으로 연결을 다룹니다. 데이터 채널을 이용해 일반 데이터를 교환할 수도 있습니다.

시그널링은 연결에 필요한 정보를 교환하는 과정이며 WebRTC가 한 가지 서버 방식으로 정해 주지 않습니다. WebSocket이나 HTTP API 등을 사용할 수 있습니다. 연결 후보를 찾고 필요하면 중계하는 과정과 지연·손실에 대한 대응도 실제 통화 품질에 영향을 줍니다.

HLS는 영상 조각을 받아 재생하는 배포 방식으로 방송·VOD에서 자주 만납니다. 통화처럼 서로 말하고 듣는 낮은 지연의 상호작용과는 요구 조건이 다르며, 특정 기술 이름만으로 모든 환경의 품질을 보장할 수는 없습니다.

직접 사용할 때 확인해 보세요

  • 카메라·마이크 권한과 로컬 입력을 확인한다
  • 두 기기 사이의 실제 송수신을 확인한다
  • 다른 네트워크와 중계 연결에서도 시험한다

관계 지도

웹RTC(WebRTC) 중심으로 관련 개념의 정의와 관계를 한눈에 정리했습니다.
웹RTC(WebRTC)의 정의와 관련 개념 간 관계를 설명한 계층형 그래프