Flutter Web

Flutter Web 렌더링 아키텍처

Flutter Web은 HTML 렌더러와 CanvasKit 렌더러 두 가지 옵션을 제공합니다:

HTML 렌더러

• HTML 요소, CSS, Canvas 요소, SVG 요소의 조합으로 렌더링

• <img> 요소를 사용하여 이미지 렌더링

• 더 작은 번들 크기 (CanvasKit 대비 약 1.5MB 절약)

• 웹 표준 기술 활용으로 SEO 및 접근성 우수

CanvasKit 렌더러

• Skia 그래픽 엔진(C++)을 WebAssembly로 컴파일한 버전

• WebGL을 통해 Canvas API 활용하여 렌더링

• Flutter 모바일/데스크톱과 완전히 호환되는 픽셀 단위 정확성

• 복잡한 그래픽 및 애니메이션에서 우수한 성능

자동 렌더러 선택

기본적으로 Flutter는 플랫폼에 따라 자동 선택합니다:

bashflutter build web  # 자동 선택 모드

• 모바일 브라우저: HTML 렌더러 (터치 최적화)

• 데스크톱 브라우저: CanvasKit 렌더러 (고성능 그래픽)

수동 렌더러 지정

특정 렌더러를 강제로 사용할 수 있습니다:

bashflutter build web --web-renderer html      # HTML 렌더러만
flutter build web --web-renderer canvaskit # CanvasKit만

비즈니스 고려사항

HTML 렌더러: B2B 웹앱, 콘텐츠 중심 서비스에 적합 (호환성, SEO, 빠른 로딩)

CanvasKit: 게임, 디자인 툴, 복잡한 시각화 앱에 적합 (성능, 정확한 렌더링)

하이브리드: 자동 선택으로 플랫폼별 최적화와 개발 효율성 동시 확보

따라서 Flutter Web은 Canvas 중심이 아닌, 웹 표준과 고성능 그래픽을 모두 지원하는 적응형 아키텍처를 채택한 전략적 설계입니다