[HIG] App icons 앱 아이콘

 🗣 02. H.I.G에서 읽어본 App icons

본 내용은 H.I.G - Foundations - App icons를 편역 한 것입니다.

 

1) 앱 아이콘

독특하고 기억에 남을만한 아이콘은 앱이나 게임의 목적과 성격을 전달하며 앱 스토어와 장치에서 사람들로부터 확실한 인식을 얻을 수 있다.

아름다운 앱 아이콘은 모든 애플 플랫폼에서 사용자 경험의 중요한 부분이며 앱과 게임은 반드시 하나의 앱 아이콘을 가져야 한다. 각각의 플랫폼은 조금 다른 스타일의 앱 아이콘을 갖는다. 그래서 강력한 일관성과 메시지를 전달하기 위해서는 다른 모양과 디테일을 조절하여 잘 적응할 수 있도록 디자인할 수 있어야 한다.

애플 디자인 소스에서 각각의 플랫폼에서 아이콘을 만드는데 필요한 템플릿을 다운로드할 수 있다.

Beautiful app icons are an important part of the user experience on all Apple platforms and every app and game must have one. Each platform defines a slightly different style for app icons, so you want to create a design that adapts well to different shapes and levels of detail while maintaining strong visual consistency and messaging. To download templates that help you create icons for each platform, see Apple Design Resources. For guidance on creating other types of icons, see Icons.

 

 

2) 좋은 예시

단순함을 수용하라. 간단한 아이콘은 사람들이 이해하기 쉽고 인식하기도 쉽다. 앱이나 게임의 본질을 찾거나 아이콘의 핵심 아이디어를 떠올리거나 간단하고 독특한 방식으로 컨셉을 잡을 수 있다. 많은 요소를 넣는 것은 피하라. 왜냐하면 구별하기 어렵고 특히 작은 크기의 아이콘은 진흙투성이로 보일 수 있다. 간간한 배경에 강조할 만한 이미지를 넣어라. 아이콘 전체를 내용으로 채울 필요는 없다.

여러 플랫폼에서 잘 작동하는 디자인을 만들어 각 플랫폼에서 편안한 느낌을 줘라. 앱이나 게임이 하나 이상의 플랫폼에서 작동하는 경우 비슷한 이미지와 색상을 사용하여 각각의 플랫폼에 적절히 사용되도록 하라. 예를 들어 iOS, tvOS, 그리고 watchOS에서의 음악 아이콘은 빨간색 배경에 흰색 음표 기호로 이루어져 있다. macOS에서도 마찬가지이다. 그림자를 통해 음표가 움푹 들어간 것처럼 보인다. 마찬가지로 visionOS에서도 동일하게 작동한다. 그러나 착용하고 있는 동안은 3D로 보인다.

Best practices

Embrace simplicity. Simple icons tend to be easier for people to understand and recognize. Find a concept or element that captures the essence of your app or game, make it the core idea of the icon, and express it in a simple, unique way. Avoid adding too many details, because they can be hard to discern and can make an icon appear muddy, especially at smaller sizes. Prefer a simple background that puts the emphasis on the primary image — you don’t need to fill the entire icon with content.

Create a design that works well on multiple platforms so it feels at home on each. If your app or game runs on more than one platform, use similar images and color palettes in all icons while rendering them in the style that’s appropriate for each platform. For example, in iOS, tvOS, and watchOS, the Music app icon depicts the white musical notes on a red background using a streamlined, graphical style; macOS displays the same elements, while adding shadow that makes the notes look recessed. Similarly, the Music app icon in visionOS uses the same color scheme and content, but offers a true 3D appearance when viewed while wearing the device.

경험 혹은 브랜딩에 있어서 본질적인 내용을 전달하고 싶다면 글자만 추가하라. 일부 경우 아이콘 근처에 앱 이름이 나타나므로 아이콘 내의 이름을 표시하는 것은 중복될 수 있다. 엡 혹은 게임의 이름에 맞춰 첫 글자로 아이콘을 만드는 것이 도움이 될 수 있다. watch 혹은 play와 같이 사용자에게 행동을 내리는 단어는 좋지 않다.

사진보다 그래픽 이미지를 선호하고 아이콘의 UI 요소를 그대로 복제하지 마라. 사진의 경우 작은 크기로 볼 때 잘 작동하지 않을 수 있다. 사람들이 알았으면 하는 특징이 있는 경우 사진을 사용하기 보다 그래픽 이미지를 대신하여 강조하라. 앱에서 사람들이 알았으면 하는 부분이 있는 경우 앱의 스크린 샷 혹은 기본 UI 컴포넌트를 복제하지 마라.

필요한 경우, 시스템이 검색 결과, 설정, 알림 등의 장소에 표시하는 특정 크기에 대해 아이콘의 크기를 최적화하라. iOS, iPadOS, 그리고 watchOS의 경우 Xcode가 1024*1024 픽셀의 크기를 제공하여 에셋의 크기를 각각 제공할 수 있다. 앱 아이콘을 자체적으로 만들 경우 모든 크기에서 이미지가 잘 구별되어야 한다.

예를 들어 특정 요소나 불필요한 특징을 제거하여 이미지를 단순하게 하고 주된 요소만 강조할 수 있다. 만약 변화가 필요하다면 앱 아이콘이 모든 상황에서 시각적으로 일관되게 유지되도록 미묘하게 변경하라.

Prefer including text only when it’s an essential part of your experience or brand. Text in icons is often too small to read easily, can make an icon appear cluttered, and doesn’t support accessibility or localization. In some contexts, the app name appears near the icon, making it redundant to display the name within it. Although using a mnemonic like the first letter of your app’s name can help people recognize your app or game, avoid including nonessential words that tell people what to do with it — like “Watch” or “Play” — or context-specific terms like “New” or “For visionOS.”

Prefer graphical images to photos and avoid replicating UI components in your icon. Photos are full of details that don’t work well when viewed at small sizes. Instead of using a photo, create a graphic representation of the content that emphasizes the features you want people to notice. Similarly, if your app has an interface that people recognize, don’t just replicate standard UI components or use app screenshots in your icon.

If needed, optimize your icon for the specific sizes the system displays in places like Spotlight search results, Settings, and notifications. For iOS, iPadOS, and watchOS, you can tell Xcode to generate all sizes from your 1024×1024 px App Store icon, or you can provide assets for some or all individual icon sizes. For macOS and tvOS, you need to supply all sizes; for visionOS, you supply a single 1024x1024 px asset. If you create your own versions of your app icon, make sure the image remains distinct at all sizes. For example, you might remove fine details and unnecessary features, simplifying the image and exaggerating primary features. If you need to make such changes, keep them subtle so that your app icon remains visually consistent in every context.

 

 

좌측의 경우 512512 픽셀 이므로 나침반의 작은 눈금이 보이지만, 우측의 경우 1616 픽셀 이므로 눈금이 표시되지 않는다.

 

꽉 찬 사각형의 이미지를 기본으로 디자인하라. 대부분의 플랫폼에서 아이콘의 코너는 플랫폼에 맞게 자동적으로 조절된다. 예를 들어 visionOS, watchOS에서는 자동적으로 원형으로 코너가 만들어진다. Mac Catalyst로 만든 앱의 아이콘은 둥근 직사각형 모양이 되지만 MacOS 앱 아이콘은 정확하게 원형으로 만들어야 한다. visionOS와 tvOS의 경우 처럼 계층화된 경우에는 아래 부분이 일부 잘린 것처럼 하여 바닥에 붙게 하는 것도 좋다.

앱 아이콘의 대안을 만들어 두어라. iOS, iPadOS, tvOS, and visionOS에서 사람들은 아이콘의 버전을 선택할 수 있다. 이는 앱이나 게임과의 연결을 강화하고 경험을 향상시킬 수 있다. 예를 들어 운동 관련 앱의 경우 좋아하는 팀에 따라 다른 아이콘을 보여줄 수 있다. 이러한 대안을 제시함으로써 경험과 내용에 있어서 밀접한 영향을 미칠 수 있다. 그러나 이를 활용하는 경우 사용자가 다른 앱의 아이콘으로 오해할 만한 버전을 만들어서는 안 된다. 아이콘을 변경하고 싶은 경우 앱의 설정에 들어가서 바꿀 수 있도록 해야 한다.

애플 하드웨어의 제품을 복제하지 마라. 애플 상품은 보장받으며 앱의 아이콘으로서 재사용되어서는 안된다.

Design your icon as a full-bleed square image. On most platforms, the system applies a mask that automatically adjusts icon corners to match the platform’s aesthetic. For example, visionOS and watchOS automatically apply a circular mask. Although the system applies the rounded rectangle appearance to the icon of an app created with Mac Catalyst, you need to create your macOS app icon in the correct rounded shape; for guidance, see macOS. Note that for the layered app icons in visionOS and tvOS, full-bleed content is best suited to the bottom layer. For downloadable production templates that help you create app icons for each platform, see Apple Design Resources.

Consider offering an alternate app icon. In iOS, iPadOS, tvOS, and visionOS, people can choose an alternate version of an icon, which can strengthen their connection with the app or game and enhance their experience. For example, a sports app might offer different icons for different teams. Make sure that each alternate app icon you design remains closely related to your content and experience; avoid creating a version that people might mistake for the icon of a different app. When people want to switch to an alternate icon, they can visit your app’s settings.

 

 

+) HIG를 공부하고

운동 관련 앱의 경우 좋아하는 팀에 맞게 앱 아이콘을 바꿀 수 있다는 점이 인상 깊었다. 이러한 요소를 활용하여 앱을 만들어보고 싶다. 굳이 팀이 아니더라도 레벨에 맞게 앱의 아이콘이 바뀌는 것도 재밌을 것 같다.

 

픽셀에 영향을 받지 않게 일관된 디자인을 하는 것이 무슨 말인지 처음에 이해가 되진 않았지만, 나침반 예시를 보며 바로 이해할 수 있었다. 한눈에 보아도 나침반 앱이구나! 할 수 있는 것은 복잡한 디자인을 고수하지 않고 직관적으로 사용자의 일관된 경험에 초점을 맞추려는 노력이라고 생각한다. 사용자 경험을 중시한다는 것이 단순히 버튼의 크기는 몇 픽셀 이상으로 하세요. 이런 것에 그치지 않고 어떤 상황에서도 일관된 경험! 을 제공하는 것이 진정한 사용자 경험이라는 것을 깨달았다. HIG를 공부할수록 정말 늦었지만 이제라도 HIG를 공부한 게 다행이라는 생각이 든다.