Offcanvas

개발자 / 애플리케이션

멀티 플랫폼 대응 개발 프레임워크··· 구글 '플러터'

2022.07.07 Martin Heller  |  InfoWorld
예전에는 앱을 만들 때 범용 모바일 앱과 네이티브 앱 중 하나를 선택해야 했다. 범용 앱은 HTML, 자바스크립트와 같은 웹 기술을 사용했고 모바일 기기에서는 보통 성능이 떨어졌다. 네이티브 앱은 개발자가 원하는 플랫폼용으로 따로 만들어졌으므로 성능은 더 좋았지만 비싸고 플랫폼마다 전문 개발팀이 필요했다.
 
ⓒ Getty Images Bank

이런 상황은 구글이 개발한 오픈소스 프레임워크인 플러터(Flutter)가 나오면서 바뀌었다. 지금은 아이오닉(Ionic), 리액트 네이티브(React Native), 자마린(Xamarin)을 포함한 여러 플랫폼에서 실행되는 빠른 모바일 앱을 만들기 위해 개발자가 선택할 수 있는 옵션이 많아졌다. 플러터와 플러터의 내장 프로그래밍 언어인 다트(Dart)는 여전히 인기가 높고 널리 사용된다.

올해 초에 출시된 플러터 3은 원래의 안드로이드, iOS, 웹, 윈도우 외에 맥OS와 리눅스 데스크톱 앱을 추가로 지원한다. 또한 성능이 개선됐고 거슬리던 UI 멈춤 현상도 수정됐다.
 

플러터 3을 사용한 멀티플랫폼 개발

플러터는 구글이 개발한 오픈소스 프레임워크로, 네이티브로 컴파일되는 멀티플랫폼 애플리케이션을 하나의 코드베이스로 제작할 수 있게 해준다. 플러터 3은 안드로이드, iOS, 윈도우, 맥OS, 리눅스, 웹 애플리케이션까지 총 6개의 플랫폼 타깃을 지원한다.

플러터 위젯은 리액트의 영향을 받은 현대적인 프레임워크를 사용해 구축된다. <화면 1>에서 볼 수 있듯 가장 많이 사용되는 위젯과 레이아웃은 텍스트 위젯, 플렉스박스(Flexbox) 행렬 레이아웃, 스택 절대위치 레이아웃, 위치 지정 위젯, 그리고 컨테이너 위젯이다.

예를 들어 플러터 머터리얼앱(MaterialApp) 위젯으로 시작하는 멀티플랫폼 애플리케이션을 만든다고 하자. 이 위젯은 애플리케이션의 루트에 내비게이터(navigator)를 포함한 다른 여러 위젯을 만든다. 내비게이터는 문자열로 식별되는 위젯 스택을 관리한다(플러터 용어로 ‘루트(route)’라고 함). 내비게이터는 애플리케이션 화면 사이를 부드럽게 전환할 수 있게 해준다.

iOS 중심의 디자인을 만들려면 쿠퍼티노(Cupertino) 구성요소 패키지를 사용한다. 플러터팀은 쿠퍼티노 구성요소를 iOS 전용 앱에만 사용할 것을 권한다. 멀티플랫폼 앱의 경우 머터리얼 디자인(Material Design) 모음과 같은 다른 위젯 모음을 사용하는 편이 좋다.

<화면 1~3>은 무상태(stateless) 위젯, 제스처 처리, 상태 유지(stateful) 위젯이다. 위젯 소개부터 시작하는 플러터 개발 자습서 전체를 꼼꼼하게 살펴보는 것이 좋다. 또한 다트패드(DartPad) 샘플플러터 갤러리, 플러터 코드랩스(codelabs)도 유용하다. 플러터에는 위젯과 레이아웃 외에 내비게이션 및 라우팅, 애니메이션, 동작과 의도, 바로가기, 상태 관리, 네트워킹 및 HTTP, JSON 직렬화, 파이어베이스(Firebase) 통합 등이 있다.

<화면 1>은 웹 브라우저에서 다트패드를 사용한 플러터 머터리얼 위젯 예제다. 왼쪽이 다트 코드, 오른쪽이 웹 디스플레이다.
 
<화면 1> 플러터 머터리얼 위젯 예제

<화면 2>는 플러터의 제스처 처리 예제다. Engage 버튼을 누르면 상태 유지 GestureDetector 위젯의 onTap 메서드가 실행된다.
 
<화면 2> 플러터 제스처 처리 예제

<화면 3>은 상태 유지 위젯 예제다. Increment를 누르면 ElevatedButton 위젯이 onPressed 메소드를 호출하고, 이 메서드는 프라이빗 함수 _increment를 호출한다. 이 함수가 setState()를 호출해 플러터에 무엇인가가 바뀌었음을 알리고 _counter 변수의 값을 늘린다. 이후 프레임워크는 build() 메서드를 호출해 버튼과 텍스트를 다시 그린다.
 
<화면 3> 스테이트풀 위젯 예제
 

플러터와 다트

플러터는 모든 플랫폼에서 빠른 앱에 최적화된 언어인 다트를 기반으로 동작한다. <화면 4>에서 볼 수 있듯이 다트는 자바, 코틀린, 스위프트, 타입스크립트와 비슷한 점이 많다. 객체 지향 언어를 이해한다면 다트도 금방 익힐 수 있지만, 다트 둘러보기 정도는 보는 것이 좋다.

다음은 기본적인 다트 프로그램 예제다.
 

// Define a function.
void printInteger(int aNumber) {
  print('The number is $aNumber.'); // Print to console.
}

// This is where the app starts executing.
void main() {
  var number = 42; // Declare and initialize a variable.
  printInteger(number); // Call a function.
}


다트는 강한 형식 지정을 사용하지만 형식을 추론할 수 있으므로 형식 주석은 선택 사항이다. 보통 로컬 변수에는 var와 형식 추론을 사용하고, 함수와 퍼블릭 변수에는 강력한 형식을 사용한다. 자바와 달리 다트에는 public, protected, private 키워드가 없다. 식별자가 밑줄(_)로 시작한다면 해당 라이브러리 전용이다(프라이빗).

다트는 모바일, 데스크톱, 백엔드 애플리케이션용으로는 ARM 및 x64 기계 코드로 컴파일할 수 있고, 웹용으로는 자바스크립트로 컴파일할 수 있다. 디버그 모드에서는 변경 사항을 소스 코드에 저장한 후 실행 중인 앱을 핫 로드(hot-load)할 수 있다. 다트에는 JIT(Just-In-Tim) 및 AOT(Ahead-Of-Time) 컴파일러, 두 가지 모두 있다.

다트에는 선택적 널 안전성이 있다. 최소 SDK 제약(애플리케이션의 pubspec.yaml 파일에서)이 2.12.0 이상이라면 널 안전성을 선택한 것이다. 이 경우 형식 뒤에 물음표가 붙은 변수만(예를 들어 “int?”) 널을 포함할 수 있다.
 
<화면 4> 다트와 코틀린, 스위프트, 타입스크립트 비교
 

플러터 3 기능과 업그레이드

구글의 플러터 및 다트 제품 관리자인 팀 스니스는 플러터 3의 새로운 기능을 요약한 블로그 글에서 플러터 3은 모바일 중심에서 멀티플랫폼 프레임워크로의 전환을 위한 로드맵을 완성한다고 설명했다. 실제로 플러터 3은 사용 가능한 플랫폼 타깃을 확대해 맥OS와 리눅스 데스크톱 앱을 지원하며 플러터를 파이어베이스와 완전히 통합하고 애플 실리콘을 위한 네이티브 개발 지원을 추가하며 많은 생산성 및 성능 관련 기능을 포함한다.
 

플러터 쇼케이스와 플러터 갤러리

플러터 쇼케이스(Showcase)는 기본적으로 플러터로 만들어진 프로덕션 앱에 대한 사례 연구 모음이다. 플러터 사용을 검토하는 관리자에게 가장 유용하다. 플러터 갤러리(Gallery)는 플러터가 무엇을 하고 어떻게 동작하는지를 보여주는 위젯, 동작 및 비네트 모음이며 개발자와 디자이너에게 유용하다. 웹에서 갤러리를 보거나 플러터 갤러리 저장소를 사용해 지원되는 플랫폼에서 로컬로 실행할 수 있다.
 

플러터 설치하기

윈도우, 맥OS, 리눅스 또는 크롬 OS에 플러터를 설치할 수 있다. 정확한 설치 방법은 시스템에 따라 다르다. 시스템에 맞는 .zip 파일 또는 tarball을 다운로드해서 압축을 풀거나 저장소를 복제한다. 그런 다음 경로에 flutter 툴을 추가하고 flutter docto를 실행해야 한다. 다음에서 flutter doctor의 출력을 볼 수 있다.
 

Running "flutter pub get" in flutter_tools...                       5.1s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.1, on Mac OS X 10.15.7 19H1922 darwin-x64,
    locale en-US)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from:
      https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK
      components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup
      for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[!] Xcode - develop for iOS and macOS (Xcode 12.4)
    ✗ Flutter requires Xcode 13 or higher.
      Download the latest version or update via the Mac App Store.
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see
      https://guides.cocoapods.org/using/getting-started.html#installation for
      instructions.
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] IntelliJ IDEA Ultimate Edition (version 2022.1.1)
[✓] IntelliJ IDEA Ultimate Edition (version 2022.1.1)
[✓] VS Code (version 1.67.1)
[✓] Connected device (2 available)
[✓] HTTP Host Availability


이를 보면 필자의 인텔 맥북 프로가 너무 구형이라서 iOS 및 맥OS 플러터 개발을 위해 필요한 엑스코드의 최소 버전을 지원하지 않는다는 것을 알 수 있다. 범용 인텔/M1 맥OS 바이너리를 만들기 위해서는 엑스코드 13이 필요하다. 필자의 경우 안드로이드 SDK 툴 체인을 설치하면 안드로이드용으로는 개발이 가능하며, 웹용으로는 이미 개발 중이다. 비주얼 스튜디오 코드에 플러터 플러그인을 추가하는 데는 1분도 채 걸리지 않았다. 플러터를 사용해 본격적으로 멀티플랫폼 애플리케이션을 개발하려면 필자가 사용 중인 맥 중 적어도 하나는 업그레이드해야 하는 상황이다.
 

결론

플러터 3은 흥미로운 프레임워크이며 성능 개선에 계속 초점을 두면서 6개 플랫폼에서 안정적으로 동작한다. 멀티플랫폼 앱을 만들어야 하는 개발자라면 플러터도 고려해 보자.
editor@itworld.co.kr
CIO Korea 뉴스레터 및 IT 트랜드 보고서 무료 구독하기
추천 테크라이브러리

회사명:한국IDG 제호: CIO Korea 주소 : 서울시 중구 세종대로 23, 4층 우)04512
등록번호 : 서울 아01641 등록발행일자 : 2011년 05월 27일

발행인 : 박형미 편집인 : 천신응 청소년보호책임자 : 한정규
사업자 등록번호 : 214-87-22467 Tel : 02-558-6950

Copyright © 2024 International Data Group. All rights reserved.