Codex 작업창 옆 캐릭터 애니메이션이 버벅일 때 볼 것 6가지

Codex 작업창 옆에 작은 캐릭터를 계속 움직이게 만들 때는 이미지 크기보다 갱신 방식 때문에 버벅이는 경우가 많았습니다. 아래 순서로 확인하면 원인을 빨리 줄일 수 있습니다.

1. 매 프레임마다 DOM 노드를 새로 만들지 않는지 확인합니다.

2. 위치 변화는 left, top보다 transform을 우선 검토합니다.

3. 보이지 않는 상태에서도 애니메이션 타이머가 계속 도는지 확인합니다.

4. 여러 상태가 동시에 갱신되며 같은 렌더를 반복하지 않는지 기록합니다.

5. 원본 이미지 크기와 실제 표시 크기의 차이가 과도하지 않은지 봅니다.

6. 저사양 환경에서는 프레임 수를 줄여도 동작 의미가 유지되는지 시험합니다.

가장 먼저 해볼 일은 개발자 도구의 Performance 기록을 10초만 남기는 것입니다. 긴 작업보다 렌더 횟수, 메인 스레드 점유, 숨겨진 상태의 실행 여부를 먼저 보면 병목을 구분하기 쉽습니다.

일반 원칙은 간단합니다. 계속 움직이는 장식 요소는 예쁜 프레임 수보다 사용자의 입력과 스크롤을 방해하지 않는 것이 먼저입니다.