앱 아이콘 구성하기
안녕하세요. 그린입니다 🍏
이번 포스팅에서는 앱 아이콘을 구성하는것에 대해 정리해보겠습니다 🙋🏻
왜 갑자기 뜬금없이 앱 아이콘 구성하는것을 정리해보려고 하냐면, Xcode 16, iOS 18부터 이제 홈에서 다크 스타일 및 커스텀한 틴트 색상을 지정하여 앱 아이콘의 컬러도 변경해줄 수 있게 되었어요.
그럼 그 다크 및 틴트 색상이 어떻게 자동으로 지원되는건지 Xcode에서 앱 아이콘 구성에서 무언가 추가해줘야 하는지 알아보다 이참에 한번 정리해보기로 했습니다 😃
그럼 시작합니다 👟
Configuring your app icon
해당 정리는 공식문서를 기반으로 순차적으로 정리했습니다!
앱이 이제 홈 화면에서 사용자화를 시켜 앱 아이콘들도 다양하게 나타낼 수 있게 되었습니다.
그렇기에, 앱 아이콘을 다양한 상황에 맞게 보여지도록 하려면 앱 아이콘에서도 변형이 필요해졌어요.
Xcode는 단일 고해상도 이미지를 사용해 이런 변형을 생성하는데 도움을 직접적으로 주기도하고 프로젝트의 에셋 카탈로그에 있는 앱 아이콘을 이용해 개발자가 직접 커스텀하게 변경할 수도 있습니다.
여기서, visionOS나 tvOS의 앱 아이콘은 프로젝트의 에셋 카탈로그에서 구성하는 여러개의 스택된 이미지 레이어로 구성됩니다.
그건 이제 차차 알아보기로 하죠!
그리고 iOS, iPadOS 앱 아이콘에 다크, 틴트 스타일 지원으로 많은것이 변경되었습니다.
앱 아이콘의 디자인 가이드는 아래 문서를 참고해보시면 좋을것 같아요!
App icons | Apple Developer Documentation
A unique, memorable icon communicates the purpose and personality of your app or game and can help people recognize your product at a glance in the App Store and on their devices.
developer.apple.com
오늘은 앱 아이콘 구성하는 Xcode에서만 집중해봅니다 😃
Create an app icon
프로젝트를 생성하면 기본적으로 에셋 카탈로그가 존재하죠.
거기에는 AppIcon이 존재합니다.
만약 지워졌거나 없다면 하단 추가 버튼을 통해 App Icon을 추가할 수 있어요.
이제 이 App Icon이 우리의 앱 아이콘으로 사용될거에요.
Specify app icon variations
Xcode 14부터는 앱 아이콘을 1024X1024 pt 사이즈 하나만 등록해도 앱 스토어에 심사가 가능하고 문제가 없어졌습니다.
원래는 여러 사이즈들에 맞는 아이콘들이 필요했는데 편리해졌죠.
물론 아직도 여러 사이즈들을 모두 넣어도 문제가 당연히 없긴하지만요.
사이즈를 선택하는것은 우측 인스펙터 영역에서 Single Size를 고르면 됩니다.
모든 사이즈 파일을 넣고 싶으면 All Size로 변경하면 되구요!
그런데 여기 새로운게 있죠?
Dark와 Tinted입니다.
Xcode 16부터 추가되었어요.
오늘 정리의 핵심이기도 하니 알아봅시다!
Add dark and tinted icon variants to iOS and iPadOS
이제 iOS와 iPadOS에서는 앱 아이콘에 대해서 세가지 스타일을 지원해줍니다.
라이트, 다크, 틴트모드입니다.
이전에는 이제 이렇게 분리되있지 않고, 하나의 앱 아이콘만 등록할 수 있어서 배경이 없는(투명한) 파일의 앱 아이콘을 사용할 수도 없었고 라이트하고 다크 모드에 따라서 앱 아이콘이 변경되지도 않았죠.
그런데 이제 가능하게 되었어요!
먼저 다크부터 살펴보면, 다크에는 이제 배경을 투명하게 가져가도 됩니다.
다크모드처럼 시스템에서 대응될거에요.
아참, 물론 다크와 틴트 파일을 넣지 않더라도 이상은 없으며 Any Appearance에 지정된 파일을 사용해 시스템에서 처리하게 됩니다.
(물론, 배경색상의 경우는 다르지만요, 다크 이미지에 배경색을 투명이 아닌 하얀색으로하면 다크 스타일을 해도 하얀색 배경으로 나옵니다.)
여기서 틴트 파일은 아직 추가하지 않았는데 천천히 알아봅시다.
이렇게 두개의 파일만 추가하고 한번 홈 스타일을 커스텀해볼까요?
먼저, 라이트모드에선 기본적으로 우리가 예상하는 흰 배경에 검정 애플 로고가 나타나겠죠?
이제 사용자화를 해봅시다.
홈 화면을 꾹 눌러 편집 모드로 들어가고, 좌측에 편집 버튼을 누르면 이제 사용자화가 생겼습니다.
사용자화를 클릭하면 하단에 이렇게 색상 모드와 앱 아이콘에 대한 크기를 커스텀할 수 있어요.
다크 모드로 해볼까요?
시스템의 다크 모드 설정에 맞춰 배경색이 투명이였는데 자연스럽게 다크 모드 적용이 되었어요.
(사실 이것도 다크 파일 추가 없이 Any Appearance를 가지고 시스템에서 자동으로 변환하기에 큰 차이는 없긴 합니다.)
이건 우리 디스플레이 다크 모드와 연관이 없습니다.
디스플레이 다크 모드를 사용하는것과 별개로 홈 화면 색상을 커스텀하는거라 보면 됩니다!
아 참고로, 앱 사이즈 작게는 앱 이름까지 나오는것이고 크게는 앱 이름이 나오지 않고 앱 아이콘이 커지는것입니다.
다음으로, 틴트로 사용자화 해볼께요.
자유롭게 색상을 선택할 수 있어요.
배경색은 자동으로 어둡게 처리되고 로고에 해당하는 부분의 색상이 틴트 처리됨을 볼 수 있습니다.
우리가 앞서 에셋 카탈로그에서 틴트에 뭘 넣어주지 않았잖아요?
그런데도, Xcode에서 알아서 Any Appearance의 파일을 가지고 시스템에서 자동으로 처리하는걸 볼 수 있어요!
즉, 중간 정리해보면 Xcode 16 이전과 이후의 앱 아이콘이 이렇게 다른점이 생겼다고 볼 수 있어요!
1️⃣ 기존에는 앱 아이콘의 여러 모드 없이 단일로만 등록이 가능하고, 배경색이 투명하면 안됨
2️⃣ 이후에는 앱 아이콘의 Any Appearance, Dark, Tinted 세가지 모드가 있으며 배경색이 투명한 이미지 파일 사용도 가능
3️⃣ Any Appearance 에셋 파일 추가는 필수이며, Dark, Tinted는 선택
4️⃣ Any Appearance의 파일을 가지고 시스템에서 적절히 다크와 틴트를 처리해줌
그렇기에 사실 같은 모양의 앱 아이콘을 사용하거나 다크 스타일의 경우 배경색을 꼭 달리 주는 앱 아이콘이 아니고선 Any Appearance 하나만 등록해도 동일한 효과를 내는것이죠.
그럼 왜 필요할까요...? 대체 Dark와 Tinted가?
공통적으로는 다른 앱 아이콘을 보여주고 싶은 경우에도 필요합니다.
예를들어 이제 우리가 Tinted에 다른 모양의 앱 아이콘 이미지를 추가했다고 볼께요!
그럼 이제 틴트 스타일로 사용자화를 시키면 아래와 같이 검정 애플 로고가 아닌 무지개 단층이 된 애플 로고가 나타납니다.
대신 신기한건 이전에 검정 애플 로고로 하였을때는 배경색은 어둡고 로고 색상이 틴트되었는데 지금은 배경색도 변경되었어요.
이건 시스템에서 배경과 이미지의 색을 보고 적절히 변경하고 관리하는거라 어떻게 할 순 없어보입니다.
다만, Tinted의 이미지 파일 배경을 투명하게 만들면 좀 더 자연스럽게 보일 수 있어요!
그렇기에 적절히 표현하고자하는 파일의 스타일을 보고 테스트해보면서 넣어보는것이 좋을것 같아요 😃
개인적으로는 Tinted와 Dark의 배경색은 투명하게 만드는것이 더 의도한것을 표현할 수 있을거라 봅니다 ☺️
Configure the layers of an image stack
visionOS나 tvOS 앱 아이콘은 3개의 레이어로 구성됩니다.
visionOS에선 최대 3개까지 레이어를 지원하고 tvOS는 5개까지 지원해요.
레이어 추가를 위해선 하단 추가 버튼을 통해 할 수 있습니다.
여기서 tvOS나 visionOS를 눌러 추가할 수 있죠!
visionOS로 만들면 3개의 레이어가 스택으로 같이 나타나고 여기에 아이콘을 추가할 수 있어요.
각 앞, 중간, 뒷면에 해당하는 아이콘을 넣으면 됩니다.
그럼 적절히 3D에서 돌려보면 레이어가 쌓인걸 볼 수 있습니다 😃
제가 지금은 iOS에 등록한 앱 아이콘 아무 파일을 등록한건데 tvOS 아이콘을 Xcode로 가져오려면 LSR 파일 형식으로 파일을 저장하고, visionOS 아이콘을 가져오려면 XLSR 파일 형식으로 저장해야 한다고 합니다.
Parallax Previewer 앱이나 Parallax Exporter 플러그인을 사용해 Xcode의 에셋 카탈로그로 가져올 수 있는 LSR, XLSR 파일을 만들어보고 미리 볼 수 있습니다.
Apple Design Resources
Design apps quickly by using Sketch and Photoshop templates, plug-ins, and preconfigured UI elements.
developer.apple.com
요기서 해당 툴을 다운받을 수 있습니다!
Specify an App Store icon
앱 스토어를 통해 앱 배포하는 경우엔 앱 스토어에서 사용할 적절한 앱 아이콘 이미지를 제공해야 합니다.
이건 에셋 카탈로그에서 하단 추가 버튼을 눌러 아이메시지 및 스티커팩, tvOS 등과 같이 원하는 플랫폼의 이미지를 자유롭게 선택할 수 있고 그에 맞는 이미지 사이즈 및 파일들을 넣어 구성하면 됩니다.
Change the default app icon set
모든 에셋 앱 아이콘들을 구성했으면 프로젝트 타겟에서 앱 아이콘을 선택해줄 수 있습니다.
해당 AppIcon에는 에셋 카탈로그에서 우리가 놀아주고 다뤄줬던 해당 에셋 이름으로 해야합니다.
물론, 변경해도 되구요!
여기서 App Icons Source를 체크하지 않는것이 디폴트인데 체크할 수 있습니다.
모든 앱 아이콘 에셋을 포함하게 되죠 그러면.
릴리즈 앱 번들에 디버그 아이콘들을 포함하지 않고 디버그나 릴리즈 빌드에서 다른 아이콘을 사용하려는 경우에는 해당 옵션을 체크하지 않는것이 맞습니다.
마무리
이렇게 앱 아이콘 구성에 대해 Xcode 16과 함께 알아봤습니다 😃
홈 사용자화가 되어서 많은것이 나왔는데 많은 사람들이 사용할지 궁금하긴 합니다ㅎ
레퍼런스
Configuring your app icon | Apple Developer Documentation
Add app icon variations to represent your app in places such as Settings, search results, and the App Store.
developer.apple.com