[ React: Map Marker Optimization ] GPU 가속과 Batch 처리를 활용한 지도 성능 개선기

✍🏻개요이번 프로젝트에서는 Kakao Map을 활용한 🔗로컬실록지리지 서비스를 🔗스카우트 플랫폼으로 이관 구현이 결정되어 dev서버에서 개발을 진행하면서 대량의 마커를 지도에 표시할 때 흔히 마주치는 문제로, 브라우저 성능 저하를 개선한 경험을 바탕으로 포스팅했습니다. 마커의 개수는 약 2000개로 마커를 렌더링할 때 발생하는 성능 문제를 해결했습니다. 레거시 시스템( PHP )에서는 15.3fps로 버벅이던 지도를 최적화 하여 55.7fps( 약 3.6배 향상 )로 부드럽게 동작하게 되었습니다. 🔍 레거시 시스템에서는 왜 지도 이동 시 프레임 드랍이 심했을까? 위 스크린샷은 전달 받은 PHP파일에서 직접 찾은 코드입니다.kakao maps api에서 CustomOverlay매서드를 활용하여 c..

2025.12.01