Flutter Web 베타 버전 프로젝트 적용기

배경

회사에서 Flutter로 개발한 관리자 도구를 웹에서도 사용하고 싶다는 요청이 들어왔다. Flutter Web이 2019년 말에 베타로 공개되어 실험적으로 적용해보기로 했다.

환경 설정

Flutter 채널을 beta로 변경하고 web 지원을 활성화했다.

flutter channel beta
flutter upgrade
flutter config --enable-web
flutter devices  # Chrome 디바이스 확인

마주친 문제들

1. 패키지 호환성

shared_preferences, path_provider 등 네이티브 기능을 사용하는 패키지들이 web을 지원하지 않았다. shared_preferences_web 같은 별도 패키지를 추가하거나 Platform check로 분기 처리했다.

import 'package:flutter/foundation.dart' show kIsWeb;

if (kIsWeb) {
  // Web용 로직
} else {
  // 모바일용 로직
}

2. 빌드 크기

첫 빌드 결과물이 2MB가 넘었다. CanvasKit 대신 HTML 렌더러를 사용하니 크기가 줄었다.

flutter build web --web-renderer html

3. 라우팅

Navigator 2.0이 아직 없던 시기라 브라우저 뒤로가기 처리가 어색했다. WillPopScope로 임시 대응했지만 완벽하지 않았다.

결과

베타 단계답게 성능과 안정성 문제가 있었지만, 코드 재사용률이 85% 이상이었다. 당장 프로덕션에 올리기는 어렵지만 가능성은 충분해 보였다. 정식 릴리스를 기다리며 계속 테스트해볼 예정이다.