XAML 사용의 이점
- 5분
XAML은 C# 코드 대신 UI 빌드에 사용할 수 있는 마크업 언어입니다. XAML을 사용하면 UI와 동작 코드를 분리하여 보다 쉽게 관리할 수 있습니다.
이 단원에서는 XAML을 사용하는 것과 C# 코드를 사용하여 UI 레이아웃을 정의하는 것을 비교합니다. 또한 XAML을 마크업 언어로 사용하여 UI를 정의하는 몇 가지 이점에 대해 알아봅니다.
표시 언어란?
표시 언어란 문서에 다양한 요소를 넣기 위해 사용되는 컴퓨터 언어입니다. 미리 정의된 태그를 사용하여 요소를 설명하는 방식입니다. 태그는 문서가 사용되는 도메인 컨텍스트에서 구체적인 의미를 갖습니다.
예를 들어 HTML(Hypertext Markup Language)을 사용하여 웹 브라우저에서 표시할 수 있는 웹 페이지를 만들 수 있습니다. 다음 예에서 사용한 모든 태그를 이해할 필요는 없습니다. 중요한 점은 이 코드가 "Hello World!"라는 텍스트를 콘텐츠로 갖는 문서를 설명한다는 것입니다.
<!DOCTYPE html>
<html>
<body>
<p>Hello <b>World</b>!</p>
</body>
</html>
여러분은 아마도 표시 언어를 사용한 경험이 있을 것입니다. HTML을 사용하여 웹 페이지를 만들었거나, Visual Studio project.csproj 파일에서 XML(Extensible Markup Language)을 수정해 보신 분들도 있을 것입니다. Microsoft 빌드 도구는 이 파일을 구문 분석하고 처리합니다.
마크업 언어를 포함하고 있는 파일은 다른 소프트웨어 도구를 통해 처리하고 해석하는 것이 일반적입니다. 표시 언어의 이러한 해석적 특징은 XAML의 목적과 정확하게 일치합니다. 하지만 마크업 언어를 해석하는 소프트웨어 도구는 앱 UI를 만드는 데 도움이 됩니다.
XAML이란?
XAML은 Microsoft에서 만든 선언적 표시 언어입니다. XAML은 애플리케이션에서 UI를 만드는 프로세스를 간소화하도록 설계되었습니다.
개발자가 만드는 XAML 문서에는 애플리케이션 UI 요소를 선언적으로 설명하는 요소가 포함됩니다. XAML로 작성되는 이러한 요소는 개체의 인스턴스화를 직접 나타낸다는 점을 염두에 두어야 합니다. XAML로 요소를 정의한 후에는 C# 코드를 사용하여 코드 숨김 파일의 요소에 액세스하고 동작을 정의할 수 있습니다.
.NET MAUI XAML과 Microsoft XAML 간의 차이점
XAML은 Microsoft 2009 XAML 사양을 기반으로 합니다. 그러나 해당 사양은 언어 구문만 정의합니다. XAML을 사용하는 WPF(Windows Presentation Foundation), UWP(유니버설 Windows 플랫폼) 및 WinUI 3와 마찬가지로, XAML로 선언하는 요소는 변하기 마련입니다.
XAML은 2006년에 WPF와 함께 처음 발표되었습니다. 한동안 Microsoft XAML을 사용해 보신 분들은 XAML 구문에 익숙할 것입니다.
XAML .NET MAUI 버전과, 다른 UI 도구에서 사용하는 XAML 간에는 몇 가지 주요 차이점이 있습니다. 구조와 개념은 유사하지만, 클래스와 속성의 이름이 일부 다릅니다.
.NET MAUI XAML을 사용하여 UI 만들기
XAML이 실제로 어떻게 작동하는지 확인하는 가장 좋은 방법은 기존 C#으로 코딩된 ContentPage 페이지 형식의 예를 보는 것입니다. 그런 다음, XAML을 사용하여 정의된 동일한 UI가 있는 다른 페이지와 비교해 볼 수 있습니다.
앱에 다음과 같이 코딩된 ContentPage가 있다고 가정해 보겠습니다.
namespace MauiCode;
public partial class MainPage : ContentPage
{
Button loginButton;
VerticalStackLayout layout;
public MainPage()
{
this.BackgroundColor = Color.FromArgb("512bdf");
layout = new VerticalStackLayout
{
Margin = new Thickness(15, 15, 15, 15),
Padding = new Thickness(30, 60, 30, 30),
Children =
{
new Label { Text = "Please log in", FontSize = 30, TextColor = Color.FromRgb(255, 255, 100) },
new Label { Text = "Username", TextColor = Color.FromRgb(255, 255, 255) },
new Entry (),
new Label { Text = "Password", TextColor = Color.FromRgb(255, 255, 255) },
new Entry { IsPassword = true }
}
};
loginButton = new Button { Text = "Login", BackgroundColor = Color.FromRgb(0, 148, 255) };
layout.Children.Add(loginButton);
Content = layout;
loginButton.Clicked += (sender, e) =>
{
Debug.WriteLine("Clicked !");
};
}
}
이 페이지에는 레이아웃 컨테이너 하나, 레이블 두 개, 항목 두 개 및 단추가 들어 있습니다. 또한 코드는 단추의 Clicked 이벤트를 처리합니다. 페이지의 요소에 설정된 몇 가지 디자인 속성도 있습니다. Android 디바이스에서 런타임의 페이지는 다음과 같습니다.
페이지의 디자인은 간단하지만, 동작과 디자인이 같은 파일에 섞여 있습니다.
XAML을 사용하여 정의된 동일한 페이지 레이아웃은 다음과 같습니다.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiXaml.Page1"
BackgroundColor="#512bdf">
<VerticalStackLayout Margin="15" Padding="30, 60, 30, 30">
<Label Text="Please log in" FontSize="30" TextColor="AntiqueWhite"/>
<Label Text="Username" TextColor="White" />
<Entry />
<Label Text="Password" TextColor="White" />
<Entry IsPassword="True" />
<Button Text="Log in" BackgroundColor="#0094FF" Clicked="LoginButton_Clicked" />
</VerticalStackLayout>
</ContentPage>
페이지를 초기화하고 코드 숨김 파일에서Clicked 컨트롤의 LoginButton 이벤트에 대한 이벤트 처리기를 구현하는 C# 코드는 다음과 같습니다.
namespace MauiXaml;
public partial class Page1 : ContentPage, IPage
{
public Page1()
{
InitializeComponent();
}
void LoginButton_Clicked(object sender, EventArgs e)
{
Debug.WriteLine("Clicked !");
}
}
참고 항목
페이지 생성자의 InitializeComponent 메서드는 페이지의 XAML 설명을 읽고 해당 페이지의 다양한 컨트롤을 로드하고 해당 속성을 설정합니다. XAML 태그를 사용하여 페이지를 정의하는 경우에만 이 메서드를 호출합니다. C# 코드를 사용하여 UI를 만드는 방법을 보여 주는 이전 예제에서는 InitializeComponent를 호출하지 않습니다.
이 구조는 디자인과 동작을 분리할 수 있습니다. UI의 전체 선언은 UI 동작과 분리된 단일 전용 원본 파일에 포함되어 있습니다. 또한 XAML 마크업은 애플리케이션의 모양과 느낌을 이해하려는 개발자에게 더 명확한 설명을 제공합니다.
XAML 사용의 이점
XAML을 사용하면 UI 디자인에서 동작 논리를 분리할 수 있습니다. 이러한 분리를 통해 각 부분을 독립적으로 빌드할 수 있으며 앱이 성장함에 따라 전체 앱을 더 쉽게 관리할 수 있습니다.
또한 이 방법을 사용하면 전문 UI 디자이너가 UI 논리를 업데이트하는 개발자와 별도로 XAML 편집 도구를 사용하여 UI의 모양과 느낌을 업데이트할 수 있습니다.