Dart Programmer 되기 [44]

< Desktop 개발 – Flutter for Desktop >

본 글은 2020년 5월 9일에 https://github.com/flutter/flutter/wiki/Desktop-shells 사이트를 토대로 작성 되었습니다. 아직 기술의 변화가 큰 부분이므로, 해당 사이트를 직접 방문하여 최신의 내용을 확인하기를 권장 합니다.

앞서 Flutter를 통한 모바일 어플리케이션과 Flutter for Web을 통해서, 하나의 Flutter 기반 프로그램이 소스 코드의 수정 없이 스마트폰/테블릿과 Web 브라우저에서 동일하게 동작하는 것을 확인 하였습니다. 같은 방법으로 Desktop용 어플리케이션을 Flutter를 통해서 개발할 수 있습니다. Flutter로 Desktop을 지원하는 기술은 아직 공식 릴리즈 단계는 아니며, 개발이 진행중인 상황입니다. 궁극적으로 macOS, Windows, Linux를 지원하는 것을 목표로 하고 있습니다. Flutter for Desktop은 GitHub의 Flutter 공식 사이트에서 Desktop shells로 설명되고 있습니다. Desktop운영체제 별로 개발 수준에 차이가 있는데 각각의 운영체제별 상황은 다음과 같습니다.

macOS

macOS는 가장 진도가 많이 나간 것으로 되어 있습니다. alpha 버전에 진입한 상태이며, https://flutter.dev/desktop 사이트를 통해서 설치, 프로젝트 생성 및 환경 설정, 프로젝트 실행, App Store를 통한 배포시 주의사항, macOS를 지원하는 Plugin 상황, macOS용 Plugin 제작방법 및 Sample 들이 제공되고 있습니다.

특히 flutter create 명령이 fully support 되는 것으로 되어 있습니다. 따라서 이 글은 macOS에서 Flutter for Desktop을 개발하는 환경을 기반으로 설명 하겠습니다.

Windows

현재 early technical preview 상태 입니다. Win32 버전으로 되어 있으며, UWP (Universal Windows Platform – Windows 10에 처음 도입된 MS사 제품에 대한 Universal[= Cross] Platform) 버전으로의 진화를 계확하고 있다고 합니다. 현재의 API 들에서 많은 변화가 있을 것으로 설명하고 있습니다.

특히 flutter create 명령시에 동작은 하지만, 안정화되지 않았다고 합니다. 따라서, Flutter를 업데이트 한 후에는, windows 디렉토리를 반드시 삭제하고 재생성할 필요가 있는 등의 후속 작업이 필요하다고 합니다.

Linux

현재 early experiment가 가능한 상태 입니다. GLFW(Graphics Library Framework : OpenGL을 위한 오픈소스 멀티 플랫폼 라이브러리) 기반으로 만들어져 있으며, 향후 다른 기술로 변경될 예정입니다. 다양한 플랫폼을 지원하는 기술을 선택하기를 희망하여 기술의 선택을 검토중이라고 하며, GTK+가 현재 후보라고 합니다. 현재 사용한 API은 대부분 변경될 예정이라고 하니, 현재 버전을 사용하는 경우에는 주의가 필요합니다.

특히 flutter create 명령시에 동작은 하지만, 안정화되지 않았다고 합니다. 따라서, Windows와 동일하게, Flutter를 업데이트 한 후에는, linux 디렉토리를 반드시 삭제하고 재생성할 필요가 있는 등의 후속 작업이 필요하다고 합니다.

Plugins

Desktop 운영체제를 지원하는 Plugins의 갯수가 많지도 않지만, Desktop 운영체제별로 구현 수준이 서로 다르기에 플랫폼 독립적인 구동도 기대하기 어렵습니다. 특히 Windows와 Linux의 경우는 아직 시험적인 수준이기에, Plugin을 개발하더라도 pub.dev를 통한 배포는 권장하지 않고 있으니, Desktop을 위한 Plugin을 개발하거나 사용하는 경우는 주의하기 바랍니다.

“Hello, World!” Flutter for Desktop

Flutter for Desktop을 사용하는 방법은 앞서 Flutter for Web에서 경험한 것처럼, 소스 코드 레벨에서의 수정이 아닌 개발 환경에서의 변경으로 가능합니다. 일반 Flutter 프로젝트를 만들고 실행하는 것과 같은 맥락으로 진행하며, 다음과 같이 하여 최초의 Flutter for macOS 프로그램을 만들고 실행해 보겠습니다 ( 참조: https://flutter.dev/desktop ).

첫번째 단계는 Flutter for Desktop 환경으로 전환하기 위해서, 다음 명령을 수행합니다. 이는 Flutter for Desktop이 아직 개발 단계이기에, Flutter channel을 master로 바꾸는 작업과, 필요한 기능들을 platform 안에 설치하는 단계 입니다. 향후 Flutter for Desktop의 공식 릴리즈가 이루어 지면, 없어지거나 달라질 부분 입니다.

flutter channel master
flutter upgrade

두번째 작업은 Flutter for Desktop 환경을 macOS 환경에 맞도록 설정하는 단계로 다음의 명령을 실행합니다. Windows 운영체제는 –enable-windows-desktop 옵션을 주고, Linux 운영체제는 –enable-linux-desktop 옵션을 주면 됩니다. 이 부분은 아마도 공식 릴리즈가 나온 후에도 동일한 작업일 것으로 예상합니다.

flutter config –enable-macos-desktop

세번째 작업은 제대로 동작이 이루어 지는지 확인하는 단계로서, 다음의 세가지 명령을 실행해서 결과를 확인 합니다.

flutter devices
flutter doctor
flutter config

두 가지 명령은 앞서에서 여러번 등장했습니다. 즉 flutter devices는 Flutter를 다양한 플랫폼에서 동작하는 경우, 현재 실행 가능한 플랫폼을 확인하는 명령으로서, 앞서 flutter config –enable-macos-desktop로 인하여, [그림 1]과 같이 macOS가 실행 가능한 플랫폼으로 등록된 것을 볼 수 있습니다.

[그림 1] flutter devices 실행 화면

flutter doctor는 Flutter 개발 및 실행 환경에 대한 점검을 하는 기능으로 여러번 등장 했습니다. [그림 2]와 같이 master 채널로 설정되고, 3개의 디바이스가 연결되었으며, 이슈가 없는 것을 볼 수 있습니다.

[그림 2] flutter doctor 실행 화면

마지막으로 flutter config –enable-macos-desktop의 경우는 macOS용 환경을 활성화 하기 위한 용도 였지만, [그림 3]과 같이 그냥 flutter config 만 실행하면, 사용법을 설명한 후 맨 마지막에 enable-macos-desktop 설정이 true가 된 것을 확인 할 수 있습니다.

[그림 3] flutter config 실행 화면

다음 과정은 일반적인 Flutter 프로젝트를 만들고 실행하는 부분과 동일합니다. 특히 Flutter for Web과 같은 방식으로 구동하게 됩니다.

작업을 희망하는 디렉토리에서 다음 명령을 실행하여 프로젝트를 생성합니다.

flutter create myapp

그리고 myapp 디렉토리로 이동하여 (cd myapp), 다음의 명령으로 실행합니다. 이를 통해서 debug 모드에서 앞서에서 여러번 등장한 Flutter의 Start 어플리케이션이 [그림 4]와 같이 동작하는 것을 볼 수 있습니다. “+” 버튼을 누르면 숫자가 업데이트 되는 동작도 동일합니다. 따라서 소스 코드 레벨에서의 수정 없이 동일한 Start 어플리케이션을 Desktop 환경에서도 구동할 수 있는 것을 보았습니다.

flutter run -d macos

[그림 4] Flutter Start App을 macOS Desktop에서 실행한 모습

만역 debug 용도가 아닌 build 용도라면, 다음의 명령을 수행하면 됩니다.

flutter build macos

Flutter Mobile App을 Desktop App으로 실행하기

이번에는 스마트폰을 위해서 개발한 Flutter 기반 어플리케이션을 macOS Desktop 환경에서 실행해 보겠습니다. 앞서 35번째 글인 “Flutter 활용하기 – Skeleton Program for Future Usage”에서 완성한 main.dart로 [그림 4]에 해당하는 myapp의 main.dart를 갱신 합니다. 그리고 프로그램을 다시 실행하면 [그림 5]와 같이 macOS에서 실행하는 프로그램을 만날 수 있습니다.

[그림 5] Flutter 기반 Mobile Application을 macOS Desktop에서 실행한 모습

만약 “Flutter 활용하기 – Skeleton Program for Future Usage”에서 완성한 프로젝트 폴더를 보관하고 있다면, 단지 폴더안에서 다음의 명령을 실행하는 것으로 macOS Desktop에서의 실행 환경을 마칠 수 있습니다.

flutter create .

마무리

Flutter for Desktop이 아직 공식 릴리즈가 아니고, Desktop 운영체제별로 상황이 판이하지만, 어떤 기술인지와 현재 수준에 대해서 알아보았습니다. 그리고 Flutter로 만든 스마트폰 어플리케이션을 Web 어플리케이션으로 실행한 경우와 거의 동일하게, 다시 macOS Desktop 환경에서 실행해 보았습니다. 결국 하나의 소스 프로그램이 플랫폼과 상관없이 동일한 도구와 함수들로 구현되도록 하는 것이 Flutter의 철학이라는 것을 이해하게 됩니다.

하지만, Flutter를 사용하는 입장에서는 이렇게 간단하게 이야기 할 수 있지만, 이렇게 하기 위한 노력은 용이하지 않으며, Desktop 운영체제별로 꽤 오랜 시간이 지나야 안정적인 환경이 제공될 수 있으리라 생각합니다. 하지만 충분히 가능성이 있는 기술인 만큼, 꾸준한 관심과 학습이 있다면, ONE SOURCE MULTI PLATFORM 이라는 철학을 구현하는 가장 핫한 기술로 나름 의미있는 효율성과 생산성을 보장할 것으로 봅니다.

Creative Commons License (CC BY-NC-ND)

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다