Jump To VB.NET

다음 내용은 https://devblogs.microsoft.com/dotnet/introducing-dotnet-maui-one-codebase-many-platforms/의 글을 번역했습니다. 

번역이 엉망이라도 참고만 부탁드립니다. ^^;

.NET Multi-platform App UI 에 오신 것을 환영합니다. 이번 release 는 .NET platform 을 통합하기 위한 지난 몇년간의 여정상의 새로운 이정표입니다. 이제 여러분과 5백만이 넘는 개발자들은 .NET toolchain(SDK) 와 base class library(BCL) Android, iOS, macOS 와 Windows 를 대상으로 하는 first-class, cross-platform UI stack을 가지게 되었습니다. 여러분은 .NET 으로 무엇이든지 구축할 수 있습니다.

.NET 과 VisualStudio 를 사용하여 모든 device 에서 작동하는 native app 을 구축하기 위한 모든 update 를 둘러볼수 있는 Microsoft Build 2022 에 참여하십시오. >> 자세한 내용

이것은 .NET 개발자들을 기쁘게할 desktop 및 mobile app 경험을 생성하는 우리 여정의 시작일 뿐입니다. 다음 단계를 위해, ,NET Framework 과 예전의 project system 에서 .NET 6 및 SDK 스타일의 project 로 plugin, library 와 service 를 가져올 수 있는 광범위한 ,NET ecosystem 을 위한 기반은 이제 구축되었습니다.

library 를 .NET 6 용으로 바꾸는데 도움이 필요하다면 .NET library 제공 경험을 자세하게 설명한 Michael Rumpler (Mr.Gestures) 와 Luis Matos(Plugsin.ValidationRules) 의 최근 guest blog 를 확인하십시오.

.NET MAUI workload 는 18 개월의 현재 release 일정 하에 완전히 지원되며 .NET 과 동일한 월간 주기로 service 될 것입니다. 우리의 .NET MAUI 에 대한 지속적인 집중은  여러분의 피드백을 기반으로한 알려진 issue 들을 해결하고 issue들의 우선순위를 지정하는 과정을 통해서 품질을 유지합니다. 또한 .NET native toolkit 과 AndroidX, Facebook, Firebase, Google Play service 및 SkiaSharp 지원 library 를 직접 사용하여 Android, Android Wear, Carplay, iOS, macOS 및 tvOS 를 독점적으로 대상으로 하는 application 을 구축하기 위해 제공하는 workload 도 포함됩니다.

.NET MAUI 를 사용하면 여러분은 이전보다 더 많은 코드를 공유하면서 협상없는 User Experience (사용자 경험)을 얻을 수 있습니다. .NET MAUI 각 platform, 요즘 개발자 생산성 및 가장 빠른 mobile platform 에서 제공하는 최고의 app toolkit  을 통해 native UI 를 사용합니다.

Native UI,  협상불가.

.NET MAUI 의 주목표는 각 platform (Android, iOS, macOS, Windows, 삼성이 협업해준 Tizen) 의 특별히 design 된 최고의 app 경험을 제공하는 것이 가능하도록 하며 동시에 풍부한 styling 과 graphic 을 통해 일관된 brand 경험을 제공하는 것이 가능하도록 하는 것입니다. 기본적으로 각 platform 은 모방하는데 필요한 어떤 추가적인 widget 이나 styling 없이 way 를 보고 작동합니다. 예를 들어, Windows 의 .NET MAUI 는 Windows App SDK 와 함께 제공되는 최고의 native UI component 인 WinUI 3 에 의해서 지원됩니다.

C# 과 XAML 을 사용하여 40개가 넘는 control 이 포함된 풍부한 toolkit, layout, 및 page 로 된 여러분의 app 을 build 하세요. mobile control 의 Xamarin 어깨위에, .NET MAUI 는 multi-window desktop application, menu bars 및 새로운 animation 기능, borders, corners, shadows, graphic 등의 지원을 추가했습니다. 아, 그리고 아래에서 강조할 새로운 BlazorWebView 를 추가했습니다.

controls: pages, layouts, and views 에 대한 자세한 내용은 .NET MAUI documation 을 참고하십시오.

Accessibility First (접근 가능성 우선)

Native UI 를 사용하는 주 이점 중 한가지는 접근 가능성이 높은 application 을 예전보다 더 쉽게 sementic service 로 구축할 수 있게 하는 상속된 접근 가능성 지원입니다. 우리는 접근 가능성 개발을 위한 방법을 재설계하기 위해 고객과 긴밀히 작업했습니다. 이런 작업을 통해서 controlling 를 위한 .NET MAUI semantic services 를 설계했습니다 :

• 설명, 힌트 그리고 제목 수준 (heading level) 같은 속성
• Focus
• Screen reader
• 자동화 속성 (Automation properties)

접근 가능성을 위한 sementic serivce 에 대한 자세한 내용은 .NET MAUI documentation 을 참조하십시오.

UI 를 넘어 (Beyond UI)

.NET MAUI 는 가속도계 (accelerometer), app action, file system, notification 및 그 외 많은 기능같은 각 platform 의 service 와 기능에 access 할 수 있는 간단한 API 를 제공합니다. 그 예로 우리는 각 platform 의 app icon 에 menu option 을 추가하는 “app actions” 를 구성합니다.

AppActions.SetAsync(
    new AppAction("current_info", "Check Current Weather", icon: "current_info"),
    new AppAction("add_location", "Add a Location", icon: "add_location")
);

platform service 및 feature 에 접근하기 에 대한 자세한 내용은 .NET MAUI documentation 을 참조하십시오.

쉬운 사용자 정의

여러분이 .NET MAUI 기능을 확장하든 또는 새로운 platform 의 기능을 구축하든지간에 .NET MAUI 는 확장가능하게 설계되었기 때문에 벽에 부딪힐 일이 없습니다. 예를 들어 한 platform 에서 다르게 렌더링 (render) 되는 control 의 표준 예인 Entry control 을 봅시다. Android 에서는 text field 아래에 밑줄을 그려서 개발자는 종종 밑줄을 제거하고 싶어 합니다. .NET MAUI 를 사용하면 여러분의 project 전체에 있는 Entry 를 customizing 하는데 단 몇 줄의 코드면 됩니다:

#if ANDROID
Microsoft.Maui.Handlers.EntryHandler.Mapper.ModifyMapping("NoUnderline", (h, v) =>
{
    h.PlatformView.BackgroundTintList = ColorStateList.ValueOf(Colors.Transparent.ToPlatform());
});
#endif

여기 Cayas Software 사 의 새로운 Map platform control 을 생성하는 최근의 훌륭한 예가 있습니다. 그 블로그는 해당 control 의 handler 생성, 각 platform 을 위한 구현 및 .NET MAUI 에서 등록해서 control 을 사용하는 시연 내용을 게시했습니다.

.ConfigureMauiHandlers(handlers =>
{
    handlers.AddHandler(typeof(MapHandlerDemo.Maps.Map),typeof(MapHandler));
})

handler 로 control 을 customizing 하기에 대한 자세한 내용은 .NET MAUI documentation 을 참조하십시오.

최신 개발자 생산성

무엇이든지 만들 수 있는 기술이상으로 우리는 .NET 이 common language feature, pattern 과 사례, 도구(tooling) 을 사용하여 여러분의 생산성을 가속화하기를 원합니다.

.NET MAUI 는 .NET 6 에서 소개된 전역 using 문과 file 범위 namepace (파일의 어수선함을 줄이는데 좋습니다.) 를 포함한 새로운 C#10 의 기능들을 사용합니다. 그리고 .NET MAUI 는 “단일 프로젝트(single project)”에 촛점을 맞추어 multi-targeting 을 새로운 수준으로 만들었습니다.

새로운 .NET MAUI project 의 subfolder 로 platforms 를 두고 각 platform 에 해당하는 subfolder 가 자리잡고 있습니다. 여러분 project 의 Resources folder 가 있어 여러분 app 에서 사용하는 fonts, images, app icon, splash screen, raw asset 및 styling 을 한 곳에서 관리합니다. .NET MAUI 는 각 platform 의 고유한 요구사항에 맞게 최적화하는 작업을 합니다.

다중 project 와 단일 project
각 platform 에 맞는 개별 project 로 solution 을 구성하는 것은 여전히 지원됩니다. 그래서 여러분의 application 을 언제 단일 project 로 접근 할지 선택할 수 있습니다.

.NET MAUI 는 Microsoft.Extentions library 를 사용하는 ASP.NET 과 Blazor application 처럼 앱의 초기화(initialize)와 구성(configure)을 한 곳에서 처리하는 널리 알려진 Builder pattern 을 사용합니다. 이 곳에서 여러분은 .NET MAUI 와 함께 font, platform 의 특정 lifecycle event 활용, 종속성 구성, 특정 기능의 활성화, vender 의 control toolkit 등을 제공할 수 있습니다.

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureServices()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("Segoe-Ui-Bold.ttf", "SegoeUiBold");
                fonts.AddFont("Segoe-Ui-Regular.ttf", "SegoeUiRegular");
                fonts.AddFont("Segoe-Ui-Semibold.ttf", "SegoeUiSemibold");
                fonts.AddFont("Segoe-Ui-Semilight.ttf", "SegoeUiSemilight");
            });

        return builder.Build();
    }
}

public static class ServicesExtensions
{
    public static MauiAppBuilder ConfigureServices(this MauiAppBuilder builder)
    {
        builder.Services.AddMauiBlazorWebView();
        builder.Services.AddSingleton<SubscriptionsService>();
        builder.Services.AddSingleton<ShowsService>();
        builder.Services.AddSingleton<ListenLaterService>();
#if WINDOWS
        builder.Services.TryAddSingleton<SharedMauiLib.INativeAudioService, SharedMauiLib.Platforms.Windows.NativeAudioService>();
#elif ANDROID
        builder.Services.TryAddSingleton<SharedMauiLib.INativeAudioService, SharedMauiLib.Platforms.Android.NativeAudioService>();
#elif MACCATALYST
        builder.Services.TryAddSingleton<SharedMauiLib.INativeAudioService, SharedMauiLib.Platforms.MacCatalyst.NativeAudioService>();
        builder.Services.TryAddSingleton< Platforms.MacCatalyst.ConnectivityService>();
#elif IOS
        builder.Services.TryAddSingleton<SharedMauiLib.INativeAudioService, SharedMauiLib.Platforms.iOS.NativeAudioService>();
#endif

        builder.Services.TryAddTransient<WifiOptionsService>();
        builder.Services.TryAddSingleton<PlayerService>();

        builder.Services.AddScoped<ThemeInterop>();
        builder.Services.AddScoped<ClipboardInterop>();
        builder.Services.AddScoped<ListenTogetherHubClient>(_ =>
            new ListenTogetherHubClient(Config.ListenTogetherUrl));

        return builder;
    }
}

MauiProgram 과 단일 project 를 사용한 app 시작 에 대한 자세한 내용은 .NET MAUI documentation 을 참조하십시오.

Blazor 를 Desktop 과 Mobile 로 가져오기

.NET MAUI 는 native client app으로 시작하려는 web 개발자에게도 너무 좋습니다. .NET MAUI 는 Blazor 와 통합되었습니다.. 그래서 여러분은 native mobile 및 desktop app 에 기존의 Blazor web UI component 를 바로 재사용할 수 있습니다. .NET MAUI 와 Blazor 를 사용하면 cross-platform native client app 을 개발하는데 여러분의 web 개발 기술을 재사용할 수 있으며, moblie, desktop 및 web 모두에서 사용하는 single UI 를 build 할 수 있습니다.

.NET MAUI 는 여러분의 Blazor component 를 기기에서 native 로 실행(WebAssembly 필요없음)시키고 embedded 된 web view control 로 렌더링(render) 합니다. 여러분이 만든 Blazor component 는 .NET process 내에서 compile 되고 실행되기 때문에 web platform 에 제한되지 않고 notification, Bluetooth, geo-location 및 sensor, filesystem 등의 모든 native platform 기능을 활용할 수 있습니다. 여러분이 만든 Blazor web UI 와 함께 native UI control 을 추가할 수도 있습니다. 이것은 모두 새로운 종류의 hybrid app 입니다: Blazor Hybrid!

.NET MAUI 와 Blazor 의 시작은 쉽습니다: 포함된 .NET MAUI Blazor App project template 를 사용하기만 하면 됩니다.

이 template 은 모두 설정되어 있어서 여러분은 HTML, CSS 그리고 C#을 사용하여 .NET MAUI Blazor app 구축(build)을 시작할 수 있습니다. .NET MAUI 용 Blazor Hybrid 자습서는 여러분의 첫번째 .NET MAUI Blazor app 을 구축하고 실행하는 과정을 여러분께 알려줍니다.

아니면 Blzaor component 를 사용하여 시작하고 싶은 기존의 .NET MAUIapp 에 BlazorWebView control 을 추가하십시오.

<BlazorWebView HostPage="wwwroot/index.html">
    <BlazorWebView.RootComponents>
        <RootComponent Selector="#app" ComponentType="{x:Type my:Counter}" />
    </BlazorWebView.RootComponents>
</BlazorWebView>

WPF 와 Windows Forms 에서는 Blazor Hybrid 지원(support) 도 이제 사용할 수 있으므로 .NET MAUI 를 사용하여 기존의 desktop app 을 web 상에서나 cross platform에서 동작하도록 현대화를 시작할 수 있습니다.

WPF 및 Windows Forms 용 BlazorWebView control 은 NuGet 에서 사용할 수 있습니다. Blazor Hybrid tutorial 을 확인해서 시작하는 방법을 학습하십시오.

.NET MAUI, WPF, Windows Forms 의 Blazor Hybrid support 에 대한 더 자세한 내용은 Blazor Hybrid docs 를 확인하세요.

속도 최적화

.NET MAUI 는 성능을 위해 설계되었습니다. 여러분들은 여러분이 만든 application 이 가능한 한 빠르게 시작하는 것이 얼마나 중요한지 우리에게 이야기해주었습니다. 특히 Android 에서요. .NET MAUI 의 UI control 들은 전체 native platform conrtrol 에 대해서 thin, decoupled handler-mapper 패턴으로 구현되었습니다. 그래서 UI 렌더링의 layer 수를 줄이고 control customization 을 단순화합니다.

.NET MAUI 의 layout 은 좀 더 빠른 렌더링과 UI update 를 위해 측정을 최적화하고 loop 를 재배열하는 일관된 manager pattern 을 사용하도록 설계되었습니다. 우리는 StackLayout 에 추가적으로 HorizontalStackLayout 과 VerticalStackLayout 같은 특정 시나리오에 사용할 pre-optimized 된 layout 도 내 놓았습니다.

이번 여정의 맨 처음부터 우리는 .NET6 로 전환할 때 시작성능 개선과 함께 app 의 크기를 유지하거나 줄인다는 목표를 설정했습니다. GA 시점에, .NET MAUI 는 34.9%, Android 용 .NET 에서는 39.4% 향상을 달성했습니다. 이런 이점(gain)은 복잡한app 에서도 잘 확장됩니다: .NET Podcast sample application 은 1299ms 걸리고, GA 측정값은 814.2ms 이고 Preview 13 이후 37.3% 개선되었습니다.

이 설정들은 이런 최적화된 release build 를 제공하기 위해서 기본적으로 활성화 되어 있습니다.

이런 결과를 달성하기 위해 우리들이 해왔던 작업들에 대한 deep-dive 블로그 게시물을 계속 지켜봐 주십시오.

당장 시작하세요

Windows 에서 .NET MAUI 사용을 시작하려면 Visual Studio 2022 Preview 를 설치하거나 version 17.3 Preview 1.1 로 update 하십시오. installer 에서 “.NET Multi-platform App UI development” workload 를 선택합니다.

Mac 에서 .NET MAUI 를 사용하기 위해서는Visual Studio 2022 preview for Mac (17.3 Preview 1) 을 설치하십시오.

Visual Studio 2022 는 올해 후반에 GA .NET MAUI tooling support 를 지원할 것입니다. 현재 Windows 에서 여러분은 XAML, .NET Hot Reload 기능과 XAML, C#, Razor, CSS 들을 편집할 수 있는 강력한 editor 를 사용하여 여러분의 개발 작업(dev loop) 속도를 가속화 할 수 있습니다. XAML Live Preview 와 Visual Tree 를 사용하여 여러분은 debugging 하는 동안 UI 를 미리보고 정렬하고 검사할 수 있으며 편집할 수 있습니다. .NET MAUI 의 새로운 단일 project 경험은 multi-platform targeting 앱으로 구성할 수 있도록 시각적인 편집환경을 위해 project 속성 page 를 추가했습니다.

Mac 에서는 이제 single project 와 multi-project .NET MAUI solution 를 load 하여 아름답고 새로운 native Visual Studio 2022 for mac 환경에서 Debg 할 수 있습니다. 여러분의 .NET MAUI application 개발 생산성을 강화하기 위한 다른 기능들은 후속 미리보기에서 제공됩니다.

지금 library 를 .NET MAUI 로 update 하고 새 .NET MAUI project 를 만들어보기를 추천합니다. Xamarin project 를 .NET MAUI 로 변환(converting)하기 전에 이전(transition)하기 위한 적절한 때를 확인(identify)하기위해 종속성, .NET MAUI 용 Visual Studio 지원 상태 및 게시된 이미 알려진 issue 들을 검토하십시오. Xamarin 은 마지막 major release 로부터 2년동안이라는 최신 lifecycle 정책에 따라 계속 지원된다는 점을 기억하십시오.

Resources

• .NET MAUI – Workshop
• Building your first .NET MAUI app
• Documentation
• Known Issues
• Microsoft Learn Path
• Q&A Forums
• Release Notes
• Samples
• Support Policy – .NET MAUI
• Support Policy – Xamarin

여러분들의 feedback 이 필요합니다.

여러분의 의견을 사랑합니다. 어떤 issue 가 발생하면 dotnet/maui GitHub 의 Report 를 보내주세요.

요약

.NET MAUI 를 사용하면 여러분은 .NET 전체에서 실행되는 같은 생산성 pattern 을 사용하는 단일 언어(single codebase)로 Android, iOS, macOS, Tizen 및 Windows 용 native application 을 build 할 수 있습니다. .NET MAUI 의 thin and decoupled UI 및 layout Architencture 와 단일 project 기능의 조합은 여러 platform 의 고유한 요구사항을 juggling 하는 대신 여러분이 하나의 application 에 집중할 수 있게 해줍니다. 그리고 .NET6 는 Android 뿐만아니라 tartget 이 되는 많은 platform 의 성능개선을 제공합니다.

적은 platform code, 더 많은 공유 code, 일관된 표준과 pattern, 가볍고 성능이 뛰어난 architecture, mobile 과 desktop 의 native experience - 이 것은 시작에 불과합니다.

다음 달에 발표될 .NET MAUI 와 함께 library 및 더 광범위한 ecosystem 을 기대합니다. .NET 개발자를 위한 cross-platform application 개발의 새로운 시대를 정의할 것이며 여러분과 여러분의 조직이 더 많은 것을 성취할 수 있도록 할 것입니다.