[iOS] commit hitch 제거하기

문제

비마이플랜 1.4.3 버전의 메인 화면에서 스크롤 시 끊김 현상이 발생합니다.

1. 코드에 문제일 것이다.
2. 렌더링 문제일 것이다.

iOS 어플리케이션의 UI 렌더링 과정에 대해서 알아보기로 했습니다. Render Loop, Hitch 등등의 키워드가 나오더군요. 키워드에 대해서 알아보던 중 관련 있는 것 같은 WWDC 세션이 몇 개 나왔습니다. 우선 영상부터 보기로 했습니다.

다음 영상을 찾아보면 좋을 것 같습니다:

• Explore UI animation hitches and the render loop
• Demystify and eliminate hitches in the render phase
• Find and fix hitches in the commit phase

 

영상을 찾아보면 알겠지만 우선 Render Loop, Commit Phase, hitch 등의 개념에 대해서 이해해야 합니다.

hitch

hitch라는 용어에 대해서 우선 알아봅시다.

hitch라는 용어는 줄을 고리 모양으로 만들어 홀치는 동작을 의미하는 것으로 시작된 용어라고 합니다. 보통 끊을 묶거나 매듭을 지을 때 마지막에 힘을 꽉 주게 되는데 이러한 모습을 바탕으로 갑자기 움직이다, 홱 움직이다라는 의미인 jerk와 비슷한 의미로 쓰이기 시작합니다.

 

WWDC 세션을 보면 hitch라는 용어에 대한 설명을 다음과 같이 하고 있습니다:

 

hitch라는 것은 프레임(frame)이 예상된 시간보다 지연되게 나타나는 시간을 의미하는 거죠.

 

프레임이 예상된 시간에 나타나지 않는다는 것은 어떤 것을 의미하는 것일까요? 아이폰의 주사율은 60Hz입니다. Hz(Refresh Rate, 주사율)은 1초에 화면을 몇 번 갱신할 수 있는지에 대한 수치입니다. 우리의 휴대폰은 시간의 흐름에 따라서 보여주어야 할 화면의 순간, 즉 프레임을 이런 저런 처리를 통해 준비합니다.

예를 들어서, 플립북을 떠올려볼까요?

애니메이션처럼 보이게 하려면:

1. 움직임이 이어지는 그림을 수십, 수백장 준비한다.
2. 순서에 맞춰 그림을 쌓는다.
3. 한 장씩 빠르게 넘긴다.

위와 같은 과정으로 정적인 그림이 움직이는 애니메이션처럼 보이게 되는 것이죠. 휴대폰도 마찬가지입니다. 한 장의 그림이 하나의 프레임과 대응되는 거에요. 아이폰의 주사율이 60Hz라고 했으니까 1초에 60장씩 그림(프레임)을 빠르게 보여주게 되는 것입니다.

 

그런데 만약에 순서가 정해져 있는 그림(프레임)에서 중간에 몇 장씩 준비가 늦어지거나 빠져서 표시를 못하게 되면, 매우 부자연스러운 애니메이션이 보여지겠죠. 실제로 iOS에서는 프레임을 준비하는 단계가 별도로 존재하는데 어떤 이유로 인해서 프레임 준비가 제 때 되지 않으면 화면에 표시할 수 없어서 부자연스러운 애니메이션(끊김 현상)이 발생하게 됩니다.

 

Render Loop: 프레임 준비되는 단계, 뷰가 그려지는 단계

위에서 이야기한 프레임을 준비하는 단계를 Render Loop라고 합니다.

앱을 사용하다보면 정말 다양한 이벤트가 발생합니다. 이벤트 중에는 사용자와 상호작용하는 이벤트가 있죠. 그 중에는 터치 이벤트도 있습니다. 가령 버튼을 눌러서 화면에 있는 뷰를 움직이는 상황이라고 생각해봅시다. 그 순간에 터치 이벤트가 앱으로 전달되고, 다음 UI에 대한 변경 사항이 적용됩니다. 어떻게 움직여야 할 지, 최종적으로는 뷰가 어떤 위치에 있어야 할지 등에 정보가 정해지겠죠? 이러한 정보를 바탕으로 프레임을 완성시키기 위한 작업을 하기 위해 그런 내용들이 운영체제로 전달됩니다. 이러한 과정들이 앱을 사용하는 동안 연속적으로 진행됩니다.

 

단계는 더 세부적으로 나누어지는데요.(내부의 세계는 어렵다 정말🥹)
크게 3가지의 단계가 병렬적으로 수행됩니다:

1. App 단계 : 이벤트가 처리되고 UI가 변경되는 단계
2. Render 단계 : UI가 실제로 렌더링되는 단계
3. Display 단계 : 프레임이 화면에 디스플레이되는 단계

모든 단계가 전부 중요하지만 개인적으로 Render 단계가 가장 중요하다고 생각합니다. 뷰의 계층 구조, 레이아웃 등등의 여러가지 정보를 조합해서 프레임(그림)을 만들어내는 단계라고 생각하면 될 것 같아요. 이 역할을 담당하는 친구가 GPU 입니다. 레이어 트리, 렌더 서버 등등 여러 용어가 또 나오지만 그 부분에 대해서는 좀 더 찾아보면 좋겠고, 결론은 실질적인 그림이 만들어지는 단계라는 것입니다.

각 단계에는 16.67ms(1초에 60프레임이 준비되고 그려져야 하니까 1초를 60으로 나눈 수치)의 제한시간이 있어요. 제한시간을 지키지 못하면 그 프레임은 화면에 보여지지 못하는 것이죠. (마치 과제를 마감 기한 안에 하지 못하는 느낌이랄까.. 교수님 죄송해요..) 그래서 제 시간 안에 작업을 완수하는 것이 매우 중요하겠죠?

생각을 조금만 해보면 '무거운 작업(비용이 많이 드는 작업)이나 불필요한 작업은 줄이거나 하지 않는 것이 좋다'는 결론을 도출해 낼 수 있습니다.

 

해결 과정

위에서 몇 가지 개념을 살펴보면서 '무거운 작업(비용이 많이 드는 작업)이나 불필요한 작업은 줄이거나 하지 않는 것이 좋다'라는 결론을 도출했어요. 너무 당연한 말인데 사실 개발자로써 개발하는 그 순간에는 잘 인지하지 못하고 또 신경을 쓰기란 참 어렵죠.. 여하튼 그럼 어떻게 문제를 해결할 수 있을까요?

1. 스크롤 시 끊김 현상이 발생한다.
2. 이것이 hitch라는 것을 알게되었다.
3. Render Loop의 렌더링 단계에서 문제가 생긴 것 같다. (가정)
4. 무거운 작업이나 불필요한 작업때문에 렌더링 시간이 많이 걸리는 것 같다. (가정)

이러한 과정으로 생각이 전개되었고, instruments를 가지고 가정했던 상황이 정말 맞는지 확인해보기로 했습니다.

instruments

Xcode 12부터는 instruments에서 Animation Hitches라는 템플릿을 제공합니다.

위의 템플릿을 이용해서 메인화면의 스크롤 동작만 측정해보았습니다.

before

발생하고 있는 hitch의 개수가 16개 정도 있습니다.

 

Main Thread 쪽에서 어떤 일이 일어나고 있는지 살펴보니, 아무래도 MainCVC(컬렉션 뷰 셀)에서 이미지를 설정해주는 곳에 문제가 있는 것 같습니다. 작업 시간을 생각보다 엄청 잡아먹고 있네요. 실제로 셀에서 이미지를 설정해주는 코드를 주석 처리하고 측정을 다시 해보니 hitch가 거의 발생하지 않다시피 줄어드는 것을 확인할 수 있었습니다.

그럼 이제는 이미지 설정 부분만 개선을 해주면 문제는 해결이 되는 거겠죠?

이미지 설정

앱 내에서는 이미지 캐싱 및 다운로드에 Kingfisher 라이브러리를 사용하고 있고, 이를 한 번 래핑해서 이미지를 설정해주고 있었습니다. 분명 이전에 캐시 정책도 설정해주고 메모리 개선까지 시켜줬는데 왜 그런 걸까요? 한 가지를 놓치고 생각하고 있었습니다.

스크롤 할 때마다 수많은 이미지 다운로드 요청이 발생하고 있었습니다.

디스플레이 되는 셀에 한해서 이미지 다운로드 작업을 수행하고, 그 외의 셀에 대해서는 다운로드를 취소하는 작업도 필요했습니다. 또한 같은 요청에 대해서는 중복으로 작업을 수행할 필요도 없었죠. Kingfisher를 사용하고 있는 상황이어서 우선은 제공되는 메서드나 프로퍼티를 이용해서 해결하고자 했습니다.

// Cell

var task: Kingfisher.DownloadTask?

...

func configureFor(plan: PlanViewModel) {
  guard let url = URL.decodeURL(urlString: plan.imageURLString) else {
    #if DEBUG
      print("invalid url")
    #endif
    return
  }

  let processor = DownsamplingImageProcessor(size: .init(width: 500, height: 500))
  task = KingfisherManager.shared.retrieveImage(with: url, options: [.processor(processor)]) { [weak self] result in
    switch result {
    case let .success(r):
      self?.imageView.image = r.image
    case let .failure(error):
      print("error: \(error) or cancelled")
    }
  }

  planId = plan.planId
  isScrap = plan.isScraped

  homePlanPropertiesView.configureFor(plan: plan)
}

// CollectionView DataSource
func collectionView(
  _ collectionView: UICollectionView,
  didEndDisplaying _: UICollectionViewCell,
  forItemAt indexPath: IndexPath
) {
  switch cells[indexPath.section] {
  case .homePlanCell:
    let cell = collectionView.dequeueCell(HomePlanCell.self, for: indexPath)
    cell.task?.cancel()
  default:
    break
  }
}

 

1. Cell안에 작업을 수동으로 취소할 수 있도록 Task에 대한 프로퍼티를 선언해주었습니다.
2. 셀을 Configure하는 메서드 내에서 이미지를 다운로드하는 작업을 프로퍼티에 담아주었습니다.
3. Display가 끝난 셀에 대해서는 다운로드가 진행 중인 작업이 있을 때 취소하도록 했습니다.

전체 코드를 첨부할 수는 없지만 위와 같은 방법을 이용해서 문제를 해결하려고 했습니다.

결론

스크롤을 정말 빠르게 하는 상황에서 모든 셀에 대해 이미지 다운로드 작업을 수행하게 된다면 많은 부하를 줄 수 밖에 없고, 렌더링 성능이 저하될 수 있습니다. 그렇기에 보여지지 않는 셀에 대해서는 다운로드 작업을 취소하는 것이 필요했던 것이죠. 당장은 이미지 처리에서 문제를 발견할 수 있었지만, 이외에도 렌더링 성능에 영향을 줄 수 있는 케이스는 무수히 많을 수 있기에 앞으로도 비슷한 문제가 발생하면 우선 instruments로 확인하는 습관을 들이면 좋을 것 같습니다.

after

유의미하게 hitch의 개수가 줄어든 것을 확인할 수 있습니다. 비마이플랜 1.4.4 버전을 다운받아 메인화면을 스크롤해보면 부드럽게 스크롤되는 것을 확인하실 수 있습니다.

 

## 링크

https://github.com/taekki-labs/note/wiki/Commit-Hitch-%EC%A0%9C%EA%B1%B0%ED%95%98%EA%B8%B0

Commit Hitch 제거하기