개요 Sentry에서 INP(Interaction to Next Paint) 지연 경고가 간헐적으로 발생하고 있다. 로그를 분석해 보니 특정 페이지(eventDetail)에서 사용자의 클릭 반응 속도가 눈에 띄게 느려지는 현상이 포착되었다. 범인을 추적해 보니 피크(Peak)가 튀는 순간은 MUI(Material UI) 컴포넌트가 렌더링 될 때였다. Deep Dive : 왜 MUI v5가 범인인가? 최적화를 시작하기 전에, 도대체 왜 MUI v5가 느린지 근본적인 원인을 파악해 보자. 범인은 바로 편리함의 상징인 sx 문법이다. v5의 sx가 문제라는 것이지 지금 버전의 sx도 문제라고 오해하지 않는 것이 좋다. 런타임 오버헤드 (Runtime Overhead) 우선 sx로 작성된 스타일이 실제 DOM..

문제 상황구글 맵을 사용중에 엄청나게 렉이 걸리는 상황이 발생했다. 지도 정보가 패칭되고, 핀이 렌더링 되는 순간 엄청나게 렉이 발생한다. 영상에서는 아이폰 16 Pro로 테스트를 해서 그런지 성능으로 커버가 됐지만, 아이폰 12 mini로 테스틀 했을 때는 사용이 어려울 정도로 버벅이는게 눈에 보였다. ▼ 원인 탐색Debouncer와 Throttler의 부재?첫번째로 생각난 원인은 Debouncer와 Throttler의 부재. 지도가 움직일 때 마다 API 호출을 하는 것이 버벅임의 주요 원인이 아닐까 생각했다.하지만 `onCameraIdle` 상태에서만 API를 호출하기에 디바운서도 잘 적용되어있고, 혹시나 구글 맵 패키지의 문제일 수 있기에 로그를 찍어보면서 확인도 다 ..

문제 상황 TabBar를 이용하여 한 페이지에 여러 개의 뷰를 보여주는 UI는 거의 대부분의 앱에서 사용될 정도로 흔하다. 일반적으로는 고정된 개수의 TabBar를 사용하기에 스크롤 할 일이 없는데, 때로는 여러 개의 TabBar를 두어 스크롤이 들어가기도 한다. 그런데 스크롤을 넣기 위해 `isScrollable`을 `true`로 바꾸면 사진과 같이 왼쪽에 의문의 Padding이 들어가게 된다. ▼ 왜 이 빈 공간이 생기는 것이고, 어떻게 하면 제거할 수 있을까?  원인과 해결원인 원인은 `TabAlignment`에 있다. 사진의 설명에 나와있듯, 만약 TabBar의 `isScrollable`이 `true`가 되면 TabBar는 기본적으로 52pixel의 offset을 갖게 된다.  정확히는 `isSc..