본문 바로가기
Human Interface Guidelines/글

HIG 번역) Icons and Images - App Icon

by jum0 2020. 6. 3.

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.

애플 하드웨어 제품의 복제품을 사용하지 마세요. 애플 제품들은 저작권을 가지고 있고, 아이콘 또는 이미지로 재생산될 수 없습니다. 일반적으로, 기기의 복제품을 보여주는 것은 피하세요. 하드웨어 디자인은 빈번하게 변경되는 경향이 있어, 아이콘을 구식으로 만들 수 있습니다.

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.

아이콘의 모서리를 정사각형으로 유지하세요. 시스템은 자동으로 아이콘의 모서리에 둥글게 마스크를 적용합니다.

App Icon Attributes

All app icons should adhere to the following specifications.

모든 앱 아이콘은 다음 사양을 준수해야 합니다.

Attribute
Value
Format PNG
Color space sRGB or P3 (see Color Management)
Layers Flattened with no transparency
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.

모든 앱은 Splotlight search에서 앱 이름과 단어가 일치할 때 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.

설정 아이콘에 overlay 또는 경계를 추가하지 마세요. iOS는 모든 아이콘이 설정의 하얀 배경에서 잘 보일 수 있도록 자동으로 1-pixel의 획을 추가합니다.

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.

앱이 custom documents를 만든다면, iOS는 document icons를 만들기 위해 자동으로 앱 아이콘을 사용하기 때문에 document icons를 디자인하지 않아도 됩니다.

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.

일부 앱에서, customization은 개인적인 연결을 활성화하고, 사용자 경험을 향상하는 기능입니다. 앱에 가치를 더한다면, 사용자가 앱 아이콘의 대안으로 앱이 이 이미 제공하고 있는 여러 아이콘들을 선택할 수 있도록 할 수 있습니다. 예를 들어, 스포츠 앱은 여러 팀의 아이콘으로 제공할 수 있고, 라이트 및 다크 모드를 가진 앱은 각 모드에 맞게 아이콘을 제공할 수 있습니다. 앱 아이콘은 오직 사용자의 요청에 의해서만 변경될 수 있고, 시스템은 항상 사용자에게 그러한 변화에 대한 확인 요청하는 것을 기억하세요.

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.

모든 필수적인 크기에 시각적으로 일관된 대체 아이콘을 제공하세요. 기본 앱 아이콘과 비슷하게, 각각의 대체 앱 아이콘은 다양한 크기에 맞춰 관련된 이미지의 모음으로 제공됩니다. 사용자가 대체 아이콘을 선택할 때, 적절한 크기의 대체 아이콘은 홈 스크린, Spotlight, 그 외 시스템의 기본 아이콘을 대체합니다. 대체 아이콘이 시스템 전체에 일관되게 나타나게 하기 위해 - 사용자는 홈 스크린에서 아이콘의 한 버전을 표시하지 않아야 하며, 설정에서 완전히 다른 버전을 표시하지 않아야 합니다, 기본 앱 아이콘으로 제공한 것과 동일한 크기로 제공하세요(앱 스토어 아이콘을 제외). App Icon Sizes와 관련된 문서를 다음을 참조하세요.

For developer guidance, see the setAlternateIconName method of UIApplication.

UIApplication의 setAlternateIconName 메서드와 관련된 개발자 가이드는 다음 문서를 참조하세요.

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

대체 앱 아이콘은 앱 리뷰의 검토 대상이 되고, App Store Review Guidelines를 준수해야 합니다.

수정해야 할 부분이 있다면 알려주세요!

감사합니다!

반응형

댓글