현업의 관점에서 바라본 Flutter

22.10.18 (화) Author : Young

개요

  • Intro
  • 모바일 앱 기술의 변화
  • Flutter의 전망
  • 실제 현업에서의 변화
  • 사례 : Flutter로 구현한 앱 샘플
  • Flutter를 사용해 본 후기
  • 마치며..

INTRO

코딩은 무공이다..

![img](https://i1.ruliweb.com/img/22/01/08/17e385db53720a7a1.png)

모바일 앱 개발이라는 무공에 관하여…

모바일 앱 기술의 변화

  • 네이티브 앱
    • JAVA => Kotlin
    • Object C => Swift
    • 네이티브 앱의 단점 (다른 플랫폼, 다른 언어로 만들어 감. 노력이 두세배.., 팀도 나뉘어야 함.)
    • 장점 : Look And Feel (성능의 최적화, 문자, 위치, 음성/지문 인식, AR, VR 다양한 API를 사용할 수 있음)
  • 하이브리드 앱 (웹 기술을 그대로 사용하거나 활용)
    • 안드로이드,ios 지원하는 웹뷰라는 컴포넌트를 사용해서 url 을 표시해줌. 이렇게 만들어서 배포하기도 했음. (js, html, css 로 만듬)
    • 단점 : 네이티브 API를 사용할 수 없음
    • 위를 개선하기 위해서 Corodova 가 나오게 됨.
    • 웹뷰 <-> api 다리 역할을 해서 어느정도는 사용할 수 있음.
    • 이럴 경우 어플리케이션의 사이즈가 커짐, 메모리 차지, 성능에 문제, 네이티브 api 활용성의 한계
  • PWA 의 등장
  • 크로스플랫폼 앱
    • 하나의 프로그래밍 언어로 두 운영체제에 동작하는 앱을 만듬.
    • 리액트 네이티브 (2015) 리액트 js -> 엔진 -> 네이티브 api -> 앱으로 띄워줌
    • C# 으로 작성하는 Xamarian
    • Flutter (Dart) (안드로이드, 아이폰, 웹, 데스크탑 모두 만들 수 있음!)
    • Dart -> Flutter 엔진 -> Canvas 위에 그려줌

이런 툴이 있는데 아직도 네이티브 앱이 더 많을걸까?

아직도 한계가 있기 때문이다.

  • Look and feel, 성능의 한계
  • 최신 API 를 사용할 수 없음, 그러면 해당 기술이 지원해줄 때까지 기다려야 함. (기술의 종속성이 강함 - 구글, 페이스북 등에…)

PWA

Progressive Web App 의 약자

웹 앱 -> 웹 브라우저 API 와 함꼐 -> 모바일/데스크탑에서 동작하는 앱을 만들 수 있음

웹앱

  • 장점: 브라우저만 있으면 사용할 수 있음
  • 단점: API를 사용할 수 없음

위의 단점을 어느정도 해결한 것이 PWA 이다.

2007년 powerful web application

애플이 밀려고 했다가 앱스토어를 만들었음 ㅋㅋ

그러다가 2015년에 다시 등작함. 반응형 웹, 서비스 워커를 이용, push notification의 사용

youtube, twitter, tiktok, instagram 등에서 사용하고 있음.

pwa 는 그 어느 때보다 강력한 플랫폼을 사용한다.

어떻게 카메라 제어까지 할 거냐… (활발하게 개발 중..)

PWA 의 단점

  • 파이어폭스는 안드로이드에서만 지원
  • 애플 스토어에서는 pwa를 거부 사파리를 통해서만 가능함.

필요한 것

  • 웹코드
  • https 를 이용해서만 서비스 제공
  • manifest (json 포맷)
  • 서비스 워커

이 쯤해서 우리 회사의 동향을 이야기하자..

우리 앱의 변천사 Cordova 를 사용하여 앱을 말아서 배포하는 식의 방식으로 사용하였음.

그러다보니, ios 의 버전 이슈가 등장하기 시작하였고, ios 13버전 이상으로는 더 이상 동작하지 않는 현상이 발생

또한 안드로이드에서도 제대로 동작하지 못하는 요소들이 발생하여 pdf 뷰어 같은 기능이 제대로 동작하지 않았음

그렇게 우리는 PWA를 사용하기로 넘어가게 되었음.

PWA로 넘어가는 것 자체는 그리 오래걸리지 않았음.

딱 필요한게 정해져 있으니

그 때부터… 우리는 디버깅의 바다속에 빠지게 되었음.

  • ios 는 사파리만 지원한다. (사파리에서 동작하지 않는 js 의 호환성 문제)
  • 온라인 환경이 아닌 오프라인 환경에서도 img 등을 잘 불러오게 되느냐의 문제
  • 안드로이드, ios의 버전 이슈 등등

너무나 불안정한 동작방식과 기능적인 한계에 부딪치게 됨.

우리의 필요성

  • 오프라인 환경에서도 안정적으로 동작하는 앱이 필요하다
  • 플랫폼의 다양성을 가져가기엔 시간이 너무 없다.

=> Flutter 로 넘어가게 된 시작점임.

Flutter 에 관하여 (2022 ver)

무조건 넘어갈 수 없었음.

여러가지 많이 따져봐야 함.

  • 성능에 관하여
  • 구글의 지원 동향
  • 커뮤니티 및 사용자들의 증가
  • Dart 언어의 사용성
  • 배포를 어떻게 할 것이냐
  • 예외처리를 어떻게 할 것이냐

만든 앱을 시연하겠습니다.

Q&A