[fix] PC 화면에서 인터랙션 수행시 프레임 드랍이 일어남

[lybell-art]

어떤 버그인가요?

1366px 이상인 PC 환경에서 인터랙션을 수행 시, 프레임 드랍이 일어납니다.

어떤 상황에서 발생한 버그인가요?

• 큰 화면에서, "걱정 없이, 더 빨리' 인터랙션을 수행하여, 마우스를 드래그해서 초당 60번 이벤트를 호출합니다.
• 작은 화면 대비 파란 동그라미(손잡이)가 마우스 커서를 느리게 쫓아가는 현상을 볼 수 있습니다.
• 원인은 디자인 명세에 있던 backdrop-filter: blur(100px); 때문으로 드러났습니다.
  • backdrop-filter는 GPU 연산에 매우 큰 부담을 주기 때문에, 블러 효과가 적용된 부분이 클수록 GPU가 아파합니다. 성능을 위해서라면 backdrop-filter를 적용하면 안 됩니다.

예상 결과

• 아무리 큰 화면에서도, 초당 60프레임으로 인터랙션이 일어나야 합니다.

참고 이미지 및 자료

[lybell-art]

미리 블러처리된 backdrop 이미지를 webp로 만들어놓고 그걸 적용시켰습니다.