Localhost WebRTC 데모가 당신에게 거짓말을 하고 있습니다.

Source: Dev.to

번역을 진행하려면 번역하고자 하는 전체 텍스트를 제공해 주시겠어요? 텍스트를 알려주시면 요청하신 대로 한국어로 번역해 드리겠습니다.

로컬호스트가 당신을 속이고 있다

로컬호스트에서 모든 것이 작동하는 이유

자신의 컴퓨터에서 WebRTC를 테스트하면 가장 쉬운 네트워킹 환경에 있는 것입니다: 같은 노트북, 같은 브라우저, 같은 Wi‑Fi, 같은 라우터, 방해하는 방화벽이 없습니다.

컴퓨터가 이미 자신에게 어떻게 접근하는지 알고 있기 때문에 WebRTC는 거의 시도할 필요가 없습니다. 그래서 튜토리얼이 마법처럼 보이는 겁니다.

하지만 전화기, 친구의 노트북, 다른 네트워크, 혹은 인터넷 전체를 끼워 넣는 순간, 그 마법은 사라집니다.

현실이 닥치는 순간

다음 중 하나를 시도해 보세요:

• 모바일 데이터에 연결된 피어 하나
• 대학 Wi‑Fi 뒤에 있는 피어 하나
• 기업 방화벽 뒤에 있는 피어 하나
• HTTPS를 통해 앱 배포하기

갑자기:

• 연결이 영원히 걸린다
• 비디오가 전혀 나타나지 않는다
• 피어가 “연결”되지만 아무것도 전송하지 않는다

그리고 대부분의 튜토리얼은 왜 그런지 설명하기 직전에 멈춥니다.

튜토리얼이 보통 건너뛰는 부분

그들이 건너뛰는 이유는 중요하지 않아서가 아니라, 복잡해서다.

바로 여기서 WebRTC가 데모를 멈추고 실제 네트워킹이 된다.

시그널링: 피어가 어떻게 서로를 찾는가

WebRTC는 피어‑투‑피어이지만, 피어가 마법처럼 서로를 발견하는 것은 아니다. 연결 정보를 교환하기 위해 서버, 어떤 서버든 필요하다.

대부분의 튜토리얼은 다음과 같이 속인다:

• 탭 간에 텍스트 복사
• 값을 하드코딩
• 양쪽이 이미 연결되어 있다고 가정

이는 로컬호스트에서는 동작하지만, 다른 곳에서는 실패한다.

“내 노트북에서는 연결된다”는 의미가 없는 이유

실제 네트워크에서는:

• 노트북이 라우터 뒤에 있다
• 전화기가 통신사 NAT 뒤에 있다
• 친구가 또 다른 라우터 뒤에 있다
• 방화벽이 임의 포트를 차단한다

따라서 연결은 대체 경로가 필요하다. 여기서 ICE, STUN, TURN 같은 것이 조용히 앱이 동작할지 죽을지를 결정한다.

로컬호스트에서는 필요 없기 때문에 눈에 띄지 않는다.

HTTPS는 이제 선택 사항이 아니다

또 다른 조용한 함정: 브라우저는 localhost를 신뢰하지만, 무작위 HTTP 사이트는 신뢰하지 않는다.

카메라 접근, 마이크 접근, 화면 공유, WebRTC 데이터 채널—all은 보안 컨텍스트가 필요하다. 따라서 앱은 로컬에서는 동작하지만 배포하는 순간 깨진다.

다시 말하지만, 당신 잘못이 아니다.

실제 “Real” WebRTC가 실제로 요구하는 것

이론이 아니다. 현실이다:

1. 피어가 연결 정보를 교환할 수 있는 방법
2. 서로 다른 네트워크를 다룰 수 있는 방법
3. 직접 연결이 실패했을 때의 대체 경로
4. 프로덕션 환경에서 HTTPS

이를 받아들이면 WebRTC가 무작위처럼 느껴지는 것이 사라집니다. 예측 가능해집니다.

로컬호스트 환상

같은 머신에서 두 개의 탭을 열면:

• 동일 IP
• 동일 NAT 동작
• 동일 방화벽 규칙
• 동일 브라우저 프로세스

이렇게 하면 모든 ICE 후보가 쉽게 도달 가능해지는 환경이 조성되고, 브라우저는 실제 네트워킹 문제 없이 두 피어를 기쁘게 연결합니다.

다시 말해: WebRTC가 제대로 동작하는 것이 아니라, 머신이 네트워크 문제를 우회하고 있는 것입니다.

Source: …

So, What Exactly Are We Skipping?

1. SDP Exchange – Not Magic, Just Signaling

WebRTC 자체는 세션 정보를 교환하는 방법을 제공하지 않으며, 이는 여러분에게 달려 있습니다.

Session Description Protocol (SDP)에는 다음이 포함됩니다:

• 지원 코덱
• 미디어 방향
• ICE 후보 (IP와 포트)
• DTLS 키

튜토리얼에서는 시그널링 서버가 없기 때문에 개발자들이 종종 SDP를 하드코딩하거나 수동으로 복사·붙여넣기합니다.

실제 앱에서는 신뢰할 수 있는 시그널링 서버가 필요합니다:

• Offer와 Answer 교환
• 도착하는 ICE 후보 전달
• 재협상 처리
• 연결 끊김/폴백 관리

시그널링이 없으면 연결이 되지 않습니다. 끝.

2. ICE Candidates – Behind‑the‑Scenes Networking

피어가 Offer 또는 Answer를 만들 때, WebRTC는 여러 ICE 후보를 생성합니다:

localhost에서는 호스트 후보만 존재하고 완벽히 동작합니다.

하지만 실제 네트워크에서는:

• 로컬 IP는 외부 네트워크에서 절대 도달할 수 없음
• NAT 통과가 필수적
• 방화벽이 직접 UDP를 차단
• TURN 없이는 연결이 멈춤

많은 튜토리얼이 첫 번째 SDP 교환 후에 멈추고, ICE 후보를 올바르게 수집·교환하는 방법을 보여주지 않습니다.

3. STUN / TURN – The Invisible MVPs of WebRTC

STUN (Session Traversal Utilities for NAT)

STUN은 피어가 인터넷에서 보이는 퍼블릭 IP와 포트를 발견하도록 도와줍니다. 이는 다음 상황에서 중요합니다:

• 피어가 서로 다른 네트워크에 있을 때
• NAT 뒤에 있을 때
• 인터넷을 가로질러 연결할 때

STUN이 없으면 WebRTC는 로컬 IP만 제공하므로 원격 피어에게는 무용지물입니다.

TURN (Traversal Using Relays around NAT)

TURN 서버는 직접 피어‑투‑피어 연결이 실패할 경우(예: 방화벽이 UDP 차단, 대칭 NAT, 기업 네트워크) 미디어를 중계합니다.

• 미디어가 TURN을 통해 전달됨
• TURN 서버는 선택 사항이 아니며 비용이 듭니다:
  • 대역폭 비용 발생
  • 자체 호스팅하거나 제공업체에 비용을 지불해야 함
  • 대부분의 localhost 데모에서는 TURN을 언급하지 않음

4. HTTPS – It’s Not a Suggestion

WebRTC는 보안 컨텍스트가 필요합니다:

• https://
• localhost (예외)
• 브라우저가 허용하는 플래그(개발용만)

웹캠, 마이크, 화면 캡처, WebRTC 데이터 채널 모두 실제 사용에서는 HTTPS가 요구됩니다.

앱이 HTTP로 실행될 경우:

• 미디어 전송 불가
• 디바이스 권한 요청 불가
• WebRTC 지원 자체 불가

localhost는 브라우저에서 예외를 두지만, 이것이 바로 로컬에서는 동작하지만 프로덕션에서는 무너지는 이유입니다.

5. NAT & Firewalls – Where Theory Meets Reality

실제 네트워킹은 실제 문제를 야기합니다:

• 가정용 라우터 NAT
• 캐리어‑그레이드 NAT
• 기업 방화벽
• 모바일 핫스팟
• VPN

이러한 환경은 직접 피어 연결을 자주 방해합니다. 전체 ICE 후보 수집과 신뢰할 수 있는 TURN 서버를 통해서만 앱이 일관되게 동작할 수 있습니다.

Source:

Why I Built This Demo

This project isn’t meant to look impressive on localhost. It’s meant to survive:

• Different …

(The original content cuts off here; the remainder of the list can be added as needed.)

테스트 디바이스

• 다양한 네트워크
• 실제 배포

왜냐하면 WebRTC가 보통 여기서 깨지기 때문입니다.

요약

WebRTC 앱이 localhost에서만 작동한다면, 아직 제대로 작동하지 않는 것입니다.

localhost가 제거하는 항목:

• 네트워크 경계
• NAT
• 방화벽
• 보안 규칙

실제 환경에서는 이를 다시 적용합니다.

그리고 WebRTC는 튜토리얼에 언급 여부와 관계없이 이 모든 것을 직접 다루게 합니다.

댓글을 환영합니다. 동의하시든, 반대하시든, 혹은 전쟁 이야기를 추가하시든 자유롭게 의견을 남겨 주세요.