.NET MAUI 익히기 - slog

이 페이지를 통해 하나씩 MAUI에 대한 기능을 익혀보려 합니다. 문서는 상당히 자세하게 구성되어 있습니다.

먼저 MAUI는 무엇일까요? 문서에서는 .NET 다중 플랫폼 앱 UI로 정의하고 있습니다. WPF또는 UWP또는 Xamarin.Forms 처럼 XAML을 이용해서 모바일 및 데스크톱 앱을 다중 플랫폼으로 개발할 수 있습니다.

image

저 그림 보면 Xamarin.Forms랑 같은데? 생각이 드는데 맞습니다. Xamarin.Forms를 성능 및 확장성을 위해 다시 설계되었습니다.

기본 기능으로 구현된 동일한 앱을 Xamarin.Forms 및 MAUI 성능비교 정보가 있으면 좋겠네요 ^^;

MAUI는 누구를 위한 것일까요? .NET 및 C#을 기반으로 크로스플랫폼 모바일 및 데스크톱 앱을 개발하기 위한 서비스 개발 회사 또는 개발자가 됩니다.

크로스플랫폼 개발 프레임워크 중 Xamarin.Forms의 지분을 살펴보겠습니다.

image
(How large is Flutter vs React Native community in 2021 - DEV Community)

GitHub 별은 개발자의 지지를 의미하므로 Flutter가 강력한 지지를 받고 있는것을 볼 수 있습니다.

4개의 좋아요

Visual Studio 2022 Preview를 통해 모바일 개발 워크로드를 선택하면 .NET MAUI 개발환경이 구성됩니다.

image

새 프로젝트 만들기에서 .NET MAUI 앱으로 프로젝트를 만들면 MAUI 기본 템플릿이 생성되는데 다음처럼 단일 프로젝트로 개발을 진행할 수 있기 때문에

image

프로젝트 관리가 좀 더 편해졌습니다.

글꼴 및 이미지와 같은 리소스는 공통으로 관리할 수 있으며 플렛폼에 의존적인 자연은 플렛폼 별로 별도로 구성할 수도 있습니다.

타겟 플랫폼에 따라 Platforms의 각 디렉토리는 컴파일되거나 컴파일 되지 않습니다. 또한 사용자 설정에 따라 플랫폼별 항목을 추가할 수 있습니다.

<ItemGroup Condition="$(TargetFramework.StartsWith('net6.0-android')) != true">
  <Compile Remove="**\**\*.Android.cs" />
  <None Include="**\**\*.Android.cs" Exclude="$(DefaultItemExcludes);$(DefaultExcludesInProjectFolder)" />
</ItemGroup>

<ItemGroup Condition="$(TargetFramework.StartsWith('net6.0-ios')) != true AND $(TargetFramework.StartsWith('net6.0-maccatalyst')) != true">
  <Compile Remove="**\**\*.iOS.cs" />
  <None Include="**\**\*.iOS.cs" Exclude="$(DefaultItemExcludes);$(DefaultExcludesInProjectFolder)" />
</ItemGroup>

<ItemGroup Condition="$(TargetFramework.Contains('-windows')) != true ">
  <Compile Remove="**\*.Windows.cs" />
  <None Include="**\*.Windows.cs" Exclude="$(DefaultItemExcludes);$(DefaultExcludesInProjectFolder)" />
</ItemGroup>

일단 이부분은 아직은 깊게 들어가진 않고 하나의 프로젝트로 다중 플렛폼에 대한 구성이 가능해졌다 정도로 넘어갑니다.

3개의 좋아요

마이크로소프트에서 제공하는 MAUI 문서의 품질은 과거에 비해서 상당히 높은 편입니다. 이 문서만으로도 어느정도의 학습이 가능할 것 같네요.

XAML에 관련된 내용은 WPF나 UWP를 해본 개발자라면 넘어가도 됩니다.

2개의 좋아요

시멘틱

시멘틱 정보는 일종의 메타정보이며 사람이 식별하거나 기기에서 식별할 수 있는 정보를 제공합니다.

앱 수명 주기

image

앱 수명주기를 MAUI 관점에서 또는 플렛폼별로 관여할 수 있습니다.

앱 시작

MauiProgram.cs을 통해 시작 시 여러가지 설정을 할 수 있습니다. 글꼴이나 폰트를 등록할 수 있고 핸들러나 서비스를 등록할 수 있습니다.

렌더러 역시 핸들러를 통해 처리될 수 있는데 다음의 코드처럼 각 플렛폼별로 렌더러를 등록할 수 있습니다.

...
                #if ANDROID
                .ConfigureMauiHandlers(handlers =>
                {
                    handlers.AddCompatibilityRenderer(typeof(Microsoft.Maui.Controls.BoxView),
                        typeof(Microsoft.Maui.Controls.Compatibility.Platform.Android.BoxRenderer));
                    handlers.AddCompatibilityRenderer(typeof(Microsoft.Maui.Controls.Frame),
                        typeof(Microsoft.Maui.Controls.Compatibility.Platform.Android.FastRenderers.FrameRenderer));
                });
                #elif IOS
                .ConfigureMauiHandlers(handlers =>
                {
                    handlers.AddCompatibilityRenderer(typeof(Microsoft.Maui.Controls.BoxView),
                        typeof(Microsoft.Maui.Controls.Compatibility.Platform.iOS.BoxRenderer));
                    handlers.AddCompatibilityRenderer(typeof(Microsoft.Maui.Controls.Frame),
                        typeof(Microsoft.Maui.Controls.Compatibility.Platform.iOS.FrameRenderer));
                });
                #endif  
...

Behavior

상속을 하지 않고도 사용자 인터페이스 컨트롤에 기능을 추가 할 수 있습니다. WPF 그것과 유사합니다.

...
public static class AttachedNumericValidationBehavior
{
    public static readonly BindableProperty AttachBehaviorProperty =
        BindableProperty.CreateAttached("AttachBehavior", typeof(bool), typeof(AttachedNumericValidationBehavior), false, propertyChanged: OnAttachBehaviorChanged);
...

데이터 바인딩

별도 정리

제스처

Drag&Drop, Pan, Pinch, Swipe, Tap의 다양한 제스처를 처리할 수 있습니다.

속성

바인딩 가능 속성(Bindable property)과, 첨부 속성(Attached property) 모두 WPF의 그것과 유사합니다.

메시지 게시 및 구독

발행-구독 패턴은 발행자와 구독자를 직접 참조하지 않고도 필요한 메시지를 보내고 받을 수 있는 패턴입니다. MAUI에서는 MessagingCenter를 이용해 이 패턴을 사용할 수 있습니다. 이를 이용해 컨트롤와 컨트롤간 메시지를 주고 받을 수 있습니다.

리소스 사전

ResourceDictionary를 이용해 리소스를 레파지토리로 관리할 수 있습니다. WPF의 그것과 유사합니다.

Shell

단일 프로젝트

다양한 프로젝트 설정으로 리소스에 대한 디렉토리 경로를 지정할 수 있습니다.

<ItemGroup>
    <!-- Images -->
    <MauiImage Include="Resources\Images\*" />

    <!-- Fonts -->
    <MauiFont Include="Resources\Fonts\*" />

    <!-- Assets -->
    <MauiAsset Include="Resources\Assets\*" />
</ItemGroup>

템플릿

WPF의 그것과 같이 ControlTemplate, DateTemplate을 사용합니다.

트리거

트리거를 통해 XAML에서 다양한 변화를 감지하여 다른 동작에 연결할 수 있습니다. 구성은 WPF의 트리거와 유사합니다.

오늘 기초부분을 전반적으로 살펴봤는데 WPF 개발자라면 빠르게 MAUI에 익숙해질 수 있도록 기존 기술을 거의 대부분 계승해서 사용했네요. 다음 시간에는 MAUI 컨트롤을 중점적으로 배워볼 생각입니다.

2개의 좋아요

Shell (1)

Shell은 특히 모바일 구성에 필수 구성 및 기능을 제공해서 앱 개발을 쉽게 하도록 합니다.

  • 앱의 시각적 계층 구조를 표현
  • 탐색 기능을 제공
  • 페이지에 URI 기반 접근 가능
  • 통합 검색 처리

image

Shell은 다음의 상속 구조를 가집니다.

Shell → Page → VisualElement → NavigableElement → Element → BindableObject

Shell은 일반적으로 AppMainPage가 됩니다.

| App.xaml.cs

	public App()
	{
		InitializeComponent();

		Application.Current.UserAppTheme = AppTheme.Light;

		MainPage = new AppShell();
	}
3개의 좋아요

구삼님이 MAUI Shell에 대해 정리한 글이 있습니다!

플렛폼 기능은 Microsoft.Maui.Essentials를 이용해 사용할 수 있습니다.

스플래쉬 화면은 프로젝트 설정으로 매우 쉽게 추가할 수 있습니다. @honeyhead 님이 소개해주셨습니다.

.NET MAUI로 진화해야 하는 이유에 대한 글입니다. 사실 다양한 (광고성) 이유가 있지만 사실은 다음처럼만 준비된다면 .NET 개발자로선 대환영입니다.

  • 작은 패키지 사이즈
  • 빠른 시작 시간
  • 빠른 동작 시간
  • 플랫폼의 기능 제약 없는 대부분의 기능 제공
  • 디버그를 정확하고 빠르게
  • 플랫폼에 맞는 이질감 없는 앱 작성
4개의 좋아요