플러터

1. 개요

플러터는 구글에서 개발한 UI 소프트웨어 개발 키트(SDK)로, 안드로이드, iOS, 웹, 데스크톱 등 다양한 플랫폼에서 네이티브 컴파일된 애플리케이션을 제작할 수 있게 해준다. 2015년 다트 개발자 서밋에서 처음 공개되었으며, 위젯 기반의 아키텍처를 사용하여 UI를 구성한다. 플러터는 Material Design과 Cupertino 위젯을 제공하여 각 플랫폼에 맞는 디자인을 지원하며, 2018년 플러터 1.0 출시 이후 지속적인 업데이트를 통해 데스크톱 플랫폼 지원을 강화하고 널 안전성(null safety)과 같은 기능을 추가했다. 2024년에는 플러터 커뮤니티 개발자에 의해 플러터의 포크인 Flock이 발표되었다.

2. 역사

플러터의 첫 번째 버전은 "Sky"로 알려졌으며 안드로이드 운영체제에서 실행되었다. 2015년 다트 개발자 서밋에서 발표되었으며, 초당 120 프레임으로 일관성 있게 렌더링할 수 있도록 하는 것을 목표로 했다.

2018년 12월 4일, 플러터 1.0이 런던에서 열린 플러터 컨퍼런스에서 출시되었다. 2020년 5월, Dart SDK 버전 2.8과 플러터 1.17.0이 출시되며 Metal API 지원이 추가되었다.

2021년 3월, 구글은 온라인 플러터 인게이지 이벤트에서 플러터 2를 출시했다. 2022년 5월, 플러터 3과 Dart 2.17이 출시되며 모든 데스크톱 플랫폼을 안정적으로 지원하게 되었다.

2024년 10월, 여러 플러터 커뮤니티 개발자가 플러터의 포크인 Flock을 발표했다. Flock은 업스트림 코드 베이스에서 이루어진 모든 변경 사항과 동기화되면서 기여하기 더 쉽도록 만들어졌다.

2.1. 개발 초기

플러터의 최초 버전 코드명은 "Sky"(스카이)이며 안드로이드 운영 체제에서 실행되었다. 2015년 다트 개발자 서밋에서 초당 120 프레임으로 꾸준히 렌더링이 가능하도록 의도되었다고 발표되었다. 2018년 12월 4일, 상하이의 구글 개발자의 날 키노트에서 플러터 1.0 전 마지막 대형 릴리스인 플러터 릴리스 프리뷰 2가 발표되었고, 같은 날 플러터 라이브 이벤트에서 프레임워크의 최초 안정판인 플러터 1.0이 공개되었다.

2.2. 버전 1.0 출시 및 발전

플러터의 최초 버전 코드명은 "Sky"(스카이)이며 안드로이드 운영 체제에서 실행되었다. 2015년 다트 개발자 서밋에서 공개되었으며 초당 120 프레임/초로 꾸준히 렌더링이 가능하도록 의도되었다고 언급되었다. 2018년 12월 4일, 런던에서 열린 플러터 컨퍼런스에서 프레임워크의 최초 안정판인 플러터 1.0이 공개되었다.

플러터 1.0에서는 iOS 스타일 위젯 키트인 Cupertino Theme를 대폭 강화하고("Pixel-Perfect iOS App"), 구글이 제공하는 mBaaS 서비스인 Firebase를 지원하며, Dart 2.1 지원, 바이너리 사이즈 최적화 등, 릴리스 프리뷰 시에 구현된 기능의 버그 수정 등이 이루어졌다.

2019년 2월에는, 기존 애플리케이션의 일부에서 플러터를 동작시키는 "Add to App", 플러터 상에서 안드로이드 및 iOS의 GUI 컨트롤을 동작시키는 "Platform Views", 윈도우 및 macOS, 리눅스 등의 데스크톱 플랫폼용 구현 "Flutter Desktop Embedding", JavaScript로 컴파일하여 웹 플랫폼용 구현 "Hummingbird" 등의 개발을 진행하고 있다는 내용이 발표되었다.

2020년 5월 6일, Dart SDK 버전 2.8과 플러터 1.17.0이 출시되었으며, Metal API 지원이 추가되었다.

2021년 3월 3일, 구글은 온라인 플러터 인게이지 이벤트에서 플러터 2를 출시했다. 이 업데이트로 HTML 기반 렌더러 외에 웹용 캔버스 기반 렌더러와 윈도우, macOS, 리눅스에 대한 초기 액세스 데스크톱 애플리케이션 지원이 추가되었다. 또한 널 안전성 지원을 포함하는 Dart 2.0과 함께 제공되었다.

2021년 9월 8일, Dart SDK 버전 2.14와 플러터 버전 2.5가 릴리스되었다. 업데이트에는 안드로이드의 풀 스크린 모드와 Material You라고 불리는 구글의 최신 버전의 머티리얼 디자인이 포함되었다. Dart에는 최신 린트 조건이 표준화되어 기본 조건으로 사전 설정되었고, Dart의 Apple Silicon 지원이 stable 상태가 되었다는 두 가지 새로운 업데이트가 있었다.

2022년 5월 12일, 플러터 3과 Dart 2.17이 출시되었으며, 모든 데스크톱 플랫폼을 안정적으로 지원했다.

3. 프레임워크 아키텍처

플러터 프레임워크는 Dart 플랫폼, 플러터 엔진, 파운데이션 라이브러리(Foundation library), 디자인 특화 위젯으로 구성된다.

플러터 앱은 Dart 언어로 작성된다. 모든 플랫폼의 플러터 앱 릴리스 버전은 AOT(Ahead-of-time) 컴파일을 사용하지만, 코드가 소스 간 컴파일러를 통해 JavaScript 또는 WebAssembly로 JavaScript 변환되는 웹에서는 예외이다. 플러터는 Dart의 [https://pub.dev Pub] 패키지 관리자 및 소프트웨어 저장소를 상속받아 사용자가 사용자 지정 패키지 및 플러터 관련 플러그인을 게시하고 사용할 수 있도록 한다.

Dart로 작성된 Foundation 라이브러리는 플러터를 사용하여 애플리케이션을 구성하는 데 사용되는 기본 클래스 및 함수, 예를 들어 엔진과 통신하는 API를 제공한다.

주로 C++로 작성된 플러터의 엔진은 구글의 Skia 그래픽 라이브러리 또는 iOS에서 기본적으로 활성화되고 안드로이드에서 베타 버전으로 제공되는 사용자 지정 "Impeller" 그래픽 레이어를 사용하여 저수준의 렌더링 지원을 제공한다. 이 엔진은 접근성, 파일 및 네트워크 I/O, 네이티브 플러그인 지원 등과 같은 기능을 구현하기 위해 플랫폼별 SDK (예: Android 및 iOS에서 제공하는 SDK)와 인터페이스한다.

3.1. 위젯 기반 UI 구성

플러터 프로그램의 기본 구성 요소는 "위젯"이며, 위젯은 다른 위젯으로 구성될 수 있다. 위젯은 React와 유사한 구현 방식으로 UI 요소의 로직, 상호 작용, 디자인을 설명한다. React Native 및 Xamarin과 같은 다른 크로스 플랫폼 툴킷과 달리, 플러터는 위젯을 픽셀 단위로 직접 렌더링한다.

플러터에는 "상태가 없는(stateless)" 위젯과 "상태가 있는(stateful)" 위젯 두 가지 유형이 있다. 상태가 없는 위젯은 입력이 변경될 때만 업데이트되므로 화면의 다른 요소가 변경될 때 다시 빌드할 필요가 없지만, 상태가 있는 위젯은 `setState()` 메서드를 호출하여 내부 상태를 업데이트하고 다시 그릴 수 있다.

위젯은 플러터 애플리케이션을 구성하는 주요 방법이지만, 캔버스에 직접 그리는 방식으로 이를 우회할 수도 있다. 이 기능은 때때로 플러터에서 게임 엔진을 구현하는 데 사용되었다.

플러터 프레임워크에는 특정 디자인 언어에 맞는 두 세트의 위젯이 포함되어 있다. Material Design 위젯은 구글의 디자인 언어를 구현하고, Cupertino 위젯은 애플의 iOS 인터페이스 지침을 구현한다. 플러터는 개발자가 두 플랫폼 모두에서 위젯 집합을 사용할 수 있도록 하며, 안드로이드에서 Cupertino 위젯을 사용할 수 있다.

4. 디자인투코드(Design-to-code)

디자인투코드(Design-to-Code)란 피그마(프로그램)와 같은 디자인 파일을 코드로 변환하는 것을 의미한다.

피그마의 디자인 협업 환경 혁신에 이어 UI/UX 개발 프로세스의 혁신이 일어날 것으로 예상된다. 대표적인 서비스형 소프트웨어로는 [https://function12.io 펑션투웰브]가 있다.

5. Hello World 예시

dart
import 'package:flutter/material.dart';

void main() => runApp(HelloWorldApp());

class HelloWorldApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello World App',
home: Scaffold(
appBar: AppBar(
title: Text('Hello World App'),
),
body: Center(
child: Text('Hello World'),
),
),
);
}
}

```
이 코드는 플러터(Flutter)를 사용하여 "Hello World"를 출력하는 가장 기본적인 예제이다.

* `import 'package:flutter/material.dart';`: 플러터의 Material Design 위젯들을 사용하기 위한 패키지를 가져온다.
* `void main() => runApp(HelloWorldApp());`: `HelloWorldApp` 클래스의 인스턴스를 생성하여 앱을 실행한다.
* `HelloWorldApp` 클래스: `StatelessWidget`을 상속받아 UI를 구성한다.
* `build` 메서드: 앱의 UI를 정의한다.
* `MaterialApp`: 앱의 기본적인 Material Design 레이아웃을 설정한다.
* `title`: 앱의 제목을 설정한다.
* `home`: 앱의 홈 화면을 설정한다.
* `Scaffold`: AppBar, body 등 기본적인 위젯들의 레이아웃을 구성한다.
* `appBar`: 앱 상단에 표시되는 AppBar를 설정한다.
* `title`: AppBar의 제목을 설정한다.
* `body`: 앱의 본문 내용을 설정한다.
* `Center`: 자식 위젯을 화면 중앙에 배치한다.
* `child`: 화면에 표시할 텍스트를 설정한다.