작업 방식
같은 탭 인디케이터도 대기 중에는 부드럽다가 내비게이션 중에는 끊길 수 있습니다. 이 스킬은 두 가지를 구분해 묻습니다. 각 프레임이 얼마나 많은 렌더링 작업을 일으키는지, 그리고 애니메이션 구동 방식이 메인 스레드의 다른 작업과 경쟁하는지입니다. GPU 힌트를 기본으로 추가하지 않고 속성과 구동 방식부터 살펴봅니다.
소스는 덜 뻔한 경로도 점검합니다. 프레임마다 일어나는 React 상태 업데이트, 큰 하위 트리에서 바뀌는 상속된 CSS 변수, 비용이 큰 블러, Motion 축약형 transform 등입니다. 권장 사항은 코드에 연결되고 브라우저와 기기 동작에 따라 단서가 붙으며, 빠른 데스크톱은 수정이 됐다는 증거로 보지 않습니다.
예상 산출물
- 애니메이션 요소, 구동 방식, 속성 목록
- 파일 위치와 수정 전후 비교를 포함한 원인별 개선 제안
- 코드 검사와 기기에서 기록한 증거의 명확한 구분
입력에서 결과까지
- 01대상 모션 목록화
각 요소, 애니메이션 구동 방식, 속성과 함께 내비게이션이나 하이드레이션처럼 동시에 일어나는 작업을 나열합니다. 비용을 판단하기 전에 광범위한 transition과 라이브러리 축약형을 풀어서 살펴봅니다.
- 02유력한 원인 찾기
먼저 레이아웃과 페인트 작업을 확인한 뒤 메인 스레드 경합, 프레임당 React 렌더, 스타일 재계산을 점검합니다. 제안하는 변경은 막연한 최적화가 아니라 특정 경로와 연결해 설명합니다.
- 03실제 인터랙션 프로파일링
브라우저 성능 기록으로 프레임 누락과 긴 작업을 확인합니다. 가능하면 실제 대상 휴대폰에서 확인하세요. 데스크톱 CPU 스로틀링으로는 약한 GPU나 기기의 메모리 한계를 재현할 수 없습니다.
- 04검증 한계와 함께 보고
파일 위치, 원인, 수정 전후를 비교할 수 있는 개선안을 예상 비용 순으로 제공합니다. 코드에서 추론한 내용과 측정한 내용을 구분해 밝히고, 수정 적용은 승인을 기다립니다.