연습: 첫 번째 .NET MAUI 앱 만들기

  • 5분

이 연습에서는 식료품점 체인용 .NET MAUI 앱을 빌드하게 됩니다. 템플릿을 사용하여 기본 앱을 생성하고 Windows 및 Android 에뮬레이터에서 실행합니다. 이후 연습에서 이 앱을 수정하여 사용자 인터페이스를 사용자 지정하고 식료품점 체인 앱에 필요한 기능을 추가합니다.

새 프로젝트 만들기

  1. Visual Studio를 열고 새 솔루션을 만듭니다. 이 작업은 Visual Studio에서 새 프로젝트 마법사를 엽니다.

    팁

    Visual Studio 2022 v17.3 이상(.NET 8에서 기본 설정 v17.8)과 함께 .NET MAUI 워크로드가 설치되어 있는지 확인합니다. 자세한 내용은 여기를 참조하세요.

  2. MAUI 프로젝트 유형을 선택하고 .NET MAUI 앱 템플릿을 선택한 후 다음을 선택합니다.

    A screenshot of the Create a new project dialog box. The user has selected the .NET MAUI App template.

  3. 새 프로젝트 구성 페이지에서 프로젝트 이름을 Phoneword로 지정하고 원하는 위치에 저장합니다. 다음을 선택합니다.

    A screenshot of the Configure your new project dialog box. The user has named the project Phoneword and selected a location on their hard drive to store it.

  4. 프레임워크 드롭다운에서 .NET 8.0(장기 지원)을 선택한 다음 만들기를 선택하여 앱을 만듭니다.

솔루션 구조 검사

  1. 솔루션 탐색기 창에서 Phoneword 프로젝트를 확장합니다. Resources 폴더 및 해당 하위 폴더를 확장하고 App.xaml 노드, AppShell.xaml 노드 및 MainPage.xaml 노드를 확장합니다.

    A screenshot of the Phoneword project in the Visual Studio solution explorer window.

  2. 프로젝트에서 다음 항목을 기록해 둡니다.

    • Resources 폴더에는 모든 플랫폼에서 사용하는 공유 글꼴, 이미지 및 자산이 포함됩니다.

    • MauiProgram.cs 파일에는 앱을 구성하고 앱 클래스가 애플리케이션을 실행하는 데 사용되도록 지정하는 코드가 포함되어 있습니다.

    • App.xaml.cs 파일. App 클래스의 생성자는 AppShell 클래스의 새 인스턴스를 만듭니다. 새 인스턴스는 애플리케이션 창에 표시됩니다.

    • AppShell.xaml 파일에는 MainPage의 애플리케이션 및 시작 페이지에 대한 기본 레이아웃이 포함되어 있습니다.

    • MainPage.xaml 파일에는 페이지의 레이아웃이 포함되어 있습니다. 이 레이아웃에는 Click me라는 캡션이 있는 단추의 XAML 코드와 dotnet_bot.png 파일을 표시하는 이미지가 포함됩니다. 다른 두 레이블도 있습니다.

    • MainPage.xaml.cs 파일에는 페이지에 대한 애플리케이션 논리가 포함되어 있습니다. 특히, MainPage 클래스에는 사용자가 Click me 단추를 탭할 때 실행되는 OnCounterClicked라는 메서드가 포함되어 있습니다.

Windows에서 애플리케이션 빌드 및 실행

  1. Visual Studio 도구 모음에서 Windows 컴퓨터 프로필을 선택합니다. 프레임워크 드롭다운 목록 상자의 목록에서 .net6.0-windows 프레임워크를 선택합니다.

    A screenshot of the target runtime dropdown in Visual Studio. The user has set the Windows.Machine profile as the startup profile for the solution.

  2. 디버그 메뉴에서 디버깅 시작을 선택합니다. 이 작업은 Windows에서 앱을 빌드, 배포 및 실행합니다.

    A screenshot of the Visual Studio debug menu. The user has started debugging the app using the Windows Machine profile.

  3. 앱의 Windows 버전이 시작되는지 확인합니다. Click me 단추를 여러 번 선택합니다. 단추 텍스트는 탭할 때마다 증분되는 횟수에 따라 업데이트되어야 합니다.

    A screenshot of the Windows UI app running. The user has tapped the 'Click me' button four times.

  4. 보기 메뉴에서 솔루션 탐색기를 선택합니다. 솔루션 탐색기 창에서 MainPage.xaml 노드를 확장한 다음 MainPage.xaml.cs 코드 숨김 파일을 엽니다.

  5. OnCounterClicked 메서드에서 count 변수를 증가시키는 문을 이 변수에 5를 추가하도록 변경합니다.

    private void OnCounterClicked(object sender, EventArgs e)
{
    count+=5; // update this

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

    SemanticScreenReader.Announce(CounterBtn.Text);
}

  6. Visual Studio 도구 모음에서 핫 다시 로드 단추를 선택합니다.

    A screenshot of the Visual Studio toolbar. The Hot Reload button is highlighted.

  7. 앱으로 다시 전환하고 Click me 단추를 선택합니다. 이제 개수가 5씩 증가했는지 확인합니다.

    참고 항목

    Visual Studio의 핫 다시 로드 기능을 사용하면 앱이 디버그 모드에서 실행되는 동안 코드를 수정할 수 있습니다. 변경 내용을 보기 위해 앱을 중지할 필요가 없습니다. 코드를 수정할 뿐만 아니라 페이지에 대한 XAML 태그를 변경할 수도 있으며, 이러한 변경 내용은 실행 중인 앱에 표시됩니다.

  8. 앱을 닫고 Visual Studio로 돌아갑니다.

Android에서 애플리케이션 빌드 및 실행

  1. Visual Studio 도구 모음에서 Phoneword 프로젝트를 선택합니다.

  2. 도구 메뉴에서 Android를 선택한 다음 Android 디바이스 관리자를 선택합니다. Android 장치 관리자에서 컴퓨터를 변경하도록 허용할지 묻는 메시지가 표시되면 Yes를 선택합니다.

    A screenshot of the Visual Studio tools menu. The user has selected the Android Device Manager option.

  3. Android 디바이스 관리자 창에서 +새로 만들기를 선택합니다. 새 디바이스 창에서 Pixel 3a(+ Microsoft Store) 기본 디바이스를 선택하고 API 30 OS를 선택한 다음 만들기를 선택합니다. 다양한 라이브러리가 다운로드되고 디바이스가 구성되는 동안 기다립니다.

    A screenshot of the New Device window from the Android SDK. The user is creating a new Pixel 3 device with API 30 selected.

  4. 디바이스가 생성되면 Visual Studio로 돌아갑니다.

  5. Visual Studio 도구 모음의 디버그 구성 드롭다운 목록 상자에서 Android 에뮬레이터 프로필을 선택하고 pixel_3a-api_30 디바이스를 선택합니다. 이것이 방금 만든 디바이스입니다.

    A screenshot of the Visual Studio toolbar. The user has specified the Pixel 3 with the API 30 profile for the Android emulator to start debugging with.

  6. pixel_3a-api_30 프로필을 사용하여 디버깅을 시작합니다. 이 작업은 Android 디바이스에서 앱을 빌드, 배포 및 실행합니다.

    A screenshot of the Visual Studio toolbar. It shows the pixel 3 a p i 30 profile has been selected and ready to start debugging with as soon as the user presses the play button.

  7. 앱이 에뮬레이터에서 실행되기 시작하면(몇 분 정도 걸릴 수 있습니다) Me 클릭 단추를 선택하고 앱이 Windows에서와 똑같은 방식으로 실행되는지 확인합니다.

    A screenshot of the Android version of the Phoneword application running in the selected emulator.

  8. Visual Studio로 돌아가서 디버깅을 중지합니다.