이런 상황은 구글이 개발한 오픈소스 프레임워크인 플러터(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>은 웹 브라우저에서 다트패드를 사용한 플러터 머터리얼 위젯 예제다. 왼쪽이 다트 코드, 오른쪽이 웹 디스플레이다.
<화면 2>는 플러터의 제스처 처리 예제다. Engage 버튼을 누르면 상태 유지 GestureDetector 위젯의 onTap 메서드가 실행된다.
<화면 3>은 상태 유지 위젯 예제다. Increment를 누르면 ElevatedButton 위젯이 onPressed 메소드를 호출하고, 이 메서드는 프라이빗 함수 _increment를 호출한다. 이 함수가 setState()를 호출해 플러터에 무엇인가가 바뀌었음을 알리고 _counter 변수의 값을 늘린다. 이후 프레임워크는 build() 메서드를 호출해 버튼과 텍스트를 다시 그린다.
플러터와 다트
플러터는 모든 플랫폼에서 빠른 앱에 최적화된 언어인 다트를 기반으로 동작한다. <화면 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?”) 널을 포함할 수 있다.
플러터 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
Sponsored
Surfshark
“유료 VPN, 분명한 가치 있다” VPN 선택 가이드
ⓒ Surfshark VPN(가상 사설 네트워크, Virtual Private Network)은 인터넷 사용자에게 개인 정보 보호와 보안을 제공하는 중요한 도구로 널리 인정받고 있다. VPN은 공공 와이파이 환경에서도 데이터를 안전하게 전송할 수 있고, 개인 정보를 보호하는 데 도움을 준다. VPN 서비스의 수요가 증가하는 것도 같은 이유에서다. 동시에 유료와 무료 중 어떤 VPN을 선택해야 할지 많은 관심을 가지고 살펴보는 사용자가 많다. 가장 먼저 사용자의 관심을 끄는 것은 별도의 예산 부담이 없는 무료 VPN이지만, 그만큼의 한계도 있다. 무료 VPN, 정말 괜찮을까? 무료 VPN 서비스는 편리하고 경제적 부담도 없지만 고려할 점이 아예 없는 것은 아니다. 보안 우려 대부분의 무료 VPN 서비스는 유료 서비스에 비해 보안 수준이 낮을 수 있다. 일부 무료 VPN은 사용자 데이터를 수집해 광고주나 서드파티 업체에 판매하는 경우도 있다. 이러한 상황에서 개인 정보가 유출될 우려가 있다. 속도와 대역폭 제한 무료 VPN 서비스는 종종 속도와 대역폭에 제한을 생긴다. 따라서 사용자는 느린 인터넷 속도를 경험할 수 있으며, 높은 대역폭이 필요한 작업을 수행하는 데 제약을 받을 수 있다. 서비스 제한 무료 VPN 서비스는 종종 서버 위치가 적거나 특정 서비스 또는 웹사이트에 액세스하지 못하는 경우가 생긴다. 또한 사용자 수가 늘어나 서버 부하가 증가하면 서비스의 안정성이 저하될 수 있다. 광고 및 추적 위험 일부 무료 VPN은 광고를 삽입하거나 사용자의 온라인 활동을 추적하여 광고주에게 판매할 수 있다. 이 경우 사용자가 광고를 보아야 하거나 개인 정보를 노출해야 할 수도 있다. 제한된 기능 무료 VPN은 유료 버전에 비해 기능이 제한될 수 있다. 예를 들어, 특정 프로토콜이나 고급 보안 기능을 지원하지 않는 경우가 그렇다. 유료 VPN의 필요성 최근 유행하는 로맨스 스캠은 인터넷 사기의 일종으로, 온라인 데이트나 소셜 미디어를 통해 가짜 프로필을 만들어 상대를 속이는 행위다. 이러한 상황에서 VPN은 사용자가 안전한 연결을 유지하고 사기 행위를 방지하는 데 도움이 된다. VPN을 통해 사용자는 상대방의 신원을 확인하고 의심스러운 활동을 감지할 수 있다. 서프샤크 VPN은 구독 요금제 가입 후 7일간의 무료 체험을 제공하고 있다. ⓒ Surfshark 그 외에도 유료 VPN만의 강점을 적극 이용해야 하는 이유는 다음 3가지로 요약할 수 있다. 보안 강화 해외 여행객이 증가함에 따라 공공 와이파이를 사용하는 경우가 늘어나고 있다. 그러나 공공 와이파이는 보안이 취약해 개인 정보를 노출할 위험이 있다. 따라서 VPN을 사용하여 데이터를 암호화하고 개인 정보를 보호하는 것이 중요하다. 서프샤크 VPN은 사용자의 개인 정보를 안전하게 유지하고 해킹을 방지하는 데 유용하다. 개인정보 보호 인터넷 사용자의 검색 기록과 콘텐츠 소비 패턴은 플랫폼에 의해 추적될 수 있다. VPN을 사용하면 사용자의 IP 주소와 로그를 숨길 수 있으며, 개인 정보를 보호할 수 있다. 또한 VPN은 사용자의 위치를 숨기고 인터넷 활동을 익명으로 유지하는 데 도움이 된다. 지역 제한 해제 해외 여행 중에도 한국에서 송금이 필요한 경우가 생길 수 있다. 그러나 IP가 해외 주소이므로 은행 앱에 접근하는 것이 제한될 수 있다. VPN을 사용하면 지역 제한을 해제해 해외에서도 한국 인터넷 서비스를 이용할 수 있다. 따라서 해외에서도 안전하고 편리하게 인터넷을 이용할 수 있다. 빠르고 안전한 유료 VPN, 서프샤크 VPN ⓒ Surfshark 뛰어난 보안 서프샤크 VPN은 강력한 암호화 기술을 사용하여 사용자의 인터넷 연결을 안전하게 보호한다. 이는 사용자의 개인 정보와 데이터를 보호하고 외부 공격으로부터 사용자를 보호하는 데 도움이 된다. 다양한 서버 위치 서프샤크 VPN은 전 세계 곳곳에 여러 서버가 위치하고 있어, 사용자가 지역 제한된 콘텐츠에 액세스할 수 있다. 해외에서도 로컬 콘텐츠에 손쉽게 접근할 수 있음은 물론이다. 속도와 대역폭 서프샤크 VPN은 빠른 속도와 무제한 대역폭을 제공하여 사용자가 원활한 인터넷 경험을 누릴 수 있도록 지원한다. 온라인 게임, 스트리밍, 다운로드 등 대역폭이 필요한 활동에 이상적이다. 다양한 플랫폼 지원 서프샤크 VPN은 다양한 플랫폼 및 디바이스에서 사용할 수 있다. 윈도우, 맥OS, iOS, 안드로이드 등 다양한 운영체제 및 디바이스에서 호환되어 사용자가 어디서나 안전한 인터넷을 즐길 수 있다. 디바이스 무제한 연결 서프샤크 VPN은 무제한 연결을 제공하여 사용자가 필요할 때 언제든지 디바이스의 갯수에 상관없이 VPN을 사용할 수 있다.