Optimization techniques - Image compression

Tags:
Flutter

2025. 05. 22. (Thu)

Flutter 앱 최적화와 이미지 처리 기법

Flutter 앱을 개발할 때 최적화는 성능과 사용자 경험에 중요한 영향을 미칩니다.

효율적인 앱 구현을 위한 다양한 최적화 방안이 있지만, 이미지 최적화에 초점을 맞춰 살펴보겠습니다.

Flutter 앱의 일반적인 최적화 방안

Flutter 앱을 최적화하는 방법은 다양하지만, 제가 자주 고려하는 네 가지 방법은 다음과 같습니다:

  1. build call 횟수, 범위 최소화: 불필요한 위젯 트리 재구성을 방지하고 상태 변경의 영향 범위를 최소화
  2. const 생성자 사용: 빌드 타임에 위젯을 생성하여 런타임 성능 향상
  3. lazy loading: 필요한 시점에 리소스를 로드하여 초기 로딩 시간 감소
  4. 이미지 최적화: 효율적인 이미지 사용으로 앱 크기와 메모리 사용량 최소화

이미지 최적화 방안

이미지는 앱 크기와 성능에 큰 영향을 미치는 요소입니다. 이미지를 최적화하는 주요 기법은 다음과 같습니다:

  1. 적절한 해상도 사용 및 이미지 압축: 필요 이상의 고해상도 이미지를 사용하지 않고, 이미지 품질과 파일 크기의 균형 유지
  2. 이미지 캐싱: 한 번 로드한 이미지를 메모리나 디스크에 저장하여 재사용
  3. lazy loading: 화면에 표시될 때만 이미지를 로드하여 초기 로딩 시간과 메모리 사용량 절감
  4. SVG 및 벡터 이미지 사용: 다양한 화면 크기에 대응하고 파일 크기를 줄이는 벡터 그래픽 활용
  5. 이미지 포맷 선택: 상황에 맞는 최적의 이미지 포맷 선택(JPEG, PNG, WebP 등)
  6. 이미지 프리로딩: 사용자가 곧 접할 가능성이 높은 이미지를 미리 로드
  7. 에러 대응 처리: 이미지 로딩 실패 시 적절한 대응 처리

이 중에서도 가장 효과적인 최적화 방안인 이미지 압축에 대해 자세히 알아보겠습니다.

주요 이미지 포맷

앱이나 웹에서 가장 보편적으로 사용되는 이미지 포맷은 다음과 같습니다:

  1. JPEG(Joint Photographical Experts Group): 사진과 같은 복잡한 이미지에 적합하며 손실 압축 방식을 사용하여 파일 크기를 줄이는 포맷. 투명도를 지원하지 않지만 자연스러운 이미지에서 좋은 압축률을 제공합니다.

  2. PNG(Portable Network Graphics): 무손실 압축 방식을 사용하며 투명도를 지원하는 포맷. 단순한 그래픽이나 투명도가 필요한 이미지에 적합합니다. 파일 크기는 JPEG보다 크지만 품질 손실이 없습니다.

  3. WebP(Google): Google이 개발한 현대적인 이미지 포맷으로, 손실/무손실 압축을 모두 지원하며 투명도도 지원합니다. JPEG보다 나은 압축률과 PNG보다 작은 파일 크기를 제공하여 웹과 앱에서 점점 더 많이 사용되고 있습니다.

JPEG 이미지 압축의 원리

JPEG 압축은 인간의 시각 특성을 고려한 효율적인 이미지 압축 기술입니다.

그 원리를 이해하기 위해서는 이미지 표현 방식에 대한 이해가 필요합니다.

이미지 표현 영역

이미지는 크게 두 가지 영역으로 표현할 수 있습니다:

  1. 공간 영역(Spatial Domain): 우리가 일반적으로 보는 픽셀 기반 이미지 표현
  2. 변환 영역(Transform Domain): 주파수 기반으로 이미지를 표현하는 방식

공간 주파수(Spatial Frequency)

주파수 영역에서는 공간 주파수라는 개념을 사용합니다. 이는 화소 밝기의 변화율을 나타내는 것으로, 공간 영역에서 픽셀 값이 얼마나 빨리 변하는지를 의미합니다.

  • 고주파: 밝기가 빨리 변하는 부분으로, 주로 경계나 객체의 모서리 같은 세부 디테일 영역
  • 저주파: 밝기가 거의 변하지 않는 부분으로, 주로 배경이나 객체의 내부 영역

주파수 처리를 통해 이미지를 저주파와 고주파로 구분하면 다양한 응용이 가능합니다:

  • 고주파 영역을 제거하면 경계가 흐려진 부드러운 이미지를 얻을 수 있습니다.
  • 저주파 영역을 제거하면 경계나 모서리만 포함하는 에지 이미지를 만들 수 있습니다.

DCT(Discrete Cosine Transform)와 JPEG 압축

JPEG 압축에서는 DCT를 사용하여 이미지를 공간 영역에서 주파수 영역으로 변환합니다. DCT를 사용하는 주된 목적은 저주파와 고주파를 분리하여 인간의 시각 특성에 맞게 압축하기 위함입니다.

JPEG 압축의 목적은 인간이 인지하는 이미지 품질(인지 화질)이 크게 떨어지지 않으면서 파일 크기를 줄이는 것입니다. 이를 위해 다음과 같은 특성을 활용합니다:

  1. 인간의 눈은 큰 변화에 민감하게 반응합니다.

    • 저주파 영역(변화가 적은 지점)에서의 변화는 쉽게 인지됩니다.
    • 고주파 영역(변화가 많은 지점)에서의 변화는 상대적으로 덜 인지됩니다.

  2. 따라서 JPEG 압축은:

    • 저주파 성분은 보존하고
    • 고주파 성분은 정밀도를 낮추거나 제거합니다.

기저(Basis)의 개념

DCT에서 중요한 개념인 기저(Basis)에 대해 알아보겠습니다:

선형대수학에서 기저는 다음 두 가지 조건을 만족하는 벡터들의 집합입니다:

  1. 선형 독립(각 벡터가 서로 중복되지 않음)
  2. 공간을 생성(span): 모든 벡터는 이 기저 벡터들의 선형 결합으로 표현 가능

예를 들어, 2차원 공간의 표준 기저는 (1,0), (0,1)입니다. 이 두 벡터로 모든 2D 벡터를 표현할 수 있습니다.

DCT에서는 벡터 대신 함수를 다루기 때문에, 함수 공간에서의 기저 개념을 사용합니다:

  • DCT의 기저 함수는 코사인 함수들로, 직교성(서로 내적하면 0)과 기저성(임의의 신호를 이 함수들의 선형 결합으로 표현 가능)을 가집니다.

JPEG 압축 과정

JPEG 압축은 다음과 같은 단계로 이루어집니다:

  1. 색상 공간 변환: RGB 이미지를 YCbCr 색상 공간으로 변환하여 밝기(Y)와 색상(Cb, Cr) 정보를 분리합니다.

  2. 8x8 블록 분할: 이미지를 8x8 픽셀 블록으로 나누어 각 블록을 독립적으로 인코딩합니다. 각 블록은 64개의 코사인 기저 함수를 사용하여 표현됩니다.

  3. DCT 변환: 각 8x8 블록을 주파수 영역으로 변환합니다. 이를 통해 다양한 주파수의 코사인 파형의 합으로 이미지 블록을 표현합니다.

  4. 양자화(Quantization): 고주파 DCT 계수의 정밀도를 줄입니다. 이 과정에서 작은 값들은 0으로 바뀌어 압축 효율이 크게 향상됩니다.

  5. 지그재그 순서화: DCT 계수를 저주파에서 고주파 순으로 지그재그 패턴으로 나열하여 연속적인 0의 수를 최대화합니다.

  6. 허프만 압축: 지그재그 순서화된 계수를 효율적으로 인코딩하여 최종 압축 파일을 생성합니다.

  7. 압축 해제: 역과정을 통해 압축된 데이터에서 원본 이미지를 근사적으로 복원합니다.

허프만 압축(Huffman Coding)

JPEG 압축의 마지막 단계에서 사용되는 허프만 압축은 무손실 압축 알고리즘으로, 데이터의 출현 빈도에 따라 가변 길이 코드를 할당하는 방식입니다.

허프만 압축의 기본 원리

  1. 빈도 기반 코드 할당: 자주 나타나는 값에는 짧은 코드를, 드물게 나타나는 값에는 긴 코드를 할당합니다.
  2. 접두어 코드(Prefix Code): 어떤 코드도 다른 코드의 접두어가 될 수 없도록 하여 고유한 디코딩을 보장합니다.
  3. 이진 트리 구성: 각 데이터의 발생 빈도에 기반하여 이진 트리를 구성하고, 트리의 경로를 코드로 사용합니다.

JPEG에서의 허프만 압축

JPEG 압축에서 허프만 코딩은 다음과 같이 적용됩니다:

  1. DC 계수와 AC 계수 분리: 각 8x8 블록의 첫 번째 계수(DC)와 나머지 계수(AC)를 별도로 처리합니다.

  2. 런렝스 인코딩(RLE): 지그재그 스캔 후 발생하는 연속된 0들을 (연속 길이, 다음 비제로 값) 형태로 인코딩합니다.

  3. 허프만 테이블 사용: JPEG는 표준 허프만 테이블을 제공하거나 이미지에 최적화된 커스텀 테이블을 생성할 수 있습니다.

  4. 비트스트림 생성: 최종적으로 허프만 인코딩된 값들을 비트스트림으로 변환하여 압축 파일에 저장합니다.

JPEG 압축의 핵심 통찰

  1. YCbCr 색상 공간의 이점:

    • 밝기와 색상 정보를 분리하여 인간의 시각적 민감도를 활용
    • 색상 정보(크로미넌스)를 과감하게 다운샘플링해도 인지되는 품질 손실은 최소화
    • 특히 사진과 같은 이미지에서 데이터를 크게 줄이면서 시각적 완전성 유지

  2. 코사인 파형을 통한 주파수 표현:

    • DCT는 공간적 이미지 정보를 코사인 함수의 합으로 표현
    • 저주파는 넓은 밝기 변화를, 고주파는 세부 디테일(에지, 텍스처)을 인코딩
    • 이미지 전체에 균일한 손실 없이 목표된 데이터 감소 가능

  3. 8x8 블록 크기의 중요성:

    • 관리 가능한 8x8 블록으로 나누는 것은 계산 가능성과 압축 효율성에 중요
    • 각 블록을 독립적으로 인코딩하여 압축 아티팩트를 작은 영역에 국한
    • 병렬 처리 가능

  4. 양자화를 통한 제어된 데이터 손실:

    • 높은 주파수 성분은 일반적으로 작은 계수를 가지며 인지적으로 덜 기여
    • 이러한 계수의 정밀도를 과감하게 줄이면(0으로) 시각적 영향 최소화하며 데이터 크게 압축

  5. 지그재그 정렬과 허프만 압축의 시너지:

    • 저주파에서 고주파 순으로 DCT 계수를 지그재그 패턴으로 정렬하면 연속된 0이 많아짐
    • 허프만 압축은 이러한 패턴에서 높은 효율을 보이며, 최종 파일 크기를 크게 줄임
    • 통계적으로 최적의 코드 길이를 할당하여 데이터 크기를 최소화

Android에서의 JPEG 압축

Android에서는 Skia 엔진을 사용하여 이미지 처리를 수행합니다. JPEG 압축은 libjpeg-turbo 라이브러리를 통해 구현되며, DCT 관리자(jcdctmgr.c)가 변환을 담당하고, 허프만 인코딩은 별도의 모듈에서 처리됩니다.

결론적으로, JPEG 압축은 인간의 시각적 특성을 활용하여 고주파 성분을 과감하게 줄이고 저주파 성분은 보존하는 DCT 변환과, 데이터의 통계적 특성을 이용한 허프만 코딩을 결합하여 시각적 품질을 유지하면서도 파일 크기를 크게 줄일 수 있는 효율적인 압축 기술입니다. Flutter 앱 개발에서 이러한 원리를 이해하고 적절히 활용한다면, 앱의 성능과 사용자 경험을 크게 향상시킬 수 있을 것입니다.

iOS에서의 JPEG 압축

iOS는 Android와 달리 Skia 엔진을 사용하지 않습니다. 대신 다음과 같은 프레임워크들을 사용합니다:

  1. Core Graphics: Apple의 2D 그래픽 렌더링 엔진으로, Quartz 2D라고도 불립니다. iOS와 macOS에서 기본적인 그래픽 처리를 담당합니다.

  2. Image I/O 프레임워크: JPEG을 포함한 다양한 이미지 포맷의 읽기/쓰기를 담당하며, Apple이 최적화한 JPEG 코덱을 사용합니다.

  3. Metal Performance Shaders: GPU 가속 이미지 처리를 위한 Apple의 고성능 컴퓨팅 프레임워크로, 이미지 압축과 디코딩에서 하드웨어 가속을 제공합니다.

  4. UIKit/SwiftUI: 상위 레벨에서 이미지 표시와 기본적인 처리를 담당합니다.

iOS는 Apple Silicon(A시리즈 프로세서)에 내장된 전용 이미지 처리 유닛과 Neural Engine을 활용하여 JPEG 압축과 해제를 더욱 효율적으로 수행할 수 있습니다.

Sources