[모바일 최적화] Flutter Isolate로 UI 버벅임(Jank) 해결 및 60FPS 달성

1. 문제

대용량 채팅 메시지 목록을 불러오거나 고해상도 이미지를 처리할 때, 화면이 순간적으로 얼어붙거나 버벅거리는 치명적인 ‘UI Jank’ 현상이 발생합니다.
Flutter는 기본적으로 단일 스레드(Single Thread)로 동작하기 때문에, 무거운 데이터 파싱 연산이 UI를 그리는 메인 스레드의 발목을 잡아 렌더링 프레임을 놓치게 만들기 때문입니다.

2. 왜 필요한가

고객은 단 0.1초의 화면 끊김만으로도 ‘이 앱은 무겁고 느리다’고 각인하므로, 무거운 백그라운드 연산은 메인 UI의 렌더링 작업과 철저하게 분리되어야 합니다.
UI 스레드는 오직 사용자의 터치 반응과 부드러운 애니메이션에만 전념해야 하며, 복잡한 데이터 처리는 완전히 독립된 공간으로 격리(Isolate)시켜야만 네이티브 앱 수준의 성능을 유지할 수 있습니다.

3. 기대효과

Isolate를 적용하면 수십 메가바이트의 데이터를 파싱하거나 복잡한 암호화를 수행하는 순간에도 화면 스크롤이 기름칠한 듯 60FPS로 완벽하게 부드럽게 유지됩니다.
초기 로딩이나 대규모 데이터 갱신 시 발생하는 프레임 드랍이 완전히 사라져 사용자에게 프리미엄 앱 수준의 쾌적한 경험(UX)을 선사합니다.

4. 구현 방향

Flutter의 내장 함수인 `compute`를 활용하여, 메인 스레드와 메모리를 공유하지 않는 독립적인 워커(Worker) 스레드를 생성해 무거운 연산을 전적으로 위임합니다.
아래는 수만 개의 채팅 JSON 데이터를 파싱할 때 UI 멈춤을 방지하기 위해 백그라운드 Isolate로 작업을 분리한 핵심 구현 로직입니다.

// 무거운 JSON 파싱 작업을 메인 스레드에서 완벽하게 분리
Future> parseMessagesAsync(String jsonString) async {
  // compute()를 호출하여 독립된 Isolate에서 백그라운드 연산 수행
  return await compute(_parseJsonInBackground, jsonString);
}

// Isolate에서 실행될 함수는 반드시 최상단(Top-level) 함수이거나 static이어야 함
List _parseJsonInBackground(String jsonString) {
  final parsed = jsonDecode(jsonString).cast>();
  
  // 메인 스레드의 방해 없이 무거운 반복문을 자체적으로 처리
  return parsed.map((json) => ChatMessage.fromJson(json)).toList();
}

5. 비즈니스 가치

어떤 상황에서도 ‘절대 멈추지 않는 앱’이라는 압도적인 퀄리티는 유저의 서비스 체류 시간과 앱스토어 평점을 극적으로 끌어올리는 가장 강력한 무기입니다.
성능과 타협하지 않는 매끄러운 UX는 단순한 기술적 최적화를 넘어, 서비스의 브랜드 신뢰도와 충성도를 결정짓는 핵심 비즈니스 자산이 됩니다.