[플러터] 플러터 웹에 대한 Q&A 모음

Flutter web에 관한 관심은 많지만 그에 대한 정보가 많이 보이지않아 간단히 작성해보았다.

플러터로 웹 개발을 할 수 있나요?

본론만 말하면 그렇다. 미심적은 부분이 있긴해도 웹을 플러터로 개발이 가능하다.

 

웹 개발을 배우려고 합니다. 플러터를 배워도 괜찮을까요?

아니요. 플러터는 당장은 앱 개발만을 위한 프레임워크라고 생각해야한다.

개발한 앱을 웹 브라우저에서 돌려볼 수 있다는 정도로 생각해야하며,

웹 개발과 앱 개발을 동시에 원한다면 리액트를 배우는 것을 추천한다.

다만, 리액트와 플러터를 함께 사용하는 현직자분들 중에는 앱 개발은 플러터가 훨씬 편리하다는 의견이 많았다.

 

 

플러터 웹은 어떤 점이 문제인가요?

퍼포먼스의 부족

https://gallery.flutter.dev/#/

링크는 구글이 플러터로 개발한 웹 예제 페이지다.

위 사이트를 잠깐만 사용해보아도 느린 로딩과 애니메이션의 버벅임이 존재한다.

애니메이션에서 프레임 드랍이 일어나는 것을 심심치않게 볼 수 있으며, 웹 사이즈를 줄이고 늘리는 경우 엄청난 버벅임을 느낄 수 있다.

HTML, CSS, JS의 결과물과 비교한다면 매우 좋지 못한 사용자 경험이다.

실제 해외 포럼에서도, 스크롤과 같은 애니메이션과 로딩에 관련된 부분이 무거워 플러터 웹은 권장하지 않는다는 의견이 지배적이다.

 

 

앱과 동시 개발 어려움

플러터로 웹을 개발하고자 하는 이유는 크게 두 가지일 것이다.

네이티브 웹을 배울 여력이 없는 개발자, 앱을 개발하면서 동시에 웹을 개발하고싶은 개발자

 

후자의 경우 안드로이드와 IOS가 동시에 개발되듯이 웹개발도 그러하길 원했을 것이다.

하지만 웹을 지원하지 않는 패키지가 많다.

ImagePicker, 카카오 로그인 등 일반적인 서비스에서 사용할법한 패키지의 다수는 웹을 지원하지 않는다.

특히, 아직까지도(2021년12월..) Google 애드센스가 플러터 웹으로 지원되지 않는다...

패키지를 비롯해 레이아웃도 웹과 앱을 구분할 필요가 있는데 기능과 레이아웃이 모두 한 곳에서 이루어지는 플러터의 특성상

미세한 부분까지의 수정이 필요해 규모가 클수록 동시 개발이 아니라 새로운 프로젝트가 된다.

성능이 좋지 않음을 감수하더라도 개발 효율이 좋지 않다는 말이다.

 

 

페이지 내 검색 불가능

​가장 큰 문제점이다. 플러터로 제작된 웹 페이지의 검색 최적화가 이루어지지 않는다는 것이다.

즉, 런칭한 웹 사이트가 구글이나 네이버에서 키워드로 검색이 안된다는 것이다.

따라서 게시판을 만들었을 때, 등록된 게시글이 포털에 노출되지 않는다.

핵심적인 문제점은 Text 위젯이 페이지 내 검색을 지원하지 않는다는 것이다.

이게 무슨 말이냐 하면, 크롬에서 페이지 번역이 동작하지 않는다. 전통 웹처럼 컴포넌트가 분리되어 있지 않다는 말이다.

 

한글 지원이 불완전

플러터 웹에서 한글을 입력하거나 보여줄 때, 처음에 특수문자로 표시되었다가 한글로 렌더링 된다.

텍스트 필드에 한글을 입력할 때에도 이 때문에 딜레이가 발생하는 것처럼 느껴지는데, 정말 심각한 문제가 아닐 수 없다.

 

디버깅의 불편함

플러터는 핫 리로드를 지원한다. 하지만 이게 웹에서도 잘될거라고 생각했으면 큰 오산이다.

플러터 웹에서 핫 리로드를 동작시켜보면 10번에 9번은 로딩이 돌아가면서 진행이 되질 않는다. (환경의 문제인지는 잘모르겠다)

그래서 디버그 모드가 아닌 flutter run으로 동작시켜 개발해야 하는데, 이 경우 상당히 불편하다.

그냥 React 쓰고 싶다.

 

 

 

결론, 플러터 웹은 시기상조이다.