Flutter로 Linux Desktop 애플리케이션 개발하기

Recommanded Free YOUTUBE Lecture: <% selectedImage[1] %>

yundream
2020-09-26
2020-09-26
19990

소개

Flutter는 어떤 플랫폼이든 네이티브한 속도로 실행되는 (멋진 UI를 가지는)애플리케이션의 개발을 목적으로 만든 플레임워크다. 이미 많은 개발자들 안드로이드와, iOS 기반의 모바일 애플리케이션을 만들기 위해서 사용하고 있다.

이러한 성공을 기반으로 "모든 플랫폼을 대상으로 하는 애플리케이션 개발"이라는 목표를 달성하기 위해서 macOS, Windows, Linux와 같은 데스크탑 애플리케이션 개발도 포함하기 위한 작업을 수행했다. 그리고 2020년 하반기 Linux에서도 flutter 애플리케이션을 개발 할 수 있게 됐다.

Linux 데스크탑에서의 flutter 애플리케이션 개발환경에는 Google과 Canonical이 협업을 하고 있다. 2020년 9월 현재, Linux에서의 flutter 개발 지원은 알파 단계로, 아직은 정식배포할 수 있는 수준은 아니다.

Canoncial은 리눅스 개발자가 개발한 flutter 애플리케이션을 Snap Store에서 배포하도록 지원할 계획이다. Canoncial이 flutter에 관심을 가지는 이유는 아래와 같다.

빠르게 성장하는 flutter 개발자 에코 시스템
다중 플랫폼 지원
최적화된 애플리케이션
선정적(declarative), 반응형(reactive) 으로 구성가능한 최신 UI 프레임워크
Visual Studio Code, Android Studio, IntelliJ 등의 풍부한 개발 플랫폼

내가 Linux 데스크탑 flutter에 관심을 가지는 이유

백앤드 개발자이기 때문에 클라이언트 개발에 특별히 관심을 가지는 것은 아니다. 안드로이드 쪽은 Hello World 찍는 정도이고, 데스크탑 애플리케이션은 한번도 개발해 본 적이 없다.

재미있을 것 같다.
flutter로 안드로이드 애플리케이션 개발 따라하기 정도 해본적 있는데, 해볼만 했다. dart 라는 언어가 주는 언어적 익숙함 때문인 것 같다.
데스크탑 애플리케이션 개발을 손 놓고 있었던 가장 큰 이유 중 하나로 "언어"가 있었는데, 그렇다면 조금씩이라도 한번 해볼까 ?
예전에 IVI 관련 일을 잠깐 해본적 있었다. 디바이스는 안드로이드 운영체제를 기반으로 하는 녀석이었는데, Linux위에 애플리케이션을 올릴 수 있다면 훨씬 낫지 않을까 ? 이런 생각을 하고는 했었다. 그런데 언어와 GUI 툴킷을 찾기가 애매모호했다. C 혹은 C++을 써야하는 것도 그렇고 GTK나 QT쪽을 봐야하고. Javascript(electron)는 좀 믿음직 스럽지 않고 등등.

Flutter를 사용하면 데스크탑 애플리케이션도 쉽게 개발 할 수 있겠고(있을 것 같고), 네이티브로 컴파일 되니까 왠지 모르게 믿음직스러울 것 같아서 한번 살펴보기로 했다. 데스크탑 애플리케이션을 개발 보다는 향후 IVI와 같은 특수 목적 디바이스에서의 활용 가능성을 살피는게 주요한 목적이다.

Flutter로 데스크탑 애플리케이션 개발

개발환경

운영체제 : 우분투리눅스 20.04
flutter : 예전에 flutter 시작 에서 flutter 개발환경을 다룬 적이 있어서 기본적인 개발환경은 설치가 끝난 상태다.
IDE : VS Code

추가적인 패키지

리눅스 데스크탑 환경에서 개발하기 위해서 아래의 패키지들을 설치해야 한다.

Clang
CMake
GTK development headers
Ninja build
pkg-config
libblkid

flutter 설치하다 보면, 설치방법을 안내해 주기 때문에 굳이 지금 문서 찾아가면서 설치할 필요는 없다.

인스톨

flutter dev 채널로 변경(switching)한다.

# flutter channel dev                      
  ╔════════════════════════════════════════════════════════════════════════════╗
  ║ A new version of Flutter is available!                                     ║
  ║                                                                            ║
  ║ To update to the latest version, run "flutter upgrade".                    ║
  ╚════════════════════════════════════════════════════════════════════════════╝


Switching to flutter channel 'dev'...

새로운 버전으로 업그레이드 하자.

# flutter upgrade    
Downloading Dart SDK from Flutter engine 2abe69c6081888f28217d8dece4fde2f5490fbab...
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  169M  100  169M    0     0   666k      0  0:04:20  0:04:20 --:--:--  723k

linux desktop 개발 설정을 활성화 한다.

# flutter config --enable-linux-desktop
Setting "enable-linux-desktop" value to "true".

You may need to restart any open editors for them to read new settings.

# flutter devices                      
Downloading Material fonts...                                       4.0s
Downloading package sky_engine...                                   1.2s
Downloading flutter_patched_sdk tools...                           14.3s
Downloading flutter_patched_sdk_product tools...                   12.8s
Downloading linux-x64 tools...                                     29.6s
Downloading linux-x64/font-subset tools...                          4.2s
1 connected device:

Linux (desktop) • linux • linux-x64 • Linux

doctor 명령으로 flutter의 현재 상태를 진단한다.

# flutter doctor 
Downloading android-arm-profile/linux-x64 tools...                  4.0s
Downloading android-arm-release/linux-x64 tools...                  3.6s
Downloading android-arm64-profile/linux-x64 tools...                3.6s
Downloading android-arm64-release/linux-x64 tools...                5.0s
Downloading android-x64-profile/linux-x64 tools...                  4.3s
Downloading android-x64-release/linux-x64 tools...                  3.1s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel dev, 1.23.0-4.0.pre, on Linux, locale ko_KR.UTF-8)
 
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.1)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses
[✗] Linux toolchain - develop for Linux desktop
    ✗ ninja is required for Linux development.
      It is likely available from your distribution (e.g.: apt install
      ninja-build), or can be downloaded from
      https://github.com/ninja-build/ninja/releases
    ✗ GTK 3.0 development libraries are required for Linux development.
      They are likely available from your distribution (e.g.: apt install
      libgtk-3-dev)
    ✗ The blkid development library is required for Linux development.
      It is likely available from your distribution (e.g.: apt install
      libblkid-dev)
[✓] Android Studio (version 3.4)
[✓] VS Code (version 1.48.2)
[✓] Connected device (1 available)

! Doctor found issues in 2 categories.

ninja, GTK, blkid 설치가 필요하다. docker의 안내에 따라서 apt로 설치한다.

설치를 하고 docker를 다시 실행한다.

# flutter doctor                   
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel dev, 1.23.0-4.0.pre, on Linux, locale ko_KR.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.1)
[✓] Linux toolchain - develop for Linux desktop
[✓] Android Studio (version 3.4)
[✓] VS Code (version 1.48.2)
[✓] Connected device (1 available)

• No issues found!

애플리케이션 생성 및 실행

# flutter create myapp
Creating project myapp...
  myapp/android/settings.gradle (created)
  ......
# cd myapp

run 명령을 이용해서 애플리케이션을 실행하자.

# flutter run -d windows
# flutter run -d macos
# flutter run -d linux

잘 실행 된다.

Hot Reload도 잘 작동한다.

빌드 와 배포

build 명령으로 빌드할 수 있다.

# flutter build windows
# flutter build macos
# flutter build linux

데스크탑 애플리케이션에서 Flutter는 성공할 것이다.

데스크탑 애플리케이션 개발 경험이 없기 때문에 How Flutter Will Win The Desktop 문서의 내용을 요약하는 것으로 대신한다.

수년에 걸쳐 데스크탑 애플리케이션을 위한 언어들이 등장했다. 아마 Java와 QT, GTK 등이 떠오르지만, 어느 누구도 의미있을 만한 시장을 만들지는 못했다. 데스크탑 애플리케이션을 만들 때, 이들은 기본선택사항이 아니다.

Electron의 첫번째 장점은 웹 사이트를 구축 할 수 있다면 데스크탑 앱도 구축할 수 있다는 점일 것이다. 기술적으로도 사실이다. 웹 애플리케이션 개발자를 데스크탑 앱 개발자로 사용 할 수 있다. 개발자는 JavaScript와 TypeScript를 알고 있다면 Electron에 적용해서 데스크톱 앱을 만들 수 있다.

Electron은 훌륭한 경험을 주며 잘 작동한다. 하지만 개발자서 성능에 관심을 기울여야 하는 많은 경우가 있다. JavaScript는 JIT(Just In Time)으로 컴파일 된다. 이는 코드가 JavaScript 인터프리터에 의해 기계어 코드로 컴파일됨을 의미한다. 이 인터프리터는 요즘 매우 빠르기는 하지만 C++, Dart와 같은 AOT(Ahead Of Time) 컴파일 방식과 비교하면 많은 차이가 발생한다. 이들 언어는 실행시간에 코드를 기계코드로 컴파일하지 않고 그대로 실행한다.

HTML은 원래 웹 페이지를 만들기 위해서 설계되었다. 시간이 지나면서 JavaScript는 HTML에 데이터를 바인딩하는 기능을 추가했다. Angular 과 React 같은 프레임워크는 반응형 웹에서 탁월한 경험을 제공 할 수 있지만 데스크톱 애플리케이션에는 적합하지 않다고 생각한다.

<div>와 같은 요소를 웹 사이트에 배치하는 것은 웹 페이지에서 의미가 있지만 데스크톱 앱을 디자인 할 때 로직이 무너지기 시작한다. 각 앨리먼트들은 스타일을 가지고 있지 않으므로 CSS를 이용해서 모양을 만든다. 최신버전의 CSS는 플렉스 박스등을 활용해서 이 과정을 도와주지만 금방 복잡해 질 수 있다.

개발자는 멋진 앱을 만들기 위해서 HTML, JavaScript, CSS를 모두 다루어야 한다. 물론 다양한 언어(혹은 도구)를 배우는 것은 도움이 된다. 하지만 데스크톱 애플리케이션을 개발 하기 위해서 이들 언어를 배우는 것은 최선의 방법이 아닐 수 있다.

Flutter는 애플리케이션을 레이아웃하는 자신만의 방법을 가지고 있다. Xamarin Forms, WPF XAML, HTML 등을 사용하는 대신 Flutter의 (훨씬 뛰어난 방법이라고 생각하는)위젯을 사용하여 앱을 배치한다. 배치한 레이아웃은 내가 생각한 그 모습 그대로 작동한다. 이게 가능한 이유는 브라우저가 컨트롤하는 랜더링 방식이 아닌, Flutter의 자체 렌더링 엔진을 사용하기 때문이다. Flutter는 네이티브 앱과 같거나 거의 비슷한 속도로 앱의 각 필셀을 원하는 방식으로 정확히 랜더링 할 수 있다.

Flutter에 관심을 가지고 있엇다면 Hot Reload에 대한 호평을 들어봤을 것이다. 이 것은 해당 코드를 실행하면 그 코드의 결과를 즉시 확인 할 수 있다. 즉 변경 사항이 있을 앱을 다시 빌드할 필요 없이, 적용될 결과를 미리 확인 할 수 있다. WPF, Xamarin Forms도 핫 리로드가 있지만 UI로 엄격하게 제한된다.

macOS, Linux, Windows 등 주요 플랫폼을 목표로 개발 할 수 있다. macOS와 Linux는 현재 알파 버전이다. Canoncial은 Google과 파트너십을 맺어서 개선작업을 하고 있기 때문에 매우 빠르게 발전할 것이라고 기대할 수 있다.

Flutter의 대부분의 앱은 최상위 레벨에서 MateriaApp 위젯을 사용한다. 즉 Material 스타일링의 혜택을 즉시 누릴 수 있다. Material이 완전한건 아니지만, 스타일이 완전히 지정되지 않은 HTML 또는 Xamarin Forms 앱보다는 훨씬 더 나은 모양이다. Flutter를 사용하면 앱의 룩앤필과 비즈니스 로직 개발 모두에 Dart 를 사용한다. XAML, HTML, CSS, JavaScript 등을 자르고 변경할 필요가 없다. 하나의 언어이기 때문에 Dart의 경험을 프로그램의 디자인과 상호작용 같은 다른 영역에 적용 할 수 있다. CSS, HTML, JavaScript, C#, XAML 기술이 서로 독립적으로 성장하고 이들을 통합해야 하는 것을 생각해보면 Flutter가 Dart 만을 사용한다는 것은 중요한 이점을 제공한다.

Flutter이 windows, macOS, Linux를 stable channel에서 지원하게 될 때 어떻게 될지를 상상해보자.

Search For:

BY TAGS

Contents

소개

내가 Linux 데스크탑 flutter에 관심을 가지는 이유

Flutter로 데스크탑 애플리케이션 개발

개발환경

추가적인 패키지

인스톨

애플리케이션 생성 및 실행

빌드 와 배포

데스크탑 애플리케이션에서 Flutter는 성공할 것이다.

Recent Posts

Archive Posts

Tags

About

Get in Touch

Categories

Search For:

BY TAGS

Flutter로 Linux Desktop 애플리케이션 개발하기

Contents

소개

내가 Linux 데스크탑 flutter에 관심을 가지는 이유

Flutter로 데스크탑 애플리케이션 개발

개발환경

추가적인 패키지

인스톨

애플리케이션 생성 및 실행

빌드 와 배포

데스크탑 애플리케이션에서 Flutter는 성공할 것이다.

Recent Posts

Archive Posts

Tags

About

Get in Touch

Categories

Subscribe