WebGL 활용한 화상회의 배경 블러 처리 개선

문제 상황

• 화상회의 배경 블러 기능에서 저사양 기기 중심의 심한 렉과 발열, 팬 소음 문제 발생
• JavaScript 기반 픽셀 순회가 CPU 사용률 50~60%를 차지하며 병목 형성

원인 분석

• 207만 픽셀을 싱글 스레드 JavaScript로 순차 처리하는 구조
• GPU 메모리의 마스크를 CPU로 복사한 뒤 다시 합성하는 불필요한 데이터 전송

해결 방법

• MediaPipe 세그멘테이션 결과를 WebGL 텍스처로 직접 접근
• 프래그먼트 쉐이더로 마스크 픽셀 변환을 GPU 병렬 처리로 대체
• Canvas 2D는 합성·블러에만 유지하는 하이브리드 구조 채택

성능/운영 포인트

• CPU 사용률 50~60%에서 5~15% 수준으로 감소
• 저사양 기기에서도 사용 가능하고 UI 반응성, 배터리, 소음 측면 개선