HTML5 Canvas 입자 애니메이션 성능 개선하기
수많은 입자(partcle)가 화면에서 튀어 다니는 HTML5 Canvas 애니메이션을 만들다 보면, 입자 수가 늘어날수록 프레임이 급격히 떨어지는 문제를 겪게 됩니다. 이런 상황에서 렌더링 성능을 끌어올리기 위해 적용할 수 있는 핵심 최적화 기법들을 정리했습니다.
1. 연산과 그리기를 분리하세요
입자의 물리 계산(위치 업데이트, 속도 처리 등)과 실제 화면 그리기 작업을 하나의 루프에서 섞어 처리하면 불필요한 오버헤드가 발생합니다. 물리 시뮬레이션 로직과 렌더링 로직을 명확히 분리하면 코드 구조도 깔끔해지고, 각 단계를 독립적으로 최적화할 수 있습니다.
2. 계산이 완료된 후에만 다시 그리기를 요청하세요
모든 입자의 위치와 상태 계산이 끝난 뒤에 requestAnimationFrame으로 재렌더링을 요청하는 것이 좋습니다. 계산 도중에 여러 번 그리기를 호출하면 같은 프레임 안에서 중복 작업이 발생해 성능이 크게 저하됩니다.
3. 충돌 감지를 최적화하세요
모든 입자를 서로 일일이 비교하는 O(n²) 방식은 입자 수가 많아지면 감당할 수 없이 느려집니다. 공간 분할 기법(예: 균격 그리드, 쿼드트리)을 활용해 가까운 입자들끼리만 충돌 여부를 검사하면 연산량을 획기적으로 줄일 수 있습니다.
4. 콜백 사용을 줄이세요
콜백 함수는 호출될 때마다 추가적인 컨텍스트 전환 비용을 유발합니다. 특히 매 프레임 반복되는 코드 경로에서 콜백 남발은 누적 부담으로 이어지므로, 가능한 한 직접 실행되는 코드로 대체하는 것이 좋습니다.
5. 함수 호출 횟수를 줄이세요
함수 호출 자체에도 미세하지만 무시할 수 없는 비용이 듭니다. 짧고 자주 호출되는 유틸리티 함수들이라면, 루프 내부에서 직접 로직을 작성하거나 호출 횟수 자체를 줄이는 방식으로 리팩터링하세요.
6. 인라인(Inlining)을 활용하세요
성능이 중요한 핵심 코드 경로에서는 간단한 함수 본문을 호출 지점에 직접 삽입(인라인)하여 함수 호출 오버헤드를 제거할 수 있습니다. 모던 JavaScript 엔진도 인라인 최적화를 수행하지만, 코드 차원에서 명시적으로 처리하면 더 안정적인 성능을 기대할 수 있습니다.
마무리
이러한 최적화 기법들을 조합하면 입자 수가 수천 개에 달해도 부드러운 60fps 애니메이션을 유지할 수 있습니다. 가장 먼저 프로파일링으로 병목 지점을 파악한 뒤, 위 방법들을 우선순위에 따라 하나씩 적용해 보세요.