[ 앱 개발자 도전기 : 크로스플랫폼_Flutter & Dart ]
Flutter의 개념과 구조 및 특징 간략히 알아보기.
∇ Flutter의 개념, 구조 특징
목 차
1. Flutter란?
2. 타 언어들과의 렌더링 방식 비교
3. Flutter의 특징.
Ⅰ. Flutter 란?
" Flutter " 는 구글에서 2018년에 발표한
안드로이드(AOS) & 애플(IOS) 환경에서 동시에 구동되는 프로덕트를 제작할 수 있는 크로스 플랫폼 프레임워크입니다.
- 플러터는 자체적으로 UI를 재 랜더링 하기 때문에,
안드로이드 환경의 앱에서 IOS 디자인을 활용 가능하고 반대도 마찬가지로 가능합니다.
[ 비즈니스 로직 역시, ios-swift 로직 & aos-kotlin 로직으로 작성 가능 ]
네이티브 언어로 각각 제작을 하는 상황과 비교했을 때, 플러터로 작업하면 얻는 생산성이 60%나 더 효율적입니다.
플러터가 채택한 언어는 Dart인데 기본적으로 객체지향 프로그래밍을 지원합닏.
java 혹은 c 언어의 문법과 매우 유사한 부분들이 있습니다.
Ⅱ. 타 언어들과의 렌더링 방식 비교.
◎ OEM - SDK
※ " OEM SDK " 라고 하면 생소할 수 있는데, 네이티브로 앱 개발하는 경우라고 생각하면 됩니다.
- iOS SDK, Android SDK 를 이용하는 경우,
각각 OEM Widget들을 제공하고 이를 이용해서 화면을 그리도록 개발합니다.
- Canvas에 그리는 작업이나 interaction, event 들은 처리해주고
앱 개발자는 Swift 혹은 Kotlin으로 작성한 코드를 통해 서비스, Widget 과 상호작용합니다.
- 기본적인 개발언어와 빌드환경부터 다르기 때문에,
iOS앱과 안드로이드 앱을 둘 다 서비스해야 하는 경우 각각 앱을 만들어주어야 합니다.
◎ Web - View
※ " Web View " 라고 하면, 하나의 코드 베이스로 여러 플랫폼 환경에서 동작하는 첫번째 크로스 플랫폼 형태입니다.
- JavaScript 와 WebView를 기반으로 구성되어 있으며,
HTML을 만들어주면 플랫폼의 WebView를 통해 보여주는 방식입니다.
- > 단순히 무언가를 화면에 띄우는 동작만 하는 경우는 잘 없기 때문에
서비스(비즈니스 로직)들과 통신을 해야 하는데 이 부분은 Native로 되어있어서
JavaScript 문법으로 바로 접근할 수가 없습니다.
== >> 이 통신을 위해서 Bridge가 존재합니다.
- > Web View 형태를 사용하게 되면, 결국에는 HTML인 것이어서,
각 플랫폼에서 ux를 플랫폼마다 보편적으로 제공하기가 어렵습니다.
◎ Reactive - View ( React Native )
※ Reactive Programming을 적용한, React.js 와 같은 라이브러리를 사용하여
웹뷰를 이전보다 간편하게 그릴 수 있어서 많은 인기를 얻은 방식.
- OEM Widget을 사용할 수 있는 장점.
- JS 코드가 OEM Widget을 사용하기 위해서는 bridge가 사용되어야 하고
Reactive View에서는 OEM Widget에 굉장히 자주 접근한다는 단점.
- JS와 Platform 내부의 각 동작은 빠르게 동작해서 문제가 되지 않지만,
bridge를 통해 양쪽이 상호작용할 때 병목현상이 발생 가능하고
bridge 이용이 빈번하게 발생함으로 인해서 '성능저하'가 생깁니다.
◎ Flutter
※ 우리가 알아볼, "Flutter" 는 RN과 마찬가지로, ' Reactive Style View ' 를 제공하지만,
'Dart'라는 컴파일 프로그래밍 언어를 사용하여 bridge로 인해 발생하는 성능 문제를 해결합니다. !
- Dart는 '컴파일' 시 네이티브 코드로 컴파일되므로,
JS brdge를 통하지 않고 플랫폼과 직접 통신 가능합니다.
[ 네이티브 컴파일을 통해 앱의 시작 시간도 빠릅니다. ]
- OEM 위젯이나, DOM 웹뷰를 사용하지 않고서, 자체 위젯을 Canvas 위에 직접 렌더링합니다.
[다양한 위젯들이 잇으먀, 직접 코드를 커스텀해서 확장하는 것이 용이합니다]
Ⅲ. Flutter의 특징.
§ 컴파일 된 언어.
: " Flutter " 는 "다트(Dart) " 언어를 사용하여 개발됩니다.
- 다트는 JIT ( Just - In - Time ) 컴파일러와 AOT( Ahead-Of-Time ) 컴파일러를 모두 지원합니다.
- JIT 컴파일러는 개발 시에 핫-리로딩과 같은 기능을 제공하고,
AOT 컴파일러는 애플리케이션을 미리 컴파일하여 실행 속도를 향상 시킵니다.
§ 핫 리로딩 ( Hot Reload ).
: " Flutter " 는 핫 - 리로딩 기능을 제공하여 애플리케이션 코드의 변경 사항을 실시간으로 적용할 수 있습니다.
- 개발자는 앱을 다시 컴파일하거나, 재시작할 필요 없이 코드를 수정하고 결과를 즉시 확인 가능합니다.
--> 앱 개발 시간을 단축하고, 실험 및 디버깅을 쉽게 할 수 있게 합니다.
§ 네이티브 코드와의 상호 작용.
: " Flutter " 는 네이티브코드(swift/kotlin) 와 통신하기 위해서 Flutter 엔진을 사용합니다.
- > Flutter 엔진은 C/C++을 베이스로 작성되어 있으며,
네이티브 플랫폼과 직접적으로 상호 작용할 수 있는 인터페이스를 제공합니다.
( == 네이티브 앱과 동일 성능을 제공하도록 해줍니다 )
§ 하드웨어 가속.
: " Flutter " 는 GPU 가속을 지원합니다. 애니메이션과 그래픽 처리 등에 대한 성능을 향상 시키는데 도움이 됩니다.
== GPU 가속을 사용하면, 앱의 퍼포먼스가 향상되어 네이티브 앱과 유사한 경험을 제공 가능합니다.
§ 최적화된 위젯 엔진.
: " Flutter " 는 위젯 기반 구조를 가지고 있습니다.
- 위젯은 애플리케이션의 UI 구성 요소를 표현하는데 사용됩니다.
== 위젯의 변경 사항을 효율적으로 업데이트하고, 필요한 경우에만 다시 렌더링합니다.
( 최소한의 작업만 수행하여, 성능을 최적화 )
§ 최적화된 렌더링 엔진.
: " Flutter " 는 Skia 그래픽 라이브러리를 사용하여 UI를 그려내고 렌더링합니다.
- Skia는 고성능 그래픽 엔진으로 알려져 있으며,
- 플러터는 SKia를 이용하여 UI를 빠르고 부드럽게 렌더링합니다.