Flutter는 무엇이고 어떤 장점이 있을까?

2020. 10. 3. 10:32Flutter

아래 강의를 듣고 학습하는 것입니다.

 

The Complete 2020 Flutter Development Bootcamp with Dart

Officially created in collaboration with the Google Flutter team.

www.udemy.com

항상 어떤 기술을 배우기 전에 이것이 과연 무엇인가?를 정확히 알고 시작하는 것이 중요한 것 같습니다. 그럼 우선 Flutter를 공부하기 전 무엇인지 알아봅시다. 

 

Flutter란? 


Dart라는 언어를 활용해서 android와 ios 앱을 동시에 개발할 수 있는 프레임워크를 의미한다. 보통 개발자 한명이 두개를 동시에 개발하려면 android의 경우 java와 kotlin을 공부해야하고 ios의 경우 object c, swift를 공부해야하는 러닝 커브가 상당히 높았다. 그리고 개발하려는 폴더를 ios, android로 둘을 나누어 버그 관리해주고 코드를 작성해야하는 일은 여간 귀찮은 일이 아닐 수 없다!!

 

따라서 Dart라는 언어 하나만으로 둘을 동시에 개발할 수 있는 Flutter의 경우에는 상당히 메리트가 있다.

 

또한 ios만의 비율, 화면 크기가 각 기기별(iphone, older iphone, ipad) 별로 다르고 또한 안드로이드 앱의 경우에도 최근에 나온 z flip, z fold 같은 스마트폰을 확인해보면 상당히 이를 다 만족시키기에는 어렵다는 것을 알 수 있다. 우스갯 소리로 삼성의 신제품 출시 당시 디자이너 반응이 개인적으로 웃겼다. 

flutter / react native 구조 

또한 react native와 다르게 자체 UI 렌더링이 있으며 이는 (C++/C)로 작성되어 있어서 모든 뷰를 그려줍니다. 이에 반해 react native는 이 react component와 native component 사이에 bridge라는 것을 두어 변환 시켜주고 있다.  

하지만 여기서 react native의 경우 연결된 native form의 화면이 달라서 다르게 보입니다. 

또한 Flutter의 경우 각각의 플랫폼이 지지하는 디자인 패러다임이 다르기 때문에 분기로 처리해줘야한다. android(Material), apple(Cupertino)

Dart의 경우 컴파일 언어로 인터프리터 언어와 다르기 때문에 속도가 더 빠르다. 

아직까지 외부 라이브러리의 경우 react native의 경우 npm에 있는 것을 사용할 수 있기 때문에 외부 라이브러리 수가 많다 그에 반해 아직 0번 대인 라이브러리 들이 많다.  

다트 라이브러리 확인

이러한 문제의 경우 Flutter의 경우 UI Toolkit을 제공해줘서 개발자가 나름 쉽게 개발할 수 있다고 한다. 디자인을 쉽게 할 수 있게 위의 document를 간단하게 제공하고있다. Flutter의 경우에는 이렇게 제공되는 것을 조합해 간편하게 앱을 개발할 수 있다는 것이 장점이라고한다. 그리고 React Native는 사실 똑같은 코드로 앱을 개발한다고 해도 기종별로 조금씩 다르게 보인다.  이는 react native가 안드로이드와 ios의 위젯을 그대로 가져와서 사용하는 다리 역할을 하는데 Flutter의 경우에는 앱 화면에 직접 그려주기 때문에 모두 동일하게 보인다.

 

RN과의 비교는 아래글을 보면 단순하게 이해가 될 것이다.

 

리액트 네이티브와 비교 글

리액트 네이티브 비교글 2

또한 태블릿, 웹, 폰 어디는 웹/앱 어플리케이션을 개발할 수 있다. 

 

장점 1

하나의 장소에서 개발, 업데이트, 디버그를 진행할 수 있다는 장점이 있습니다. 하지만 안드로이드와 ios의 경우에는 폴더가 나누어지고 사용되는 언어, 디버깅, 업데이트, 개발 방법 들이 전부 다르기 때문에 불편합니다. 

 

장점 2

위에서 얘기한 것 처럼 안드로이드, ios 둘다 가능하며 이를 뛰어 넘어서 웹 또한 flutter로 개발할 수 있게 되었습니다. 

 

장점 3

flexible layout system을 통해 기기에 맞추어서 자동적으로 비율이나 크기에 맞추어서 화면을 제공해준다. 

 

장점 4

Hot Reload: 코드를 고치자 마자 바로 앱이 업로딩 되는 그런 기능이다. 이건 뭐 react native에서도 됐던거라서 아무 생각없지만 네이티브 안드로이드 개발을 생각해보면 상당한 메리트가 있는 기능이다. 실제 코드 하나바꾸고 다시 run할 때 상당한 시간이 걸린다. 또한 ios 개발을 해본적은 없지만 ios 또한 상당한 시간이 걸린다고 강의에서 소개해주고 있다. 

 

장점 5

Flutter는 open Source라서 original 코드에 접근해서 확인할 수 있다.  그래서 사용법이 궁금할 때나 어떤 파라미터를 넘길 수 있나 확인할 때 직접 접근해 확인할 수 있다.

 

github.com/flutter/flutter

 

flutter/flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond. - flutter/flutter

github.com