반응형
앱을 배포하려면 각 플랫폼(Android/iOS)에서 요구하는 다양한 해상도의 아이콘과 스플래시 이미지를 준비해야 합니다. 수십 개의 리소스를 직접 만드는 건 너무 번거롭죠.
Capacitor는 @capacitor/assets 패키지를 통해 아이콘과 스플래시를 자동으로 생성할 수 있는 기능을 제공합니다. 이번 글에서는 Capacitor 앱에서 아이콘/스플래시를 한 방에 생성하고 앱에 반영하는 방법을 정리합니다.
✅ 1. @capacitor/assets 패키지 설치
먼저 프로젝트 루트에서 아래 명령으로 필요한 패키지를 설치하세요:
npm install @capacitor/assets
이 패키지가 있어야 아이콘/스플래시를 생성할 수 있는 capacitor-assets 명령을 사용할 수 있습니다.
✅ 2. 원본 이미지 준비하기
아래 경로에 아이콘과 스플래시 원본 이미지를 준비합니다:
- 아이콘:
- 1024×1024 픽셀의 정사각형 PNG 이미지 권장
- assets/icon.png
- 스플래시:
- 2732×2732 픽셀 PNG 이미지 권장
- 스플래시 중앙에 로고를 배치하고, 배경은 앱의 주요 컬러로 채우는 형태가 좋아요.
- assets/splash.png
※ 둘 중 하나만 있으면 필요한 리소스만 생성됩니다.
✅ 3. 아이콘/스플래시 생성하기
아래 명령으로 아이콘과 스플래시 리소스를 자동 생성합니다:
npx capacitor-assets generate
- 이 명령어는 assets/icon.png와 assets/splash.png를 기반으로 Android/iOS용 리소스를 생성해 각 플랫폼 디렉토리에 배치합니다.
- Android → android/app/src/main/res/mipmap-*
- iOS → ios/App/App/Assets.xcassets/AppIcon.appiconset 등
✅ 4. 변경사항 플랫폼에 반영하기
생성된 리소스가 앱에 적용되도록 아래 명령을 실행하세요:
npx cap sync
✅ 5. 앱 빌드 & 테스트
이제 변경된 아이콘과 스플래시가 잘 적용되었는지 확인하려면 각 플랫폼을 열고 빌드합니다:
Android
npx cap open android
iOS
npx cap open ios
각 IDE(Android Studio, Xcode)에서 앱을 실행해 홈 아이콘과 실행 화면(스플래시)이 새 이미지로 변경되었는지 확인합니다.
🎨 팁
- 앱 스토어 심사 과정에서 아이콘/스플래시 품질은 앱의 완성도를 평가하는 중요한 기준이 됩니다. 꼭 고해상도 원본을 사용하세요.
- 아이콘은 투명 배경보다는 색상으로 꽉 채운 디자인이 깔끔합니다.
이제 귀찮게 해상도별 이미지를 손수 만드는 대신, capacitor-assets를 활용해 몇 초 만에 멋진 아이콘과 스플래시를 준비해보세요!
반응형