-
[Flutter] flutter 2.0 stable 버전 출시에 대해 알아보자웹 개발/Flutter 2021. 5. 3. 14:03반응형
flutter 2.0 웹 컨셉
flutter 2.0 에서 웹 stable 버전이 출시되었다.
현재 창업 아이템을 개발 중에 있는데 플랫폼 특성상 UI 디자인적 요소가 중요하고
추후 태블릿 앱으로 발전시켜나갈 계획이였기 때문에 flutter web으로 개발 중이다.
url를 포함한 여러 불안정한 웹 지원 요소들 때문에 reactJS로 옮겨야하나 고민이 있었지만
flutter 2.0 버전이 나온 뒤 flutter로 계속 진행하기로 결정되었다.
2.0 버전으로 마이그레이션 하기 위해 어떤 요소들이 추가되었는지 알아보았다.
1) Progressive web apps (PWAs)
PWAs, 즉 프로그레시브 웹앱은 모바일 앱과 웹 기술의 장점을 결합하고 단점을 보완한 미래형 웹 기술이라고 한다.
네이티브 앱은 오프라인 혹은 느린 네트워크에서 작동하며 푸쉬 알림을 보내주는 장점이 있지만
설치를 해야하기 때문에 접근성이 떨어진다는 단점이 있다. 또한 플랫폼에 종속되어 있기 때문에 개발 시간이 오래 걸린다.
웹은 url로 일회성 접근이 편리하지만 반복되는 접근은 귀찮게 느껴질 수 있으며 네트워크에 연결되어야만 실행이 가능하다.
PWAs는 서비스 작업자(service worker)라는 새로운 API를 활용해 웹앱의 중요한 부분을 캐싱하고,
사용자가 url을 열 때 즉시 로딩하는 방식을 취한다.
그 덕분에 네트워크 환경이 좋지 않아도 빠르게 구동되며, 사용자에게 푸시 알림을 보낼 수 있다.
플러터는 크로스 크로스 플랫폼 앱 개발 툴킷이기 때문에 Android, iOS, 웹과 같은 다양한 플랫폼에 앱을 배포 할 수 있다.
플러터 웹은 dart를 java script로 컴파일하는데 앱을 동일한 코드의 웹으로 변환하는데 가용성이 좋기 때문에
flutter는 PWA (Progressive Web Apps)에 가장 적합한 환경을 제공한다고 볼 수 있다.
PWAs란 무엇인가
http://altenull.github.io/2018/02/25/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%A0%88%EC%8B%9C%EB%B8%8C-%EC%9B%B9-%EC%95%B1-Progressive-Web-Apps-%EB%9E%80/
PWAs와 flutter
medium.com/flutterdevs/progressive-web-app-flutter-62c7dea05fc5
2) Single page apps (SPAs)
3) canvas kit renderer로 성능 향상
flutter web은 두 가지 randerer(렌더러)를 선택할 수 있다.
- html
HTML, CSS, Canvas , SVG 요소의 조합을 사용한다.
다운로드 크기가 더 작기 때문에 성능보다 다운로더 용량이 더 중요할 때 사용한다.
- canvasKit
WASM 및 WebGL을 사용한다.
다운로드 크기가 약 2MB 추가되기 때문에 용량보다 사용 성능이 빠르고 픽셀단위에 일관성이 있어야할 때 사용한다.
- auto
모바일 브라우저에서 실행될 때 HTML 렌더러를 선택하고 데스크톱 브라우저에서 실행될 때 CanvasKit 렌더러를 선택한다.
렌더러를 선택하는 방법
- 명령어 입력
flutter run -d chrome
flutter run -d chrome --web-renderer html
flutter build web --web-renderer canvaskit
- 런타임 시의 설정 (index.html)<script type="text/javascript"> let useHtml = // ... if(useHtml) { window.flutterWebRenderer = "html"; } else { window.flutterWebRenderer = "canvaskit"; } </script> <script src="main.dart.js" type="application/javascript"></script>
4) 이 외 웹을 위한 요소들
- Web-specific features and widgets
Hyperlink, text auto-fill, custom URL strategies, PWA manifests
- Support for desktop form factors
customizable interactive scrollbars, keyboard shortcuts to scroll, screen reader support
medium.datadriveninvestor.com/flutter-engage-flutter-2-2b4e8dde016f
반응형'웹 개발 > Flutter' 카테고리의 다른 글
[Flutter] 플러터 2.0 null safety 를 이해해보자 (0) 2021.08.04 [Flutter] After Effects로 작업한 애니메이션을 flutter에 적용하는 방법 (Lottie) (0) 2021.02.17 [Flutter Web] Fluro 패키지로 네비게이션 라우팅하기 ( Deep link / Transitions) (1) 2021.02.11 [Web] 안드로이드 스튜디오에서 웹 실행시 포트 지정(설정) 하는 법 (0) 2021.02.07 [Flutter] Service locator pattern을 사용해 build context 없이 navigate 하기 (0) 2021.01.31