.NET MAUI 에서 QR 코드를 생성하는 방법

.NET MAUI란 무엇인가요?

.NET MAUI(Multi-platform App UI)는 Xamarin Forms 프레임워크의 진화형으로 단일 코드베이스를 사용하여 여러 플랫폼에 대해 네이티브 사용자 인터페이스를 구축할 수 있도록 합니다. With .NET MAUI, Android, iOS, macOS, Windows 등 앱을 만들 수 있으며, 개발 시간을 절약할 수 있습니다.

IronBarcode 소개

IronBarcode는 .NET 애플리케이션을 위한 강력한 바코드 및 QR 코드 생성 라이브러리입니다. 크기, 오류 수정, 인코딩 옵션 등 사용자 정의 가능한 설정을 통해 다양한 유형의 바코드, QR 코드를 생성하기 위한 사용하기 쉬운 API를 제공합니다.

.NET MAUI 프로젝트 설정

시작하려면, Microsoft Visual Studio 2022에서 새 .NET MAUI 프로젝트를 생성해야 합니다. Microsoft Visual Studio Code를 사용할 수도 있지만, 단계는 다릅니다. 그러나 Visual Studio를 사용하는 것이 권장됩니다. 다음 단계를 따라 프로젝트를 생성하십시오.

Visual Studio 2022를 엽니다. 다음 화면이 아래와 같이 나타납니다.

새로운 프로젝트를 생성하고 아래에 표시된 MAUI 템플릿을 검색합니다.

.NET MAUI 앱 템플릿을 선택하고 다음 버튼을 클릭합니다. 다음 창이 나타납니다.

프로젝트 이름을 지정하고 위치를 선택한 후 다음 버튼을 클릭하면 아래와 같이 창이 표시됩니다.

.NET Framework를 선택하세요. .NET 7을 선택했습니다. .NET 6.0도 선택할 수 있습니다. 프로젝트는 아래와 같이 생성됩니다.

이 튜토리얼은 주로 로컬 Windows 머신에 .NET MAUI 애플리케이션을 초기 배포하는 데 중점을 둡니다. 동일한 코드 기반으로 Android 또는 iOS 시뮬레이터에서 구성할 수 있습니다.

로컬 Windows 머신에 .NET MAUI 애플리케이션을 배포하려면, Visual Studio를 사용하여 다음 단계를 따르세요:

1. 디버그 대상이 'Windows Machine'으로 설정되어 있는지 확인하세요. 그렇지 않으면 도구 모음의 드롭다운에서 'Windows Machine'을 선택하세요.

2. '디버깅 시작' 버튼을 클릭하거나 F5를 눌러 Windows 머신에서 애플리케이션을 빌드하고 실행하세요.

   

Windows 머신에서 개발자 모드가 활성화되지 않은 경우, Visual Studio는 활성화하라는 메시지를 표시합니다. 이를 수행하려면 다음 단계를 따르세요:

1. Visual Studio에서 표시한 'Enable Developer Mode for Windows' 대화 상자에서 '개발자 설정'이라는 링크를 찾으세요.

   

2. '개발자 설정' 링크를 클릭하세요. 이렇게 하면 Windows 머신에서 설정 앱이 열립니다.

3. 아래와 같이 개발자 모드의 토글을 켭니다.

   

개발자 모드가 켜진 상태에서 프로젝트를 실행하세요. 다음 창이 다음과 같이 나타납니다:

이것은 프로젝트를 생성할 때 Visual Studio 2022에 의해 자동으로 생성된 템플릿 애플리케이션입니다. 이제 IronBarcode를 설치하고 필요에 따라 코드를 변경하겠습니다.

IronBarcode 설치하기

IronBarcode를 설치하려면 NuGet 패키지 관리자 콘솔을 엽니다. Visual Studio에서 패키지 관리자 콘솔을 열려면 다음 단계를 따르세요:

1. Windows 머신에서 Visual Studio를 시작하세요.
2. 작업하려는 프로젝트를 열거나 새 프로젝트를 만드세요.
3. Visual Studio 메뉴에서 '도구'로 이동합니다.
4. 드롭다운 메뉴에서 'NuGet 패키지 관리자'를 클릭하세요.
5. 다른 드롭다운 메뉴가 나타나며, '패키지 관리자 콘솔'을 선택해야 합니다.

패키지 관리자 콘솔 창이 열리면 프로젝트에서 NuGet 패키지를 관리하기 위한 커맨드라인 인터페이스가 제공됩니다. IronBarcode를 설치하기 위해 패키지 관리자 콘솔에 다음 명령을 입력하세요.

Install-Package BarCode

이렇게 하면 프로젝트에 IronBarcode 라이브러리가 추가되어 사용 가능해집니다.

IronBarcode를 사용한 .NET MAUI QR 코드 생성기

이제 우리 자체의 QR 코드 생성기 모바일 애플리케이션을 만들기 위한 코드를 작성해 봅시다. 생성된 QR 코드를 화면에 표시하려면 .NET MAUI의 기능을 활용할 것입니다. MainPage.xaml 파일을 열고 다음 코드로 바꾸세요.

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="QrCodeGeneratorMAUI.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Label
                Text="Hello!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

            <Label
                Text="Welcome to QR Code Generator .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to QR Code Generator dot Net Multi platform App U I"
                FontSize="18"
                HorizontalOptions="Center" />

            <Entry x:Name="qrCodeText"
                   Placeholder="Enter QR Code"/>

            <Image
                x:Name="qrCodeImage"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Button
                x:Name="CounterBtn"
                Text="Generate QR Code"
                Clicked="OnButtonClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="QrCodeGeneratorMAUI.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Label
                Text="Hello!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

            <Label
                Text="Welcome to QR Code Generator .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to QR Code Generator dot Net Multi platform App U I"
                FontSize="18"
                HorizontalOptions="Center" />

            <Entry x:Name="qrCodeText"
                   Placeholder="Enter QR Code"/>

            <Image
                x:Name="qrCodeImage"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Button
                x:Name="CounterBtn"
                Text="Generate QR Code"
                Clicked="OnButtonClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

위 XAML 코드는 QR 코드를 생성하는 .NET MAUI 페이지를 나타냅니다. .NET MAUI 구성 요소의 간단한 설명은 다음과 같습니다:

• <Label>: 화면에 텍스트를 표시합니다. 이 애플리케이션에서는 사용자에게 정보 및 지침을 제공하기 위해 환영 메시지와 헤딩을 표시하는 데 사용됩니다.
• <Entry>: 사용자에게 텍스트 입력 필드를 제공합니다. 이 애플리케이션에서는 사용자에게 QR 코드에 인코딩하려는 콘텐츠를 입력할 수 있도록 합니다.
• <Image>: 화면에 이미지를 표시합니다. 이 애플리케이션에서는 생성된 QR 코드 이미지를 사용자에게 보여주는 데 사용됩니다.
• <Button>: 클릭 가능한 버튼을 나타냅니다. 사용자가 클릭할 때 액션을 트리거할 수 있게 합니다. 이 애플리케이션에서는 버튼이 사용자가 <Entry> 필드에 입력한 내용을 기반으로 QR 코드 생성을 시작하는 데 사용됩니다.

이들 구성요소는 함께 사용자가 텍스트를 입력하고, 버튼을 클릭하고, 화면에 나타나는 QR 코드를 보기 위한 인터페이스를 생성합니다.

이제, QR 코드를 생성하기 위한 백엔드 코드를 작성해 보겠습니다. MainPage.xaml.cs 파일을 열고 다음과 같이 코드 비하인드 클래스를 업데이트하십시오:

using IronBarCode;

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

        private void OnButtonClicked(object sender, EventArgs e)
        {
            // Get the text from the entry field
            string text = qrCodeText.Text;

            // Generate the QR code using the IronBarcode library
            var qrCode = QRCodeWriter.CreateQrCode(text);

            // Convert the QR code to binary JPEG data
            var qrCodeBytes = qrCode.ToJpegBinaryData();

            // Set the QR code image source to display the generated QR code on the UI
            qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
        }
    }
}

using IronBarCode;

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

        private void OnButtonClicked(object sender, EventArgs e)
        {
            // Get the text from the entry field
            string text = qrCodeText.Text;

            // Generate the QR code using the IronBarcode library
            var qrCode = QRCodeWriter.CreateQrCode(text);

            // Convert the QR code to binary JPEG data
            var qrCodeBytes = qrCode.ToJpegBinaryData();

            // Set the QR code image source to display the generated QR code on the UI
            qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
        }
    }
}

여기 코드 설명이 있습니다.

1. OnButtonClicked 메서드는 버튼 클릭 이벤트의 이벤트 핸들러입니다. 버튼이 클릭되면 이 메서드가 실행됩니다.
2. OnButtonClicked 메서드 내부에서, qrCodeText 입력 필드에 포함된 텍스트가 text 변수에 할당됩니다.
3. QRCodeWriter.CreateQrCode(text)는 입력한 텍스트를 기반으로 QR 코드를 생성하는 데 사용됩니다.
4. qrCode.ToJpegBinaryData()는 QR 코드를 이진 JPEG 데이터로 변환합니다.
5. qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes))는 생성된 QR 코드 이미지를 표시하기 위해 qrCodeImage 컨트롤의 소스를 설정합니다.

private void OnButtonClicked(object sender, EventArgs e)
{
    // Get the text from the entry field
    string text = qrCodeText.Text;

    // Generate the QR code using the IronBarcode library
    var qrCode = QRCodeWriter.CreateQrCode(text);

    // Add the text of the QR code value below the generated barcode
    qrCode.AddBarcodeValueTextBelowBarcode();

    // Add an annotation text above the barcode
    qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");

    // Convert the QR code to binary JPEG data
    var qrCodeBytes = qrCode.ToJpegBinaryData();

    // Set the QR code image source to display the generated QR code on the UI
    qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}

private void OnButtonClicked(object sender, EventArgs e)
{
    // Get the text from the entry field
    string text = qrCodeText.Text;

    // Generate the QR code using the IronBarcode library
    var qrCode = QRCodeWriter.CreateQrCode(text);

    // Add the text of the QR code value below the generated barcode
    qrCode.AddBarcodeValueTextBelowBarcode();

    // Add an annotation text above the barcode
    qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");

    // Convert the QR code to binary JPEG data
    var qrCodeBytes = qrCode.ToJpegBinaryData();

    // Set the QR code image source to display the generated QR code on the UI
    qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}

.NET MAUI 바코드 생성기

IronBarcode 라이브러리를 사용하여 .NET MAUI 바코드 생성기를 만들 수도 있습니다. 코드를 약간 변경하기만 하면 됩니다. 다음 코드 샘플에 표시된 대로 수행 가능합니다.

private void OnButtonClicked(object sender, EventArgs e)
{
    // Get the text from the entry field
    string text = barCodeText.Text;

    // Generate the barcode using the IronBarcode library with Code128 encoding
    var barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128);

    // Add the text of the barcode value below the generated barcode
    barCode.AddBarcodeValueTextBelowBarcode();

    // Add an annotation text above the barcode
    barCode.AddAnnotationTextAboveBarcode("My Barcode Generated by .NET MAUI App");

    // Convert the barcode to binary JPEG data
    var qrCodeBytes = barCode.ToJpegBinaryData();

    // Set the barcode image source to display the generated barcode on the UI
    barCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}

private void OnButtonClicked(object sender, EventArgs e)
{
    // Get the text from the entry field
    string text = barCodeText.Text;

    // Generate the barcode using the IronBarcode library with Code128 encoding
    var barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128);

    // Add the text of the barcode value below the generated barcode
    barCode.AddBarcodeValueTextBelowBarcode();

    // Add an annotation text above the barcode
    barCode.AddAnnotationTextAboveBarcode("My Barcode Generated by .NET MAUI App");

    // Convert the barcode to binary JPEG data
    var qrCodeBytes = barCode.ToJpegBinaryData();

    // Set the barcode image source to display the generated barcode on the UI
    barCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}

결론

이 기사에서는 .NET MAUI와 IronBarcode 라이브러리를 사용하여 QR 코드 생성기와 바코드 생성기를 만드는 방법을 배웠습니다. IronBarcode를 설치하고 QR 코드를 생성하며 .NET MAUI의 이미지 컨트롤을 사용하여 화면에 표시하는 단계를 탐구했습니다.

.NET MAUI는 강력한 플랫폼 간 애플리케이션을 구축하기 위한 프레임워크를 제공하며 IronBarcode는 바코드 및 QR 코드 생성을 간편하게 만듭니다. 이러한 기술을 결합함으로써 현대 기기의 기능을 활용하는 다재다능하고 효율적인 애플리케이션을 만들 수 있습니다.