Flutter Web App 개발 하면서 느낀 문제점

Web App 개발하면서 느낀 점 과 실수했던 점을 기록해보려고 합니다. 해당 경험은 로박스 Web App 개발하면서 느낀 점을 토대로 작성되었습니다.

Flutter Web App 문제점

1. SEO 불가

SEO(검색 엔진 최적화)는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정입니다.

Flutter Web App은 검색 엔진(구글, 네이버)에 노출이 되지 않습니다. Flutter 로 개발되지 않는 웹의 경우 개발자 도구를 켜서 Element Inspect 텍스트를 눌러보면 해당 텍스트가 Select 됩니다. 하지만 Flutter Web App의 경우는 Web App 전체가 Selecte 됩니다. 이는 검색 엔진이 Flutter Web App을 읽을 수가 없다는 것입니다.

공식적으로 SEO를 지원하지 않지만 플러그인을 사용하여 대체할 수 있습니다. [링크]

2. Adsense 승인 거부

수익창출을 위해 Adsense를 사용하는 Web App같은 경우 수익을 창출할 수 없습니다. 제 경험으로는 애드센스의 승인을 받기위해 Web App 을 신청했지만 거부되었습니다. Adsense는 Web App을 공식 지원하지 않기 때문입니다. 그래서 저 같은 경우 iframe을 사용하여 Kakao Adfit으로 수익을 창출하도록 했습니다. 하지만 Kakao Adfit은 단가 낮다는 단점이 존재합니다.

참고 글

Flutter website approval - Google AdSense Community

 

3. 랜더링시 한글 폰트 일시적으로 깨져 보이는 현상

Flutter Web App의 경우 한글 텍스트 랜더링 시 짧은 시간 "ㅁ"로 표시됩니다. 짧은 시간이지만 썩 좋은 경험은 아니었습니다.

 

4. Hot Reload

Flutter로 Mobile 개발시 Hot Reload는 좋은 기능 이고 역시 Web App에서 사용할 수는 있습니다 하지만 모바일 환경에서는 화면 이동 후 수정된 화면을 Hot Reload시 바로 확인할 수 있지만, Web App의 경우 Hot Reload시 확인하려면 메인 화면(첫 화면)으로 돌아가버리게 됩니다. 이것도 좋은 경험은 아니었습니다.

 

5. 윈도우에서 텍스트가 흐릿하게 보이는 현상

이 현상에 대해 Flutter Github에 들어가서 확인해보니 예전보다 개선되었다고 하지만 여전히 남아있는 문제점입니다. 맥에서는 해당 문제가 발생하지는 않지만 맥보다 사용자가 많은 윈도우에서는 텍스트가 흐릿하게 보입니다. 텍스트 크기가 커지면 흐릿함이 사라지는 것 같지만 저는 폰트 사이즈가 16~18 이하의 폰트 사이즈에서 흐릿함을 경험하였습니다.

 

6. 첫 사용 시 느린 로딩 속도

일반 웹사이트에 비해 초기 로딩이 느린 것을 체감할 수 있습니다.

최근의 트렌드인 SPA 라면 어쩔 수 없는 부분 같습니다.
대신 UX 로 풀어야 할 것이고, 더 중요한건 이 시간을 충분히 기다릴만큼 더 좋은 컨텐츠를 제공하는 것일 듯 합니다.
기술적으로는 여러 에셋, 서버 데이터 등을 캐싱처리하는 방식으로 어느정도 커버가 가능합니다.
- 지나가는 이 -

 

7. import 'dart:html'

2번의 문제를 해결하기 위해 iframe을 사용하였습니다. iframe을 사용하기 위해서는 dart:html을 import 해야 합니다. 하지만 dart:html을 import 하면 모바일에서 빌드가 불가능합니다. 이 문제를 해결하기 위해 import if 도 넣어보고, 오류 무시 구문을 추가해 적용해보았지만 빌드가 되지 않습니다. 해당 문제는 제가 해결을 못하는 것일 수도 있습니다만 해결이 불가능하다면 이 문제도 심각한 단점으로 작용할 것으로 생각됩니다.

 

이렇게 나열해보고 나니 단점이 꽤 많게 느껴집니다. 저는 로박스 Web App을 개발하면서 아직은 Flutter로 Web App을 개발하기는 무리라고 생각합니다.

 

History

23.01.05 - 부적합한 표현 수정, 내용 보완