본문 바로가기

# 02/Flutter

[Flutter] 크로스 플랫폼 앱 개발과 플러터

반응형

네이티브 앱 개발

네이티브 라고 하면 플랫폼에 종속된 방법을 의미하는 용어이다. 모바일 운영체제인 안드로이드와 iOS 처럼 각 플랫폼에 종속된 코드를 네이티브 코드라고 한다. 이런 네이티브 코드를 사용하면 각 플랫폼에서 제공하는 기법으로 최적화된 앱을 개발할 수 있지만, 다른 플랫폼에서는 서비스할 수 없다는 단점이 있다.

안드로이드 앱은 안드로이드 런타임(Android runtime, ART)에서 동작하므로 앱을 개발할 때 안드로이드 런타임에서 제공하는 라이브러리를 이용하고 언어는 자바나 코틀린을 사용한다.

반면에 iOS 앱은 코코아 터치 환경에서 실행되므로 코코아 터치에서 제공하는 라이브러리를 이용하며 개발 언어는 오브젝티브-C 또는 스위프트를 사용한다.

 

 

크로스 플랫폼 앱 개발

한 가지 기술로 여러 플랫폼에서 동작하는 앱을 개발한다는 의미. 현재는 3가지 정도 있는데 아이오닉, 리액트 네이티브 그리고 플러터이다.

 

아이오닉

웹 앱은 가장 먼저 나온 크로스 플랫폼 앱 개발 기술이다. 웹 뷰, 하이브리드 앱 방식이라고도 하는 웹 앱은 웹을 개발하는 기술을 그대로 이용해 크로스 플랫폼 앱을 개발하는 방식이다. 아이오닉은 이러한 웹 앱 방식으로 개발하는 크로스 플랫폼 프레임 워크이다.

아이오닉 프레임워크는 HTML, CSS, 자바스크립트로 구성되어 있다.

아이오닉으로 앱을 개발하면 HTML 파일이 만들어지고, HTML 파일을 화면에 출력하려면 웹 브라우저가 있어야 되는데, 앱에 내장된 웹 브라우저(웹 뷰)가 이 역할을 수행한다.

 

리액트 네이티브

리액트 네이티브는 페이스북에서 만든 자바스크립트 프레임워크인 React 를 기반으로 하는 모바일 크로스 플랫폼 프레임워크이다.

자바스크립트 언어로 개발하여 개발자 풀이 상대적으로 많다.

자바스크립트로 리액트 코드를 작성하고 C++ 언어로 구성된 패브릭(Fablic) 렌더링 시스템을 통해 모바일 플랫폼의 네이티브 코드와 연동하는 구조이다.

공식 지원 하는 패키지가 없어 임의의 서드파티 패키지를 사용해야 하는 단점이 있다.

코드푸시를 통해 JS 파일을 다운로드 하여 앱이 실행 중인 JS 를 대체할 수 있고 이런 방식를 통해 앱을 배포하지 않고 업데이트 할 수 있다. 

 

플러터

플러터는 구글에서 만들어 2017년 처음 발표했으며 현재 가장 인기 있는 크로스 플랫폼 개발 프레임워크 이다.

Dart 언어로 개발하는데 Dart는 자바스크립트 보다는 생소한 언어이지만 러닝 커브가 높지 않아 쉽게 배울 수 있다.

기본적으로 플러터는 네비게이션, 번역, 다크모드, 테마, 애니메이션, 상태관리가 탑재되어 있고 이미 만들어진 다양한 컴포넌트를 사용할 수 있다.

 

공식 플러터 팀이 직접 관리하는 다양한 패키지들을 사용할 수 있다.(pub.dev)

이러한 중앙집중화는 플러터의 공식 문서, 유튜브 채널, 비디오 시리즈, 듀토리얼 등 다양한 자료를 제공하지만 구글이 만약 더이상 지원을 중단할 경우 플러터가 사라질 수도 있다.

 

플러터는 실제로 실행하는 코드를 네이티브 바이너리로 컴파일 하기 때문에 앱을 배포해서 코드를 교체해야지만 업데이트 가능하다.

(리액트 네이티브의 코드푸시 기능을 제공하지 않는다)

 

리액트 네이티브는 유아이 컴포넌트가 브릿지 네이티브 유아이를 쓰기 때문에 네이티브 컴포넌트를 사용하여 os 별로 차이가 있을 수 있다.

플러터는 스키아 그래픽 엔진을 이용하여 비트맵 위에 플러터만을 위한 유아이를 그리기 때문에 각기 다른 os 에도 동일한 유아이를 그릴 수 있다.

 

 

 

 

 


http://www.yes24.com/Product/Goods/117206541

 

Do it! 깡샘의 플러터 & 다트 프로그래밍 - YES24

‘깡샘’으로 유명한 앱 개발 전문가의 명성 그대로!다트 핵심 문법을 익히고 플러터로 모바일 앱을 만들어 보자!매년 수백 명의 개발자를 양성하는 IT 전문 강사이자 안드로이드 베스트셀러의

www.yes24.com

 

반응형

'# 02 > Flutter' 카테고리의 다른 글

[Flutter] 위젯 트리  (0) 2023.03.12
[Flutter] 플러터 아키텍처와 특징  (0) 2023.03.05
[Flutter] 플러터 아키텍처!  (0) 2023.02.02
[Flutter] 렌더링 원리  (0) 2023.02.02
[Flutter] isolate / embedder / taskRunner  (0) 2023.02.02