.NET MAUIBlazor 앱 빌드

이 자습서에서는 .NET MAUIBlazor 앱을 빌드 및 실행하는 방법을 보여 줍니다. 다음 방법을 알아봅니다.

  • .NET MAUIBlazor Visual Studio에서 앱 프로젝트 만들기
  • Windows에서 앱 실행
  • Android Emulator의 에뮬레이트된 모바일 디바이스에서 앱 실행

필수 구성 요소

이 자습서의 필수 구성 요소 및 소프트웨어 설치에 대한 자세한 내용은 설명서의 다음 리소스를 .NET MAUI 참조하세요.

.NET MAUIBlazor 앱 만들기

Visual Studio를 시작합니다. 시작 창에서 새 프로젝트 만들기를 선택합니다.

새 솔루션.

새 프로젝트 만들기 창에서 프로젝트 유형 드롭다운을 사용하여 MAUI 템플릿을 필터링합니다.

템플릿을 .NET MAUI로 필터링합니다.

.NET MAUIBlazor 앱 템플릿을 선택하고 다음 단추를 선택합니다.

템플릿을 선택합니다.

새 프로젝트 구성 대화 상자에서 다음을 수행합니다.

  • 프로젝트 이름을MauiBlazor설정합니다.
  • 프로젝트에 적합한 위치를 선택합니다.
  • 다음 단추를 선택합니다.

프로젝트를 구성합니다.

추가 정보 대화 상자에서 프레임워크 드롭다운 목록이 있는 프레임워크 버전을 선택합니다. 만들기 단추를 선택합니다.

프레임워크 버전을 선택하고 프로젝트를 만들기 위한 추가 정보 대화 상자입니다.

Visual Studio가 프로젝트를 만들고 프로젝트의 종속성을 복원할 때까지 기다립니다. 종속성 항목을 열어 솔루션 탐색기 진행률을 모니터링합니다.

복원하는 종속성:

종속성 복원

복원된 종속성:

복원된 종속성.

Windows에서 앱 실행

Visual Studio 도구 모음에서 Windows 머신 단추를 선택하여 프로젝트를 빌드하고 시작합니다.

Windows 컴퓨터 단추.

개발자 모드를 사용하도록 설정하지 않으면 개발자>설정>개발자 모드(Windows 10) 또는 개발자용 설정>Privacy& 보안>>(Windows 11)에서 사용하도록 설정하라는 메시지가 표시됩니다. 스위치를 기로 설정합니다.

Windows 데스크톱 앱으로 실행되는 앱:

Windows에서 실행 중인 앱.

Android Emulator에서 앱 실행

Windows 섹션에서 앱 실행 섹션의 지침을 따른 경우 도구 모음에서 디버깅 중지 단추를 선택하여 실행 중인 Windows 앱을 중지합니다.

디버깅 중지 단추.

Visual Studio 도구 모음에서 구성 시작 드롭다운 단추를 선택합니다. Android Emulators>Android Emulator를 선택합니다.

Android 에뮬레이터 단추에 대한 Android 에뮬레이터 드롭다운 선택

Android용 앱을 빌드하려면 Android SDK가 필요합니다. 오류 목록 패널에서 메시지를 두 번 클릭하여 필요한 Android SDK를 설치하라는 메시지가 나타납니다.

Android SDK를 설치하려면 메시지를 클릭하라는 메시지가 있는 Visual Studio 오류 목록.

Android SDK 라이선스 승인 창이 나타나면 표시되는 각 라이선스에 대한 수락 단추를 선택합니다. Android EmulatorSDK Patch Applier 라이선스에 대한 추가 창이 나타납니다. 수락 단추를 선택합니다.

Visual Studio가 Android SDK 및 Android Emulator 다운로드할 때까지 기다립니다. Visual Studio UI의 왼쪽 아래 모서리에 있는 백그라운드 작업 표시기를 선택하여 진행률을 추적할 수 있습니다.

Visual Studio 백그라운드 작업 표시기.

백그라운드 작업이 완료되면 표시기에 확인 표시가 표시됩니다.

Visual Studio 백그라운드 작업 표시기가 선택됨.

도구 모음에서 Android Emulator 단추를 선택합니다.

Android Emulator 단추.

기본 Android 디바이스 만들기 창에서 만들기 단추를 선택합니다.

기본 Android 디바이스 창을 만듭니다.

Visual Studio가 Android Emulator를 다운로드하고, 압축을 풀고, 만들 때까지 기다립니다. Android 휴대폰 에뮬레이터가 준비되면 시작 단추를 선택합니다.

참고

하드웨어 가속을 사용하도록 설정하여 Android Emulator의 성능을 향상시킵니다.

Android 디바이스 관리자 창을 닫습니다. 에뮬레이트된 휴대폰 창이 나타나고 Android OS가 로드되고 홈 화면이 나타날 때까지 기다립니다.

중요

디버거에서 앱을 로드하고 실행하려면 에뮬레이트된 휴대폰을 Android OS가 로드된 상태로 전원을 켜야 합니다. 에뮬레이트된 휴대폰이 실행되고 있지 않으면 Ctrl+P 바로 가기 키를 사용하거나 UI에서 전원 단추를 선택하여 휴대폰을 켭니다.

Android Emulator의 전원 단추입니다.

Visual Studio 도구 모음에서 프로젝트를 빌드하고 실행할 단추를 선택합니다 Pixel 5 - {VERSION} . 여기서 {VERSION} 자리 표시자는 Android 버전입니다. 다음 예제에서는 Android 버전이 API 30 (Android 11.0 - API 30)이며 설치된 Android SDK에 따라 이후 버전이 나타납니다.

Pixel 5 API 30 에뮬레이터 단추.

Visual Studio가 프로젝트를 빌드하고, 앱을 에뮬레이터에 배포합니다.

에뮬레이터를 시작하고, 에뮬레이트된 휴대폰 및 OS를 로드하고, 앱을 배포 및 실행하는 데 몇 분 정도 걸릴 수 있습니다. 시스템 속도 및 하드웨어 가속 사용 여부에 따라 몇 분 정도 걸릴 수 있습니다. UI 아래쪽에서 Visual Studio의 상태 표시줄을 검사하여 배포 진행률을 모니터링할 수 있습니다. 준비 표시기는 확인 표시를 수신하고 앱이 실행 중일 때 에뮬레이터의 배포 및 앱 로드 표시기가 사라집니다.

배포 중:

Visual Studio 바닥글 표시줄에 표시되는 첫 번째 배포 실행 표시기입니다.

앱 시작 중:

Visual Studio 바닥글 표시줄에 표시되는 두 번째 배포 실행 표시기입니다.

Android Emulator에서 실행되는 앱:

Android Emulator에서 실행되는 앱.

다음 단계

이 자습서에서는 다음 작업 방법을 알아보았습니다.

  • .NET MAUIBlazor Visual Studio에서 앱 프로젝트 만들기
  • Windows에서 앱 실행
  • Android Emulator의 에뮬레이트된 모바일 디바이스에서 앱 실행

이 자습서에서는 .NET MAUIBlazor 앱을 빌드 및 실행하는 방법을 보여 줍니다. 다음 방법을 알아봅니다.

  • .NET MAUIBlazor Mac용 Visual Studio 앱 프로젝트 만들기
  • Mac Catalyst를 사용하여 macOS에서 앱 실행
  • Android Emulator의 에뮬레이트된 모바일 디바이스에서 앱 실행

필수 구성 요소

중요

Mac용 Visual Studio 설치하기 전에 Apple Xcode를 설치합니다.

IDE가 역순으로 설치된 경우 다음 단계를 Mac용 Visual Studio Apple SDK를 설정합니다.

  1. Mac용 Visual Studio 메뉴 모음에서 Visual Studio>기본 설정을 선택합니다.
  2. SDK 위치>Apple에서 Apple SDK>위치 경로를 Xcode 앱의 물리적 위치로 설정합니다.
  3. Visual Studio 다시 시작 단추를 선택합니다.

이 자습서의 필수 구성 요소 및 macOS에 소프트웨어 설치에 대한 자세한 내용은 설명서의 다음 리소스를 .NET MAUI 참조하세요.

.NET MAUIBlazor 앱 만들기

Mac용 Visual Studio. 시작 창이 열려 있지 않으면 파일 메뉴에서 시작 창 표시를 선택합니다.

새로 만들기 단추를 선택하여 새 앱을 만듭니다.

Mac용 Visual Studio 시작합니다.

앱 프로젝트 템플릿을 .NET MAUIBlazor 선택하고 계속 단추를 선택합니다.

앱 프로젝트 템플릿이 선택된 새 프로젝트 대화 상자의 .NET MAUIBlazor 템플릿을 선택합니다.

대상 프레임워크 드롭다운을 사용하여 대상 프레임워크 를 선택하고 계속 단추를 선택합니다.

.NET 7.0 대상 프레임워크가 선택된 새 .NET MAUIBlazor 앱 대화 상자를 구성합니다.

프로젝트 이름 필드에서 프로젝트 이름을 지정하고 만들기 단추를 선택합니다. 이 데모의 프로젝트 이름은 입니다.MauiBlazor

Maui 프로젝트 이름으로 새 .NET MAUIBlazor 앱 대화 상자를 구성합니다Blazor.

Mac Catalyst를 사용하여 macOS에서 앱 실행

재생 단추(▶)를 선택하여 앱을 빌드하고 실행합니다.

재생 단추의 위치를 나타내는 MauiBlazor 창입니다.

재생 단추를 사용하여 앱을 빌드하고 시작하는 대신 디버그 메뉴에서 디버깅하지 않고 시작을 선택합니다.

Mac Catalyst를 사용하여 macOS에서 실행되는 앱:

.NET MAUIBlazor Apple Safari에서 실행되는 앱입니다.

Android Emulator에서 앱 실행

내 Mac 디버그>(MacCatalyst) 단추의 디바이스 부분을 선택합니다.

단추의 내 Mac(MacCatalyst) 부분을 보여 주는 디버그 디바이스 단추입니다.

드롭다운에서 Android Emulator 를 선택합니다.

디바이스 디버그 단추의 디바이스 부분을 선택한 후 표시되는 디바이스 목록이 UI에서 선택되어 Android Emulator를 디바이스 선택 영역으로 표시합니다.

재생 단추 선택(▶):

디버그 디바이스 단추 옆에 표시된 재생 단추입니다.

Android 디바이스가 없으므로 기본 Android 모바일 디바이스 가 로드된 새 디바이스 창이 나타납니다. 다음 예제에서는 기본 디바이스를 API 33을 사용하는 Google Pixel 5 모바일 디바이스로 보여줍니다. 권장되는 기본 디바이스 또는 다른 디바이스 선택과 관계없이 만들기 단추를 선택합니다.

기본 Android 모바일 디바이스가 로드된 새 디바이스 창

라이선스 승인 창이 나타나고 라이선스 조건에 동의하는 경우 수락 단추를 선택합니다.

Android 소프트웨어 개발 키트 사용에 대한 사용 약관을 설명하는 라이선스 승인 대화 상자.

Android 장치 관리자 대화 상자가 나타나고 새 Android 모바일 디바이스 다운로드, 압축 풀기 및 설치 진행률이 표시됩니다.

Google Pixel 5 모바일 디바이스에 대한 8% 다운로드 진행률을 보여 주는 Android 장치 관리자 대화 상자

Android 디바이스가 설치될 때까지 기다립니다.

재생(▶) 단추를 선택하여 에뮬레이트된 모바일 디바이스를 시작합니다.

Google Pixel 5 모바일 디바이스에 대한 Android 장치 관리자 대화 상자 재생 단추입니다.

에뮬레이트된 Android 모바일 디바이스가 나타납니다. 디바이스의 에뮬레이트된 OS가 로드될 때까지 기다립니다.

Android Emulator에서 실행되는 Google Pixel 5 모바일 디바이스.

Mac용 Visual Studio 디버그 디바이스 드롭다운을 사용하여 새 Android 모바일 디바이스를 선택합니다.

Google Pixel 5 모바일 디바이스 항목을 보여 주는 디버그 디바이스 드롭다운

이제 Android 디바이스가 디버그 디바이스 단추에 나타납니다. 재생(▶) 단추를 선택하여 모바일 디바이스에서 앱을 빌드하고 시작합니다.

Mac용 Visual Studio UI의 디버그 디바이스 단추 옆에 있는 재생 단추입니다.

Visual Studio 상태 표시줄은 앱이 에뮬레이트된 모바일 디바이스에 배포 중임을 나타냅니다.

상태 표시줄에서 디바이스 메시지에 배포

에뮬레이트된 Android 모바일 디바이스에서 실행되는 앱:

에뮬레이트된 Google Pixel 5 모바일 디바이스에서 실행되는 앱입니다.

다음 단계

이 자습서에서는 다음 작업 방법을 알아보았습니다.

  • .NET MAUIBlazor Mac용 Visual Studio 앱 프로젝트 만들기
  • Mac Catalyst를 사용하여 macOS에서 앱 실행
  • Android Emulator의 에뮬레이트된 모바일 디바이스에서 앱 실행

Blazor Hybrid 앱에 대한 자세한 정보: