본문 바로가기
Unreal Engine

Unreal Engine 5 Adaptive Icon(적응형 아이콘) 적용 방법

하드 코딩 2024. 5. 30. 13:02

안드로이드 앱을 개발할때 일부 디바이스에서 아이콘이 이상하게 나오는 경우가 있습니다. 대표적으로 구글 픽셀폰은 앱 아이콘이 꽉 차서 나오지 않습니다.

적응형 아이콘을 적용하지 않은 예
적응형 아이콘을 적용한 예

 

Android 8.0 Oreo (API26)이상 디바이스에서는 적응형 아이콘을 적용해야 앱 아이콘이 제대로 나옵니다. 안드로이드 스튜디오를 사용하는 경우라면 AndroidManifest.xml을 바로 변경하여 적용하면 되지만 언리얼 에디터에서 적응형 아이콘을 세팅하는 메뉴가 없습니다. 예전 스타일의 아이콘만 적용이 가능하죠. 그래서 AndroidManifest.xml를 수정해야 하는데, 프로젝트 세팅의 안드로이드 항목을 이용하는 것도 쉽지 않습니다. 각설하고 언리얼 5에서 제가 사용한 방법을 소개할까 합니다.

먼저 적응형 아이콘 정보를 담은 xml파일을 별도로 만듭니다. 이름을 ic_launcher.xml로 지정하겠습니다. 파일 내용은 다음과 같습니다.

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
	<foreground android:drawable="@drawable/icon" /> <!--아이콘 전경 이미지-->
	<background android:drawable="@drawable/icon_bg" /> <!-- 아이콘 배경 이미지-->
</adaptive-icon>

icon과 icon_bg는 각각 아이콘의 전경과 배경을 담을 이미지 파일 이름입니다. 아이콘 이미지 이름은 적절히 지정하기 바랍니다.

안드로이드 빌드 폴더

ic_launcher.xml을 생성하였다면 안드로이드 빌드 디렉토리의 res폴더 아래에 drawable-anydpi-v26라는 폴더를 새로 만들어 그 안에 xml파일을 복사합니다.

이제 아이콘을 만들 차례 입니다. 아이콘은 아래 링크의 디자인 가이드를 보면서 만들면 되는데 주의할점은 전경 이미지의 크기가 66dp를 넘으면 안됩니다. 그 영역보다 큰 이미지는 아이콘 적용시 일부가 잘려 나갈 수 있습니다. 이미지 자체의 크기가 아니라 실제 아이콘 모양의 크기를 센터에 맞추어 주고 그 이외의 영역은 배경색으로 칠하면 됩니다.

 

이제 아이콘을 제작 하였으면 res/drawable 폴더에 넣습니다. 주의할 점은 drawable이란 폴더의 이름은 앞의

ic_launcher.xml 파일에서 지정한 "@drawable/icon"와 같은 경로이어야 합니다. 각별히 주의하기 바랍니다.

이제 AndroidManifest.xml의 application항목에 android:icon="@drawable/ic_launcher"를 추가해야 합니다. 마찬가지로 여기에서 "@drawable/ic_launcher"의 경로는 ic_launcher.xml의 파일이 있는 Android\res\drawable-anydpi-v26 폴더와 이름이 일치해야 합니다. drawable뒤의 "-anydpi-v26" 폴더이름은 내부에서 적응형 아이콘을 찾기 위한 내부 지정 경로 입니다. 만약 android:icon="@mipmap/ic_launcher"같이 되어 있다면 실제 파일의 경로도 Android\res\mipmap-anydpi-v26\ ic_launcher.xml이 되어야 합니다.

문제는 Extra Tags for <application> section에 항목을 직접 추가하는 경우, 기본값으로 들어있는 android:icon="@drawable/icon"항목과 충돌이 나서 패키지 빌드에서 에러가 발생할겁니다

 

"AndroidManifest.xml is invalid System.Xml.XmlException: 'android:icon' is a duplicate attribute name"

패키지 빌드에러

 

그래서 기존의 icon항목을 제거하고 새로 추가하는 작업이 필요합니다. 이를 처리하는 별도의 xml을 만들고 프로젝트 빌드 스크립트에서 이를 변경 해야합니다.

먼저 임의의 xml파일을 하나 만듭니다. 저는 AddAdaptiveIcon_UPL.xml을 이라 지정하였습니다. UPL은 Unreal Plugin Language의 약자로 빌드시 별도의 스크립트를 실행할 수 있도록 해주는 언리얼의 기능으로 붙여 두었습니다. 해당 xml파일의 내용은 다음과 같습니다.

<?xml version="1.0" encoding="utf-8"?>
<root xmlns:android="http://schemas.android.com/apk/res/android">
	<!-- init section is always evaluated once per architecture -->
	<init>
	</init>

	<androidManifestUpdates>
		<!-- remove existing android:icon attribute -->
		<removeAttribute tag="application" name="android:icon"/>
		<!-- add desired android:icon attribute -->
		<addAttribute tag="application" name="android:icon" value="@drawable/ic_launcher"/>
	</androidManifestUpdates>
</root>

간단히 설명하면 removeAttribute항목으로 통해 기존의 "android:icon"을 제거하고 addAttribute항목을 통해 새로운 icon경로를 지정합니다. 주의할 점은 "@drawable/ic_launcher"의 경로가 ic_launcher.xml의 경로와 일치 해야합니다. 그리고 AddAdaptiveIcon_UPL.xml파일의 위치는 프로젝트의 소스파일 폴더에 넣어야 합니다. 정확히는 {Project 명}.Build.cs파일이 있는 위치에 같이 넣어야 합니다. 보통 {Project 명}\Source\{Project 명} 경로 아래에 있습니다.

그리고 해당 Build.cs파일을 수정합니다.

public class SuperTicTacToe : ModuleRules
{
    public SuperTicTacToe(ReadOnlyTargetRules Target) : base(Target)
    {
        PCHUsage = PCHUsageMode.UseExplicitOrSharedPCHs;

        PublicDependencyModuleNames.AddRange(new string[] { "Core", "CoreUObject", "Engine", "InputCore" });

        if (Target.Platform == UnrealTargetPlatform.Android)
        {
            // Add UPL to add configrules.txt to our APK
            string PluginPath = Utils.MakePathRelativeTo(ModuleDirectory, Target.RelativeEnginePath);
            AdditionalPropertiesForReceipt.Add("AndroidPlugin", System.IO.Path.Combine(PluginPath, "AddAdaptiveIcon_UPL.xml"));
        }
    }
}

 

Android항목으로 설정된 영역 안의 코드만 복사하여 붙이면 됩니다. 물론 AddAdaptiveIcon_UPL.xml파일의 이름은 일치해야 합니다. 이 부분이 패키지 빌드시 xml파일의 내용을 실행하는 곳입니다.

 

여기까지 완료하였으면 작업을 모두 끝마친 것입니다. 이제 빌드하시고 실제 폰에서 테스트 해보시기 바랍니다.

참고로 각 dpi폴더에는 여러 dpi에 맞는 icon을 작업해서 넣으시면 됩니다. 각 dpi에 맞는 아이콘 크기는 다음과 같습니다.

  • mdpi (medium density, 1x)
    • Foreground Icon: 48 x 48 px
    • Background Icon: 108 x 108 px
  • hdpi (high density, 1.5x)
    • Foreground Icon: 72 x 72 px
    • Background Icon: 162 x 162 px
  • xhdpi (extra-high density, 2x)
    • Foreground Icon: 96 x 96 px
    • Background Icon: 216 x 216 px
  • xxhdpi (extra-extra-high density, 3x)
    • Foreground Icon: 144 x 144 px
    • Background Icon: 324 x 324 px
  • xxxhdpi (extra-extra-extra-high density, 4x)
    • Foreground Icon: 192 x 192 px
    • Background Icon: 432 x 432 px

이 크기는 이미지의 크기가 아닌 아이콘 영역의 크기입니다. 착오 없기를 바랍니다.

 

참조 페이지

https://developer.android.com/develop/ui/views/launch/icon_design_adaptive

https://www.unrealengine.com/en-US/tech-blog/adding-adaptive-icons-to-a-ue4-project-for-android

 

 

티스토리툴바