아이폰 앱 아이콘

당신은 현재 홈 스크린을 보면서 두 가지 중 하나를 생각하고 있을 거야. 기본 아이콘은 배경화면과 위젯과 함께 어색하게 보일 거야. 또는, 앱을 개발하고 사용자에게 더 깨끗하고 의도적인 방법으로 개인화할 수 있도록 해주고 싶어.

두 문제는 동일한 질문의 아래에 위치해. 아이폰 앱 아이콘 변경 방법사용자에게는 Apple의 네이티브 홈 스크린 스타일링과 더 오래된 Shortcuts 작업around을 선택하는 것. 개발자에게는 native iOS API를 통해 대체 아이콘을 노출하는지, 그리고 Ionic이나 Capacitor에서 작업하는 경우 웹 기반 앱으로 연결하는 방법을 결정하는 것.

내용

당신의 아이폰 앱 아이콘 개인화 안내서
사용자에게 맞춤형 아이폰 앱 아이콘
사용자 정의 아이콘의 이점과 단점을 이해하는 방법
- 사용자 정의 아이콘의 이점과 단점
- 개발자 지원 아이콘과 다른 점
iOS에서 Alternate Icons 구현하는 개발자용 안내서
개발자용 Capacitor와 Ionic을 위한 안내서
__CAPGO_KEEP_1__

__CAPGO_KEEP_2__

__CAPGO_KEEP_3__

__CAPGO_KEEP_4__

__CAPGO_KEEP_5__ __CAPGO_KEEP_6____CAPGO_KEEP_7__ __CAPGO_KEEP_8____CAPGO_KEEP_9__

__CAPGO_KEEP_10__ __CAPGO_KEEP_11__

그 distinction도 사용자 경험에 매핑됩니다. Home Screen이 정제된 appearance은 더 광범위한 앱 경험의 일부입니다. 앱의 유지율과 정제에 관심 있는 팀은 시각적 커스터마이즈를 전체적인 사용자 경험의 일부로 다루며, 메뉴에 묻혀 있는 새로운 설정으로 다루지 않습니다. 모바일 앱 사용자 경험사용자에게 개인화된 iPhone 앱 아이콘

가장 깨끗한 답은 무엇을 원하냐에 달려 있습니다. 시스템 수준의 스타일링을 유지하면서 앱이 정상적으로 작동하도록 원한다면 Apple의 native controls을 사용하십시오. 특정한 커스텀 이미지를 하나의 앱에 사용하고 싶다면 Shortcuts을 사용하십시오.

Apple의 내장 iPhone controls을 사용하십시오

Apple은 iOS 18에서 major native milestone을 추가했습니다.

Edit > Customize에서 앱 아이콘 appearance을 직접 변경할 수 있습니다. 이미콘을larger iOS 18Edit > Customize Edit 밝은/어두운 모드와 자동 모드를 지원하는 다크, 아토, 클리어, 또는 티ंट 스타일을 지원하며, 투명한 아이콘 옵션을 포함하여 밝은, 어두운, 또는 자동 모드에 따라 애플의 홈 스크린 커스텀화 가이드.

내장된 프로세스는 다음과 같습니다:

홈 스크린 배경을 길게 누르면 아이콘들이 흔들립니다. 아이콘들을 흔들리는 상태에서 홈 스크린 배경을 탭합니다.
__CAPGO_KEEP_0__ 편집.
클릭 사용자 지정.
원하는 외관을 선택하세요, 예를 들어 다크, 자동, 클리어, 또는 티ंट.
크기 조절을 원한다면 아이콘을 더 크게 나타나게 하세요.
레이아웃이 올바르게 보일 때 jiggle 모드를 종료하세요.

이 방법은 가장 좋은 시작점입니다. 왜냐하면 native 이기 때문입니다. 가짜 런처를 만들지 않습니다. 시스템 자체에서 지원되는 아이콘을 어떻게 표시할 것인지 변경합니다.

__CAPGO_KEEP_0__

__CAPGO_KEEP_0__ __CAPGO_KEEP_0__
__CAPGO_KEEP_0__ __CAPGO_KEEP_0__
__CAPGO_KEEP_0__ __CAPGO_KEEP_0__

__CAPGO_KEEP_0__ __CAPGO_KEEP_0__ __CAPGO_KEEP_0__

__CAPGO_KEEP_0__

Shortcuts 방법을 사용하여 모든 이미지를 사용하십시오.

native 스타일링이 이 단계에 도달하기 전에, 완전히 사용자화된 iPhone 앱 아이콘을 만들기 위한 표준 경로는 Shortcuts 앱이었습니다. Shortcuts 튜토리얼 가이드는 여전히 workflow를 다음과 같이 설명합니다: 단축키를 만들고, Open App, 앱을 선택하고, Add to Home Screen 을 사용하여 아이콘 이미지를 선택하십시오. 실제로, 이 단축키 튜토리얼에 따르면, 표시되는 아이콘 교체를 위해 약 5-8 단계가 필요합니다. 이 단계.

이것이 실제로 작동하는 버전입니다.

Open Shortcuts.
앱을 실행하기 위해 + 버튼을 탭하여 새로운 단축키를 생성하세요.
Add the Open App 액션을 추가하세요.
원하는 앱을 선택하세요.
단축키 옵션을 열고 Add to Home Screen.
아이콘을 탭하세요.
Pick 사진을 선택하거나 or 파일을 선택하거나.
__CAPGO_KEEP_0__을 이름으로 짓고 홈 스크린에 추가하세요.

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

이 접근법을 사용하는 이유는 통제입니다. Spotify를 손그림 글꼴로 보이게 하거나, 작업 앱이 모두 중립적인 색상 팔레트를 사용하도록 하려면 Shortcuts를 사용하세요.

커스텀 이미지 아이콘은 형태, 패딩, 배경 색상을 일치시킨 후에 가장 좋습니다. 다른 패키지에서 가져온 자산의 무작위 혼합물은 기본 홈 스크린보다 나쁘게 보입니다.

iOS-상관성 있는 전체 인터페이스를 만들고 싶은 경우, 네이티브 웹 앱을 빌드하고 싶다면 이 기본 JS 및 CSS 구성 을 위한 네이티브 앱의 외관을 위한 유용한 동반자

이 가이드는 아이콘 커스텀화와 함께 사용할 수 있습니다.

이 빠른 비교를 사용하여 결정하세요:

목표	보다 좋은 방법	왜
전체 홈 스크린 스타일을 변경	Apple 내장 제어	빠르고 원래 동작을 유지
어떤 이미지를 하나의 앱 아이콘으로 사용	단축키	사진이나 파일을 선택할 수 있습니다
알림에 집중하는 앱을 실용적으로 유지	Apple 내장 제어	일반 앱 동작을 위한 더 나은 선택
스스로부터 테마화된 화면을 빌드하세요	단축키	전체적인 시각적 제어

만약에 단순한 보다 깨끗한 디자인만 필요하다면, 그것을 과하게 복잡하게 만들지 마세요. Apple의 원래 제어 요소가 더 쉽습니다. 만약에 각 아이콘에 대한 진정한 예술적 방향성을 원한다면, 단축키는 여전히 그 일을 합니다.

커스텀 아이콘의 사용에 대한 이해

커스텀 아이콘은 홈 스크린에서 몇 초만에 멋진 보기를 만들 수 있지만, 그것이 모든 주말 동안 당신을 짜증나게 할 수 있습니다. 일반적으로 설정 후에 나타나는 트레이드 오프입니다.

얻는 것과 잃는 것

Shortcuts 방법은 여전히 유용합니다. 그것은 당신에게 완전한 시각적 자유를 제공합니다. 하지만 그것은 앱의 App Store 아이콘을 시스템적으로 대체하지 않습니다. 그것은 홈 스크린 단축키를 생성하여 앱을 단축키 경로를 통해 실행합니다.

그것은 실제로 결과를 낳습니다.

배지 불신성: 만약 채팅, 이메일, 또는 작업 앱의 읽지 않은 카운트에 의존한다면, 단축 아이콘은 적절한 선택이 아닙니다.
시동 저항: 일부 사용자는 단축 아이콘에서 앱으로 전환할 때 짧은 전환을 발견합니다.
수동 설정: 각 앱을 커스터마이즈하는 경우 이 과정을 반복합니다.
유지 보수 비용이 높습니다. 홈 스크린을 다시 디자인한다면, 단축 아이콘 하나당 다시 방문해야 하는 객체가 하나 더 있습니다.

이러한 단점은 단축 아이콘 방법의 방식으로부터 직접 따릅니다. 앱 번들을 수정하는 것이 아니라, 런처를 추가하는 것입니다.

알림으로 인해 앱을 열기 때문에, 배지 동작을 놓치지 않을 수 있는지 확신할 수 있다면, 그 앱을 화려한 단축 아이콘 뒤에 숨기지 마세요.

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

앱이 내부적으로 대체 아이콘을 제공할 때, 경험은 더 깨끗합니다. 앱이 자체적으로 변경에 참여하기 때문입니다. 일반적으로 혼란이 덜하고 플랫폼과 더 잘 일치합니다.

사용자 관점에서, 개발자 지원 대체 아이콘은 애플의 광범위한 홈 스크린 스타일링과 단축 아이콘의 완전한 자유 사이의甜点입니다. 무제한 이미지 선택은 아니지만, 의도적인 대신 임의적인 것으로 느껴지는 Switch를 얻을 수 있습니다.

디자인 팀에게는 그 중간 지점이 흥미로운 것입니다. 승인된 아이콘의 작은 집합을 배달하면 사용자는 앱의 외관에 대한 소유감을 느끼게 됩니다. 또한 브랜드 품질, 대비, 인식력을 보호할 수 있습니다.

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

일관된 형태 언어: 둥근 모양, 직사각형, 윤곽, 또는 채우기지만 혼합하지 않습니다.
안정적인 시각적 무게: 슐스 두께와 내부 간격이 유사합니다.
테마의 책임: 라이트 모드, 다크 모드, 또는 특정 스타일 패밀리.

개발자에게는 Native iOS 앱에 대체 아이콘을 Implement하는 방법입니다.

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

MacBook Pro가 Swift API을 Xcode에서 다음으로 표시하고 iPhone에 Native iOS 앱 아이콘을 표시하는 이미지를 보여줍니다.

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

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

앱도 올바른 Info.plist 구조가 필요합니다. iOS는 최소한, 주 아이콘 정의와 대체 아이콘 사전을 포함하는 사전을 기대합니다. CFBundleIcons 간단한 예시는 다음과 같습니다:

일부 팀은 Xcode의 자산_PIPELINE을 관리하는 것을 선호합니다. 다른 팀은 plist 값의 직접 편집을 명확성의 sake으로 __CAPGO_KEEP_0__ 검토에 사용합니다. 둘 다 가능합니다. 중요한 것은 자산 이름과 런타임에서 전달하는 아이콘 이름 간의 일관성입니다.

<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’s 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.

앱 예산 계획 iOS __CAPGO_KEEP_0__을 Swift에서 호출하세요..

런타임 API은 쉬운 부분입니다. iOS는 대체 아이콘 Switching을 노출합니다.

대체 아이콘 Switching을 사용하는 iOS의 런타임 API은 쉽습니다. UIApplication.

간단한 구현:

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")
        }
    }
}

사용 nil __CAPGO_KEEP_0__을 전달하여 기본 아이콘으로 돌아가기

엔지니어링 노트 몇 가지가 여기서 중요합니다:

지원 여부를 확인하세요: supportsAlternateIcons __CAPGO_KEEP_0__은 잘못된 호출 경로를 방지합니다.
문자열을 정확히 일치시키세요: 런타임 이름은 plist 항목과 일치해야 합니다.
오류를 깨끗하게 처리하세요: 개발 단계에서 비주얼하게 실패해야 하는 것은 나쁜 자산 연결 또는 지원되지 않는 상태입니다.
아이콘 선택은 사용자 선호도와 같이 다루세요: 설정 UI가 현재 선택을 반영해야 하는 경우 선택된 이름을 저장하세요.

Implementation note: API 호출은 작지만, 당신의 실패 모드는 일반적으로 아니다. 새로운 설치, 업그레이드, 기본 설정으로 리셋된 동작을 테스트하기 전에 배포하세요.

유지 보수하는 하이브리드 스택을 유지하는 경우 또는 앱 스토어와 관련된 릴리즈 파이프라인이 포함된 경우, 이러한 Capacitor 앱에 대한 애플 정책 업데이트 은 내결함성 커스터마이징 기능과 함께 추적할 가치가 있는 것입니다.

사용자가 혼란하지 않도록 설정 UI를 구축하세요.

최고의 아이콘 픽커 화면은 재미없습니다. 그게 칭찬입니다. 사용자는 미리보기, 이름, 그리고 명확한 탭 대상만 볼 수 있어야 합니다.

좋은 패턴은 다음과 같습니다.

작은 미리보기 그리드 보여주기: 사용자는 시각적으로 보다 빠르게 비교할 수 있습니다. 텍스트 레이블을 통해 비교하는 것보다.
이름을 Literal로 유지하세요: “Dark,” “Light,” “Retro,” “Holiday” is better than branded internal codenames.
리셋 옵션을 제공하십시오: 기본 설정으로 돌아가기 위한 방법을 명확하게 알려주십시오.
메뉴를 과도하게 채우지 마십시오: 짧고 선택된 세트가 의도된 것처럼 느껴지도록 하십시오.

개발자들을 위한 안내서 __CAPGO_KEEP_0__ 및 Ionic

Capacitor 앱에서 아이콘 switch는 native iOS에서 여전히 발생합니다. 웹层는 그 대신 native __CAPGO_KEEP_1__을 트리거하고 TypeScript에서 설정 경험을 유지할 수 있습니다.

In a Capacitor app, the icon switch still happens in native iOS. Your web layer doesn’t get to replace that. What the web layer can do is trigger the native API through a bridge and keep the rest of the settings experience in TypeScript.

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

The first rule is simple. Put your alternate icon assets and plist configuration in the iOS project, not only in the web project. Capacitor wraps a native app. Alternate icons belong to that native app bundle.

iOS 대상에 대체 아이콘 자산을 추가하십시오.

대체 아이콘 자산을 iOS 프로젝트에 추가하십시오.
등록하여 CFBundleIcons.
Capacitor 플러그인을 통해 네이티브 메소드를 노출하세요.
Ionic, React, Vue, 또는 평범한 웹 설정 화면에서 해당 메소드를 호출하세요.

첫 번째 또는 두 번째 단계를 건너뛰면, 자바스크립트의 어떠한 수준의 수정도 해결할 수 없습니다.

TypeScript에서 아이콘 전환을 노출하세요

최소한의 플러그인 인터페이스는 작을 수 있습니다.

Swift 측:

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');

이 브리지를 스스로 구축해야 한다면, __CAPGO_KEEP_0__에서 iOS용 네이티브 브리지 구현에 대한_walkthrough_ implementing a native bridge for iOS in Capacitor Ionic 설정 화면에 연결하세요

__CAPGO_KEEP_0__

브릿지가 존재하면 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 JavaScript, CSS, 복사, 설정, 및 자산을 Capacitor 앱에서 업데이트할 수 있습니다. native icon bundle 자체를 변경하지 않고. 그게 Apple의 대체 아이콘 메커니즘을 대체하는 건 아니지만, 그 주변 인터페이스에 대해 반복적으로 작업할 수 있게 해줍니다.

개인화의 미래는 협력입니다.

iPhone에서 앱 아이콘을 커스텀하는 건 과거에 두 세계 사이에서 느껴졌습니다. 사용자들은 해커들의 방법을 사용했습니다. 개발자들은 플랫폼 API를 사용했습니다. 그 선은 더 얇아졌습니다.

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

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

최고의 개인화 기능은 사용자에게 미학과 사용성 사이에서 선택할 필요가 없습니다. 그들은 두 가지 사이의 간격을 좁히는 겁니다.

그것은 특히 하이브리드 스택에서 더 중요합니다. Native capability과 웹 기반의 제품 반복은 경쟁할 필요가 없습니다. 팀은 iOS에서 아이콘 switch를 유지하고, 시간이 지남에 따라 주의 깊은 릴리즈 연습과 분할된 롤아웃思路를 사용하여 주변 설정 경험을 개선할 수 있습니다. 이미 사용 중인 앱은 실시간 업데이트와 사용자 세그멘테이션을 사용하고 있습니다. 실시간 업데이트와 사용자 세그멘테이션을 사용하는 앱.

The bigger trend is healthy. Apple has made Home Screen customization more native. Users expect more control. Developers can now meet that expectation cleanly, whether they ship pure Swift apps or Capacitor apps with a native bridge under the hood.

If you maintain a Capacitor app and want to improve the settings experience around features like icon selection, rollout targeting, or asset updates, Capgo is one option to consider for shipping JavaScript, CSS, copy, config, and asset changes without waiting on store review for every interface tweak.

아이폰 앱 아이콘 변경 방법: 사용자 지정 모양

내용

__CAPGO_KEEP_2__

Apple은 iOS 18에서 major native milestone을 추가했습니다.

Shortcuts 방법을 사용하여 모든 이미지를 사용하십시오.

이 가이드는 아이콘 커스텀화와 함께 사용할 수 있습니다.

커스텀 아이콘의 사용에 대한 이해

얻는 것과 잃는 것

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

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

런타임 API은 쉬운 부분입니다. iOS는 대체 아이콘 Switching을 노출합니다.

사용자가 혼란하지 않도록 설정 UI를 구축하세요.

Capacitor 앱에서 아이콘 switch는 native iOS에서 여전히 발생합니다. 웹层는 그 대신 native __CAPGO_KEEP_1__을 트리거하고 TypeScript에서 설정 경험을 유지할 수 있습니다.

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

TypeScript에서 아이콘 전환을 노출하세요

__CAPGO_KEEP_0__

개인화의 미래는 협력입니다.