연결 단계에서 발견된 간헐적 연결 문제 WebRTC는 RTCPeerConnection과 ICE 프로토콜을 통해 두 클라이언트 간 최적 경로를 탐색한다. const peerConnection = new RTCPeerConnection({ iceServers: [{ urls: "example.google.com:19302" }], }); peerConnection.onicecandidate = (event) => { if (event.candidate) { socket.emit("ice-candidate", event.candidate); } }; peerConnection .createOffer() .then((offer) => peerConnection.setLocalDescription(offer)) .then(() => { socket.emit("offer", peerConnection.localDescription); }); 해외 네트워크 환경을 사용하는 사용자들의 연결 기능에서 다음과 같은 현상이 간헐적으로 발생했다: 영상이 연결되지 않거나 상대가 보이지 않음 상태 동기화나 메시지 수신이 실패함 네트워크 문제인지 브라우저 문제인지 식별하기 어려움 사용자 입장에서는 연결 상태에 대한 명확한 피드백이 없어 혼란을 느낌 📌 VPN 사용 환경에서의 연결 실패 또한 일부 사용자들이 VPN을 활성화한 상태에서 접속하는 경우, WebRTC 연결이 실패하는 이슈가 존재했습니다. ...

이전 글에서 Recoil 활용해 클라이언트 상태를 정리했던 이야기를 남긴 적이 있다. 이번에는 같은 프로젝트 내에서 서버 상태를 다루는 방식에 대해 정리해보려 한다. Context API를 빠르게 선택했던 이유 처음 프로젝트를 시작할 때는 아주 간단한 요구사항만 있었기 때문에, 굳이 무거운 상태 관리 라이브러리를 도입하지 않고 Context API만으로 충분하다고 판단했다. 속도를 중시한 결정이었다. 실제로 빠르게 결과물을 만들 수 있었고, 배포도 문제없이 진행됐다. 하지만 이후 사업이 확장되며 기능이 하나씩 추가되기 시작했고, 그때부터 context 구조가 무겁게 느껴지기 시작했다. 추가되는 context마다 리렌더링 범위가 넓어졌고, UI 단위에서만 필요한 데이터까지 전역에 얹히는 구조가 되었다. ...

하울링은 왜 생기는가? 하울링은 간단히 말하면, 자신의 마이크에서 들어온 소리가 다시 자신의 스피커로 출력되고, 그게 다시 마이크로 입력되면서 무한 루프를 타는 상황입니다. WebRTC는 getUserMedia로 마이크와 카메라를 활성화하고, 실시간으로 stream을 주고받기 때문에 이런 구조에서는 오디오 루프가 쉽게 생길 수 있습니다. 여러 방법을 시도해봤습니다 처음에는 아래와 같은 해결책들을 시도했습니다: 연결 직후 마이크를 자동으로 mute 처리 local stream과 remote stream을 분리해 렌더링 오디오 트랙만 따로 추적해서 제어 <audio muted /> 설정 (그러나 의도대로 안 되는 경우도 많음) 하지만 완벽하게 해결되진 않았고, 상황에 따라 다시 하울링이 발생했습니다. ...

프로젝트를 진행하다 보면 어느 순간 상태가 복잡해지기 시작합니다. 처음에는 간단한 기능만 있어서 Context API로도 충분해 보였고, 그렇게 빠르게 개발을 시작했습니다. 하지만 기능이 늘어나고 화면과 상태의 연동이 많아지면서, 상태 관리 구조에 대한 고민이 본격적으로 생겼습니다. Context API에서 발생한 문제 Context는 간단하고 직관적인 구조라는 점에서 좋지만, 하나의 상태가 바뀌면 해당 Provider 아래의 모든 컴포넌트가 함께 리렌더링되는 특성이 있습니다. 이 문제를 해결하기 위해 Provider를 잘게 쪼개는 방식으로 대응해보기도 했습니다. 하지만 상태가 많아지고, 각각의 의존성을 분리해야 하는 상황에서는 점점 코드가 복잡해졌습니다. ...

영상 연결 시스템을 다루다 보면 브라우저, 특히 모바일에서 영상 연결이 오래 지속될 경우 발열, 화면 멈춤, 느려짐 같은 현상이 발생하는 걸 종종 볼 수 있다. 그동안은 “기기 문제겠지”라고 넘겼지만, WebRTC 내부 구조가 어떻게 작동하는지, 왜 그런 문제가 생기는지 공부해보기로 했다. WebRTC에서 발열/성능 저하가 발생하는 구조 찾아보면서 아래와 같은 지점에서 성능 이슈가 발생할 수 있다는 걸 알게 되었다: 1. getUserMedia 호출 시 고해상도 요청 기본 요청은 HD(1280x720) 이상일 수 있음 모바일에서 고해상도는 CPU와 배터리 부담이 큼 // 적절한 해상도 지정 navigator.mediaDevices.getUserMedia({ video: { width: 640, height: 360, frameRate: 15 }, audio: true, }); 고해상도 + 고 FPS → 모바일 발열 발생 가능성 ↑ ...