Feat: 맵 회전 시(카메라 무빙 중 일부) 마커 업데이트 중단을 통한 렌더링 끊김 개선 #106

[yeoularu]

Motivation

• map.isRotating을 이용해 맵이 회전하고 있다면 마커 업데이트를 실행하지 않도록 했습니다.
• 비교를 위한 개발자도구 성능탭 및 화면 60프레임 녹화를 수행했습니다.
  • 환경: 맥북 에어 M2 크롬 개발자도구 CPU 쓰로틀링 x6 모바일뷰(414x896)
• 녹화 영상 분석:
  • 기존은 최초 카메라 무빙 시 조금 끊김이 체감됩니다. 이후 조금 개선됩니다.
  • 적용 후 끊김이 매우 개선되며 주변 업데이트된 마커가 카메라 무빙 끝에 한번에 나타납니다.
• 개인카페-최소줌-카페쉔 최초클릭 상황에서
  • 성능탭 sumary: Rendering 부분이 205ms -> 136ms 으로 33.6% 개선됩니다.
  • updateMarkers() 실행 횟수: 30번 -> 10번 으로 개선됩니다.
    

Key Changes

• updateMarkers가 isRotating()이 true라면 얼리 리턴되도록 변경되었습니다.

스크린샷

1. 기존

   

2. 적용 후

To Reviewers

• 저사양 환경에서 상당한 끊김 완화가 있고 카메라 무빙 끝에 주변 마커 업데이트 되는 것이 크게 거슬리지 않다고 판단됩니다.
• 적용할 것인지를 중점으로 보면서 검토해주세요

[netlify[bot]]

✅ Deploy Preview for hipspot ready!

Name	Link
🔨 Latest commit	9321e5177c31c12430d8b6cd5d87156e731d709a
🔍 Latest deploy log	https://app.netlify.com/sites/hipspot/deploys/64833c7f49b0500008d04a9a
😎 Deploy Preview	https://deploy-preview-107--hipspot.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[Sangjun-man]

오오오 확실히 안끊기고 확대 잘되네요!! isRotating 메서드가 있는지 몰랐는데 고생많이하셨습니다~ 제가 머지할게요!