imnammgi's Portfolio

imnammgi's Portfolio

WebRTC기반 실시간 화상 스터디 서비스

WebRTC 실시간 통신 시스템 구현

OpenVidu 기반 화상회의 기능을 구현하면서 세션 관리, 토큰 발급, 스트림 처리 등 복잡한 실시간 통신 로직을 담당했습니다. 14개의 Custom Hook으로 관심사를 분리하여 유지보수성과 재사용성을 크게 향상시켰습니다.

P2P 채팅 시스템 최적화

서버 부하를 줄이기 위해 OpenVidu Signal을 활용한P2P 채팅 시스템을 설계했습니다. Socket.io 대신WebRTC 데이터 채널을 활용하여 서버 우회 직접 통신 을 구현했고, 실시간 즉석 필터링 시스템을 추가했습니다.

JWT 자동 갱신 시스템 구축

Axios Interceptor를 활용하여 토큰 만료 시 사용자 개입 없이 자동으로 갱신되는 시스템을 구현했습니다. 무 한 재시도 방지 로직과 원본 요청복원 메커니즘을 통해 안 정적인 인증 플로우를 완성했습니다.

webrtc-study-img

실시간 통신 기술에 대한 깊은 이해

WebRTC를 다루면서 다순한 라이브러리 사용을 넘어 P2P 통신의 본질적 특성을 이해하게 되었습니다.

네트워크 상태, 브라우저 호환성, 방화벽 등 제어할 수 없는 변수들을 고려한 예러 핸들링과 폴백 전략의 중요성을 체감했습니다.

특히 WebSocket 연결 문제를 해결하면서 프로토콜 레벨에서의 디버깅 능력과 환결별 설정 차이를 분석하는 역량을 기를 수 있었습니다.

사용자 중심의 기술적 사고로 전환

이전에는 기능 구현에만 집중했다면, 이번 프로젝트에서는 사용자 경험을 우선시하는 기술적 판단을 내리게 되었습니다.

토큰 만료 시 사용자가 모르게 자동 갱신하거나, 채팅에서 욕설을 자동스럽게 이모지로 치환하는 등 기술적 완성도와 사용자 편의성을 동시에 추구했습니다.

또한 무한 스크롤 성능 최적화를 위해 debounce와 Intersection Observer를 활용하여 체감 성능을 크게 개선하는 경험을 통해 성능 최적화에 대한 실무적 감각을 기를 수 있었습니다.

임남기 | Frontend Developer portfolio