플러터는 굉장한 속도로 발전하는, 특히 웹 지원은 더욱 더 발전 중인 프로젝트이기 때문에, 이 글은 **20/9/19 기준(v1.20.3)**으로 쓰여진 정보임을 밝힙니다.
기존 프로젝트로 웹 빌드하기
# flutter web은 beta 채널을 이용합니다.
flutter channel beta
# flutter web 옵션 켜기
flutter config --enable-web
## 여기서 에디터를 재실행 해주는 것을 권장하고 있다.
# 프로젝트에 web 디렉토리를 추가한다.
flutter create .
# 플러터 앱을 크롬에서 profile 모드로 실행시킨다. (이 옵션을 안 쓰면 기본값인 debug 모드로 실행)
flutter run --profile -d chrome
### (매우 실험적 #41062 #56938) CanvasKit 사용
flutter run --release --dart-define=FLUTTER_WEB_USE_SKIA=true -d chrome
주의할 점
플러그인
-
플러그인이 web 을 지원하는지를 확인해야 한다. pub.dev 에서 확인해주자.
-
플러그인이 베타 채널에서 올바로 동작하는지 확인해야 한다.
파일
- dart:io 라이브러리를 사용할 수 없다. 즉, 파일 시스템에 접근할 수 없다.
기타 제약
- Platform.is 가 안먹힌다.
플러터 웹은 좋나요?
공식 문서 (https://flutter.dev/docs/development/platform-integration/web) 에서는 다음 3가지 경우에 사용하는 것이 이상적이라고 한다.
- 상호작용이 많은 SPA(single page apps)
- PWAs (progressive web apps)
- 기존 웹 사이트에 상호작용이 많은 부분 요소로 임베드하기 위해서
이 3가지 경우에서도 매우 조심스럽게 테스트를 해가며 진행해야 한다고 되어있다.
기억해야 할 것은, 플러터 웹으로 나온 결과물은 웹 사이트가 아니라 웹 앱 이라는 것이다.
(js 가 싫어서) 플러터 웹으로 웹 개발 시작해도 되나요? 물어보는 사람들이 있는데, 결론은 그냥 react나 vue나 다른 F-end 프레임워크를 사용하는게 낫다. 플러터 웹은 절대 초보용이 아니다.
- 개발 과정에서 수 많은 이슈들과 싸워나갈 각오를 해야 한다. 도와줄 리소스도 거의 없다!
- 이런 이슈들을 어찌 이겨낸다고 해도 SSR도, SEO도, wasm 지원도, CORS 도 불완전한 결과물이 나온다.
- 그리고 그 동안 계속해서 플러터 웹 스펙은 바뀌고...
만약 기존에 완성된 플러터 프로젝트가 있고 웹 쪽으로 확장을 꾀하는 경우라면, 의외로 괜찮은 선택이 될 지도? 하지만 한 쪽 발은 언제든지 빠져나갈 준비를 해야 한다.
그렇다고 너무 플러터 웹 구리다고 할 건 없다.
플러터라는 뷔페에서 회를 먹으면서 리액트 횟집에서 먹던 그 맛이 아니라고 하면 혼난다.
🐍 뱀발
결론이 매우 비관적으로 보이지만, 사실 매우 잘 쓰고 있다. 특히, 에뮬레이터나 실기기가 필요없는 only ui 개발할 때, 맥북에서 에뮬레이터의 이착륙 없이 개발하는 행복이란.
참고
https://flutter.dev/docs/development/platform-integration/web
https://github.com/flutter/flutter/issues?q=web