.NET MAUI 앱 프로젝트에 앱 아이콘 추가

아티클
05/14/2024

모든 앱에는 로고 아이콘을 나타내는 로고 아이콘이 있으며, 해당 아이콘은 일반적으로 여러 위치에 표시됩니다. 예를 들어 iOS에서 앱 아이콘은 홈 화면과 시스템 전체(예: 설정, 알림 및 검색 결과) 및 App Store에 표시됩니다. Android에서는 앱 아이콘이 시작 관리자 아이콘으로 표시되고 시스템 전체(예: 작업 표시줄, 알림 및 Google Play 스토어)에 표시됩니다. Windows에서 앱 아이콘은 시작 메뉴, 작업 표시줄, 앱 타일 및 Microsoft Store의 앱 목록에 표시됩니다.

.NET 다중 플랫폼 앱 UI(.NET MAUI) 앱 프로젝트에서 앱 아이콘을 앱 프로젝트의 단일 위치에 지정할 수 있습니다. 빌드 시 이 아이콘은 대상 플랫폼 및 디바이스에 대한 올바른 해상도로 자동으로 크기를 조정하고 앱 패키지에 추가할 수 있습니다. 이렇게 하면 플랫폼별로 앱 아이콘을 수동으로 복제하고 이름을 지정할 필요가 없습니다. 기본적으로 비트맵(비벡터) 이미지 형식은 .NET MAUI에 의해 자동으로 크기가 조정되지 않습니다.

.NET MAUI 앱 아이콘은 SVG(확장 가능한 벡터 그래픽) 파일을 비롯한 표준 플랫폼 이미지 형식을 사용할 수 있습니다.

Important

.NET MAUI는 SVG 파일을 PNG(이식 가능한 네트워크 그래픽) 파일로 변환합니다. 따라서 .NET MAUI 앱 프로젝트에 SVG 파일을 추가할 때 확장명은 .png인 XAML 또는 C#에서 참조해야 합니다. SVG 파일에 대한 유일한 참조는 프로젝트 파일에 있어야 합니다.

아이콘 변경

.NET MAUI 프로젝트에서 빌드 작업이 있는 MauiIcon 이미지는 앱에 사용할 아이콘을 지정합니다. 프로젝트 파일에 항목으로 <MauiIcon> 표시됩니다. 앱에 대해 하나의 아이콘만 정의할 수 있습니다. 후속 <MauiIcon> 항목은 무시됩니다.

앱에서 정의한 아이콘은 파일을 특성으로 지정하여 단일 이미지로 Include 구성될 수 있습니다.

<ItemGroup>
    <MauiIcon Include="Resources\AppIcon\appicon.svg" />
</ItemGroup>

프로젝트 파일에 정의된 첫 번째 <MauiIcon> 항목만 .NET MAUI에서 처리됩니다. 다른 파일을 아이콘으로 사용하려면 먼저 프로젝트에서 기존 아이콘을 삭제한 다음 프로젝트의 Resources\AppIcon 폴더로 끌어 새 아이콘을 추가합니다. Visual Studio는 빌드 작업을 MauiIcon 자동으로 설정하며 프로젝트 파일에 해당 <MauiIcon> 항목을 만듭니다.

참고 항목

앱 프로젝트의 다른 폴더에 앱 아이콘을 추가할 수도 있습니다. 그러나 이 시나리오에서는 속성 창에서 빌드 작업을 수동으로 설정 MauiIcon 해야 합니다.

Android 리소스 명명 규칙을 준수하려면 앱 아이콘 파일 이름은 소문자여야 하고 문자 문자로 시작하고 끝나야 하며 영숫자 또는 밑줄만 포함해야 합니다. 자세한 내용은 developer.android.com 대한 앱 리소스 개요를 참조하세요.

아이콘 파일을 변경한 후 Visual Studio에서 프로젝트를 클린 할 수 있습니다. 프로젝트를 클린 솔루션 탐색기 창에서 프로젝트 파일을 마우스 오른쪽 단추로 클릭하고 정리를 선택합니다. 또한 테스트할 대상 플랫폼에서 앱을 제거해야 할 수도 있습니다.

주의

프로젝트를 클린 대상 플랫폼에서 앱을 제거하지 않으면 새 아이콘이 표시되지 않을 수 있습니다.

아이콘을 변경한 후 플랫폼별 구성 정보를 검토합니다.

작성 아이콘

또는 앱 아이콘은 배경을 나타내는 이미지와 포그라운드를 나타내는 이미지 1개 등 두 개의 이미지로 구성될 수 있습니다. 아이콘은 PNG 파일로 변환되므로 구성된 앱 아이콘은 먼저 배경 이미지(일반적으로 패턴 또는 단색 이미지) 및 포그라운드 이미지로 계층화됩니다. 이 경우 특성은 Include 아이콘 배경 이미지를 나타내고 특성은 Foreground 포그라운드 이미지를 나타냅니다.

<ItemGroup>
    <MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" />
</ItemGroup>

Important

항목에 대한 배경 이미지(Include 특성)를 <MauiIcon> 지정해야 합니다. 포그라운드 이미지(ForegroundFile 특성)는 선택 사항입니다.

기본 크기 설정

.NET MAUI는 여러 플랫폼 및 디바이스에서 아이콘을 사용하고 각 플랫폼 및 디바이스에 따라 아이콘 크기를 조정하려고 시도합니다. 앱 아이콘은 앱의 스토어 항목이나 앱이 디바이스에 설치된 후 앱을 나타내는 데 사용되는 아이콘과 같은 다양한 용도로도 사용됩니다.

아이콘의 기본 크기는 이미지의 기준 밀도를 나타내며 다른 모든 크기에서 파생되는 1.0 배율 인수입니다. PNG 파일과 같은 비트맵 기반 앱 아이콘의 기본 크기를 지정하지 않으면 이미지의 크기가 조정되지 않습니다. SVG 파일과 같은 벡터 기반 앱 아이콘의 기본 크기를 지정하지 않으면 이미지에 지정된 차원이 기본 크기로 사용됩니다. 벡터 이미지의 크기 조정을 중지하려면 특성을 false.로 설정합니다Resize.

다음 그림에서는 기본 크기가 이미지에 미치는 영향을 보여 줍니다.

How base size affects an app icon for .NET MAUI.

이전 그림에 표시된 프로세스는 다음 단계를 수행합니다.

A: 이미지가 .NET MAUI 아이콘으로 추가되고 크기가 210x260이고 기본 크기가 424x520으로 설정됩니다.
B: .NET MAUI는 424x520의 기본 크기와 일치하도록 이미지의 크기를 자동으로 조정합니다.
C: 다른 대상 플랫폼에 이미지의 크기가 다르기 때문에 .NET MAUI는 자동으로 이미지를 기본 크기에서 다른 크기로 조정합니다.

팁

SVG 이미지를 아이콘으로 사용합니다. SVG 이미지는 더 큰 크기로 확장할 수 있으며 여전히 선명하고 클린 보입니다. PNG 또는 JPG 이미지와 같은 비트맵 기반 이미지는 크기가 조정될 때 흐리게 표시됩니다.

기본 크기는 아이콘의 BaseSize="W,H" 너비와 H 아이콘의 높이인 특성 W 으로 지정됩니다. 다음 예제에서는 기본 크기를 설정합니다.

<ItemGroup>
    <MauiIcon Include="Resources\AppIcon\appicon.png" BaseSize="128,128" />
</ItemGroup>

다음 예제에서는 벡터 기반 이미지의 자동 크기 조정을 중지합니다.

<ItemGroup>
    <MauiIcon Include="Resources\AppIcon\appicon.svg" Resize="false" />
</ItemGroup>

배경 다시 칠하기

앱 아이콘을 작성하는 데 사용되는 배경 이미지가 투명도를 사용하는 경우 에 특성을 <MauiIcon>지정하여 Color 다시 칠할 수 있습니다. 다음 예제에서는 앱 아이콘의 배경색을 빨간색으로 설정합니다.

<ItemGroup>
    <MauiIcon Include="Resources\AppIcon\appicon.svg" Color="#FF0000" />
</ItemGroup>

색 값은 형식 #RRGGBB#AARRGGBB을 사용하여 16진수로 지정할 수 있습니다. 값 RR 은 빨간색 채널, 녹색 채널, GGBB 파란색 채널 및 AA 알파 채널을 나타냅니다. 16진수 값 대신 명명된 .NET MAUI 색(예: Red 또는 PaleVioletRed.)을 사용할 수 있습니다.

주의

앱 아이콘에 대한 배경색을 정의하지 않으면 배경이 iOS 및 Mac Catalyst에서 분리된 것으로 간주됩니다. 이렇게 하면 App Store 커넥트 확인 중에 오류가 발생하며 앱을 업로드할 수 없습니다.

전경 다시 칠하기

앱 아이콘이 배경(Include) 이미지와 포그라운드(ForegroundFile) 이미지로 구성된 경우 전경 이미지를 착색할 수 있습니다. 전경 이미지에 색조를 지정하려면 특성을 사용하여 색을 TintColor 지정합니다. 다음 예제에서는 전경 이미지를 노란색으로 착색합니다.

<ItemGroup>
    <MauiIcon Include="Resources\AppIcon\appicon.png" ForegroundFile="Resources\AppIcon\appiconfg.svg" TintColor="Yellow" />
</ItemGroup>

플랫폼당 다른 아이콘 사용

플랫폼별로 다른 아이콘 리소스 또는 설정을 사용하려면 항목에 Condition 특성을 <MauiIcon> 추가하고 특정 플랫폼을 쿼리합니다. 조건이 충족되면 항목이 <MauiIcon> 처리됩니다. .NET MAUI에서는 첫 번째 유효한 <MauiIcon> 항목만 사용되므로 모든 조건부 항목을 먼저 선언한 다음 조건 없이 기본 <MauiIcon> 항목을 선언해야 합니다. 다음 XML에서는 Windows용 특정 아이콘과 다른 모든 플랫폼에 대한 대체 아이콘을 선언하는 방법을 보여 줍니다.

<ItemGroup>
    <!-- App icon for Windows -->
    <MauiIcon Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'"
              Include="Resources\AppIcon\backicon.png" ForegroundFile="Resources\AppIcon\appiconfg.svg" TintColor="#40FF00FF" />

    <!-- App icon for all other platforms -->
    <MauiIcon Include="Resources\AppIcon\appicon.png" ForegroundFile="Resources\AppIcon\appiconfg.svg" TintColor="Yellow" />
</ItemGroup>

조건의 값을 다음 값 중 하나로 변경하여 대상 플랫폼을 설정할 수 있습니다.

'ios'
'maccatalyst'
'android'
'windows'

예를 들어 Android를 대상으로 하는 조건은 다음과 같습니다 Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'".

플랫폼별 구성

프로젝트 파일은 앱 아이콘이 구성되는 리소스를 선언하지만 해당 앱 아이콘에 대한 참조를 사용하여 개별 플랫폼 구성을 업데이트해야 합니다. 다음 정보는 이러한 플랫폼별 설정에 대해 설명합니다.

Android에서 사용하는 아이콘은 Platforms\Android\AndroidManifest.xml에 있는 Android 매니페스트에 지정됩니다. 노드에는 manifest/application 아이콘 android:icon 을 정의하는 두 가지 특성이 포함됩니다 android:roundIcon. 이러한 두 특성의 값은 각각 다음과 같은 형식 @mipmap/{name} 을 @mipmap/{name}_round따릅니다. 값 {name} 은 .NET MAUI 프로젝트 파일의 <MauiIcon> 항목, 특히 경로 또는 확장명 없이 특성에 의해 Include 정의된 파일 이름에서 파생됩니다.

리소스 Resources\AppIcon\healthapp.png 를 아이콘으로 정의하는 다음 예제를 살펴보겠습니다.

<ItemGroup>
    <MauiIcon Include="Resources\AppIcon\healthapp.png" ForegroundFile="Resources\AppIcon\appiconfg.svg" TintColor="Yellow" />
</ItemGroup>

경로 또는 확장이 없는 리소스인 변환된 이름은 .입니다 healthapp. 각각에 대한 android:icon 값과 android:roundIcon@mipmap/healthapp_round값입니다@mipmap/healthapp. Android 매니페스트를 아이콘과 일치 healthapp 하도록 업데이트해야 합니다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application android:allowBackup="true" android:icon="@mipmap/healthapp" android:roundIcon="@mipmap/healthapp_round" android:supportsRtl="true"></application>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
</manifest>

팁

아이콘에 대한 새 이미지 파일을 만드는 대신 .NET MAUI 템플릿 에서 제공하는 두 개의 이미지 파일인 배경의 경우 Resources\AppIcon\appicon.svg , 전경의 경우 Resources\AppIcon\appiconfg.svg 로 바꿉니다.

적응형 시작 관리자

.NET MAUI는 앱 아이콘에서 Android 8.0 이상에서 적응형 시작 관리자 아이콘을 만들 수 있습니다. 적응형 시작 관리자 아이콘은 원형 및 사각형을 비롯한 다양한 디바이스 모델에서 다양한 셰이프로 표시할 수 있습니다. 적응형 아이콘에 대한 자세한 내용은 Android 개발자 가이드: 적응형 아이콘을 참조 하세요.

적응형 시작 관리자 아이콘은 배경 계층과 전경 계층 및 선택적 크기 조정 값을 사용하여 구성된 아이콘입니다. 자세한 내용은 작성 아이콘 섹션을 참조 하세요. 구성된 아이콘이 정의되면 특성을 지정하여 ForegroundFile 적응형 시작 관리자 아이콘이 생성됩니다. 다음 XML은 적응형 시작 관리자 아이콘으로 사용되는 아이콘을 정의하는 방법을 보여 줍니다.

<ItemGroup>
    <MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" ForegroundScale="0.65" Color="#512BD4" />
</ItemGroup>

ForegroundScale 배경 계층을 통해 렌더링되는 전경 계층의 크기 조정을 변경하려면 필요에 따라 특성을 지정할 수 있습니다.

.NET MAUI 앱에서 정의한 앱 아이콘은 iOS 및 macOS 플랫폼 모두에 대한 자산 카탈로그 아이콘 집합을 생성하는 데 사용됩니다. 아이콘 집합의 이름은 iOS의 Platforms\iOS\Info.plist에 있는 Info.plist 파일에 정의됩니다. macOS의 경우 Info.plist 파일은 Platforms\MacCatalyst\Info.plist에 있습니다.

팁

Visual Studio에서 Info.plist 파일을 수동으로 편집하려면 솔루션 탐색기 창에서 파일을 마우스 오른쪽 단추로 클릭하고 [다음으로 열기]를 선택합니다. 다음으로 XML(텍스트) 편집기를 선택하고 확인을 선택합니다. 그렇지 않으면 파일을 두 번 클릭하여 plist 시각적 편집기에서 엽니다.

Info.plist 파일에는 해당 <string> 노드가 정의된 항목이 포함 <key>XSAppIconAssets</key> 됩니다. 이 <string> 노드의 값은 다음 형식 Assets.xcassets/{name}.appiconset 을 {name} 따릅니다. 값은 .NET MAUI 프로젝트 파일의 <MauiIcon> 항목, 특히 경로 또는 확장명 없이 특성에 의해 Include 정의된 파일 이름에서 파생됩니다.