'Instrument' 처음 들어보는 사람 모두 들어오세-요!👋👋

[moonkey48]

내가 만든 앱이 버벅거리거나, 앱을 구동하면 핸드폰이 너무 뜨거워지나요? Instrument는 구현과 함께, 또는 그 이후에 최적화를 통해 이런 문제를 해결할 수 있도록 돕는 도구가 있습니다.

이 글에서는 Paul Hudson 씨의 예제와 기본 개념을 버무려 Instruments의 기본적인 기능에 대해 정리하였습니다. 기본적인 개념을 익히고, 이후 다양한 instruments들을 체험해보시길 기대합니다(저도 알려주세요👀)

About Instruments

Instruments는 Xcode 도구 세트의 일부로, 강력하고 유연한 성능 분석 및 테스트 도구입니다. 앱, 프로세스, 장치의 동작과 성능을 이해하고 최적화할 수 있도록 돕는 도구입니다. Instrument는 아래와 같은 기능을 제공해줍니다.

• 하나 이상의 앱 또는 프로세스의 동작을 검사
• Wi-Fi 및 Bluetooth와 같은 장치별 기능 검사
• 시뮬레이터나 실제 장치에서 프로파일링 수행
• 소스 코드의 문제 추적
• 앱의 성능 분석
• 메모리 누수, 방치된 메모리, 좀비 등 메모리 문제 찾기
• 전력 효율성을 높일 수 있는 방법 식별
• 시스템 수준의 일반적인 문제 해결
• 인스트루먼트 설정을 템플릿으로 저장

Instruments 여는 방법

1. Xcode

   단축키 cmd + i

2. Dock

   Xcode 아이콘 우클릭 - Open Developer Tool - Instruments

3. terminal

   1. Launch Terminal (in /Applications/Utilities/).

   2. Run the following command:

      open /Applications/Xcode.app/Contents/Applications/Instruments.app

우리 앱의 View는 잘 지내고 있을까요?

위에 instruments 중, SwiftUI instrument를 활용하여 View의 상태에 대해 점검해보려 합니다.

1. 점검을 원하는 앱을 켜주세요
2. cmd + i로 instrument 앱을 열어주세요
3. SwiftUI Instrument를 클릭해주세요

Instrument UI를 익히고 싶다면 아래 아티클을 참고해주세요 :)

[Xcode] Instruments (1) - Tool

SwiftUI Instrument

SwiftUI Instrument를 열면 아래의 도구들을 확인할 수 있습니다. 아래 4가지 도구가 기본적으로 나오게 되는데, 각 도구가 무엇을 보여주는지 자세히 알아보고 개선해보겠습니다.

1. View Body: 얼마나 많은 View가 만들어지고, 만들어지는데 어느정도 시간이 걸리는지 보여줍니다.
2. View Properties: 어떤 뷰에 어떤 프로퍼티가 있고, 시간에 따라 어떻게 변화하는지 보여줍니다.
3. Core Animation Commits: 얼마나 많은 Core Animation Commit이 발생하는지 보여줍니다.
4. Time Profiler: 각 함수의 호출 소요 시간을 보여줍니다.

실행

좌측 상단에 있는 record 버튼을 누르면 앱이 실행되면서, 앱에 대한 분석을 시작하게 됩니다.

View Body

View Body 툴을 선택하면 하단에 있는 Detail Pane에 다음과 같이 앱에 있는 View들을 모두 확인할 수 있습니다. 하지만 아쉽게도 각 View에서 어떤 Component와 뷰가 사용되었는지는 확인할 수 없습니다.

여기서 중요한 것은 Count와 Avg Duration입니다. Count가 너무 많이 발생되는 View나 각 View를 그리는 평균 시간이 너무 높다면 해당 View를 최적화해야 View의 버벅임을 줄일 수 있습니다.

위에 이미지에서 MainView는 그리는 횟수에 비해 너무 많은 Avg Duration을 가지고 있어서 심각한 상태입니다😱 (많이 버벅거리더라구요..)

View Property

두번째로 View Properties 툴은 모든 View에 있는 프로퍼티를 보여줍니다. 아쉽게도, 해당 뷰의 어떤 프로퍼티의 이름인지는 아직 보여지지 않습니다. 하지만 상단 타임라인을 드래그하면서 어떻게 프로퍼티가 변화하는지 확인할 수 있습니다.

View Property를 확인하는 것이 중요한 이유는, TimeLine을 통해 특정 프로퍼티의 병경이 View에 어떤 영향을 주고 있는지 확인할 수 있기 때문입니다. 너무 잦은 프로퍼티의 변화로 View가 많이 렌더되는 부분을 찾아보세요!

위 타임라인의 피크를 찍은 부분은 SettingView에서 토클을 반복해서 on/off를 점검했던 부분입니다. 그 부분에서 SettingView가 여러번 렌더가 되었군요. 근데 평균시간이 812.55마이크로초가 소요되어서, 최적화가 필요해보이네요! 👀

Core Animation Commits

Core Animation! 하면 무엇이 떠오르시나요? 화면에서 Animation을 담당하는 역할?

Core Animation은 그래픽 렌더링 및 애니메이션 인프라로, 앱의 뷰와 시각적 애니메이션 작업을 돕는 기술입니다. 우리가 애니메이션을 할 때 처음과 끝의 상태만 설정하면, Core Animation은 그 정보를 받아서 자동으로 내장된 그래픽 하드웨어에 그리는 작업을 넘겨서 렌더링 속도를 높임으로 CPU에 부담을 주지 않고 앱 속도 저하를 방지할 수 있습니다.

Core Animation이 더 궁금하다면

Core Animation | Apple Developer Documentation

About Core Animation

Core Animation Commits은 얼마나 많이 SwiftUI가 픽셀을 다시 그리도록 요구받는지를 보여주고 있습니다. 그래서 너무 많은 Count가 찍혀있다면 어떤 뷰에서 계속 SwiftUI에게 강요하고 있는지 확인해봐야합니다.

Time Profiler

Time Profiler는 각 코드가 어느정도의 시간을 소요했는지를 보여줍니다.

• 왼쪽 패널에는 만들어진 모든 Thread를 확인할 수 있습니다.

• 오른쪽 패널에는 가장 오랜 시간이 걸린 코드를 보여줍니다. 여기서 흰색으로 하이라이트 된 부분이 개발자가 작성한 코드이고 나머지는 시스템 코드입니다.

• 하단에 Call Tree에서 Hide System Libraries를 토글하면 개발자가 작성한 부분에 대해서만 확인할 수 있습니다.

  

• Invert Call Tree를 토글하면 상세한 코드부터 확인할 수 있습니다. 시간이 오래걸린 부분을 더블클릭하면 문제가 있는 코드를 바로 확인할 수 있습니다.

  아래 코드에서 UserDefault에서 가져오는 것이 20ms나 걸리네요! 이 부분은 최적화가 가능할 것 같습니다 :)

  

  Metal에 있는 Shader를 가져오는 부분도 112ms나 걸리는군요…왜 이렇게 오래 걸리는지 확인이 필요할 것 같네요!

  

정리하며

SwiftUI Instrument의 기능들을 정리해보았습니다. 당장에 SwiftUI 하나만 봤는데 해볼 수 있는 것들이 정말 많이 보이네요👀 View가 느리거나 최적화를 하고 싶다면 SwiftUI Instrument를 활용해보세요! 단, 활용하실 때에는 한번에 모든 수정을 하시지 말고, 한번에 하나의 조건이나 변경을 적용해보면서 어떻게 달라지는지 확인해보면 좋을 것 같습니다.

References

instruments

How to use Instruments to profile your SwiftUI code and identify slow layouts - a free SwiftUI by Example tutorial

Core Animation

About Core Animation

다른 Instrument들도 체험해보시고, 어떤 기능들이 있는지 댓글로 남겨주시면 서로 Instrument로 앱의 성능을 최적화하는 능력을 키울 수 있을 것 같습니다 :)

[yeniful]

주로 메모리 릭을 확인할 때 사용했는데, 매우 다양한 기능들이 있었군요 !!
좋은 정보 공유해주셔서 감사드립니다 : )

[morningfest]

매크로 프로젝트에 애니메이션을 넣을건데 확인해봐야겠네용!
(저말고 저희 팀원들이ㅎ)