< Wrap-up >
Dart 언어에 대한 글을 작성하기 시작한 후, 벌써 47번째 글 입니다. 처음 생각했던 아젠다들을 모두 채우고 마지막으로 Wrap-up을 하게 되었습니다. 마지막 글은 알아두면 좋은 사항과 이후 관심이 있으면 조금 더 자세하게 공부하기를 권장하는 내용을 소개하고자 합니다.
Official & 3rd Tools
개발 도구는 생산성을 궂은 일들을 자동화하거나 발생할 오류를 사전에 알려줘서 피할 수 있는 등 생산성을 향상하고 신뢰성을 증가시키는 부분에서 매우 중요합니다. 우리는 Visual Code를 대표적인 Editor로 사용하였고, 그외 필수적으로 사용해야할 만한 도구들을 필요할 때마다 소개하고 사용하였습니다. 하지만 Tutorial 인 입장에서 디버그와 자동화 부분에 대해서는 다루지 못한 것이 사실 입니다. 그리고 오픈소스 도구를 권하고나, 상용 소프트웨어의 경우는 소개를 하지 않은 부분도 사실 입니다. 여기서는 Dart와 Flutter의 디버그에 도움이 될 만한 도구들, 그리고 상용 이지만 학교에 소속하거나 학생이면 무료로 경험할 수 있는 도구들을 중심으로 소개를 하려합니다. 기회가 된다면 꼭 한번 즈음을 경험하기를 바랍니다.
첫번째 도구는 Chrome DevTools 입니다. 이 도구는 Dart 전용 도구는 아닙니다. Google Chrome 브라우저에 내장되어 있는 Web 저작 및 디버깅 도구 입니다. Chrome 브라우저에 내장되어 있기에, 별도의 프로그램이나 Plugin을 설치할 필요가 없고, HTML/CSS/JavaScript에 대한 디버그와 성능 측정을 하는 부분에서 많이 사용됩니다. (참조: https://developers.google.com/web/tools/chrome-devtools)
기기모드를 통해서 다양한 형태의 기기들에서 어떻게 컨텐츠가 보여지는지 확인 가능합니다. Element 패널에서는 DOM/CSS를 자유롭게 조작하고 사이트의 레이아웃/디자인을 실험하는 것이 가능합니다. Console 패널을 통해서는 JavaScript의 수행 동작 내용을 확인할 수 있습니다. Source 패널에서는 JavaScript의 브레이크 포인트 설정 등의 작업을 통해서, 원하는 지점에서의 수행 내용을 확인하는 등의 작업이 가능합니다. Network 패널에서는 접속하는 통신 내용에 대한 확인과 페이지내 요소들의 로딩 성능 등을 측정하는 것이 가능합니다. Performance 패널은 사이트의 라이프사이클 동안 발생한 다양한 이벤트를 기록하고 탐색하여 페이지의 런타임 성능을 향상합니다. Memory 패널에서는 메모리 사용 행태를 확인하고 누수를 확인 할 수 있습니다. 그리고 JavaScript의 CPU 프로파일링도 가능합니다. Application 패널은 IndexedDB와 웹 SQL 데이터베이스, 로컬 및 세션 스토리지, 쿠키, 어플리케이션 캐시, 이미지, 폰트, 스타일시트를 포함한 로딩된 모든 리소스를 검사합니다. 마지막으로 Security 패널에서는 인증서 문제 및 mixed content 등의 보안 이슈를 디버깅 할 수 있습니다.
두번째 도구는 Dart SDK 안에 포함된 도구들 입니다. 이전의 글에서 등장했던 dart, dart2js, dart2native, dartdevc, pub 외에도 디버그와 성능개선을 위한 도구들이 제공되고 있습니다 (참조: https://dart.dev/tools/sdk). dartaotruntime은 AOT-compile된 소프트웨어를 실행하기 위한 명령입니다. dartanalyzer는 정적 분석을 실행합니다. dartdoc은 API 문서화를 자동으로 수행 하는 도구 입니다. dartfmt는 Dart 언어로 만든 코드의 형태를 자동으로 조정해 줍니다.
세번째 도구는 현재 프리뷰 상태인, DevTools 입니다. 이는 Dart 언어 및 Flutter로 만든 프로그램의 성능과 디버그를 위한 도구들의 집합 입니다. Android Studio, IntelliJ, Visual Code, CLI 프로그램에 설치 가능 합니다. 제공하는 기능은 다음과 같습니다 (참조: https://flutter.dev/docs/development/tools/devtools/overview ).
- Inspect the UI layout and state of a Flutter app.
- Diagnose UI jank performance issues in a Flutter app.
- Source-level debugging of a Flutter or Dart command-line app.
- Debug memory issues in a Flutter or Dart command-line app.
- View general log and diagnostics information about a running Flutter or Dart command-line app.
네번째 도구는 상용 소프트웨어인 JetBrains의 제품입니다. Dart 언어의 Plugin을 지원하는 IntelliJ 및 Web 기능시 함께 사용할 수 있는 WebStrom 등 유용한 도구들이 많이 제공되고 있습니다. 상용 소프트웨어를 굳이 설명하는 이유는 학생 및 교사인 경우 무료로 사용 가능하기 때문입니다. 혹은 오픈소스 프로젝트, 신생 기업, 교실/강의 지원 등에도 무료 사용이 가능하니 조건이 되는 독자의 경우는 경험해 보기 바랍니다 (참조: https://www.jetbrains.com/ko-kr/store/?fromNavMenu#discounts?billing=yearly).
다섯번째 도구는 웹 기반 Dart 및 Flutter 개발 환경 입니다. 당초 이런 용도를 위해서는 DartPad가 있습니다 (참조: https://dartpad.dev/). DartPad는 간단하게 Web 브라우저를 통해서 프로그램을 타이핑하고 실행하기 위한 용도로 되어 있습니다. 여기에 추가로 웹 기반 프로그래밍 언어 개발, 온라인 강좌 제공 및 코드 공유를 지원하는 CodePen이 최근 Flutter on CodePen이라는 이름을 통해서 Flutter 기반 프로그램에 대한 지원을 시작 하였습니다 (참조: https://codepen.io/flutter). Google Material Design 등 사용자 인터페이스의 개발과 실험이 가능하고, 각종 Widget도 사용이 가능하니 간편하게 Web 기반 개발/시험 환경이 필요한 경우는 요긴하게 사용하기 바랍니다. (참조: Announcing CodePen support for Flutter)
More about Flutter for Web
Dart와 Flutter를 통한 Web 어플리케이션 개발은 앞서 여러 회에 걸쳐서 다루었습니다. 하지만 Flutter를 사용하는 방향으로 진행을 했기에, 기존에 HTML/CSS/JavaScript에 대한 지식을 갖추고 있거나 혹은 이를 개발해 온 개발자라면 아쉬움이 있었을 겁니다. 이런 아쉬움을 달래줄 설명이 공식 사이트의 “Flutter for web developers (출처: https://flutter.dev/docs/get-started/flutter-for/web-devs)” 입니다. 이 글에는 자주 사용되는 HTML/CSS 구문(syntax, code snippets)에 상응하는 Dart/Flutter 코드를 1:1로 대응해서 보여줍니다.
그리고 “Understanding constraints (출처: https://flutter.dev/docs/development/ui/layout/constraints)”는 Dart/Flutter를 통해서 Web을 개발하는 경우의 제약 사항이나 주의점을 설명하고 있습니다. HTML/CSS에서 하고자 했던 부분이 Dart/Flutter에서 안되거나 하는 일이 발생하면 참조하여 이해하기 바랍니다.
이외에도 블로그나 기사들에서 Dart/Flutter를 사용하여 Web 어플리케이션을 만드는 경우에 대한 좋을 글을 제공하고 있습니다. 아래는 대표적인 글들을 모아 보았으니, 관심이 있는 독자는 읽어 보기 바랍니다.
“Developing Web Apps Using Flutter”
“Flutter For Web: A Complete Guide to Create & Run a Web Application”
“Flutter for the Web”
“Flutter Boosts Web Support, Defaults to Swift, Kotlin for Native Mobile”
“Responsive Web And Desktop Development With Flutter”
Other Language Integration
Dart 언어는 플랫폼 별로 깊이가 있는 프로그래밍이 가능하도록 하기 위해서, Dart 언어가 아닌 언어와의 연동이 가능하도록 합니다. 지원하는 언어는 C, C++, Java, Kotlin, Swift, Objective-C 입니다. C/C++는 Foreign Function Interface 라고 불리는 dart:ffi 라이브러리를 통해서 가능합니다. 이는 C/C++로 만들어진 native 환경에 대한 기술을 연결하기 위한 목적으로 사용합니다 (참조: https://flutter.dev/docs/development/platform-integration/c-interop).
iOS의 native 개발은 Swift/Objective-C로 이루어 지고, Android의 native 개발은 Java/Kotlin 입니다. 이를 연동하기 위한 platform-specific code 기능은 Dart 처럼 플랫폼 독립적인 언어의 단점을 보완하고자 native의 기능을 직접 연결하도록 지원합니다 (참조: https://flutter.dev/docs/development/platform-integration/platform-channels).
Fuchsia OS Support
Fuchsia는 Google이 만들고 있는 새로운 운영체제 입니다. Zircon이라는 microkernel을 기반으로 만들어 지고 있으며, 사실 기술을 공개가 되고 있지만, 정확하게 어디에 사용지 될지에 대한 부분에 대해서는 정보가 많지 않습니다. Android 운영체제의 계승자라고도 하고 임베디드 기기를 위한 운영체제라고도 하는 등 명확하게 설명이 되어있는 자료는 미흡합니다. 이러한 가운데 이 새로운 운영체제를 위한 언어로서 C/C++과 Dart/Flutter가 선택 되었고, Rust/Go/Python이 탈락한 것으로 알려졌습니다. 그리고 Fuchsia 사이트에는 이에 대한 설명이 있습니다 (출처: https://fuchsia.googlesource.com/fuchsia/+/refs/heads/master/docs/project/policy/programming_languages.md).
Fuchsia OS가 언제 제대로 출시되어 어떤 분야에서 자리를 잡을지 알기는 어렵지만, 새로운 기술에 대한 흥미가 높고, Dart/Flutter의 한계가 어디까지 인지 궁금한 경우는, 심심풀이 삼아 공부와 실험을 해보시기 권합니다 (출처: https://fuchsia.dev/fuchsia-src/development/languages/dart)
Flutter for Embedded Devices
다양한 플랫폼에 Dart/Flutter가 도입되는 것을 보았습니다. 아직 공식적으로 임베디드 기기들에 특화된 기술이 소개되고 있지는 않지만, Dart/Flutter의 마지막 도전으로 예상되는 부분은 임베디드 기기로의 적용 입니다. 최근 Raspberry Pi와 같은 소규모 장치에서 Flutter를 실현하는 데모들이 발표되는 사례가 있습니다. 이러한 추이로, 임베디드 기기들에 Dart/Flutter가 도입되는 시나리오에 대한 논의가 시도되고 있습니다. 특히 2019년 Google I/O에서 Google Home Hub와 같은 기능을 제공하는 스마트 디스플레이 등에 Flutter가 도입된 것으로 알려지면서, 이에 대한 기대가 더욱 커지고 있는 상황 입니다 (참조: https://developers-kr.googleblog.com/2019/05/Flutter-io19.html).
마무리
일주일에 하나 정도의 글을 포스팅 하는 것을 목적으로 하였는데, 근 1년치의 글을 마치게 되었습니다. 지금까지의 글을 통해서 Dart/Flutter가 할 수 있는 전방위적인 분야에 대해서 두루 살펴보고자 하는 목적은 어느 정도 이룬 것으로 보입니다. Dart/Flutter는 모바일 어플리케이션에서 급성장하고 있으며, 이에 맞추어 기술 개발도 매우 빠른 속도로 이루어 지고 있는 것으로 보입니다. 지금까지의 tutorial을 충실하게 진행해 왔다면, 이제는 스스로 말드고자 하는 어플리케이션을 정하고, 해당 분야 깊숙하게 기술 개발을 수행하는 단계로 나아가는 일만 남았습니다. 취미로 시작하는 Dart/Flutter가 개발자로서의 본인 역량 강화와 의도하지 않은 좋은 미래로 이끄는 계기가 되기를 바랍니다.
Creative Commons License (CC BY-NC-ND)