[Flutter Web] web rendering 방식의 이해하기

Flutter 를 가지고 항상 앱만 개발을 해오다가 이번에는 web에 한번 적용을 해보는 것이 저희팀에서는 더 좋을 것 같아서 일단 시도를 해보기로 했어요. 작은 프로젝트를 하나 채택을 해서 적용을 해보다가 알게 된 내용입니다. 

https://docs.flutter.dev/platform-integration/web/renderers

Web renderers

위의 링크를 보시면 flutter 로 웹을 배포할때 어떻게 해야할지에 대해서 조금이나마 이해가 가능하실꺼에요. 

고려사항

Flutter Web에서 HTML과 CanvasKit 렌더러 중 어느 것이 더 좋은지 결정하는 것은 프로젝트의 요구 사항과 성능 목표에 따라 다를 수 있습니다. 각각의 렌더러에는 장단점이 있으며 다음과 같은 고려 사항을 고려할 것 같습니다. 

HTML 렌더링 방식에 대한 생각 

- 브라우저의 네이티브 HTML 및 CSS 엔진을 사용하므로 렌더링 업무를 브라우저에 전적으로 위임합니다.
- 텍스트 및 UI 레이아웃을 브라우저 엔진에 의존하므로 텍스트 렌더링 및 레이아웃이 정교하게 처리됩니다.
- 웹 표준 준수와 웹 접근성을 지원하는 데 용이합니다.
- 일반적으로 CanvasKit에 비해 더 높은 성능을 갖을 수 있습니다. 

CanvasKit 렌더링 방식에 대한 생각 

- CanvasKit은 Skia 그래픽 엔진을 사용하며, Flutter의 스크립트를 렌더링하고 처리합니다.
- CanvasKit은 플랫폼 간 일관된 렌더링을 제공할 수 있으며, Flutter의 렌더링 엔진인 Skia를 사용하기 때문에 모바일 및 데스크톱 플랫폼과 일관성을 유지할 수 있습니다.
- CanvasKit을 사용하면 특별한 웹 표준 렌더링 동작을 만들 수 있습니다.

아마 적용을 하시다보면 많은 고민을 하시게 되시게 될꺼에요. 
저희팀도 프런트 개발자가 많은 것을 물어보더라구요 ^^ 
여러분들도 혹시나 팁을 가지고 계신다면 공유부탁드립니다.