728x90

MAUI(.NET Multi-platform App UI)는 C#과 .NET을 사용하여 Android, iOS, Windows, 그리고 macOS에 네이티브 애플리케이션을 개발할 수 있게 해주는 프레임워크입니다. 이 가이드는 Visual Studio Code를 사용하여 간단한 MAUI 애플리케이션을 만드는 방법을 설명합니다.

### MAUI 애플리케이션 설정 및 예제

Visual Studio Code에서 MAUI 애플리케이션을 개발하는 것은 가능하지만, 공식적인 지원은 Visual Studio(Windows)와 Visual Studio for Mac에서 제공됩니다. Visual Studio Code에서는 기본적으로 MAUI 프로젝트를 생성하고 빌드하는 데 필요한 모든 툴을 지원하지 않기 때문에 약간의 추가 설정이 필요합니다. 이 과정에서는 Windows 환경에서 MAUI를 설정하고 Android 에뮬레이터를 사용해 앱을 실행하는 방법을 설명합니다.

## 시스템 요구 사항

1. **운영 체제:**
   - Windows 10 버전 1909 이상.
   - macOS Catalina 이상 (VS Code에서 iOS 개발은 지원되지 않음).

2. **.NET SDK:**
   - 최신 버전의 .NET 6 SDK 또는 .NET 7 SDK가 필요합니다.

3. **Visual Studio:**
   - Visual Studio 2022 (17.3 이상), .NET MAUI 워크로드 설치.

4. **Android SDK:**
   - Android SDK 및 Android 에뮬레이터.

## Visual Studio Code에서 MAUI 개발을 위한 설정

### 1. .NET SDK 설치

먼저, .NET SDK가 설치되어 있는지 확인합니다. 명령 프롬프트나 터미널에서 다음 명령어를 입력하여 설치된 .NET 버전을 확인합니다.

```bash
dotnet --version
```

버전 번호가 출력되지 않으면, [Microsoft .NET SDK 공식 웹사이트](https://dotnet.microsoft.com/download)에서 최신 버전을 다운로드하고 설치합니다.

### 2. MAUI 워크로드 설치

MAUI 워크로드를 설치하려면 터미널에서 다음 명령어를 실행합니다:

```bash
dotnet workload install maui
```

이 명령어는 MAUI 애플리케이션을 빌드하고 실행하는 데 필요한 모든 구성 요소를 설치합니다.

### 3. Visual Studio Code 설치

Visual Studio Code를 설치하고, 다음과 같은 확장 프로그램을 추가합니다:

- **C# for Visual Studio Code**: C# 언어 지원.
- **XAML for Visual Studio Code**: XAML 편집을 위한 지원.

### 4. Android SDK 및 에뮬레이터 설정

1. **Android Studio**를 설치하여 Android SDK를 설정합니다. Android Studio의 SDK Manager를 통해 필요한 SDK 플랫폼 및 도구를 설치합니다.

2. Android 에뮬레이터를 설정하고, 이를 통해 MAUI 애플리케이션을 실행할 수 있습니다. Android Virtual Device (AVD) Manager를 사용하여 새 에뮬레이터를 생성합니다.

### 5. MAUI 프로젝트 생성

터미널에서 다음 명령어를 사용하여 새로운 MAUI 프로젝트를 생성합니다:

```bash
dotnet new maui -n MauiSampleApp
```

위 명령어는 `MauiSampleApp`이라는 이름의 새 프로젝트를 생성합니다. 프로젝트 폴더로 이동합니다:

```bash
cd MauiSampleApp
```

### 6. Visual Studio Code에서 프로젝트 열기

Visual Studio Code를 열고, **File > Open Folder**를 선택하여 `MauiSampleApp` 폴더를 엽니다.

## 간단한 MAUI 애플리케이션 예제

기본적으로 MAUI 프로젝트는 몇 개의 기본 파일로 구성됩니다. 이를 수정하여 간단한 "Hello, MAUI!" 애플리케이션을 만들어 보겠습니다.

### 프로젝트 파일 구조

MAUI 프로젝트의 기본 파일 구조는 다음과 같습니다:

- **Platforms**: 플랫폼별 코드 (Android, iOS, Windows 등)가 포함됩니다.
- **MauiSampleApp.csproj**: 프로젝트 파일.
- **App.xaml & App.xaml.cs**: 애플리케이션의 진입점 및 리소스를 정의합니다.
- **MainPage.xaml & MainPage.xaml.cs**: 기본 페이지 코드 및 UI 레이아웃을 정의합니다.

### MainPage.xaml 수정

`MainPage.xaml` 파일을 열고 다음과 같이 수정합니다:

```xml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiSampleApp.MainPage">

    <VerticalStackLayout>
        <Label 
            Text="Welcome to .NET MAUI!"
            SemanticProperties.HeadingLevel="Level1"
            FontSize="32"
            HorizontalOptions="Center" 
            VerticalOptions="CenterAndExpand" />

        <Button 
            x:Name="CounterBtn"
            Text="Click me"
            SemanticProperties.Hint="Counts the number of times you click"
            Clicked="OnCounterClicked"
            HorizontalOptions="Center" 
            VerticalOptions="CenterAndExpand" />
    </VerticalStackLayout>

</ContentPage>
```

### MainPage.xaml.cs 수정

`MainPage.xaml.cs` 파일을 열고 다음 코드를 수정합니다:

```csharp
using Microsoft.Maui.Controls;
using System;

namespace MauiSampleApp
{
    public partial class MainPage : ContentPage
    {
        int count = 0;

        public MainPage()
        {
            InitializeComponent();
        }

        private void OnCounterClicked(object sender, EventArgs e)
        {
            count++;

            if (count == 1)
                CounterBtn.Text = $"Clicked {count} time";
            else
                CounterBtn.Text = $"Clicked {count} times";

            SemanticScreenReader.Announce(CounterBtn.Text);
        }
    }
}
```

### 애플리케이션 실행

1. **Android 에뮬레이터**를 실행합니다.
2. 터미널에서 프로젝트 폴더 내에서 다음 명령어를 입력하여 애플리케이션을 실행합니다:

```bash
dotnet build
dotnet run -t:Run -f net6.0-android
```

이 명령어는 Android 에뮬레이터에서 애플리케이션을 실행합니다.

## 요약

이 예제에서는 Visual Studio Code에서 MAUI 애플리케이션을 설정하고, 간단한 "Hello, MAUI!" 버튼 클릭 카운터 애플리케이션을 만드는 방법을 살펴보았습니다. Visual Studio Code는 MAUI 개발을 공식적으로 지원하지 않지만, .NET CLI와 같은 도구를 사용하여 개발 환경을 설정하고 Android 에뮬레이터에서 애플리케이션을 테스트할 수 있습니다. Visual Studio에서는 보다 강력한 MAUI 개발 환경을 제공합니다.

### 추가 참고 자료

- [.NET MAUI 공식 문서](https://learn.microsoft.com/ko-kr/dotnet/maui/)
- [Visual Studio Code 공식 사이트](https://code.visualstudio.com/)
- [.NET SDK 설치 가이드](https://dotnet.microsoft.com/download)

더 궁금한 점이 있거나 추가적인 도움이 필요하시면 언제든지 문의해 주세요!

728x90
반응형

'Software > C#' 카테고리의 다른 글

MAUI 시작하기 - QRcode  (0) 2024.07.28
MAUI 시작하기 - MariaDB CRUD  (0) 2024.07.28
ASP.NET 시작하기 - 템플릿 엔진  (0) 2024.07.28
ASP.NET 시작하기 - Razor  (0) 2024.07.28
ASP.NET 시작하기 - 패키지 관리  (0) 2024.07.28

+ Recent posts