Overview

앱에서 스크롤 및 애니메이션 히트를 식별하여 앱의 사용자 인터페이스 성능을 향상시키는 방법을 살펴봅니다. 렌더 루프에서 히트가 발생하는 방법을 살펴보고, hitch 시간 비율을 측정하고 앱을 사용하는 사람들에게 가장 큰 영향을 미치는 문제를 해결하는 방법을 설명하겠습니다.

소개

What is hitch ? (~1:31)

히치는 화면에 프레임이 기대했던 것보다 늦게 나온 정도를 의미해요.

image.png

먼저, 히치란 무엇인가요? 앱에서 사용자가 화면을 가로질러 손가락을 드래그하여 스크롤할 수 있습니다. 그들은 버튼을 누르면 피드백이나 계층 구조 내 뷰 간의 전환을 기대할 수 있습니다. 이 애니메이션들은 화면에서 사람들과 콘텐츠 간의 시각적 연결감을 형성합니다.

image.png

애니메이션 히치는 애니메이션에 점프를 일으키고 그 연결을 끊어 기쁨 대신 혼란을 야기할 수 있습니다.

히치는 프레임이 예상보다 늦게 화면에 나타나는 경우를 말합니다.

컬렉션 뷰를 스크롤하는 일반적인 예를 살펴보겠습니다.

image.png

여기 우리가 좋아하는 레시피를 큐레이팅하는 데 도움이 되는 밀 플래너 앱이 있습니다. 사용자가 손가락을 화면 위로 드래그하면 스크롤 뷰가 콘텐츠를 위로 이동하여 응답합니다. 하지만 스크롤하는 동안 콘텐츠가 급증하는 것을 확인할 수 있습니다. 이 프레임을 하나하나 살펴보면 처음 세 프레임에서는 내용과 함께 손가락이 움직이는 것을 볼 수 있지만, 다음 프레임에서는 내용이 멈추는 것처럼 보입니다.

image.png

그것은 세 번째 프레임이 실제로 반복되어 다른 프레임을 위해 디스플레이에 머무르기 때문입니다. 마침내 네 번째 프레임이 다가와서 손가락이 있는 곳으로 뛰어오르는 것처럼 보입니다. 네 번째 프레임이 늦게 도착해서 세 번째 프레임이 반복되었고, 사용자는 히치를 보았습니다.

세 번째 프레임이 느린게 아니라, 네 번째 프레임이 늦게 온것임