해당 포스팅은 유튜브 영화&드라마 리뷰 영상 큐레이션 플랫폼 Plotz를 개발하면서 도입된 기술 및 방법론에 대한 내용을 다루고 있습니다.
다운로드 링크 : 앱스토어 / 플레이스토어

이번 포스팅에서는 아주 쉽게 Flutter 프로젝트에 Isolate을 적용하는 방법에 대해 다루어 보려고 합니다. 복잡한 설명은 최대 배제하고 핵심 내용만 설명하려고 합니다. 목차는 아래와 같습니다.

1. Isloate 이란?
2. 언제 그리고 왜 Isolate을 사용할까?
3. 쉽고 유연하게 Isolate을 적용하는 방법

Isolate에 구체적인 작동방식에 대해 이해하지 못하고 있더라도 바로 여러분의 프로젝트에 적용할 수 있도록 모듈화된 코드를 제공합니다.

상세 개념이 궁금하시면 Flutter 공식 문서를 참고하세요.

++
https://pub.dev/packages/easy_isolate_mixin
최근에 Isolate을 쉽게 도와주는 패키지를 배포했습니다!

Isloate 이란?

먼저 Isolate 개념을 가볍게 짚고 넘어갑시다.

Isolate는 독립적인 작업 단위로, 자체적인 메모리 공간을 가지고 병렬 처리 및 비동기 작업을 수행하는 기능. 각 isolate는 자체적으로 실행되는 코드를 가지며, 메모리를 공유하지 않고 통신을 위해 메시지 전달을 사용함 이를 통해 플러터 애플리케이션에서 병렬 작업을 처리하고, 응답성을 향상시키며, 긴 작업을 분리하여 앱의 성능을 개선할 수 있.

공식문서에 설명되어 있는 글 입니다. 조금 복잡하죠?

좀 더 쉽게 이야기해보겠습니다.
Dart는 싱글 스레드로 구성되어 있습니다. 그러므로 한 번에 하나의 작업만 처리할 수 있습니다. 예를 들어, 화면 UI를 렌더링하는 동안에는 네트워크를 호출하는 것이 원칙적으로 불가능합니다. 하지만 비동기 처리와 Isolate(이벤트 루프)를 통해 동시성 프로그래밍을 지원하고, 결과적으로 UI 렌더링 작업과 네트워크 호출 작업을 동시에 실행시킬 수 있게 됩니다.

비동기 처리와 Isolate의 차이

이때 비동기 처리(async-await)와 Isolate 모두 동시성 프로그래밍을 지원한다는 공통점이 있지만 명확한 차이점도 있습니다. 이 부분이 Isolate를 이해하는데, 있어서 굉장히 중요한 개념인데요. 스타크래프트 게임으로 비유해 보겠습니다.

1. 비동기 처리와 테란

비동기 처리를 통해 동시적으로 작업을 처리한다는 것은 테란의 SCV가 2개의 건물을 짓는 상황일 때, 건물을 조금씩 번갈아 가면서 짓는 상황이라고 이해할 수 있습니다(SCV는 건물을 짓는 과정을 중단 및 재개할 수 있다는 점이 고증되었습니다)
여기서 건물은 하나의 작업 단위이고 건물을 짓는 SCV는 메모리를 가지고 있는 스레드인 셈이죠.

2. isolate과 프로토스

반대로 프로토스의 유닛은 건물을 짓는 과정 자체에 관여하지 않습니다. 유닛이 구 형태의 플라즈마 필드를 생성하면 플라즈마 필드 자체가 유닛의 관여 없이 스스로 건물이 완성되는 형태입니다. 여러 개의 플라즈마 필드를 생성할 수 있고, 각 플라즈마 필드는 독립적으로 건물을 구성한다는 점에서 Isolate과 유사한 특징을 가집니다. 여러 개의 Isolate이 생성될 수 있고, 각각 서로 다른 메모리 공간을 가지고 작업을 진행하기 때문입니다.

즉, 비동기 처리 방식과 다르게 Isolate은 독립된 메모리 공간을 가지고 병렬 및 비동기 작업을 수행하는 특징이 있습니다. 또한, 여러 개의 Isolate이 실행될 수 있는 구조이기도 합니다.

건물을 짓는 행위 : 메모리 할당
건물 : 프로세스
유닛 : 스레드
프로토스의 플라즈마 필드 : isolate(event loop)

언제 그리고 왜 Isolate을 사용할까?

제 경험상 대부분은 Isolate을 사용할 필요가 없습니다. 메인 스레드에서도 충분히 역할을 해낼 수 있기 때문입니다. 하지만 아래와 같은 경우는 예외 Ioslate 도입을 고려해 볼 수 있습니다.

1. 대용량 이미지 처리
   어플리케이션에서 이미지를 처리하는데 생각보다 리소스를 많이 사용하게 됩니다. 여러 개의 고화질 이미지를 동시에 처리해야 하는 경우 Isolate을 사용하는게 좋습니다

2. 대규모 데이터 처리
   
   대규모 데이터 처리 작업을 수행해야 할 때는 Isolate을 사용하는 게 정말 중요합니다. 보통 주식 거래 앱에서 일반적으로 보여지는 차트를 그릴 때 자주 사용됩니다. 1년치 이상의 차트 기록을 보여준다고 했을 때 대용량 데이터를 호출하기 때문이죠. 실제로 저의 경우 isolate을 적용하지 않고 1년 치 차트 데이터를 불렀더니 앱 1.5초 정도 버벅거리는 증상이 발생했습니다. (이미지 출처 : 서울거래 비상장, 아워튜브)

3. 백그라운드 동기화
   애플리케이션에서 주기적으로 서버와 동기화해야 하는 경우, Isolate 사용이 권장됩니다. 예를 들어 주식거래 앱에서 실시간으로 차트 데이터를 동기화해야 할 때 사용할 수 있습니다.

4. 복잡한 계산
   어플리케이션에서 복잡한 계산 작업이 필요한 경우에도 Isolate을 사용할 수 있습니다. 특히 무거운 작업을 수행하는 loop문 여러 번 반복된다면 Isolate 도입을 고려해 보세요.

위에서 언급한 경우 이외에도 Frame Drop, 즉 버벅거림 현상이 보인다고 원인을 파악하고 Isolate을 적용해도 무방합니다. 요약하면 UI 스레드의 부하를 줄이고 앱의 전체적인 성능을 향상하기 위해 Isolate을 사용한다고 볼 수 있습니다.

쉽고 유연하게 Isolate을 적용하는 방법

이제 실제로 Isolate을 적용하는 방법을 설명드리겠습니다. 본 포스팅에서는 구체적인 Isolate 코드의 작동 원리에 대해서는 설명드리지 않지만 주석을 일일히 다 달아놓았으니 참고해주세요. 핵심 컨셉만 소개해 드리겠습니다.

import 'dart:async';
import 'dart:collection';
import 'dart:isolate';
import 'package:flutter/services.dart';

// Isolate를 다루는 mixin 클래스
mixin IsolateHelperMixin {
  // 동시에 실행할 수 있는 Isolate의 최대 개수 설정
  static const int _maxIsolates = 5;

  // 현재 실행 중인 Isolate의 개수를 추적
  int _currentIsolates = 0;

  // 보류 중인 작업을 저장하는 큐
  final Queue<Function> _taskQueue = Queue();

  // Isolate를 생성하여 함수를 실행하거나, 만약 현재 실행 중인 Isolate의 개수가 최대치에 도달한 경우 큐에 작업을 추가
  Future<T> loadWithIsolate<T>(Future<T> Function() function) async {
    if (_currentIsolates < _maxIsolates) {
      _currentIsolates++;
      return _executeIsolate(function);
    } else {
      final completer = Completer<T>();
      _taskQueue.add(() async {
        final result = await _executeIsolate(function);
        completer.complete(result);
      });
      return completer.future;
    }
  }

  // 새로운 Isolate를 생성하여 주어진 함수를 실행
  Future<T> _executeIsolate<T>(Future<T> Function() function) async {
    final ReceivePort receivePort = ReceivePort();
    final RootIsolateToken rootIsolateToken = RootIsolateToken.instance!;

    final isolate = await Isolate.spawn(
      _isolateEntry,
      _IsolateEntryPayload(
        function: function,
        sendPort: receivePort.sendPort,
        rootIsolateToken: rootIsolateToken,
      ),
    );

    // Isolate의 결과를 받고, 이 Isolate를 종료한 후, 큐에서 다음 작업을 실행
    return receivePort.first.then(
          (dynamic data) {
        _currentIsolates--;
        _runNextTask();
        if (data is T) {
          isolate.kill(priority: Isolate.immediate);
          return data;
        } else {
          isolate.kill(priority: Isolate.immediate);
          throw data;
        }
      },
    );
  }

  // 큐에서 다음 작업을 꺼내어 실행
  void _runNextTask() {
    if (_taskQueue.isNotEmpty) {
      final nextTask = _taskQueue.removeFirst();
      nextTask();
    }
  }
}

// Isolate에서 실행되는 함수
Future<void> _isolateEntry(_IsolateEntryPayload payload) async {
  final Function function = payload.function;

  try {
    BackgroundIsolateBinaryMessenger.ensureInitialized(
      payload.rootIsolateToken,
    );
  } on MissingPluginException catch (e) {
    print(e.toString());
    return Future.error(e.toString());
  }

  // payload로 전달받은 함수 실행 후 결과를 sendPort를 통해 메인 Isolate로 보냄
  final result = await function();
  payload.sendPort.send(result);
}

// Isolate 생성 시 필요한 데이터를 담는 클래스
class _IsolateEntryPayload {
  const _IsolateEntryPayload({
    required this.function,
    required this.sendPort,
    required this.rootIsolateToken,
  });

  final Future<dynamic> Function() function; // Isolate에서 실행할 함수
  final SendPort sendPort; // 메인 Isolate로 데이터를 보내기 위한 SendPort
  final RootIsolateToken rootIsolateToken; // Isolate간 통신을 위한 토큰
}

적용 예시:

// Repository 레이어에서 IsolateHelperMixin을 적용

// 유저 레포지토리 클래스
class UserRepository with IsolateHelperMixin {
  UserRepository(this._api);

  // Isolate 적용 버전
  Future<ProfileImgRes> loadUserProfileImg() async =>
      loadWithIsolate(() => _api.loadUserProfileImg());

  // Isolate 적용이 안된 버전
  Future<UserInfo> loadUserDetailInfo() async => _api.loadUserDetailInfo();
}

// 콘텐츠 레포지토리 클래스
class ContentRepository with IsolateHelperMixin {
  ContentRepository(this._api);

  // Isolate 적용 버전
  Future<ContentImg> loadContentImg() async =>
      loadWithIsolate(() => _api.loadContentImg());

  // Isolate 적용이 안된 버전
  Future<ContentInfo> loadContentInfo() async => () => _api.loadContentInfo();
}

// 사용자 정보 가져오기
final userRepository = UserRepository(UserApi());
final user = await userRepository.getUserDetails();
print(user);

// 메인 함수에서 필요한 값들을 초기화 해줘야 함

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // NOTE : Isolate 토큰 생성 및 초기화
  final RootIsolateToken rootIsolateToken = RootIsolateToken.instance!;
  BackgroundIsolateBinaryMessenger.ensureInitialized(rootIsolateToken);

  runApp(const MyApp());
}

특징

1. Future<T> Function() 타입을 인자로 받는 메소드

Isolate으로 처리하고 싶은 Future<T> 메소드를 인자로 받으면 간편하게 Isolate을 기능을 실행시킬 수 있기 때문에 코드의 유연성을 크게 향상시킵니다.

// _api.loadContentImg() <-- 기존 메소드

Future<ContentImg> loadContentImg() async =>
     loadWithIsolate(() => _api.loadContentImg());

더불어, 이미 존재하는 클래스나 함수에 대해 별도의 수정 없이 Isolate를 적용할 수 있게 됩니다. 이에 따라 기존 코드를 크게 수정하지 않고도 병렬 처리를 쉽게 적용할 수 있으며, 이는 개발 시간을 줄이고 코드의 가독성을 향상시키는 효과를 가져옵니다.

요약하자면, Future Function() 타입을 인자로 받음으로써 다양한 비동기 작업에 대해 간결하고 유연한 코드 작성이 가능하게 됩니다. 이는 코드의 재사용성을 향상시키며, 유지 관리를 용이하게 합니다.

2. mixin 클래스 기반의 Isolate

Isolate을 mixin 클래스로 관리하는 이유는 크게 3가지 장점이 있기 때문입니다.

1. 재사용성
   Isolate 관리 코드를 여러 클래스에서 사용할 수 있습니다. 이는 DRY(Don't Repeat Yourself)원칙을 따르는 데 도움이 됩니다. 위 코드에서 UserRepository와 ContentRepository 클래스에 공통적으로 IsolateHelperMixin 클래스가 믹스인되어 isolate기능 동일하게 수행하고 있습니다

2. 설계의 유연성
   mixin을 이용하면 클래스 내에서 관리되는 메소드에 선택적으로 isolate을 적용할 수 있게 됩니다. 예를들어 UserRpeository의 loadUserProfileImg 메소드는 Isolate이 적용되었지만 loadUserDetailInfo 메소드는 선택적으로 Ioslate을 적용하지 않았습니다. mixin 덕분에 이렇게 유연한 구조를 구성할 수 있게 됩니다.

3. 모듈화
   mixin을 사용하면 코드를 더 잘 모듈화할 수 있습니다. 이는 코드의 가독성을 향상시키며 이해하기 쉽게 만들어줍니다. 단편적으로 Isolate을 동작 원리를 자세히 이해하지 못하는 작업자라도 간편하게 Isolate 기능을 수행할 수 있도록 합니다.

3. Isolate 최대 개수 제한

loadWithIsolate 메소드를 호출할 때 최대 실행 가능한 Isolate의 개수를 제한하는 로직이 들어가 있습니다. 이를 통해 시스템 리소스를 효율적으로 활용하고, 너무 많은 Isolate이 동시에 실행되어 발생할 수 있는 성능 저하나 문제를 방지합니다.

마무리

이번 글에서는 Isolate을 쉽고 유연하게 적용하는 방법에 대해 알아보았습니다. 위에서 잠깐 언급했지만, 대부분은 Isolate을 사용할 필요는 없습니다. 오히려 Isolate을 남용하면 전체적으로 앱 성능에 안좋은 영향을 주기 때문이죠.

그래서 적절하게 사용하는 게 중요합니다. Ioslate이 필요한 경우 포스팅에서 제공된 코드를 참고하여 쉽고 유연하게 Ioslate을 적용해 보세요 😀