iPhone 앱 아이콘

현재 홈 스크린을 보면서, 당신은 두 가지 중 하나를 생각하고 있을 것이다. 기본 아이콘은 배경화면과 위젯을 좋아하는 것과는 달리 엉성한 것처럼 보일 수도 있고, 앱을 개발하는 사람이라면 사용자에게 더 깨끗하고 의도적인 방법으로 개인화할 수 있는 방법을 제공하고 싶을 수도 있다.

두 가지 문제는 동일한 질문의 아래에 위치한다. iPhone 앱 아이콘을 변경하는 방법사용자에게는 Apple의 원생 홈 스크린 스타일링과 더 오래된 Shortcuts 방법을 선택하는 것이 의미합니다. 사용자에게는 전체 이미지 기반 제어를 위해 아이콘을 노출하는 것입니다. 개발자에게는 iOS 원생 API를 통해 대체 아이콘을 노출하는지, Ionic 또는 Capacitor에서 작업하는 경우 웹 기반 앱으로 연결하는 방법을 결정하는 것이 의미합니다.

내용

iPhone 앱 아이콘 개인화 안내
사용자 개인화
커스텀 아이콘의 이점과 단점
- 개발자 지원 아이콘과 다른 점
- 개발자 아이콘을 구현하는 방법
iOS 원생 API를 통해 대체 아이콘을 노출하는 방법
개발자용 A Capacitor와 Ionic을 위한 안내서입니다.
협업의 미래는 개인화입니다.

iPhone 앱 아이콘 개인화에 대한 안내서입니다.

iPhone 홈 스크린은 오래 전부터 단순한 앱 그리드만이 아니었습니다. 사용자는 홈 스크린을 데스크, داش보드, 심지어 감정 보드처럼 사용합니다. 그게 사용자 개인화의 의미를 바꾸는 것입니다. 그것은 단순히 것들이 다른 모양을 갖추는 것만이 아닙니다. 그것은 사용자가 의도적으로 장치에 아이콘을 배치하도록 만드는 것입니다.

이 변화는 제품의 두 가지 측면 모두에 영향을 미칩니다. 사용자는 테마에 맞는 아이콘, 위젯과 일치하는 아이콘, 또는 시각적 잡음이 줄어든 아이콘을 원합니다. 개발자는 그 것을 지원하면서 native 앱의 느낌을 깨뜨리지 않고 설정이 사용자가 기대하는 대로 동작하지 않는 문제를 발생시키지 않도록 하려합니다.

iPhone에서 이제는 아이콘 개인화의 두 가지 구분된 층이 있습니다. 하나는 사용자가 제어하는 홈 스크린 스타일링Apple이 직접 지원하는 장치에 대해 지원한다는 점에서 두 가지가 다르다. 다른 하나는 개발자가 아이콘 변형을 앱 내에 배송하고 사용자가 중간에 선택할 수 있도록 하는 앱 제어의 대체 아이콘두 기능은 관련이 있지만 동일한 기능이 아니다.

실용적인 규칙: 많은 아이콘의 외관을 동시에 변경하고 싶다면, Apple의 내장 홈 스크린 도구부터 시작하라. 단일 앱을 완전히 커스텀한 이미지로 대체하고 싶다면, 단축 경로 또는 개발자가 제공하는 대체 아이콘을 사용하라.

이 distinction은 사용자 경험에도 매핑된다. 정돈된 홈 스크린은 broader 앱 경험의 일부로, 그것과 분리된 것은 아니다. 유지율과 정돈에 관심이 있는 팀은 시각적 커스텀화를 전체 모바일 앱 사용자 경험으로 다루며, 메뉴 내에 묻혀 있는 특별한 설정으로 다루지 않는다.

사용자에게 맞춤화된 iPhone 앱 아이콘

가장 깨끗한 답은 사용자가 원하는 대로이다. 시스템 수준의 스타일링을 유지하면서 앱이 정상적으로 동작하도록 원한다면, Apple의 내장 제어를 사용하라. 단일 앱에 대한 특정 커스텀 이미지를 원한다면, Shortcuts를 사용하라.

Apple의 내장 iPhone 제어

Apple은 iOS 18에서 주요 네이티브 마일STONE을 추가했습니다. iOS 18에서 앱 아이콘의 모양을 직접 편집 > 사용자 정의, 아이콘을 큰 , 다크, ,, 자동, 또는 티네티드 styles, with translucent icon options in light, dark, or automatic modes, according to Apple의 홈 스크린 커스텀화 가이드에 따라.

The built-in process is straightforward:

홈 스크린 배경을 길게 누르면 아이콘들이 흔들립니다. Edit
홈 스크린을 편집합니다. Tap.
커스텀화 Choose the appearance you want, such as.
다크 자동 모드, Auto, Clearor Tinted.
__CAPGO_KEEP_0__ 아이콘의 크기를 원할 때 더 큰 아이콘을 나타내도록 조정하세요.
__CAPGO_KEEP_0__ 모드에서 레이아웃이 올바르게 보일 때 레이아웃 모드를 종료하세요.

이 방법은 가장 좋은 시작점입니다. 시스템 자체에서 지원하는 아이콘을 어떻게 표시할지 변경하는 것입니다. 실제로 가짜 런처를 만들지 않습니다.

몇 가지 실용적인 주의 사항이 있습니다.

전체 화면 시각적 일관성을 위해 가장 좋습니다. 여러 앱에 일관된 테마를 달성하는 것이 목표라면, 각 아이콘을 수동으로 다시 만드는 것보다 더 빠릅니다.
커스텀 아트워크에 한정적입니다. 아이콘을 스타일링할 수 있지만, 이 메뉴를 통해 Photos 라이브러리의 임의의 이미지에 앱을 가리킬 수는 없습니다.
일상 사용 앱에 더 안전합니다. 메일, 메시지 및 다른 배지가 많은 앱은 실제 앱 아이콘으로 남겨두면 더 자연스럽게 행동합니다.

벽지 및 위젯과 함께 아이콘 색상 조정을 pair할 때, 시각적 테마부터 시작하는 것이 도움이 됩니다. 밝은 사이버 펑크 또는 밤 모드 레이아웃을 위한 네온 아트 가이드 색상 방향을 결정하기 전에 아이콘 색상 조정을 시작하기 전에 유용한 참조입니다.

native 메서드를 보았을 때, 더 오래된 워크 아라운드가 여전히 중요합니다.

다른 문제를 해결하기 때문에.

iPhone 앱 아이콘을 Shortcuts 앱을 사용하여 커스터마이즈하고 개인화하는 6단계 시각적 가이드입니다.

Shortcuts 방법을 사용하여任何이미지를 native 스타일링이 이 단계에 도달하기 전에, iPhone 앱 아이콘을 완전히 커스터마이즈하는 표준 루트는 Shortcuts 앱이었습니다. 튜토리얼 가이드는 여전히 워크플로우를 설명합니다: 단축키를 만들고, "Open App"를 선택합니다.선택한 앱을 선택한 후 사용 홈 스크린에 추가 실제로 아이콘 교체는 5–8 단계 이 Shortcuts 튜토리얼에 따르면 이것이 실제로 작동하는 버전입니다:.

앱을 열어

Shortcuts를 탭합니다. 새로운 단축키를 만들기 위해.
버튼을 탭합니다. + 단축키에 아이콘을 추가합니다.
파일을 선택합니다. 앱을 열기 action.
앱을 실행하고 싶은 것을 선택하세요.
단축 메뉴 옵션을 열고 홈 스크린에 추가하기.
플레이스 홀더 아이콘을 탭하세요.
선택 사진을 선택하세요. 또는 파일을 선택하세요..
단축 메뉴 이름을 지어 홈 스크린에 추가하세요.

그것은 당신에게 시각적 자유를 제공합니다. Apple의 내장 스타일링이 제공하지 않는 것입니다. 당신은 단색 아이콘 패키지를 사용할 수 있습니다. 또는 디자인 도구에서 내보낸 PNG를 사용할 수 있습니다.

__CAPGO_KEEP_0__는 사람들로 하여금 여전히 이 접근 방식을 사용하는 이유는 통제입니다. Spotify가 손그림 글꼴처럼 보이기를 원하거나, 또는 모든 작업 앱이 중립적인 색상 팔레트를 사용하길 원한다면, Shortcuts는 어떻게 하는지 알려줍니다.

정규화된 모양, 패딩, 배경 색상이 있는 커스텀 이미지 아이콘은 가장 좋습니다. 다수의 패키지에서 가져온 랜덤한 자산의 혼합물은 기본 홈 스크린보다 나쁘게 보입니다.

iOS-상관성 있는 전체 인터페이스를 만들고 싶은데, 네이티브 웹 앱을 만들고 있다면, 이 native app look의 기본 JS 및 CSS 설정에 대한 안내서 는 아이콘 커스텀과 함께 유용한 동반자입니다.

어떤 사용자 메서드가 의미를 가지고 있는지

이 빠른 비교를 사용할 때, 결정할 때 도움이 됩니다.

목표	보다 좋은 방법	왜
홈 스크린 스타일을 전부 바꾸기	Apple이 내장된 컨트롤을 사용합니다.	더 빠르고 원본 동작을 유지
어떤 이미지를 하나의 앱 아이콘으로 사용	단축키	사진이나 파일을 선택할 수 있게 해줍니다
알림에 집중하는 앱을 실용적으로 유지	Apple 내장 제어	일반 앱 동작을 위해 더 좋습니다
원하는 스크린을 처음부터 디자인	단축키	전체적인 시각적 제어

만약에 단순한 보다 깨끗한 디자인만 필요하다면, 그것만 하세요. Apple의 내장 제어는 더 쉽습니다. 만약에 각 아이콘에 대한 진정한 예술적 방향을 원한다면, 단축키는 여전히 그 일을 해냅니다.

커스텀 아이콘의 이점과 단점을 이해

A custom icon은 홈 스크린을 한 분만에 멋지게 만들 수 있지만, 그다음 한 주 동안 불편해할 수도 있습니다. 설정 후에 보이는 트레이드 오프는 설정 중에는 보이지 않습니다.

얻는 것과 잃는 것

Shortcuts 접근법은 완전한 시각적 자유를 제공하기 때문에 여전히 유용하지만, 시스템적으로 앱의 App Store 아이콘을 대체하지는 않습니다. 대신 홈 스크린에 단축 아이콘을 만듭니다. 단축 아이콘은 단축 경로를 통해 앱을 실행합니다.

이 차이점은 실제로 결과를 낳습니다.

배지 불신: 채팅, 이메일, 또는 작업 앱에서 읽지 않은 수를 의존하는 경우 단축 아이콘은 적합하지 않습니다.
런칭 저항: 일부 사용자는 단축 아이콘에서 앱으로 전환할 때 짧은 전환을 느끼기도 합니다.
수동 설정: 각 앱을 커스터마이즈하려면 프로세스를 반복해야 합니다.
높은 유지보수: 홈 화면을 나중에 다시 디자인한다면, 모든快捷키는 다시 방문해야 할 또 다른 객체가 됩니다.

앱 번들 자체를 수정하지 않습니다. 단순히 런처를 추가합니다.

앱이 알림으로 인해 반응적으로 열리는 경우, 알림 배지 동작을 놓치지 않을 수 있을 때만 화려한 단축키로 숨겨야 합니다.

개발자 지원 아이콘의 차이점

애플리케이션이 내부적으로 대체 아이콘을 제공할 때, 경험은 더 깨끗해집니다. 이는 애플리케이션 자체가 변경에 참여하기 때문입니다. 일반적으로 이는 혼란이 줄어들고 플랫폼과 더 잘 일치하는 것입니다.

__CAPGO_KEEP_0__ 사용자 관점에서 보았을 때, 개발자 지원의 대체 아이콘은 Apple의 광범위한 홈 스크린 스타일링과 단축키의 완전한 자유 사이의甜点입니다. 무제한 이미지를 선택할 수는 없지만, improvised하지 않고 intentional한 switch를 얻을 수 있습니다.

디자인 팀을 위한 중간 지점이 흥미롭다. 승인된 아이콘의 작은 세트를 배포하고, 사용자는 여전히 앱의 외관에 대한 소유감을 느낀다. 또한 브랜드의 품질, 대비, 인식성을 보호할 수 있다.

좋은 아이콘 패키지는 일반적으로 세 가지 특성을 공유합니다.

일관된 모양 언어: 모서가 둥근, 사각형, 윤곽이 있는, 또는 채워진 모양이지만 혼합된 모양은 아닙니다.
안정적인 시각적 가중치: 내부 간격과 유사한 선 두께.
Theme discipline: 밝은 모드, 어두운 모드, 또는 특정 스타일 패밀리.

개발자들은 사용자에게 모든 것을 단축키로 관리하라고 말하기보다 앱 내에서 대체 아이콘을 추가하는 것이 많은 개발자들에게 결국에는 같은 이유입니다.

iOS에서 네이티브 앱을 배포하는 개발자들을 위한 대체 아이콘 구현

네이티브 iOS 앱을 배포하는 경우, 대체 아이콘은 작은 기능이지만 큰 미장구 가치가 있습니다. 구현은 어렵지 않지만, 세부 사항은 중요합니다. 대부분의 문제는 자산 설정과 plist 구성에서 오는 것이고, API 호출 자체에서 오는 것이 아닙니다.

아이콘 자산과 plist 항목을 준비하세요

아이콘 파일부터 시작하세요. 이름을 예측할 수 있도록 하세요. 기본 앱 아이콘인 경우, 기본 아이콘 외에 대체 아이콘 세트를 명확하게 이름을 지어 주세요, 예를 들어, DarkIcon, HolidayIcon 또는 MinimalIcon. 제품, 디자인, 엔지니어링 모두가 다르게 해석할 수 있는 임의의 레이블을 만들지 마세요.

앱도 올바른 Info.plist 구조가 필요합니다. iOS에서는 최소한, 기본 아이콘 정의와 대체 아이콘 사전이 포함된 사전을 기대합니다. CFBundleIcons Prepare icon assets and plist entries

A simplified example looks like this:

<key>CFBundleIcons</key>
<dict>
  <key>CFBundlePrimaryIcon</key>
  <dict>
    <key>CFBundleIconFiles</key>
    <array>
      <string>AppIcon</string>
    </array>
  </dict>
  <key>CFBundleAlternateIcons</key>
  <dict>
    <key>DarkIcon</key>
    <dict>
      <key>CFBundleIconFiles</key>
      <array>
        <string>DarkIcon</string>
      </array>
    </dict>
    <key>MinimalIcon</key>
    <dict>
      <key>CFBundleIconFiles</key>
      <array>
        <string>MinimalIcon</string>
      </array>
    </dict>
  </dict>
</dict>

Some teams prefer managing this in Xcode의 asset pipeline. Others edit plist values directly for clarity in code review. Either can work. What matters is consistency between the asset names and the icon names you pass at runtime.

If you’re planning alternate icons for a 클라이언트 앱, include design and QA time in your scope early. This is one of those features that looks trivial from the outside but still needs artwork, testing, and product decisions. A practical budgeting reference is this breakdown on budgeting for your 앱.

Call the iOS API from Swift

The runtime API is the easy part. iOS exposes alternate icon switching through UIApplication.

A simple implementation:

import UIKit

func setAppIcon(to iconName: String?) {
    guard UIApplication.shared.supportsAlternateIcons else {
        return
    }

    UIApplication.shared.setAlternateIconName(iconName) { error in
        if let error = error {
            print("Failed to change icon: \(error.localizedDescription)")
        } else {
            print("Icon changed successfully")
        }
    }
}

Use nil 를 사용하여 primary icon으로 돌아가세요. Pass the alternate icon name string to switch to a defined alternate.

A few engineering notes matter here:

Check support first: supportsAlternateIcons prevents a bad call path.
문자열을 정확하게 일치시킵니다. 런타임 이름은 plist 항목과 일치해야 합니다.
오류를 깨끗하게 처리하십시오. 개발 단계에서 비주얼하게 실패하도록 나쁜 자산 연결 또는 지원되지 않는 상태가 있어야 합니다.
아이콘 선택은 사용자 선호도와 같이 다루십시오. 설정 UI가 현재 선택된 이름을 반영해야 하는 경우 선택된 이름을 영구히 저장하십시오.

implementation note: API 호출은 작지만 실패 모드가 일반적으로 아닙니다. 새 설치, 업그레이드 및 기본 설정으로 리셋되기 전에 테스트하십시오.

유지 보수하는 하이브리드 스택이 있거나 앱 스토어와 관련된 릴리스 PIPELINE이 있으면 이러한 Apple 정책 업데이트 Capacitor 앱 은 원시적 인 커스터마이즈 기능과 함께 추적할 가치가 있습니다.

사용자를 혼란시키지 않는 설정 UI를 구축하십시오.

The best icon picker screens are boring. That’s a compliment. 사용자는 미리보기, 이름, 그리고 명확한 탭 목표를 볼 수 있어야 합니다.

A solid pattern is:

Show a small preview grid: 사용자는 시각적으로 보는 것보다 텍스트 레이블을 통해 보는 것보다 더 빠르게 비교할 수 있습니다.
Keep names literal: “Dark,” “Light,” “Retro,” “Holiday”는 브랜드 내부의 코드 이름보다 좋습니다.
Offer a reset choice: 기본 설정으로 돌아가기 위해 어떻게 해야 하는지 명확하게 알려주세요.
Don’t overpack the menu: 짧고 편집된 메뉴는 의도적인 것처럼 보입니다.

If you want a settings item that users trust, keep the feature framed as personalization, not optimization. People understand icon choice immediately when the UI is simple.

Capgo와 Ionic 개발자들을 위한 Capacitor

Capacitor 앱에서 아이콘 switch는 여전히 native iOS에서 발생합니다. 웹 layer는 그 것을 대체할 수 없습니다. 웹 layer는 bridge를 통해 native API을 트리거하고 TypeScript에서 설정 경험을 유지할 수 있습니다.

native iOS에서 진실의 근원지를 유지하세요.

첫 번째 규칙은 간단합니다. iOS 프로젝트에 대체 아이콘 자산과 plist 구성만 넣어야 합니다. Capacitor은 native 앱을 wrapping합니다. 대체 아이콘은 native 앱 번들에 속합니다.

그것이 의미하는 바는 workflow가 일반적으로 다음과 같은 형태를 띄게 됩니다.

iOS 대상에 대체 아이콘 자산을 추가하세요.
__CAPGO_KEEP_0__ 플러그인을 통해 native 메소드를 노출하세요. CFBundleIcons.
Expose a native method through a Capacitor plugin.
1 또는 2 단계를 생략하면, JavaScript로도 고칠 수 없습니다.

TypeScript에서 아이콘 switch를 노출하세요.

플러그인 인터페이스는 최소한으로 유지할 수 있습니다.

__CAPGO_KEEP_0__

Swift side:

import Capacitor
import UIKit

@objc(AppIconPlugin)
public class AppIconPlugin: CAPPlugin, CAPBridgedPlugin {
    public let identifier = "AppIconPlugin"
    public let jsName = "AppIcon"
    public let pluginMethods: [CAPPluginMethod] = [
        CAPPluginMethod(name: "setIcon", returnType: CAPPluginReturnPromise)
    ]

    @objc func setIcon(_ call: CAPPluginCall) {
        let iconName = call.getString("iconName")

        guard UIApplication.shared.supportsAlternateIcons else {
            call.reject("Alternate icons are not supported on this device.")
            return
        }

        UIApplication.shared.setAlternateIconName(iconName) { error in
            if let error = error {
                call.reject(error.localizedDescription)
            } else {
                call.resolve()
            }
        }
    }
}

TypeScript 정의:

import { registerPlugin } from '@capacitor/core';

export interface AppIconPlugin {
  setIcon(options: { iconName: string | null }): Promise<void>;
}

export const AppIcon = registerPlugin<AppIconPlugin>('AppIconPlugin');

이 브릿지를 처음부터 구축해야 한다면, 이 walkthrough에서 iOS native 브릿지를 구현하는 방법에 대해 설명하고 있습니다. Capacitor에서 iOS native 브릿지를 구현하는 방법에 대한 walkthrough 이 walkthrough은 core 패턴을 설명합니다.

Ionic 설정 화면에 브릿지를 연결하세요

브릿지가 존재하면, UI code는 간단합니다. 그곳에서 Capacitor이 빛을 발합니다. 제품 로직은 웹层에서 유지하고 iOS는 시스템 특정 호출을 처리합니다.

예시 사용법:

async function changeIcon(iconName: string | null) {
  try {
    await AppIcon.setIcon({ iconName });
  } catch (err) {
    console.error('Failed to change icon', err);
  }
}

몇 가지 제품 결정이 기능이 완성된 느낌을 주는 것입니다:

현재 선택을 UI에 반영하세요: 사용자가 아이콘 중 활성 아이콘을 추측하지 않도록 하세요.
iOS 특정 제어를 차단하세요: 플랫폼이 적용되지 않는 곳에서 옵션을 숨기거나 비활성화하세요.
디자인과 공유된 레이블을 유지하세요. code에서 QA 노트 및 스크린샷과 동일한 아이콘 이름을 사용하세요.
자산 업데이트 계획을 신중히 하세요. 리리스 후 아이콘 아트가 변경되는 경우 웹 및 네이티브 예상치를 조정하세요.

이것은 또한 릴리스 도구가 관련이 될 수 있는 유일한 곳입니다. 설정 화면, 아이콘 레이블, 복사본, 미리보기 자산이 나중에 변경되는 경우, __CAPGO_KEEP_0__와 같은 도구는 JavaScript, CSS, 복사본, 설정, 자산을 __CAPGO_KEEP_0__ 앱에 업데이트할 수 있습니다. 하지만 네이티브 아이콘 번들 자체를 변경하지 않습니다. Apple의 대체 아이콘 메커니즘을 대체하지는 않지만, 주변 인터페이스에 대한 반복적인 작업을 도와줍니다. Capgo can update JavaScript, CSS, copy, config, and assets in a Capacitor app without changing the native icon bundle itself. That doesn’t replace Apple’s alternate icon mechanism, but it does help you iterate on the surrounding interface.

사용자에게는 간단한 실용적인 결과가 있습니다. 빠른 시각적 폴리시를 원한다면 Apple의 내장 홈 스크린 스타일링이 가장 쉬운 경로입니다. 특정 아이콘에 대한 완전한 시각적 자유를 원한다면 Shortcuts를 사용할 수 있습니다. 단, 약간의 트레이드 오프를 수용해야 합니다.

개발자에게는 대체 아이콘은 더 이상 계절적인 트릭이 아닙니다. 제품 폴리시는 일부입니다. 잘 만든 아이콘 픽커는 사용자에게 소유감을 주지만, 경험을 약화시키는 작업 주변을 강요하지 않습니다.