[항해99–1일 1면접 챌린지] (9) 애니메이션 최적화

❓ 질문. 복잡한 애니메이션이나 인터랙션을 구현하며 성능 저하를 겪은 경험이 있다면, 어떤 문제였고 어떻게 해결했는지 공유해 주세요.

❗ 힌트: Reflow, Paint, Composite 등 렌더링 단계 중 어디에서 병목이 생겼는지 파악하고, transform, will-change 등 GPU 기반 최적화로 어떻게 개선했는지가 핵심입니다.

웹 프론트엔드 개발에서 성능 최적화는 사용자 경험을 크게 좌우하는 중요한 요소입니다. 특히 복잡한 인터랙션이나 애니메이션을 구현할 때는 브라우저의 렌더링 단계에서 병목 현상이 발생할 수 있으며, 이를 정확히 이해하고 GPU 기반의 최적화 기법을 적용하는 것이 필요합니다.

브라우저 렌더링 단계 이해

1. Reflow (Layout 재계산)

Reflow는 DOM 구조 변경이나 스타일 변경에 따라 브라우저가 요소의 위치와 크기를 다시 계산하는 과정입니다. 이 작업은 해당 요소뿐 아니라 부모 및 자식 요소 전체에 영향을 줄 수 있어 비용이 높은 작업에 해당합니다. 예: width, height, margin, padding, border 속성 변경

2. Repaint (시각적 속성 변경)

Repaint는 요소의 레이아웃은 그대로인 상태에서 색상, 배경 등 시각적 속성이 변경될 때 발생합니다. Reflow보다는 처리 비용이 적지만, 여전히 렌더링 성능에 영향을 줄 수 있습니다. 예: background-color, box-shadow 등 스타일 변경

3. Composite (합성 단계)

브라우저가 계산된 레이아웃과 스타일 정보를 바탕으로 레이어를 GPU로 전송하고 화면에 최종적으로 그리는 단계입니다. 이 단계는 GPU 가속을 활용하므로 적절히 관리하면 성능 향상에 큰 도움이 됩니다.

성능 병목 해결을 위한 최적화 전략

1. Reflow 유발 요소 최소화

width, height, margin, padding 등의 속성은 Reflow를 발생시킬 수 있으므로, 이러한 속성의 변경을 최소화하는 것이 좋습니다. 레이아웃 변경이 필요한 경우, DOM 접근을 줄이고 변경 사항을 한 번에 적용하는 방식으로 최적화할 수 있습니다.

2. GPU 친화적 속성 활용

CSS 애니메이션 및 트랜지션에는 transform과 opacity 속성을 사용하는 것이 바람직합니다. 이 두 속성은 GPU에서 처리되며 Reflow나 Repaint를 발생시키지 않기 때문에 보다 부드럽고 효율적인 애니메이션을 구현할 수 있습니다.

3. will-change 속성 활용

변화가 예상되는 요소에 대해 will-change 속성을 미리 지정하면, 브라우저가 해당 요소를 GPU에서 사전 처리하게 되어 성능 저하를 방지할 수 있습니다. 예: will-change: transform; 다만, will-change는 남용할 경우 오히려 메모리 사용량을 증가시킬 수 있으므로 꼭 필요한 요소에만 적용해야 합니다.

결론

렌더링 단계에 대한 정확한 이해는 퍼포먼스 최적화의 출발점입니다. Reflow와 Repaint는 단순한 스타일 변경 이상의 영향을 미치며, 적절한 GPU 가속 전략(transform, opacity, will-change 등)을 활용함으로써 렌더링 병목을 최소화할 수 있습니다. 특히 사용자와의 인터랙션이 많은 웹 애플리케이션일수록 이러한 렌더링 최적화는 더욱 중요합니다.