[한국어 번역] How Flutter Works: Architecture #DecodingFlutter (1/6)

https://www.youtube.com/watch?v=0Xn1QhNtPkQ&t=2s

소개 (Introduction)

0:00
CRAIG LABENZ:
“How Flutter Works”의 첫 번째 에피소드에 오신 것을 환영합니다.
이 시리즈는 총 6부작으로, 여러분이 작성한 Dart 코드가 Flutter라는 방대한 세계 속으로 배포된 이후 어떤 일이 벌어지는지를 탐구합니다.

0:11
이 에피소드들을 통해 다루는 정보는 가볍게 흥미로운 내용부터 모든 Flutter 개발자에게 꼭 필요한 핵심 지식까지 다양할 것입니다.

0:18
하지만 분명히 해두자면, 이 모든 내용은 Flutter 앱을 어떻게 작성하는지가 아니라, Flutter 자체가 어떻게 동작하는지에 관한 것입니다.

🎵 (밝은 음악)

0:32
오늘은 Flutter의 아키텍처를 높은 수준에서 살펴볼 것입니다.
Flutter를 처음 조사하기 시작했고, 전체적인 그림을 알고 싶은 분들을 대상으로 합니다.

0:40
이후 이어질 다섯 개의 에피소드에서는 오늘 다루는 많은 세부 사항들을 더 깊이 확장해 나갈 예정입니다.

Flutter란 무엇인가

0:44
먼저, Flutter는 선언형(declarative) 이며 멀티 플랫폼을 지원하는 UI 프레임워크입니다.
Dart로 작성되었고 Google의 강력한 지원을 받고 있습니다.

0:52
“선언형”이란 Flutter가 SwiftUI, Jetpack Compose, React 같은 다른 반응형 UI 툴킷과 유사하다는 뜻입니다.

1:00
여러분은 애플리케이션의 상태를 기반으로 동작하는 코드를 작성하고,
그 상태에 해당하는 UI를 한 프레임 단위로 반환합니다.

1:06
애플리케이션 상태가 변경되면, Flutter는 해당 코드를 다시 실행하여
UI가 자동으로 반응하고 상태와 동기화되도록 합니다.

1:14
“멀티 플랫폼”이란 Flutter가 iOS, Android뿐만 아니라
macOS, Windows, Linux 데스크톱, 그리고 웹까지
아주 다양한 환경에서 실행된다는 의미입니다.

1:25
또한 일부 기업들은 자체 런타임을 관리하기도 하는데,
예를 들어 LG의 webOS는 Flutter를 전 세계의 TV와 모니터로 확장시킵니다.

Dart란 무엇인가

1:34
Flutter의 기반이 되는 언어인 Dart는
Flutter의 대부분의 강력한 성능을 제공하며, Google이 직접 개발했고
2013년에 처음 공개되었습니다.

1:43
Dart는 클라이언트 최적화 언어로,
런타임 해석 없이 곧바로 네이티브 머신 코드로 컴파일됩니다.

1:48
이로 인해 저사양 기기에서도 매우 뛰어난 성능을 제공합니다.

1:55
Dart는 객체 지향적이며 강한 타입 시스템을 가지고 있어
Kotlin이나 C#과 유사합니다.

2:00
또한 비동기 처리를 위한 단일 스레드 이벤트 루프 모델은
JavaScript와 유사합니다.

2:04
Dart는 개발자 경험(DX) 또한 매우 중요하게 여깁니다.

2:08
실제로 많은 개발자들이 Dart를 한 번 사용해 보면
Dart를 좋아하게 됩니다.

Flutter 시작하기

2:13
Flutter를 사용하기 위해서는 먼저 개발 머신에 Flutter를 설치해야 합니다.
이 과정에서 Flutter 도구가 시스템 경로에 추가됩니다.

2:19
설치가 완료되면 다음과 같은 자주 사용하는 명령어들을 실행할 수 있습니다.

• flutter doctor : 설치 상태 확인
• flutter channel : master, stable, beta 등 릴리스 채널 확인
• flutter create : 새 프로젝트 생성
• flutter run : 개발용 앱 실행
• flutter build : 배포용 바이너리 빌드

2:42
flutter create 이후, 실제 Flutter 앱 개발은
위젯(widget) 이라는 클래스를 작성하는 것으로 이루어집니다.

2:48
위젯은 필요한 매개변수를 받아
아주 중요한 렌더 메서드를 실행하는데,
Flutter에서는 이를 build 메서드라고 부릅니다.

Widget과 Build 메서드

2:56
일반적인 위젯은 필요한 경우 생성자를 가지고 있으며,
항상 BuildContext라는 중요한 매개변수를 받는 build 메서드를 포함합니다.

3:06
BuildContext는 화면 크기, 방향,
글꼴 크기 조정, 텍스트 방향과 같은 접근성 정보 등
중요한 런타임 정보에 접근할 수 있게 해줍니다.

3:17
build 메서드는 항상 하나의 위젯을 반환해야 하며,
부작용이 없는 순수 함수여야 합니다.

3:23
개발자들은 build 메서드 내부에서 다양한 계산을 수행할 수 있지만,
결국 반드시 위젯을 반환해야 합니다.

3:33
Flutter는 각 위젯의 build 메서드를 재귀적으로 호출하여
자연스럽게 트리 구조를 형성합니다.

Hot Reload와 내부 트리 구조

3:39
Flutter 프레임워크는 상태와 렌더링을 분리하는
명확한 추상화 계층을 가지고 있으며,
이를 통해 상태 유지 핫 리로드(stateful hot reload) 가 가능해집니다.

3:47
상태 유지 핫 리로드란,
실행 중인 앱을 멈추지 않고
비즈니스 로직이나 UI 코드를 1초도 안 되는 시간 안에 다시 렌더링할 수 있는 기능입니다.

3:55
그리고 앱의 현재 상태는 그대로 유지됩니다.

3:58
이 기능이 바로 2018년 당시 저를 포함한 많은 개발자들이
Flutter에 빠지게 된 이유입니다.

4:04
이러한 추상화는 여러분이 작성한 위젯 뒤에서 생성되는
다른 트리 구조들로 나타납니다.

4:12
Flutter에는 총 세 가지 주요 트리 구조가 있습니다.

• 위젯 트리 (Widget Tree)
• 엘리먼트 트리 (Element Tree)
• 렌더 트리 (Render Tree)

4:21
이 시리즈의 핵심은 바로 이 세 가지 트리를
어떻게 이해하고 활용할 것인가에 있습니다.

Flutter의 렌더링 방식

4:27
높은 수준에서 보면, Flutter 프로젝트는
호스트 플랫폼에 등록된 하나의 캔버스이며,
그 위에 앱이 필요로 하는 모든 것을 직접 그립니다.

4:36
즉, Flutter는 UI에 대한 완전한 제어권을 가지며
각 플랫폼이 기본적으로 제공하는 UI 제약에 묶이지 않습니다.

4:43
디자이너나 Flutter 엔지니어가 상상할 수 있는 UI라면
Flutter는 이를 지원되는 모든 플랫폼에서 렌더링할 수 있습니다.

Flutter 프로젝트의 구성 요소

4:51
각 Flutter 프로젝트는 세 가지 핵심 요소로 구성됩니다.

1. 완전히 네이티브인 프로젝트
   (예: iOS의 Xcode 프로젝트, 웹의 HTML 파일)
2. Flutter 프레임워크와 여러분이 작성한 Dart 코드
   (사용자 이벤트 처리 및 프레임 렌더링 담당)
3. Dart 코드를 실행하기 위한 플랫폼별 연결 코드 (글루 코드)

렌더링 엔진: Skia와 Impeller

5:14
Flutter는 오랫동안 Skia를 렌더링 엔진으로 사용해 왔습니다.
Skia는 Google Chrome, Android 등 수많은 제품에서 사용되는
오픈소스 2D 그래픽 엔진입니다.

5:24
최근 Flutter 특유의 제약을 해결하고
더 일관된 성능을 제공하기 위해
새로운 렌더러인 Impeller를 개발 중입니다.

5:33
이 영상이 공개된 시점을 기준으로,
일부 플랫폼은 여전히 Skia를 사용하고 있으며,
일부는 이미 Impeller로 전환되었습니다.

Flutter 레이어 케이크

5:40
이 모든 내용을 하나로 정리한 것이
우리가 흔히 부르는 Flutter 레이어 케이크 다이어그램입니다.

5:45
촛불을 어디에 꽂아야 할지는 모르겠지만,
여전히 맛있는 케이크라고 들었습니다.

5:49
여기에는 앞으로 다룰 다양한 주제들이 포함되어 있습니다.
플랫폼별 임베더, 그래픽과 운영체제 통신을 담당하는 엔진,
그리고 Dart로 작성된 Flutter 프레임워크까지 말이죠.

다음 에피소드 예고

6:04
다음 에피소드에서는 Flutter의 세 가지 핵심 데이터 구조인
위젯 트리, 엘리먼트 트리, 렌더 트리를 본격적으로 살펴보겠습니다.

6:12
그때 다시 만나요!

🎵 (음악)