Flutter Web 개발 후기: 기술적 한계와 적용 사례, 그리고 배운 점

1. Flutter Web의 장점과 한계

Flutter는 구글이 개발한 크로스 플랫폼 프레임워크로, 하나의 코드베이스로 앱(iOS/Android), 웹, 데스크탑(Mac/Windows) 까지 지원할 수 있다. Dart 언어를 기반으로 UI를 직접 렌더링하며, 개발 리소스가 제한적인 스타트업이나 1인 개발자에게 매력적이다

하지만 웹 플랫폼에서의 Flutter는 초기 로딩 속도, SEO, CORS, Service Worker 등에서 뚜렷한 한계를 보여준다.

2. Flutter Web 기술적 한계: 왜 느리고 불편할까?

2-1. 초기 로딩 속도의 차이

동일한 기능, 동일한 이미지로 제작한 웹 페이지를 React와 Flutter로 비교 시, 초기 로딩 속도가 3배 이상 느림.
이유는 Flutter가 웹앱을 캔버스 렌더링 + Service Worker 캐싱 방식으로 처리하기 때문.
첫 방문 시 대용량 js 번들와 assets를 다운받아야 하므로 초기 진입 장벽이 높음.

2-2. Adsense, OpenGraph 등 외부 미리보기 이미지 문제

Adsense 미리보기 iframe(sandbox 적용 환경)에서 Flutter 웹은 이미지가 로딩되지 않는 현상 발생.
React는 public 폴더로 정적 파일을 직접 서빙해 문제 없음.
Flutter는 hashed 파일을 Service Worker가 intercept 하기 때문에 sandbox iframe 환경에서 fetch 실패.

2-3. 한글/이모지 깨짐 및 폰트 로딩 이슈

Flutter 웹은 한글 폰트가 기본적으로 깨지는 경우가 있어, 커스텀 폰트를 코드에 직접 적용해야 함.
이로 인해 번들 용량 증가 및 초기 로딩 속도 추가 지연.
이모지도 기본적으로 깨지는 사례 발생 → 직접 수정 필요.

3. 실제 기업들의 Flutter 활용 사례

Flutter는 웹보다는 앱 개발에서 더 많은 성공 사례를 보여준다.

네이버: 블로그 앱에 Flutter 적용 검토.
카카오, 라인, 쿠팡: 일부 서비스에 Flutter 도입.
삼쩜삼, 블라인드, 중고나라, 번개장터 등: 크로스 플랫폼 개발 효율성을 위해 적극 활용.
특히 스타트업은 빠른 피드백 & 멀티플랫폼 대응을 위해 채택 사례 증가.

➡️ 그러나 웹 중심 서비스나 SEO, 광고 최적화가 중요한 서비스는 Flutter 웹 도입에 신중.

4. Flutter Web의 SEO/CORS/Service Worker 구조적 문제 정리

구분	React	Flutter Web
정적 파일 서빙	public 폴더 통해 직접 서빙	hashed assets ➔ Service Worker intercept
SEO, OpenGraph	meta tag 기반, 이미지 정상 노출	iframe/sandbox 환경에서 이미지 로딩 실패
초기 로딩 속도	js 번들 최소화, 라이트	대용량 번들, 첫 진입 속도 느림
커스텀 폰트/이모지	상대적 문제 적음	폰트 깨짐, 용량 증가, 이모지 깨짐

5. 결론: Flutter Web의 적절한 활용처

Flutter는 앱 개발에서는 확실한 생산성 향상을 보장.
그러나 웹 개발에서는 초기 로딩 속도, SEO, 외부 미리보기, iframe 환경에서의 제약 등으로 인해 기업형 서비스나 광고 기반 서비스에는 부적합.
다운로드 유도 페이지나 이벤트 페이지 등 단기성/프로모션성 페이지라면 고려 가능.
장기적 관점에서는 React 기반의 웹 개발 학습 및 적용이 더 합리적.

최종 정리

플러터 웹은 어디까지나 “모바일 앱을 중심으로 하는 크로스 플랫폼 대응 도구”이며, 웹 전용 서비스 개발에는 구조적 한계가 뚜렷하다.
초반 시간은 들었지만 직접 검토하고 시행착오를 겪은 덕분에 명확한 방향성을 얻었다는 점에서 의미 있는 경험이었다.