[Android][Flutter] 플러터의 렌더링 방식

출처

Gemini

 

 

안드로이드에서 플러터는 고성능 2D 렌더링 엔진인 Skia를 사용해 UI를 직접 렌더링한다.

 

Skia

구글에서 오픈소스로 제공하는 그래픽 라이브러리.

웹, 모바일, 데스크탑 등 다양한 플랫폼에서 사용된다.

 

Skia의 핵심 렌더링 기술

1. 위젯 트리

플러터는 모든 UI 요소를 위젯 트리로 구성한다. 위젯 트리는 부모 위젯과 자식 위젯으로 이루어져 있으며, 각 위젯은 자체적인 레이아웃과 페인팅 로직을 가진다.

 

1-1.위젯 트리의 역할

 

• UI 요소를 계층 구조로 구성한다.
• 레이아웃을 계산하고 적용한다.
• 페인팅 작업을 수행한다.
• 사용자 입력을 처리한다.

 

2. 레이아웃 시스템

플러터는 다양한 레이아웃 알고리즘을 제공해 위젯 트리를 효율적으로 배치한다.

플러터 레이아웃 알고리즘

플러터는 다양한 레이아웃 알고리즘을 제공해 위젯 트리를 효율적으로 배치한다. 주요 레이아웃 알고리즘은 다음과 같다.

1. Constrain-based layout

• 부모 위젯이 자식 위젯에게 크기 제약 조건을 제공하고, 자식 위젯은 부모의 제약 조건에 따라 자신의 크기를 결정한다.
• 가장 기본적인 레이아웃 알고리즘이며, Column, Row, Stack, SizedBox 등 다양한 위젯에서 사용된다.
• 예시: Column 위젯 안에 여러 개의 Row 위젯을 배치하는 경우, 각 Row 위젯은 Column 위젯의 가로 길이에 맞춰 크기를 조정한다.

2. Size-based layout:

2. Size-based layout

 

• 자식 위젯의 크기를 직접 지정하여 레이아웃을 구성하는 방식이다.
• Constrain-based layout와 함께 사용하거나, 단독으로 사용할 수 있다.
• 예시: SizedBox 위젯을 사용하여 자식 위젯의 크기를 고정시킬 수 있다.

 

3. Custom layout

 

• 위젯 트리를 직접 계산하고 배치하는 사용자 정의 레이아웃이다.
• 더 복잡한 레이아웃을 구현해야 하는 경우에 사용된다.
• LayoutBuilder, CustomSingleChildLayout, CustomMultiChildLayout 등의 위젯을 사용하여 구현할 수 있다.
• 예시: 화면을 대각선으로 나누는 레이아웃을 구현하려면 Custom layout을 사용해야 한다.

 

4. Flexible layout

 

• Constrain-based layout의 확장 버전으로, 자식 위젯들이 사용 가능한 공간을 유연하게 배분하도록 한다.
• Row, Column, Wrap 등의 위젯에서 사용된다.
• 예시: Row 위젯 안에 여러 개의 Text 위젯을 배치하는 경우, Text 위젯들은 사용 가능한 공간에 따라 크기를 조정된다.

 

5. Positioning

 

• 위젯을 특정 위치에 배치하는 데 사용된다.
• Stack, Positioned 등의 위젯에서 사용된다.
• 예시: Stack 위젯 위에 Positioned 위젯을 배치하여 위젯의 위치를 조정할 수 있다.

 

6. Alignment

 

• 위젯을 정렬하는 데 사용된다.
• Center, Align, SafeArea 등의 위젯에서 사용된다.
• 예시: Column 위젯 안의 Text 위젯을 가운데 정렬하려면 Center 위젯을 사용할 수 있다.

 

 

 

 

3. 페인팅 시스템

플러터는 Canvas API를 제공해 위젯을 직접 그릴 수 있게 한다. Canvas API를 사용하면 다양한 도형, 이미지, 텍스트 등을 그릴 수 있으며, 사용자 정의 셰이더를 사용해 복잡한 그래픽 효과를 만들 수 있다.

 

4. 하드웨어 가속

플러터는 GPU를 사용해 렌더링 작업을 가속화한다. GPU는 CPU보다 그래픽 작업 처리 속도가 훨씬 빠르기 때문에, 플러터는 부드럽고 빠른 UI를 제공할 수 있다.

 

플러터 렌더링 방식의 장점

 

1. 고성능

Skia와 같은 고성능 렌더링 엔진을 사용하여 부드럽고 빠른 UI를 제공한다.

2. 플랫폼 독립성

Skia는 다양한 플랫폼을 지원하기 때문에, 플러터 앱은 별도의 코드 변경 없이 여러 플랫폼에서 실행될 수 있다.

3. 사용자 정의 가능

Canvas API와 같은 다양한 도구를 제공하여 개발자가 사용자 정의 렌더링을 수행할 수 있도록 한다.