본문 바로가기
플러터의 기초부터 개발까지

플러터(Flutter) 앱 성능의 최적화 part 2

by 브레인TJ 2023. 5. 3.
반응형

재구축 최소화:

플러터(Flutter)의 반응형 프로그래밍 모델은 위젯이 자주 재구축될 수 있음을 의미합니다. 그러나 빈번한 재빌드는 앱의 성능에 영향을 줄 수 있습니다. 재빌드를 최소화하려면 변경되지 않는 위젯에 대해 const 생성자를 사용해야 하고 shouldRebuild 콜백을 사용하여 위젯이 재빌드되어야 하는 시기를 제어해야 합니다.

애니메이션 최적화:

애니메이션은 앱에 많은 시각적 매력을 더할 수 있지만 앱의 성능에도 영향을 미칠 수 있습니다. 애니메이션을 최적화하려면 AnimatedBuilder 위젯을 사용하여 애니메이션이 다시 빌드되는 시기와 빈도를 제어해야 합니다.

비동기 작업 사용:

동기 작업은 UI 스레드를 차단하고 앱 성능을 저하시킬 수 있습니다. 이를 방지하려면 Future 및 Stream과 같은 비동기 작업을 사용하여 백그라운드에서 장기 실행 작업을 수행해야 합니다. 이미지

최적화:

이미지는 앱 성능 문제의 주요 원인이 될 수 있습니다. 이미지를 최적화하려면 WebP와 같은 적절한 이미지 형식을 사용하고 이미지를 압축하여 파일 크기를 줄여야 합니다. 이미지 최적화는 앱의 성능에 상당한 영향을 미칠 수 있으므로 플러터(Flutter)에서 앱 개발의 중요한 측면입니다. 일반적으로 플러터(Flutter)에서 이미지를 최적화하는 두 가지 주요 방법이 있습니다. 적절한 이미지 형식을 사용하고 이미지를 압축하여 파일 크기를 줄이는 것입니다.

이미지 형식:

플러터(Flutter)는 각각 고유한 장단점이 있는 다양한 이미지 형식을 지원합니다. 플러터(Flutter)에서 사용되는 가장 일반적인 이미지 형식은 JPEG, PNG 및 WebP입니다. JPEG 이미지는 이미지 품질과 파일 크기 간에 적절한 균형을 제공하므로 일반적으로 세부 묘사가 많은 사진 및 기타 이미지에 가장 적합합니다. PNG 이미지는 아이콘이나 로고와 같이 투명도가 있는 이미지에 가장 적합합니다. 마지막으로 WebP는 JPEG 또는 PNG보다 더 나은 압축을 제공하는 최신 이미지 형식으로 이미지 품질을 희생하지 않고도 파일 크기를 줄일 수 있습니다.

이미지 압축:

적절한 이미지 형식을 사용하는 것 외에도 이미지를 압축하여 파일 크기를 줄일 수 있습니다. 손실 압축과 무손실 압축을 포함하여 이미지 압축에는 여러 가지 기술이 있습니다. 손실 압축은 파일 크기를 줄이기 위해 이미지 품질을 낮추는 반면, 무손실 압축은 원본 이미지 품질을 유지하지만 파일 크기를 크게 줄이지 못할 수 있습니다. 플러터(Flutter)에서는 flutter_image_compress 패키지를 사용하여 손실 또는 무손실 압축을 사용하여 이미지를 압축할 수 있습니다. 이미지 자체를 최적화하는 것 외에도 플러터(Flutter)에서 이미지를 사용하여 성능을 개선하는 데 도움이 되는 몇 가지 모범 사례도 있습니다. 예를 들어 앱에서 축소된 큰 이미지를 사용하면 상당한 성능 저하가 발생할 수 있으므로 피해야 합니다. 대신 앱의 각 사용 사례에 적합한 크기의 이미지를 사용해야 합니다. 전반적으로 이미지 최적화는 플러터(Flutter)에서 앱 개발의 중요한 부분입니다. 적절한 이미지 형식을 사용하고, 이미지를 압축하여 파일 크기를 줄이고, 앱에서 이미지를 사용하는 모범 사례를 따르면 앱 성능을 개선하고 더 나은 사용자 경험을 제공할 수 있습니다.

코드 분할 사용:

코드 분할은 앱의 코드를 더 작고 관리하기 쉬운 청크로 분할하여 앱 성능을 개선하기 위해 플러터(Flutter)에서 사용되는 기술입니다. 코드 분할의 기본 아이디어는 지정된 시간에 필요한 앱 부분만 로드하여 앱 로드에 걸리는 시간을 줄이고 전반적인 성능을 향상하는 것입니다. 플러터(Flutter)에서 코드 분할은 동적 import() 함수를 사용하여 이루어집니다. 이 함수를 사용하면 모듈을 비동기식으로 로드할 수 있습니다. 즉, 필요에 따라 앱의 일부를 온디맨드로 로드할 수 있습니다. Flutter에서 코드 분할을 사용하려면 앱의 코드를 앱의 다른 부분을 나타내는 더 작은 모듈로 분할할 수 있습니다. 예를 들어 로그인 화면, 홈 화면 및 설정 화면에 대한 모듈로 코드를 분할할 수 있습니다. 그런 다음 앱이 로드되면 import() 함수를 사용하여 필요에 따라 각 모듈을 로드할 수 있습니다. 예를 들어 사용자가 로그인 화면으로 이동할 때만 import()를 사용하여 로그인 화면 모듈을 로드할 수 있습니다. 코드 분할은 특히 코드가 많은 대규모 앱의 경우 앱 성능에 상당한 영향을 미칠 수 있습니다. 지정된 시간에 필요한 앱 부분만 로드함으로써 코드 분할은 앱 시작 시간을 줄이고 전반적인 앱 성능을 향상할 수 있습니다. 성능 향상 외에도 코드 분할을 통해 코드를 보다 쉽게 ​​관리하고 유지 관리할 수 있습니다. 코드를 더 작은 모듈로 분할하면 더 쉽게 종속성을 관리하고 다른 부분에 영향을 주지 않고 앱의 특정 부분을 변경할 수 있습니다.

전반적으로 코드 분할은 플러터(Flutter)에서 앱 성능을 개선하고 코드를 보다 효과적으로 관리하는 데 도움이 되는 강력한 기술입니다. 코드 분할은 앱의 코드를 주문형으로 로드할 수 있는 더 작은 청크로 분할할 수 있는 기술입니다. 이렇게 하면 앱의 시작 시간을 줄이고 전반적인 성능을 향상하는 데 도움이 될 수 있습니다. 이러한 팁을 따르고 플러터(Flutter)의 내장 성능 도구를 활용하면 앱의 성능을 최적화하고 빠르고 반응이 빠른 사용자 경험을 제공할 수 있습니다.

반응형

댓글