[Flutter] 앱 개발 방식의 종류와 Flutter 소개

1. Flutter란?

Flutter는 Dart 언어 기반의 Cross Platform App Development Framework입니다.

 

2. Cross Platform App Development Framework란?

Cross Platform App Development Framework를 설명드리기에 앞서, 앱 개발의 방식에 대해 알아보도록 하겠습니다.

- 앱 개발 방식

1) 네이티브 앱(Native App)

모바일 기기 OS(Android, iOS) 플랫폼에서 요구하는 네이티브 언어로 개발된 앱입니다.

OS별 네이티브 언어는 다음과 같습니다.

• Android OS App 언어 : Kotlin, Java
• iOS App 언어 : Swift, Objective-C

2) 모바일 웹(Mobile Web)

모바일 크기에 맞게 화면을 제공하는 반응형/적응형 (PC 중심) 웹입니다.

  

3) 모바일 웹 앱(Mobile Web App)

모바일 웹과 비슷하지만 구동방식이 앱처럼 보이게 한 (모바일 중심) 웹입니다.

 

※ 모바일 웹과 웹 앱을 SPA(Single Page Application) 여부로 구분하는 경우가 있습니다.

   요즘엔 일반 웹도 SPA로 개발하는 경우가 있기 때문에 SPA라고 하여 무조건 웹 앱이라고 보긴 어려울 것 같습니다.

   물론 웹 앱은 웹이 앱처럼 보이게 하기 위해 SPA가 필수라고 생각합니다.

   다만, 'SPA로 구현된 것은 웹 앱이다.' 보단 '웹 앱은 SPA로 구현해야 한다.'가 맞는 표현이 아닐까 하는 의견입니다.

   따라서, 모바일 웹과 웹 앱은 SPA 여부보단 웹이 PC 중심이냐 모바일 중심이냐를 기준으로 구분된다고 생각합니다.

  

4) 하이브리드 앱(Hybrid App)

네이티브 앱과 웹 앱이 결합된 앱입니다.

컨텐츠 영역은 HTML 기반의 웹 앱으로 제작하고, 패키징은 모바일 운영체제별로 구현하는 방법입니다.

네이티브 앱에 웹뷰를 보여주어 웹 앱을 실행시키는 것이 일반적인 방법이라고 할 수 있습니다.

모바일 웹/웹 앱과의 대표적인 차이점은 네이티브 API를 사용할 수 있다는 점입니다.

예) 네이버앱

 - m.naver.com으로 접속할 때와 네이버앱으로 접속할 때 메인화면이나 검색 기능은 차이가 없지만

   'QR찍고 결제'를 터치하면, 카메라 기능을 실행할 수 없는 웹과는 달리 네이버앱에서는 바로 카메라가 구동됩니다.

 

5) 크로스 플랫폼 앱(Cross Platform App)

하나의 非네이티브 언어로 Android와 iOS 플랫폼에서 동작할 수 있도록 개발된 앱입니다.

이러한 앱 개발을 지원해주는 도구가 바로 Cross Platform App Development Framework입니다.

네이티브 언어가 아닌 언어로 작성된 코드를 iOS나 Android가 이해할 수 있는 코드로 변환시켜주는 역할을 합니다.

대표적인 Cross Platform App Development Framework로 Google의 Flutter, Meta의 React Native가 있습니다.

 

- Flutter vs React Native

이어서 Flutter와 React Native에 대해 알아보도록 하겠습니다.

크로스 플랫폼 앱 개발을 마음 먹으신 분이시라면 한번쯤은 Flutter와 React Native 사이에서 고민하셨을 겁니다.

그래서 두 프레임워크에 대해 간단히 정리해보도록 하겠습니다.

 

1) 인기

<Flutter vs React Native 검색 트렌드>

  최근 구글 트렌드에 따르면, Flutter에 대한 검색량이 React Native보다 1.5배 가량 높은 것으로 나타났습니다.

 

2) 개발 언어

Flutter는 Dart를 사용합니다. Dart는 Google이 개발한 언어로써 기본적으로 C언어의 문법과 거의 같으며 Java, C#, JavaScript와 같은 기능적 스트럭쳐를 추가한 언어로, 언급된 언어보다 간결하고 강력한 기능을 지원합니다. 주로 모바일, 데스크탑, 서버, 웹 앱 용도에 사용됩니다.

React Native는 JavaScript를 사용합니다. JavaScript는 객체 기반의 스크립트 프로그래밍 언어로써 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있습니다. 또한 Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있습니다.

 

3) 러닝커브

Flutter의 경우, 다소 낯선 프로그래밍 언어인 Dart를 활용하여 개발해야 합니다. Flutter에 대한 학습 뿐만 아니라, Dart에 대한 학습도 필요하기 때문에 러닝커브가 완만합니다. 즉, 학습 속도가 더딥니다.

React Native는 JavaScript를 사용해보신 분이라면 무리없이 시작하실 수 있기 때문에 러닝커브가 가파릅니다. 즉, 학습 속도가 빠릅니다.

 

4) 성능

Flutter는 내부적으로 보유한 Skia 그래픽 라이브러리를 통해 UI를 직접 렌더링할 수 있고, 소스코드를 네이티브 CPU 머신코드로 직접 컴파일 할 수 있기 때문에 성능이 뛰어납니다.

React Native는 JavaScript Bridge 통해서 UI 렌더링을 처리하고, 모든 코드들이 JavaScript로 구동되기 때문에 성능이 비교적 좋지 않습니다.

 

3. Dart란?

Dart는 앞서 설명드린대로 멀티 플랫폼에서 동작하는 앱 개발을 지원하기 위해 Google이 만든 프로그래밍 언어입니다.

DVM(Dart VM)상에서 동작하거나 네이티브 컴파일링을 통해 모바일, 데스크탑, 웹브라우져, 서버 플랫폼 상에서의 어플리케이션 실행을 지원하고 있습니다.

- 특징

• 클라이언트 최적화 언어이지만 명령어 스크립트, 서버 프로그래밍 등 다양한 영역에서도 활용되는 것을 목적으로 개발되었습니다.
• Java 등의 기존 언어와 유사한 문법적인 특징을 가지고 있습니다.
• JIT(Just In Time) 컴파일 지원
  • 프로그램(App) 실행 시, 컴파일(Dart 코드를 컴퓨터가 이해할 수 있는 기계어로 번역) 하는 방식을 의미합니다.
  • App 실행 시 컴파일하기 때문에, 개발 중인 코드를 바로 실행시켜 테스트(Hot Reload) 해볼 수 있습니다.
  • App 실행 시 컴파일한다는 의미는 설치속도는 빠르나 실행 속도는 느리다는 것을 의미하므로 디버깅 단계에서 사용하는 것이 적절합니다.
• AOT(Ahead Of Time) 컴파일 지원
  • 프로그램(App) 설치 시, 코드를 미리 컴파일 하는 방식을 의미합니다.
  • App 설치 시 컴파일한다는 의미는 설치속도는 느리나 실행 속도는 빠르다는 것을 의미하므로 개발 완료된 App의 배포 단계에서 사용하는 것이 적절합니다.

 

4. 정리

다양한 앱 개발의 방식부터 Dart 언어의 특징까지 간단히 설명 드렸습니다. 제가 처음 앱 개발을 해보기로 마음 먹었을 때를 떠올려보면, 앱 개발에는 어떤 방식이 있는 지부터 궁금해했던 거 같습니다. 그래서 읽어주시는 분들께 조금이라도 도움을 드리고 싶은 마음에 Flutter에 대한 글이지만, 먼저 앱 개발의 방식에 대해 설명을 간단하게나마 적게 되었습니다. 앞서 설명드린 방식 모두 각각의 장점이 있다고 생각합니다. 어떠한 방식으로 앱 개발을 시작하시더라도 꾸준히 노력하신다면 꼭 이루실 수 있을거라고 생각합니다. 다음 글부터는 Flutter에 대해 하나씩 정리해보도록 하겠습니다. 읽어주셔서 감사합니다.