구글 플러터(Flutter)를 시작하기까지…
플러터(Flutter)를 설치하셨다면 아래 글도 함께 읽어보세요
플러터(Flutter)를 설치하셨다면 아래 글도 함께 읽어보세요
DartConf 2018은 플러터를 위한 무대였습니다. 세션의 대부분이 플러터를 다루었고, 다트의 방향성도 2버전부터는 클라이언트 앱 개발에 맞추어졌습니다. 해외 크로스플랫폼 앱 개발을 하는 개발자들 사이에서는 플러터의 등장이 리액트 네이티브의 가장 강력한 라이벌이 될 것이라 여겨지는 것 같습니다. 개인적으로는 앵귤러(Angular.js)를 지지하는 네이티브스크립트(NativeScript)가 강세를 보일 것이라 여겨졌지만 실제로는 큰 영향을 미치지 못하는 것으로 보입니다. Vue.js 개발자의 입장에서 보면, 윅스(Weex) 또는 네이티브 스크립트 — 뷰(NativeScript-Vue) 둘 다 아직은 만족스럽지 않은 단계입니다. 네이티브스크립트 -뷰의 경우 매우 초기단계의 개발 수준이며, 오히려 네이티브스크립트와 순수 자바스크립트를 이용해서 개발하는 것이 더 좋아보이기도 합니다. 물론 네이티브스크립트 — 뷰의 경우는 운영단계까지 개발해보지 않아 오해가 있을 수 있습니다.
이 글에서는 크로스플랫폼 모바일 UI 프레임워크인 플러터를 소개와 초기에 플러터에 적응하는 과정을 소개합니다. 다트 언어부터, 플러터를 다루기까지 어떤 방향으로 접근하면 좋을지 직접 겪은 내용만을 다룹니다.
2018년 4월 기준 베타 2밖에 나오지 않은 상태이므로, 실제 서비스를 위해 사용하기에 무리가 있을 수 있습니다. 물론 DartConf 2018에서 공개된 여러가지 상용앱이 있습니다.
그리고 다른 크로스플랫폼에 대한 유의미한 경험이 스스로 판단하기에 부족하다고 생각하여 다른 플랫폼과의 비교는 최대한 하지 않습니다. 의견은 댓글로 남겨주시면 좋습니다.
DartConf 2018
플러터를 처음 접한 경로는 DartConf 2018 유튜브 재생목록입니다. 꼭 보셨으면 하는 유튜브 목록을 중요도에 따라 나열했습니다. 중요도는 플러터로 만든 앱을 코드로 보여주는 것에 높은 점수를 주었습니다.
머티리얼 디자인과 쿠퍼티노, (Andorid와 iOS)
플러터를 선택하려 했을 때 가장 강력하다고 생각하는 부분은 각 플랫폼(Android, iOS)의 대표 디자인시스템을 기본적으로 제공한다는 것입니다. 구글의 머티리얼 디자인(Material Design) 홈페이지에는 이미 플러터가 포함되어 있습니다. 가이드만 제공하는 것에서 끝나지 않고, 다트 언어로 만들어진 플러터 프로젝트에 바로 추가하여 사용할 수 있는 패키지를 제공합니다. 문서도 매우 자세히 설명되어있는 편입니다.
안드로이드와 iOS에서 같은 머티리얼 디자인을 사용하더라도 플랫폼에 따라 다르게 출력되는 부분들이 있습니다. 하나의 머티리얼 디자인 패키지만 가지고 두가지 플랫폼에 똑같이 나오는 것이 아니라 플랫폼에 따라 머티리얼 디자인 가이드에 맞게 화면을 그려줍니다.
iOS 앱을 개발하는 경우 iOS 특유의 디자인 시스템을 사용하고 싶으면, 쿠퍼티노(Cupertino) 위젯을 제공합니다.
저는 안드로이드와 iOS 앱을 개발하면서 머티리얼 디자인을 사용하고 있어 정확히 어떤 것들이 있고, 부족한 점은 무엇인지 알려드릴 수 없습니다. 플러터의 데모 앱을 받아 살펴보시면 지원하는 위젯들이 어떤 것들이 있는지 살펴보실 수 있습니다. 꼭 받아보시기를 추천합니다.
통합 개발 환경 (IDE) 지원
플러터는 초기버전임에도 불구하고 매우 개발환경 지원이 훌륭합니다. 인텔리J(Intellij) 계열(Android Studio 포함)과 비주얼 스튜디오 코드(Visual Studio Code)를 공식적으로 지원합니다.
인텔리J계열 IDE는 플러터 인스펙터와 플러터 아웃라인이라는 훌륭한 개발 도구를 추가적으로 지원합니다. 안드로이드 개발에서 사용하던 인텔리J 기능을 동일하게 사용할 수 있다는 것도 장점입니다.
비주얼 스튜디오 코드에 익숙한 분들은 인텔리J를 설치하지 않아도 충분히 개발할 수 있습니다 물론 플러터 인스펙터와 플러터 아웃라인을 지원하지 않는 것은 단점이라고 보여집니다. 단, 저사양의 개발환경에서는 가볍게 코드 에디터를 사용할 수 있는 장점이 있습니다.
각 IDE별 플러그인입니다.
인텔리J
- [Flutter](https://plugins.jetbrains.com/plugin/9212-flutter)
- [Dart](https://plugins.jetbrains.com/plugin/6351-dart)
비주얼 스튜디오 코드
- [Dart Code](https://marketplace.visualstudio.com/items?itemName=Dart-Code.dart-code)
공식 문서로 플러터를 시작하려면
사실 현재는 플러터 SDK를 설치하는 것만으로도 매우 불친절한 편입니다. 게다가 플러터를 하려면 다트 언어를 해야한다는 더욱 큰 장벽이 있습니다. 플러터도 그것을 의식하고 있는지, 웹/안드로이드/리액트 네이티브 개발자용 가이드를 따로 제공하고있습니다.
저는 자바스크립트 개발자이므로 웹과 리액트 네이티브 개발자용 가이드가 도움이 되었습니다. 그 중에서도 다트 언어 기본을 익히기 위해 리액트 네이티브용 가이드 중 A Brief Introduction to Dart for JavaScript Developers 이 부분이 도움이 될 것으로 보여집니다.
물론 위 내용만 보았다고 플러터 개발을 처음 했을 때 할 수 있는 것은 당연히 아니었습니다. 다트 언어 자체에 대한 기초 지식이 필요하였고, 다트 언어 공식 홈페이지의 A Tour of the Dart Language문서를 읽은 후에 조금 더 플러터에 가깝게 다가갈 수 있었습니다. 다트 언어 투어는 빠르게 훑어보시는 것을 추천합니다. 다트 언어는 플러터와 마찬가지로 최신 버전이 베타이므로 변화가 많을 것으로 예상됩니다.
따라하기 동영상으로 배우려면
플러터는 출시한 날짜에 비해 따라하기 시리즈류의 동영상(유튜브) 자료가 매우 많은 편입니다. 도움이 되었던 채널들입니다.
- [Tensor Programming](https://www.youtube.com/channel/UCYqCZOwHbnPwyjawKfE21wg)
- [Bram Vanbilsen](https://www.youtube.com/channel/UCqibwXKXYPpnPuo5xg5l2xA)
- [Void Realms](https://www.youtube.com/channel/UCYP0nk48grsMwO3iL8YaAKA)
- [MTechViral](https://www.youtube.com/channel/UCFTM1FGjZSkoSPDZgtbp7hA)
- [Fluttery](https://www.youtube.com/channel/UCtWyVkPpb8An90SNDTNF0Pg)
데모 앱 목록
플러터로 만들어진 앱이 어떤 것들이 있는지 살펴봅니다.
- [공식 데모](https://play.google.com/store/apps/details?id=io.flutter.demo.gallery)
- [Flutter Do](https://play.google.com/store/apps/details?id=io.market.nativebase.geekyants.flutter.flutterdoui)
- [Flutter Food Ordering App](https://play.google.com/store/apps/details?id=io.market.nativebase.geekyants.flutter.foodorderingui)
- [Flutter E-Commerce Pro App](https://play.google.com/store/apps/details?id=io.market.nativebase.geekyants.flutter.ecommerceproui)
- [Hamilton — 안드로이드](https://play.google.com/store/apps/details?id=com.hamilton.app&hl=en)
- [Hamilton — iOS](https://itunes.apple.com/us/app/hamilton-the-official-app/id1255231054?mt=8)
Hamilton 앱은 DartConf 2018 오프닝 키노트의 첫 부분에서 소개되는 플러터의 상징적인 앱입니다. 100만 다운로드를 달성하여 플러터로 만들어진 앱 중 가장 성공적인 마켓 앱 입니다.
배우지 말아야할 언어로 만드는 크로스플랫폼 모바일 앱 개발
코드멘토에서 발표한 배우지 말아야할 언어 순위입니다. 개발자 커뮤니티에서 큰 호응 혹은 논란을 일으키고 있는 것 같습니다. 개인적으로는 위 랭킹을 보면서 플러터로 인하여 다트에 대한 평가가 얼마나 바뀌어 갈 지 궁금합니다.
앞으로 자바스크립트 개발자를 위한 다트 투어, 플러터 설치부터 개발까지 등의 글을 공유할 했으면 합니다. 플러터를 사용하면서 많은 이야기를 나누었으면 좋겠습니다.