선별한 프레임워크를 사용하여 앱을 개발한 후에나 개발 전에 앱의 아이콘이나 스플래시 스크린을 넣는 작업을 하게 됩니다. 여러 다양한 검색 결과와 저의 경험을 바탕으로 총정리를 해보았습니다. 이 포스팅은 리액트 네이티브 (React Native)를 기반으로 iOS와 Android용 나누어서 설명합니다.
아이콘 : ICON
아이콘 파일은 각 운영체제마다 원하는 사이즈나 파일명이 다릅니다. 폴더 구성도 각각 달라서 그 부분을 맞추어 주면 됩니다.
iOS
iOS 아이콘은 사이즈 별로 아이콘을 제작하여 xcode에서 파일을 넣어주는 방식이라 파일명은 중요하지 않습니다.
우선 iOS 아이콘 파일들은 아래의 링크에서 만들어 주세요. iOS나 macOS 용으로만 선택하여 만들면 됩니다.
아이콘이 만들어지고 나면 xcode에서 아이콘 배정을 해야합니다. 프로젝트의 루트에서 아래의 커맨드를 입력하여 xcode를 실행합니다.
XCode가 실행되고 오픈이된 후에는 [앱이름]/Images.xcassets로 들어가서 App Icon을 클릭하여 앱 아이콘의 각 사이즈에 넣어주면 됩니다.
Android
안드로이드용 아이콘은 파일명이 중요합니다. 파일명은 ic_launcher.png (사각형) 나 ic_launcher_round.png (원형)로 통일되어야 하고 각 화면 밀도의 폴더명 (아래에 자세하게 설명되어 있습니다)에 넣어주면 됩니다.
우선 Android용 아이콘은 아래의 링크에서 만듭니다. iOS 섹션에 있는 링크도 안드로이드 아이콘을 만들 수 있지만, 안드로이드에서는 사각형과 원형의 아이콘을 제작하여 정의할 수 있습니다. 아래의 링크에서 사각형과 원형을 각각 제작할 수 있습니다.
사각형(Square)과 원형 (Circle) 아이콘은 아래의 드롭다운 옵션을 사용합니다.
그리고 아래의 이름 입력란에 파일명을 입력합니다 (확장자는 제외):
원형 아이콘도 제작하려면 Shape과 파일명을 수정하여 다시 한번 다운 받습니다.
사각형 - ic_launcher
원형 - ic_launcher_round
다운을 받고 압축을 풀면 화면 밀도 폴더가 보이고 각 폴더내에 아이콘 파일이 있습니다.
이후에는 각 화면 밀도의 폴더에 해당하는 파일을 android/app/src/main/res에 위치한 동일한 화면 밀도 폴더에 넣어주면 됩니다
안드로이드 화면 밀도 (DPI) 정의:
mdpi - 중밀도 화면의 리소스 (~160dpi)
hdpi - 고밀도 화면의 리소스 (~240dpi)
xhdpi - 초고밀도 화면의 리소스 (~320dpi)
xxhdpi - 초초고밀도 화면의 리소스 (~480dpi)
xxxhdpi - 초초초고밀도 화면의 리소스 (~640dpi)
nodpi - 화면의 픽셀 밀도와 관계없이 조정할 수 없는 리소스
anydpi - 어떤 밀도로도 조정 가능한 리소스
스플래시 스크린 : SPLASH SCREEN
우선 스플래시 스크린의 이미지를 준비해야 합니다. 스플래시 스크린 이미지는 PNG가 적절합니다. 팁을 드리자면 로고나 아이콘만 있으면 스플래시 스크린에 아주 크게 나오므로 바탕까지 넣어서 적당한 사이즈로 만들어야 합니다.
우선 스플래시 스크린을 사용하게 하여 주는 리액트 네이티브 라이브러리 (react-native-splash-screen)를 설치해야 합니다.
react-native-splash-screen https://github.com/crazycodeboy/react-native-splash-screen
설치가 완료됐다면 ios에서는 cocoapod 실행이 필수입니다:
그리고 App.tsx에 다음의 코드를 넣어 줍니다:
App.tsx
이제는 각 운영체제마다 세팅을 해야 합니다.
iOS
아이콘과 마찬가지로 iOS는 XCode에서 세팅을 합니다. 기본적으로 ImageSet을 정의하고 LaunchScreen을 세팅한 후 AppDelegate.m을 수정하는 방식입니다.
진행 중인 프로젝트의 ios 폴더를 xcode로 오픈합니다.
ImageSet : iOS
[프로젝트명]/[프로젝트명]/Images 를 클릭한 후 왼쪽 하단의 + 버튼을 클릭해서 Image set을 만들게 됩니다.
준비된 스플래시 스크린 이미지 파일을 Image set에 넣습니다.
LaunchScreen : iOS
LaunchScreen으로 이동합니다. 이곳에서는 이미지의 위치를 조정할 수 있습니다. 이미지를 오른쪽 상단의 + 버튼을 클릭하여 가지고 온 후에 옵션을 체크합니다. 디바이스에 상관없이 중앙으로 정렬하려면 Align 에서 Horizontally in container와 Vertically in container를 체크하여 추가하면 됩니다.
AppDelegate.m : iOS
AppDelegate.m을 오픈하여 다음의 코드를 수정합니다
기존 코드
수정 후
Android
안드로이드는 기본적으로 ImageSet 만들기, 배경 컬러 지정, MainActivity 코드 파일 수정, launch_screen.xml 파일을 수정하여 스플래시 스크린 정의를 하게 됩니다.
ImageSet : Android
우선 준비된 스플래시 스크린을 아래의 링크를 이용하여 각 밀도별로 파일을 생성합니다
(주의점: 파일명을 launch_screen로 변경해야합니다. 파일명 변경은 아래의 이미지에 보이는 버튼을 클릭하여 수정합니다)
배경 컬러 변수 지정 : Android
[프로젝트명]/android/app/src/main/res/values에 colors.xml 파일을 생성하여 아래의 예제 코드를 넣습니다 (주의점: 아래 예제는 흰색이므로 다른색으로 변경하여야 합니다)
colors.xml
위의 코드는 나중에 사용할 두가지 색의 변수 (splashscreen_bg, statusbar_bg)가 지정되어 있습니다.
I. 스플래시 스크린 백그라운드 컬러
백그라운드 컬러가 설정이 안되어 있으면 준비한 스플래시 스크린의 색과 다를수 있어서 같은 색으로 지정하는 것이 좋습니다. 색상의 변수는 이 섹션에서 지정이되고 나중에 보시게 될 launch_screen.xml 파일에서 불러오는 방식입니다.
II. 스테이터스 바 (Status Bar) 컬러
안드로이드에서는 앱을 사용시에 상단의 스테이터스 바 (시계나 다른 아이콘이 보이는 부분)의 색을 다음의 방법으로 지정할 수 있습니다.
[프로젝트명]/android/app/src/main/res/values의 styles.xml에서 스테이터스 바 컬러 지정 (아래의 예제는 colors.xml에있는 statusbar_bg라는 컬러 변수를 불러오는 것이고, 변수를 사용하지 않고 hex 컬러 코드를 넣어도 무관합니다)
styles.xml
MainActivity : Android
안드로이드는 자바 (Java)버전과 코틀린 (Kotlin)버전이 있을 수 있습니다. MainActivity.java 나 MainActivity.kt (Kotlin) 둘 중 하나가 안드로이드 프로젝트 폴더내에 있습니다. Kotlin 버전의 syntax는 약간 달라서 주의가 필요합니다.
[프로젝트명]/android/app/src/main 경로로 이동해서 MainActivity.kt 나 MainActivity.java 파일에 아래와 같이 코드를 추가합니다.
MainActivity.java
MainActivity.kt
launch_screen.xml : Android
[프로젝트명]/android/app/src/main/res 폴더 안에 layout 폴더가 없다면 먼저 생성하고 launch_screen.xml 파일을 생성합니다. 그리고 그 파일에 아래의 코드를 추가합니다.
launch_screen.xml
여기에서 중요한 점은 다음의 두 부분입니다:
android:background="@color/splashscreen_bg" 코드는 스플래시 스크린의 배경색을 지정합니다. @color 는 [프로젝트명]/android/app/src/main/res/values 폴더내의 colors.xml 파일을 말하는 것이고 splashscreen_bg는 그 파일에 존재하는 변수명 입니다.
android:src="@drawable/launch_screen" 코드는 각 drawable-[밀도] 폴더에 존재하는 launch_screen 파일명을 스플래시 스크린으로 사용하라는 뜻입니다.
준비된 스플래시 스크린 이미지들을 [프로젝트명]/android/app/src/main/res 폴더 아래의 각 drawable-[밀도] 폴더에 생성된 이미지 파일을 넣습니다. 이렇게 세팅해 놓으면 시스템에서 앱이 실행되는 기기의 픽셀 밀도에 따라 자동으로 알맞은 크기가 선택 됩니다.
Comentários