MAUI 시작하기 - QRcode

MAUI(.NET Multi-platform App UI) 애플리케이션에서 QR 코드를 생성하고 스캔하는 기능을 구현할 수 있습니다. 이 가이드에서는 MAUI를 사용하여 QR 코드를 생성하고 카메라를 통해 QR 코드를 스캔하는 간단한 애플리케이션을 만드는 방법을 설명합니다.

## MAUI 애플리케이션 설정 및 QR 코드 기능 구현

### 개발 환경 설정

#### 필수 설치 프로그램

- **.NET SDK**: [.NET SDK 다운로드](https://dotnet.microsoft.com/download)
- **Visual Studio 2022**: MAUI 개발을 위한 기본 IDE (최신 버전 사용 권장)
- **QR 코드 라이브러리**: `QRCoder` 패키지

#### 프로젝트 생성

1. **Visual Studio 2022**를 엽니다.

2. **새 프로젝트 생성**을 클릭합니다.

3. **.NET MAUI App (MAUI)** 템플릿을 선택하고 프로젝트 이름을 `MauiQRCodeApp`으로 지정합니다.

4. **프로젝트 생성 위치**를 설정하고 **만들기** 버튼을 클릭합니다.

### QR 코드 생성

QR 코드를 생성하기 위해 `QRCoder`라는 라이브러리를 사용합니다. 이 라이브러리는 다양한 유형의 QR 코드를 생성할 수 있게 해줍니다.

#### NuGet 패키지 설치

1. **솔루션 탐색기**에서 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 **NuGet 패키지 관리**를 선택합니다.

2. **찾기** 탭에서 다음 패키지를 검색하여 설치합니다:

   - `QRCoder`

```bash
dotnet add package QRCoder
```

#### QR 코드 생성 기능 구현

`MainPage.xaml.cs` 파일에서 QR 코드를 생성하는 기능을 구현합니다.

```csharp
using Microsoft.Maui.Graphics.Platform;
using QRCoder;
using Microsoft.Maui.Graphics;
using Microsoft.Maui.Graphics.Win2D; // 사용할 플랫폼에 맞게 Graphics 라이브러리를 선택하세요
using System.IO;
using System;
using Systehttp://m.Threading.Tasks;

namespace MauiQRCodeApp
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private async void OnGenerateQRCodeClicked(object sender, EventArgs e)
        {
            var qrText = qrInputEntry.Text;

            if (!string.IsNullOrWhiteSpace(qrText))
            {
                var qrCodeImage = await GenerateQRCodeAsync(qrText);
                qrCodeImageView.Source = qrCodeImage;
            }
            else
            {
                await DisplayAlert("Error", "Please enter some text to generate QR Code.", "OK");
            }
        }

        private async Task<ImageSource> GenerateQRCodeAsync(string text)
        {
            return await Task.Run(() =>
            {
                using (var qrGenerator = new QRCodeGenerator())
                {
                    var qrCodeData = qrGenerator.CreateQrCode(text, QRCodeGenerator.ECCLevel.Q);
                    var qrCode = new QRCode(qrCodeData);

                    using (var bitmap = qrCode.GetGraphic(20))
                    {
                        var image = bitmap.ToPlatformImageSource();  // MAUI의 플랫폼 이미지로 변환
                        return image;
                    }
                }
            });
        }
    }
}
```

#### MainPage.xaml 수정

`MainPage.xaml` 파일을 열고 UI를 수정하여 QR 코드 생성을 위한 인터페이스를 추가합니다.

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

    <VerticalStackLayout Padding="10">
        <Label Text="QR Code Generator" FontSize="24" HorizontalOptions="Center" />

        <Entry x:Name="qrInputEntry" Placeholder="Enter text to generate QR Code" />

        <Button Text="Generate QR Code" Clicked="OnGenerateQRCodeClicked" />

        <Image x:Name="qrCodeImageView" WidthRequest="200" HeightRequest="200" HorizontalOptions="Center" VerticalOptions="Center" />
    </VerticalStackLayout>

</ContentPage>
```

### QR 코드 스캔

QR 코드를 스캔하기 위해 `ZXing.Net.Maui` 라이브러리를 사용합니다. 이 라이브러리는 카메라를 사용하여 QR 코드를 스캔할 수 있는 기능을 제공합니다.

#### NuGet 패키지 설치

`ZXing.Net.Maui` 패키지를 설치합니다.

```bash
dotnet add package ZXing.Net.Maui
```

#### Program.cs 수정

`Program.cs` 파일에서 ZXing을 초기화합니다.

```csharp
using ZXing.Net.Maui;

namespace MauiQRCodeApp
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .UseBarcodeReader() // ZXing을 초기화
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                });

            return builder.Build();
        }
    }
}
```

#### QR 코드 스캔 페이지 구현

QR 코드를 스캔할 수 있는 페이지를 추가합니다. `ScanPage.xaml` 및 `ScanPage.xaml.cs` 파일을 생성합니다.

**ScanPage.xaml**

```xml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:zxing="clr-namespace:ZXing.Net.Maui.Controls;assembly=ZXing.Net.Maui"
             x:Class="MauiQRCodeApp.ScanPage">

    <VerticalStackLayout>
        <Label Text="QR Code Scanner" FontSize="24" HorizontalOptions="Center" />

        <zxing:CameraBarcodeReaderView x:Name="cameraBarcodeReaderView" 
                                       BarcodeDetected="CameraBarcodeReaderView_BarcodeDetected" 
                                       IsDetecting="true" />

        <Label x:Name="resultLabel" Text="Scanned QR Code result will appear here." HorizontalOptions="Center" />
    </VerticalStackLayout>

</ContentPage>
```

**ScanPage.xaml.cs**

```csharp
using Microsoft.Maui.Controls;
using ZXing.Net.Maui;

namespace MauiQRCodeApp
{
    public partial class ScanPage : ContentPage
    {
        public ScanPage()
        {
            InitializeComponent();
        }

        private void CameraBarcodeReaderView_BarcodeDetected(object sender, BarcodeDetectionEventArgs e)
        {
            // 스캔된 바코드 결과를 UI 스레드에서 처리
            MainThread.BeginInvokeOnMainThread(() =>
            {
                resultLabel.Text = $"QR Code Detected: {e.Results[0].Value}";
            });
        }
    }
}
```

#### MainPage.xaml에 QR 스캐너 페이지로 이동하는 버튼 추가

`MainPage.xaml` 파일에서 QR 스캐너 페이지로 이동하는 버튼을 추가합니다.

```xml
<VerticalStackLayout Padding="10">
    <!-- 기존 UI 코드 -->

    <Button Text="Open QR Code Scanner" Clicked="OnOpenScannerClicked" />
</VerticalStackLayout>
```

`MainPage.xaml.cs` 파일에서 버튼 클릭 이벤트를 처리합니다.

```csharp
private async void OnOpenScannerClicked(object sender, EventArgs e)
{
    await Navigation.PushAsync(new ScanPage());
}
```

### 애플리케이션 실행 및 테스트

1. **애플리케이션 실행**

   Visual Studio에서 **디버그** 버튼을 클릭하여 애플리케이션을 실행합니다. Android 에뮬레이터 또는 Windows Machine을 선택할 수 있습니다.

2. **QR 코드 생성 테스트**

   - 텍스트를 입력한 후 **Generate QR Code** 버튼을 클릭하여 QR 코드를 생성합니다.
   - 생성된 QR 코드는 아래 이미지로 표시됩니다.

3. **QR 코드 스캔 테스트**

   - **Open QR Code Scanner** 버튼을 클릭하여 QR 스캐너 페이지로 이동합니다.
   - 카메라가 QR 코드를 스캔하면 결과가 화면에 표시됩니다.

## 요약

이 예제에서는 MAUI를 사용하여 QR 코드를 생성하고 스캔하는 애플리케이션을 만드는 방법을 설명했습니다. `QRCoder` 라이브러리를 사용하여 QR 코드를 생성하고, `ZXing.Net.Maui` 라이브러리를 사용하여 카메라를 통해 QR 코드를 스캔하는 기능을 구현했습니다.

### 추가 참고 자료

- [.NET MAUI 공식 문서](https://learn.microsoft.com/ko-kr/dotnet/maui/)
- [QRCoder GitHub 리포지토리](https://github.com/codebude/QRCoder)
- [ZXing.Net.Maui GitHub 리포지토리](https://github.com/Redth/ZXing.Net.Maui)

추가적인 도움이 필요하시면 언제든지 문의해 주세요!