[ko] Animation performance and frame rate 신규 번역

files/ko/web/performance/animation_performance_and_frame_rate/index.md

@@ -0,0 +1,64 @@
+---
+title: 애니메이션 성능과 프레임 속도
+slug: Web/Performance/Animation_performance_and_frame_rate
+l10n:
+  sourceCommit: 5f76b99045f87349ed030bbd6a3c2e43badb3c22
+---
+
+{{QuickLinksWithSubPages("Web/Performance")}}
+
+웹에서의 애니메이션은 {{htmlelement('canvas')}} 와 {{domxref('WebGL_API', 'WebGL')}}, CSS {{cssxref('animation')}}, {{htmlelement('video')}}, 애니메이션 GIF, 그리고 애니메이션 PNG 및 기타 이미지 유형과 {{domxref('SVGAnimationElement', 'SVG')}}, {{domxref('window.requestAnimationFrame','JavaScript')}}를 통해 구현할 수 있습니다. CSS 속성을 애니메이션화하는 데 드는 성능 비용은 각 속성에 따라 다를 수 있으며, 비용이 높은 CSS 속성을 애니메이션화하면 브라우저가 부드러운 {{glossary("FPS", "프레임 속도")}}를 유지하기 어려워지기 때문에 {{glossary('jank', '버벅거림')}} 현상이 발생할 수 있습니다.
+
+비디오와 애니메이션 GIF와 같은 애니메이션 미디어의 경우, 주요 성능 문제는 파일 크기입니다. 파일을 충분히 빠르게 다운로드하지 못하면 성능에 부정적인 영향을 미칠 수 있습니다. CSS, SVG, \<canvas>, WebGL 또는 기타 JavaScript 기반 애니메이션과 같은 코드 기반의 애니메이션은 대역폭 소비가 적더라도 CPU를 소모하거나 버벅거림을 유발하여 성능에 영향을 미칠 수 있습니다.
+
+사용자는 모든 인터페이스 상호작용이 부드럽고 모든 사용자 인터페이스가 반응성이 있기를 기대합니다. 애니메이션은 사이트를 더 빠르고 반응성 있게 느껴지도록 도울 수 있지만, 잘못 구현되면 사이트를 느리고 버벅거리는 것처럼 느끼게 할 수도 있습니다. 반응형 사용자 인터페이스는 초당 60프레임(fps)으로 동작합니다. 항상 60fps를 유지하는 것은 불가능하지만, 모든 애니메이션에서 높은 프레임 속도과 일정한 프레임 속도를 유지하는 것이 중요합니다.
+
+[CSS 애니메이션](/ko/docs/Web/CSS/CSS_animations/Using_CSS_animations)에서는 여러 [키프레임](/ko/docs/Web/CSS/@keyframes)을 지정하며, 각 키프레임은 CSS를 사용하여 애니메이션의 특정 단계에서 요소의 모습을 정의합니다. 브라우저는 각 키프레임에서 다음 키프레임으 전환하며 애니메이션을 생성합니다.
+
+JavaScript를 사용하여 요소를 애니메이션화하는 것과 비교했을 때, CSS 애니메이션은 더 간단하게 만들 수 있습니다. 또한 브라우저는 프레임을 렌더링할 때 필요하다면 프레임을 건너뛰는 작업을 더 잘 제어할 수 있어 더 좋은 성능을 제공합니다.
+
+그러나 CSS 속성을 수정하는 데 드는 성능 비용은 속성마다 다릅니다. 일반적으로 60fps는 애니메이션이 부드럽게 보이는 속도로 여겨집니다. 60fps를 유지하기 위해서 브라우저는 스크립트 실행, 필요한 스타일과 레이아웃 재계산, 영역 다시 그리기를 포함하여 모든 작업을 16.7밀리초 내에 수행해야 합니다. 느린 스크립트와 비용이 높은 CSS 속성 애니메이션은 브라우저가 부드러운 프레임 속도를 유지하기 어렵게 하고 버벅거림을 유발할 수 있습니다.
+
+## 렌더링 워터폴
+
+CSS 속성을 통해 애니메이션화되는 동안 브라우저가 페이지에 변경 사항을 그리는 과정은 다음과 같은 단계로 구성된 워터폴로 설명할 수 있습니다.
+
+![CSS 렌더링 워터폴의 흐름도입니다. 순서는 스타일 재계산, 레이아웃, 페인트입니다.](css-rendering-waterfall.png)
+
+1. **스타일 재계산**: 요소의 속성이 변경되면, 브라우저는 계산된 스타일을 다시 계산해야 합니다.
+2. **레이아웃**: 다음으로 브라우저는 계산된 스타일을 사용하여 요소의 위치와 기하 구조를 결정합니다. 이 작업은 "레이아웃"으로 불리지만 때로는 "리플로우"라고도 합니다.
+3. **페인트**: 마지막으로 브라우저는 화면에 요소를 다시 그려야 합니다. 이미지의 과정에서 보여지지 않는 마지막 단계로, 페이지는 여러 레이어로 분할되어 각각 독립적으로 그려지고 "컴포지션"이라고 하는 과정에서 결합됩니다.
+
+이 모든 과정은 단일 프레임 안에 완료되어야 하며, 이 과정이 끝나기 전까지 화면은 업데이트되지 않습니다.
+
+## CSS 속성 비용
+
+렌더링 워터폴의 맥락에서 일부 속성은 다른 속성보다 비용이 더 많이 듭니다.
+
+- 요소의 **기하 구조**나 **위치**에 영향을 미치는 속성은 다음과 같습니다.
+
+  - 스타일 재계산
+  - 레이아웃
+  - 리페인트
+
+  예를 들어, {{cssxref("left")}}, {{cssxref("max-width")}}, {{cssxref("border-width")}}, {{cssxref("margin-left")}}, {{cssxref("font-size")}}
+
+- 기하 구조나 위치에 영향을 미치지 않으며 자체 레이어에서 렌더링되지 않는 속성은 레이아웃 과정을 유발하지 않습니다. 하지만 다음을 수행합니다.
+
+  - 스타일 재계산
+  - 리페인트
+
+  예를 들어, {{cssxref("color")}}
+
+- **자체 레이어**에서 렌더링되는 속성은 **결합 과정**에서만 업데이트되기 때문에 리페인트조차 트리거하지 않습니다. 대신 다음만 수행합니다.
+
+  - 스타일 재계산
+
+  예를 들어, {{cssxref("transform")}}, {{cssxref("opacity")}}
+
+## 개발자 도구
+
+대부분의 웹 브라우저에는 페이지의 요소를 애니메이션화할 때 브라우저가 수행하는 작업에 대한 통찰력을 제공하는 도구가 포함되어 있습니다. 이러한 도구를 사용하면 애니메이션 프레임 속도을 측정하고, 성능 병목 현상을 진단할 수 있습니다.
+
+- [Chrome performance tools](https://developer.chrome.com/docs/devtools/#performance)
+- [Firefox performance tools](https://firefox-source-docs.mozilla.org/devtools-user/performance/)