내용 정리 Part.2 - [풀스택 개발이 쉬워지는 다트 & 플러터]

24년 4월을 기준으로 작성되었습니다.

 

 

1. Flutter 아키텍처 이해하기

플러터 계층 구조 (데스크톱 환경)

 

아키텍처 맨 위의 Flutter Framework 중 Material과 Cupertino는,

Flutter로 만든 애플리케이션이 "사용자의 눈에 보여지는 디자인"을 정의한다.

 

Material 디자인을 따르는 앱을 만들 때, 여러 위젯을 사용했다. 그래서 바로 밑에 Widgets가 있다.

 

그리고 이 위젯들은 화면에 출력되기 위해서 Rendering의 지원을 받는데,

통상 소프트웨어에서 이미지를 인위적으로 만들어내는 작업을 Rendering 이라고 한다.

 

렌더링은 다시 밑의 Animation과 Painting의 지원을 받아서, 화면에 이미지를 표시한다.

그리고 사용자의 입력인 터치, 탭, 드래그 등을 지원하는 Gesture가 제공된다.

 

그리고 이들의 가장 기반이 되는 기능을 제공하는 소프트웨어인 Foundation이, 프레임워크의 맨 밑에 존재한다.

 

이들을 묶어서 Flutter Framework 라고 부르고, Dart 언어로 만들어져 있다는 것을 알 수 있다.

 

프레임워크가 Dart 언어를 사용해서, 사용자 인터페이스(UI)를 만드는 것을 주 목적으로 한다면,

이 목적을 고성능으로 제공하는 기반 기술이 Flutter Engine 이다.

EX 1) 화면에 인위적인 이미지를 만들어내는 "컴퓨터 그래픽" 기능, Flutter는 Skia 라는 오픈소스 2차원 그래픽 라이브러리를 사용한다.

 

EX 2) 그리고 파일 처리, 네트워크 송수신 등 다양한 기술을 Flutter Engine 에서 제공하고 있다.

 

Flutter Engine은 성능 상의 이유와 운영체제의 깊은 부분을 접근해야 하는 등의 이유로, C나 C++ 언어로 만들어져 있다.

 

하드웨어나 운영체제에 무관하게 Flutter Framework와 Engine이 동작하도록 하는 소프트웨어가 Flutter Embedder 이다.

특히 Flutter Embedder는 특정 운영체제와 하드웨어에서 최적의 성능을 제공할 수 있도록, 운영체제에 특화된 언어를 사용한다.

 

Flutter architectural overview : https://docs.flutter.dev/resources/architectural-overview

Flutter architectural overview

 

 

---

2. Flutter for Web 아키텍처 이해하기

웹 서비스에서 사용하는 웹 브라우저에는 운영체제가 없다.

따라서 Flutter로 웹 서비스를 개발하는 경우에는 기존과는 다른 내부 아키텍처를 갖는다.

Flutter for Web 아키텍처

 

Dart와 Flutter로 만들어진 프로그램은, 기존의 웹 브라우저가 이해하는 JavaScript로 번역된다.

 

Dart2js 공식 사이트 : https://dart.dev/tools/dart2js

dart2js: Dart-to-JavaScript compiler

 

이름이 의미하듯이, Dart 언어와 Flutter 프레임워크를 사용해서 만든 프로그램을 JavaScript 언어의 코드로 변환해 준다.

 

※ Dart-to-JavaScript 는 최근 dart 명령에 통합되었다. "dart compile js" 라는 명령으로 동작한다.

 

Google Mobile Ads for Flutter : https://pub.dev/packages/google_mobile_ads

google_mobile_ads | Flutter package

 

Google Ads는 Flutter로 Web 서비스를 개발하는 방법으로 만들어진, 대표적인 상용 수준의 서비스이다.

 

---

3. Dart for Embedded 알아 두기

Fluuter로 개발할 수 있는 소프트웨어 실행 환경은 스마트폰, 데스크톱, 웹 서비스 외에 임베디드(embedded)가 있다.

쉽게 이야기하면, TV/냉장고/세탁기/에어컨과 같은 가전기기와 프린터 등의 사무기기,

그리고 광고판/센서/스마트워치 등의 사물인터넷(Internet-of-Things) 장치 등을 의미한다.

 

---

3-1. CFEE

일반적으로 사용하는 범용 하드웨어와 운영체제가 아닌,

임베디드 환경에서 Flutter를 실행하기 위해서 'Custom Flutter Engine Embedders' 라는 글을 참조할 필요가 있다.

 

CFEE 위키 사이트 : https://github.com/flutter/flutter/wiki/Custom-Flutter-Engine-Embedders

Custom Flutter Engine Embedders

 

※ 1. 에서 설명한 플러터의 아키텍처처럼, 하드웨어에 의존적인 부분을 어떻게 수정해야 하는지 기준이 되는 가이드라인이 CFEE라고 보면 된다.

 

---

3-2. 소니의 사례

2020년 말에 자사의 임베디드 환경에 Linux를 구축하고, 이 위에서 Flutter의 Embedder를 개발한 후, Flutter SDK를 수정하였다.

 

Sony의 Embedder 공식 사이트 : https://github.com/sony/flutter-embedded-linux

GitHub - sony/flutter-embedded-linux: Embedded Linux embedding for Flutter

 

Sony의 Fluuter 확장 기능 공식 사이트 : https://github.com/sony/flutter-elinux

GitHub - sony/flutter-elinux: Flutter tools for embedded Linux (eLinux)

 

 

---

3-3. 구글의 Fuchsia 운영체제

무엇보다 관심을 받고 있는 사례는, 구글이 새롭게 만들고 있는 운영체제인 Fuchsia의 Dart/Flutter 도입이다.

많은 정보는 없지만, 임베디드 및 사물 인터넷 기기들을 위한 첫 운영체제가 될 것이라고 알려져 있고,

일부에서는 안드로이드와 유사한 수준으로 발전할 것이라고 기대하기도 한다.

 

Fuchsia 운영체제 공식 사이트 : https://fuchsia.dev/

Fuchsia

 

 

---

4. Flutter 공식 사이트 레퍼런스와 샘플 활용하기

Dart와 Flutter는 개발자의 편의를 위해서 표준 라이브러리와 패키지에서 제공하는 기능과 위젯을,

다양한 방법으로 찾아보고 활용할 수 있도록 지원하고 있다.

 

---

4-1. Flutter Gallery

Flutter 만의 특이하고 독창적인 샘플이다. 구글 플레이 스토어에서 "Flutter Gallery" 라는 앱을 다운받을 수 있었다...

 

Flutter Gallery 사이트 : https://github.com/flutter/gallery#flutter-gallery

GitHub - flutter/gallery: Flutter Gallery was a resource to help developers evaluate and use Flutter

 

※ 그러나, 2024년 현재는 지원을 중단하고, 뿔뿔이 흩어졌다.

 

여기는 괜찮은 듯 : https://flutter-gallery-archive.web.app/

Flutter Gallery

 

 

---

4-2. Flutter Samples

Flutter의 각종 위젯 등을 그림으로 확인하고, 필요하면 샘플 코드를 찾아 본인 프로그램에 포함할 수 있도록 도와준다.

 

Flutter Samples 사이트 : https://flutter.github.io/samples/#

Flutter samples

 

 

---

4-3. Widget Index

Flutter Samples 처럼 그림으로 위젯들을 보여주는 것은 유사하지만, 대부분의 위젯들에 대해서 기능을 설명하는 동영상이 제공되고 있다.

 

Widget Index 사이트 : https://docs.flutter.dev/reference/widgets

Flutter widget index

 

 

---

4-4. CookBook

마치 요리책을 보는 것처럼 키워드를 통해서 원하는 분야를 찾은 후, 이에 대한 상세한 설명을 볼 수 있다.

 

Flutter CookBook 사이트 : https://docs.flutter.dev/cookbook

Cookbook

 

 

---

4-5. Codelabs

기본적인 수준이 아니라, 보다 깊이 있는 내용을 튜토리얼의 형태로 공부할 수 있다.

 

Codelabs 사이트 : https://docs.flutter.dev/codelabs

Codelabs

 

 

---

4-6. API Reference

Flutter가 제공하는 모든 라이브러리와 패키지를 사전처럼 나열한 참조 사이트

 

일단 패키지 이름이 나타난다.

이 중 원하는 패키지를 선택하면, 패키지 안의 모든 라이브러리가 알파벳 순서대로 나열된다.

이름을 기준으로 원하는 기능을 찾아가서 -> 사용하면 된다.

 

API Reference 사이트 : https://api.flutter.dev/

Flutter - Dart API docs

 

 

---

5. Flutter CLI 명령어 이해하기

Flutter SDK의 핵심 컴포넌트 중 하나는 CLI 환경에서 동작하는 flutter 명령어이다.

 

자주 등장하는 flutter 명령어를 정리하면, 다음과 같다.

 

Flutter 명령어 공식 사이트 : https://docs.flutter.dev/reference/flutter-cli

flutter: The Flutter command-line tool

 

 

---

5-1. analyze 명령어 활용하기

 

프로젝트가 실행되는 디바이스에서의, 프로젝트 실행 상태를 분석해준다.

EX) 크롬 브라우저를 사용하는 웹 서비스라면 -> flutter analyze -d chrome 명령으로 실행한다.

 

 

---

5-2. channel 명령어 활용하기

Flutter에서는 패키지나 라이브러리의 개발 단계 수준에 맞춰서 등급을 정한다.

대표적으로 stable(안정적) 이라는 등급은, 해당 소프트웨어가 믿고 신뢰할 수준이라는 의미이다.

 

그 외에도, 개발이 완료되지 않았기에 에러의 가능성이 있다고 명시되는 등급도 있다.

따라서 pub.dev 등에서 패키지를 찾아서 사용하려고 하면, "프로그램의 상태가 안정적이지 않으니 개발 수준 혹은 베타 상태에서 활용하라" 는 설명이 있을 수 있다. 이런 경우에 channel 명령어를 사용한다.

 

Flutter로 개발하는 소프트웨어의 상태는 stable, beta, master -> 이 3가지 상태로 구분할 수 있다.

보통 프로젝트에서는 안정적인 등급의 소프트웨어를 사용해서 개발하도록 stable 상태로 설정되어 있다.

 

개발 등급을 변경하고 싶다면,

이런 명령어들로 변경할 수 있다.

 

 

---

5-3. clean 명령어 활용하기

clean 명령은 build 혹은 run 과정에서 만들어진 많은 작업 파일을 전부 삭제한다.

 

※ 이외의 다양한 flutter 세부 명령어의 구체적인 정보는, -h(--help) 옵션을 사용하여 확인해 볼 수 있다.

 

 

---

6. Concurrency 기반 병렬 처리 개발하기

이전 볼륨에서 함수를 호출하고, 함수의 종료와 함께 결과 값을 가져오기 위해 비동기 함수를 배웠다.

이와 다르게 Isolate(아이솔레이트) 기술을 사용하면, 내가 만든 프로그램이 2개 이상의 일꾼으로 나누어지고,

각각의 일꾼들은 서로 정보를 주고 받으면서 작업을 한다.

가장 중요한 차이점은 바로 "서로 정보를 주고 받으면서 작업" 한다는 부분이다.

따라서 Isolate 기술을 사용하면, 같은 작업을 하는 프로그램이더라도 더 많은 CPU와 코어가 있는 컴퓨터에서는 더 빠르게 결과를 계산하도록 할 수 있다.

 

import 'dart:io';
import 'dart:convert';
import 'dart:async';
import 'dart:isolate';
import 'package:async/async.dart';

// 비동기 작업을 위한, dart:async 라이브러리
// isolate를 위한 dart:isolate 라이브러리

// _sendAndReceive() 함수를 호출하고, 이 함수가 보내오는 결과들을 비동기적으로 기다리면서, 결과가 올 때마다 화면에 출력한다
void main() async {
  int counter = 5;
  await for (final msg in _sendAndReceive(counter)) {
    print('Received from _sendAndReceive(): < $msg >');
  }
}

/*
_sendAndReceive() 함수는 하나의 값을 리턴하는 간단한 방식이 아니다.

1. 정수 하나를 입력 받아서, 문자열을 꾸준히 리턴하기 위해 반환타입이 Stream<String>이다.

2. 이 함수의 가장 중요한 역할은 동시에 같이 동작할 _doCount() 함수를 isolate 모드로 실행시키는 것이다.
-> 그래서 Isolate.spawn() 함수를 사용한다.

3. Isolate.spawn() 함수의 첫번째 파라미터는, isolate 방식으로 동작할 함수의 이름을 넣어주고,
두번째는 _doCount() 함수가 _sendAndRecevie() 함수에게 정보를 보내는 용도로 사용할 일종의 통신 포트인 p.sendPort이다.

4. 이렇게 ReceivePort()가 p라는 이름으로 만들어지면, _sendAndReceive() 함수는 p로부터 계속 정보가 오기를 기다린다.
-> 따라서 p는 계속 정보를 수신하는 타입이 되어야 하기 때문에, p를 받아서 처리할 수 있는 타입으로 StreamQueue<dynamic>를 사용한다.

5. yield 구문은, 일종의 파이프를 열고 끊임없이 결과를 전달하는 문법이다.

*/
Stream<String> _sendAndReceive(int counter) async* {
  final p = ReceivePort();
  await Isolate.spawn(_doCount, p.sendPort);

  final events = StreamQueue<dynamic>(p);
  SendPort sendPort = await events.next;

  for (var temp = counter; temp >= 0; temp--) {
    sendPort.send(temp);
    String message = await events.next;
    yield message;
  }

  sendPort.send(null);
  await events.cancel();
}

/*
_doCount()와 _sendAndReceive() 함수가 탁구처럼 서로 주고받으면서 동작을 한다.

1. SendPort sendPort = await events.next; <= p.send(commandPort.sendPort);
_doCount() 함수가 _sendAndReceive() 함수에게 최초의 정보를 보냈다.
즉, 서로의 ReceivePort()를 주고받은 것이다.

2. 이제 둘다 for 루프에 진입한다. 반복문은 _sendAndReceive() 함수가 주도한다.
1씩 줄어드는 temp 값을 _doCount() 함수에게 보낸다.
그러면 _doCount() 함수가 commandPort를 통해서 이 값을 받고, 
정수라면 1초 대기 후에, 문자열을 만들어서 다시 _sendAndReceive() 함수에게 보낸다.

3. _sendAndReceive() 함수는 "String message = await events.next;"로 이 문자열을 받아서 화면에 출력한다. 
그리고 반복문이 종료되면, _doCount() 함수에게 null을 보내서 종료를 요청한다.

4. 그러면 _doCount() 함수도 반복문이 종료되게 되고,
Isolate.exit() 함수를 호출해서, isolate 모드로 동작하던 것이 종료된다.
*/
Future<void> _doCount(SendPort p) async {
  print('Isolate _doCount() started.');

  final commandPort = ReceivePort();
  p.send(commandPort.sendPort);

  await for (final message in commandPort) {
    if (message is int) {
      await Future.delayed(Duration(seconds: 1), () => {});
      final contents = "_doCount(): $message seconds";
      p.send(contents);
    } else if (message == null) {
      break;
    }
  }

  print('Isolate _doCount() completed.');
  Isolate.exit();
}

 

 

Concurrency 공식 사이트 : https://dart.dev/language/concurrency

Concurrency in Dart

 

다만 Concurrency는 Isolate 라는 기술을 어떻게 사용하는지에 관한 설명일 뿐이다.

어떤 작업을 병렬로 동작시켜야 성능이 향상될지 판단하는 것은, 개발자의 능력에 달려 있다.

 

 

---

7. TensorFlow 활용하기

TensorFlow는 인공 신경망 기술에서 가장 유명한 소프트웨어 중 하나이다.

"사진에서 특정 목표를 추출" 하거나, "주어진 데이터를 그룹별로 분류" 하는 등의 작업에서 탁월한 성능을 보인다.

 

그러나 아쉽게도, Dart 언어는 지원하지 않는다.

그럼에도 불구하고 Dart 언어에서 TensorFlow를 사용할 수 있는 방법이 몇가지 있다.

 

 

---

7-1. pub.dev에 공개되어 있는 라이브러리와 패키지를 사용하는 방법

이전에 소개했던 tflite 뿐만 아니라, tensorflow 라고 검색하면 여러 패키지들이 검색되니 잘 찾아서 사용해야 한다.

 

 

---

7-2. C 언어를 이해하고 있다면, FFI를 사용하는 방법

앞선 챕터에서 설명한 FFI (Foreign Function Interface) 를 사용해서, TensorFlow 중 필요한 부분을 직접 연결해 보는 방법이다. 사실 pub.dev에서 찾을 수 있는 패키지들도 FFI를 기반으로 Dart와 TensorFlow를 연결하는 패키지들이 많다.

 

스마트폰과 같은 클라이언트 뿐만 아니라, 서버에도 적용 가능한 방법이다.

 

Dart FFI 설명 사이트 : https://api.dart.dev/dev/3.4.0-260.0.dev/dart-ffi/dart-ffi-library.html

dart:ffi library - Dart API

 

 

---

7-3. C++이나 Python으로 TensorFlow를 사용하는 소프트웨어를 만들기

그리고 이 소프트웨어에 입력 값을 주고, 결과를 전달받는 프로그램을 Dart와 Flutter로 개발하는 방식이다.

두 소프트웨어 간의 정보 교환은 HTTP의 CRUD 방식 등으로 구현하면 된다.

 

최근 마이크로서비스 또는 서버리스라는 용어들이 광범위하게 쓰이는데,

간단하게 설명하면 어차피 기술별로 최적인 언어는 따로 있으니, 각각의 목적과 용도에 맞는 프로그래밍 언어로 독립적으로 개발하고, 입력과 출력만 HTTP 등의 네트워킹 기술로 주고 받으면 된다는 아이디어로 구현된 기술을 말한다.

 

이 방법은 주로 서버 쪽의 방법으로 권장한다.

 

 

---

7-4. Firebase 같은 이미 제공되는 서비스를 이용하는 방법

TensorFlow가 지원하는 기능이 필요하지만, 프로그래밍이 굳이 필요하지 않은 경우 사용할 수 있다.

 

Firebase 사이트 : https://firebase.google.com/?hl=ko

Firebase | Google’s Mobile and Web App Development Platform

 

스마트폰 등의 디바이스에 올라가는 소프트웨어는 직접 개발할 의사가 있으나,

굳이 서버를 직접 개발하고 운영할 필요가 없는 경우, 구글이 제공하는 Firebase를 사용하여 개발을 간략화할 수 있다.

 

특히 Firebase 에는 "ML Kit" 가 있기 때문에, 더욱 더 언급하는 이유가 있다.

Flutter로 스마트폰 앱을 만들고, Firebase로 서버 기능을 구성하기 위한 노력 속에서 등장한 기술 중 최근 가장 인지도가 높은 기술은 FlutterFire 이다.

 

FlutterFire 사이트 : https://firebaseopensource.com/projects/firebaseextended/flutterfire/

FlutterFire

 

 

FlutterFire 플러그인 소개 사이트 : https://firebase.flutter.dev/

FlutterFire | FlutterFire

 

 

---