애플 휴먼 인터페이스 가이드라인(33) Icons and Images -2 App Icon

App Icon
앱 아이콘

Every app needs a beautiful and memorable icon that attracts attention in the App Store and stands out on the Home screen. Your icon is the first opportunity to communicate, at a glance, your app’s purpose. It also appears throughout the system, such as in Settings and search results.

모든 앱은 아름답고 기억될만하며, 앱스토어에서 시선을 끌고 홈스크린에선 눈에 띄는 아이콘이 필요합니다. 아이콘은 한눈에 앱의 목적을 전할 수 있는 첫번째 기회입니다. 이는 설정이나 검색 결과 등 시스템 전반에 보여집니다.

 

Embrace simplicity. Find a single element that captures the essence of your app and express that element in a simple, unique shape. Add details cautiously. If an icon’s content or shape is overly complex, the details can be hard to discern, especially at smaller sizes.

단순함을 고집하세요. 앱의 정수라 부를 수 있는 단 하나의 요소를 찾고, 그 요소를 간단하며 독특한 모영으로 표현하세요. 디테일은 주의하여 추가하세요. 만약 앱 아이콘의 콘텐츠나 쉐입이 지나치게 복잡할 경우, 특히 작은 크기에서 디테일을 구분하기 힘들 것입니다.

 

Provide a single focus point. Design an icon with a single, centered point that immediately captures attention and clearly identifies your app.

집중할 수 있는 단 한가지 포인트만 제공하세요. 단일한 포인트를 중앙에 배치하여 즉시 주의를 끌며 앱을 명확하게 규정지을 수 있도록 하세요.

 

Design a recognizable icon. People shouldn’t have to analyze the icon to figure out what it represents. For example, the Mail app icon uses an envelope, which is universally associated with mail. Take time to design a beautiful and engaging abstract icon that artistically represents your app’s purpose.

인식하기 쉬운 아이콘을 디자인하세요. 사용자들은 아이콘이 뭘 뜻하는지 분석해야할 필요가 없습니다. 예를 들어, 메일 앱 아이콘은 봉투를 사용하며 이는 범용적으로 메일과 관련있다고 여겨지죠. 시간을 들여 아름답고 호감가는 추상의 아이콘을 디자인하세요. 이 아이콘은 예술적으로 앱의 목적을 보여주는 것입니다.

 

Keep the background simple and avoid transparency. Make sure your icon is opaque, and don’t clutter the background. Give it a simple background so it doesn’t overpower other app icons nearby. You don’t need to fill the entire icon with content.

배경은 깔끔하게 유지하고, 투명도를 넣지 마세요. 아이콘이 불투명하도록 디자인하고, 배경을 어수선하게 채우지 마세요. 깔끔한 배경을 유지해 주변 다른 앱에 영향을 끼치지 않도록 하세요. 아이콘의 전체를 콘텐츠로 꽉 채울 필요가 없습니다.

 

Use words only when they’re essential or part of a logo. An app’s name appears below its icon on the Home screen. Don’t include nonessential words that repeat the name or tell people what to do with your app, like "Watch" or "Play." If your design includes any text, emphasize words that relate to the actual content your app offers.

정말 중요하거나 로고의 한 부분인 경우에만 단어를 사용하세요. 앱의 이름은 어차피 홈스크린의 아이콘 아래 띄워집니다. 이름을 반복하거나 "보기" "플레이"같이 사용자에게 어떤 행동을 시키는 불필요한 단어를 넣지 마세요. 만약 디자인에 어떤 텍스트라도 들어간다면, 앱에서 제공하는 실제 콘텐츠와 관련된 단어를 보여주도록 하세요.

 

Don’t include photos, screenshots, or interface elements. Photographic details can be very hard to see at small sizes. Screenshots are too complex for an app icon and don’t generally help communicate your app’s purpose. Interface elements in an icon are misleading and confusing.

사진, 스크린샷, 화면의 요소를 포함시키지 마세요. 사진 수준의 디테일은 작은 사이즈에서 매우 알아보기 어렵습니다. 스크린샷은 앱 아이콘으로 쓰기엔 너무 복잡하고 앱의 목적을 잘 드러내지도 않습니다. 화면의 요소는 아이콘을 잘못 이해시킬 수 있고 혼란을 야기할 수 있습니다.

 

Don’t use replicas of Apple hardware products. Apple products are copyrighted and can’t be reproduced in your icons or images. In general, avoid displaying replicas of devices, because hardware designs tend to change frequently and can make your icon look dated.

Apple의 하드웨어 모형을 사용하지 마세요. Apple 제품은 저작권이 있으며 애의 아이콘이나 이미지로 사용될 수 없습니다. 일반적인 경우, 기기의 모형을 보여주지 마세요. 하드웨어 디자인은 자주 변하는 경우가 있으며 이런 경우 앱 아이콘이 때 지난 것 처럼 보이게 할 수 있습니다.

 

Don’t place your app icon throughout the interface. It can be confusing to see an icon used for different purposes throughout an app. Instead, consider incorporating your icon’s color scheme. See Color.

앱 아이콘을 앱 화면에 넣지 마세요. 아이콘이 앱 안에 들어가면 다른 목적을 의미하는 것 같은 혼란을 일으킵니다. 대신, 아이콘의 컬러 스킴 사용을 고려해보세요. Color를 확인해보세요.

 

Test your icon against different wallpapers. You can’t predict which wallpaper people will choose for their Home screen, so don’t just test your app against a light or dark color. See how it looks over different photos. Try it on an actual device with a dynamic background that changes perspective as the device moves.

앱 아이콘을 여러가지 배경화면에서 테스트해보세요. 사용자들이 그들의 홈스크린에 설정한 배경화면을 예측할 수는 없습니다. 그러니 밝거나 어두운 색에서도 앱 아이콘이 잘 보이는지 테스트하세요. 여러가지 사진 위에서도 한번 확인해보세요. 다이나믹 배경을 지원하는 기기에서 테스트하며 기기가 움직였을 때 어떻게 변하는지도 확인하세요.

 

Keep icon corners square. The system applies a mask that rounds icon corners automatically.

아이콘의 모서리는는 90도로 만드세요. 시스템이 자동으로 모서리를 둥글게 적용시켜줍니다.

App Icon Attributes
앱 아이콘 속성

All app icons should adhere to the following specifications.

모든 앱 아이콘은 아래와 같은 속성을 지켜야합니다.

Attribute	Value
Format 포맷	PNG
Color space 색공간	Display P3 (wide-gamut color), sRGB (color), or Gray Gamma 2.2 (grayscale). See Color Management.
Layers 레이어	Flattened with no transparency 투명한 부분 없이 단일 레이어화(merge)
Resolution 해상도	Varies. See Image Size and Resolution.
Shape 모양	Square with no rounded corners 둥근 모서리 없는 정사각형

App Icon Sizes
앱 아이콘 크기

Every app must supply small icons for use on the Home screen and throughout the system once your app is installed, as well as a larger icon for display in the App Store.

모든 앱은 홈스크린과 설치된 후 시스템 전체에서 사용될 작은 아이콘을 제공해야 합니다. 앱스토어에서 앱을 보여주기 위한 큰 아이콘도 필요하구요.

 

Device or context 기기 혹은 맥락	Icon Size 아이콘 크기
iPhone	180px × 180px (60pt × 60pt @3x)
	120px × 120px (60pt × 60pt @2x)
iPad Pro	167px × 167px (83.5pt × 83.5pt @2x)
iPad, iPad mini	152px × 152px (76pt × 76pt @2x)
App Store	1024px × 1024px (1024pt × 1024pt @1x)

Provide different sized icons for different devices. Make sure that your app icon looks great on all the devices you support.
다른 기기에는 다른 크기의 아이콘을 제공하세요. 당신의 앱이 지원되는 모든 기기에서 앱아이콘이 멋져보이도록 하세요.

 

Mimic your small icon with your App Store icon. Although the App Store icon is used differently than the small one, it’s still your app icon. It should generally match the smaller version in appearance, although it can be subtly richer and more detailed since there are no visual effects applied to it.

작은 아이콘은 앱스토어 아이콘의 모습과 같이 만드세요. 앱스토어 아이콘은 작은 아이콘과는 달리 사용되지만, 여전히 앱 아이콘이긴 합니다. 작은 버전과 모습이 서로 대등해야 합니다. 물론 앱스토어 아이콘이 더 풍부하고 더 디테일이 많을 수는 있겠지만요.

Spotlight, Settings, and Notification Icons
스팟라이트, 설정, 알림용 아이콘

Every app should also provide a small icon that iOS can display when the app name matches a term in a Spotlight search. Additionally, apps with settings should provide a small icon to display in the built-in Settings app, and apps that support notifications should provide a small icon to display in notifications. All icons should clearly identify your app—ideally, they should match your app icon. If you don’t provide these icons, iOS might shrink your main app icon for display in these locations.

 

모든 앱은 작은 아이콘을 제공하여 iOS에서 '스팟라이트 검색' 기능 사용시 앱 이름과 매치할 수 있도록 해야합니다. 또한, '설정' 앱 리스트에 앱을 보여주기 위해 작은 아이콘을 제공해야하며, 알림을 지원하는 앱은 알림 화면에서 보여줄 작은 아이콘을 준비해야 합니다. 모든 아이콘은 당신의 앱이 무엇인지 확실히 보여주는 것이어야 합니다. 이상적으로, 앱은 앱 아이콘과 매칭되어야 합니다. 이러한 아이콘을 제공하지 않는다면, iOS에선 당신의 메인 아이콘을 단순히 작게 만들어 보여줄 것입니다.

 

Device 기기	Spotlight icon size 스팟라이트 아이콘 크기
iPhone	120px × 120px (40pt × 40pt @3x)
	80px × 80px (40pt × 40pt @2x)
iPad Pro, iPad, iPad mini	80px × 80px (40pt × 40pt @2x)

 

Device 기기	Settings icon size 설정 아이콘 크기
iPhone	87px × 87px (29pt × 29pt @3x)
	58px × 58px (29pt × 29pt @2x)
iPad Pro, iPad, iPad mini	58px × 58px (29pt × 29pt @2x)

 

Device 기기	Notification icon size 알림 아이콘 크기
iPhone	60px × 60px (20pt × 20pt @3x)
	40px × 40px (20pt × 20pt @2x)
iPad Pro, iPad, iPad mini	40px × 40px (20pt × 20pt @2x)

Don’t add an overlay or border to your Settings icon. iOS automatically adds a 1-pixel stroke to all icons so that they look good on the white background of Settings.

설정 아이콘에 오버레이하거나 선을 추가하지 마세요. iOS에선 모든 아이콘에 자동으로 1px의 선을 적용해 설정의 하얀 배경에서도 좋아보이도록 합니다.

 

TIP

If your app creates custom documents, you don't need to design document icons because iOS uses your app icon to create document icons automatically.
만약 당신의 앱에서 문서를 커스텀해 만들 수 있다면, 문서 아이콘을 만들 필요가 없습니다. iOS에서 당신 앱의 아이콘을 이용해 문서 아이콘을 자동으로 만듭니다.

User-Selectable App Icons
사용자가 선택하는 앱 아이콘

For some apps, customization is a feature that evokes a personal connection and enhances the user experience. If it provides value in your app, you can let people select an alternate app icon from a set of predefined icons that are embedded within your app. For example, a sports app might offer icons for different teams or an app with light and dark modes might offer corresponding light and dark icons. Note that your app icon can only be changed at the user’s request and the system always provides the user with confirmation of such a change.

몇몇 앱에선 커스텀 가능여부가 개인적인 연결을 불러일으키고 사용자의 경험을 증가시키는 주기능이 됩니다. 만약 그것이 앱의 가치를 더한다면, 사용자들에게 미리 정해져 임베디드된 아이콘들 중 아이콘을 선택하게 할 수 있습니다. 예를 들어, 스포츠 앱은 다른 팀의 아이콘을 제공할 수 있으며, 라이트/다크 모드에 맞춰 라이트/다크 아이콘을 제공할 수도 있습니다. 당신의 앱 아이콘은 사용자의 요청이 있을 때에만 변경 가능하며, 이러한 변화는 시스템에서 사용자에게 확인을 요구한다는 것을 기억하세요.

 

Provide visually consistent alternate icons in all necessary sizes. Like your primary app icon, each alternate app icon is delivered as a collection of related images that vary in size. When the user chooses an alternate icon, the appropriate sizes of that icon replace your primary app icon on the Home screen, in Spotlight, and elsewhere in the system. To ensure that alternate icons appear consistently throughout the system—the user shouldn't see one version of your icon on the Home screen and a completely different version in Settings, for example—provide them in the same sizes you provide for your primary app icon (with the exception of the App Store icon). See App Icon Sizes.

For developer guidance, see the setAlternateIconName method of UIApplication.

필요한 모든 사이즈에서, 시각적으로 지속성이 느껴지는 아이콘을 만드세요. 첫번째 기본 앱 아이콘처럼, 모든 대체용 앱아이콘은 다양한 사이즈에서 관련 이미지의 집합으로 전달됩니다. 사용자가 대체 아이콘을 선택한다면, 그 아이콘은 첫번째 아이콘이 홈스크린, 스팟라이트, 시스템 어디서든 보여졌던 사이즈에 적절히 대응해야 할 것입니다. 대체 아이콘이 시스템에 한결같이 보여지도록 하고 싶다면, 첫번째 기본 앱 아이콘과 같은 사이즈로 제공하세요. 예를 들어 사용자는 한 아이콘의 홈스크린 버전과 대체 아이콘의 설정 버전을 동시에 보아선 안됩니다. (앱 스토어 아이콘의 경우 제외). App Icon Sizes 를 확인하세요.

 

NOTE

Alternate app icons are subject to app review and must adhere to the App Store Review Guidelines.

대체용 앱 아이콘은 앱 리뷰에 영향을 받으며, App Store Review Guidelines를 고수해야합니다.