HIG 번역) Icons and Images - Custom Icons

Custom Icons (iOS 12 and Earlier)

In iOS 13 or later, prefer using SF Symbols to represent tasks and modes in your app. If your app is running in iOS 12 or earlier, or if you need to create custom bitmap icons, follow the guidance below.

iOS 13 이상에서는, 앱의 작업 또는 모드를 나타내기 위해 SF Symbols 사용을 선호합니다. 앱이 iOS 12 이하에서 작동되거나 커스텀 비트맵 아이콘을 만들어야 한다면, 아래 가이드를 따르세요.

Create recognizable, highly-simplified designs. Too many details can make an icon confusing or unreadable. Strive for a simple, universal design that most people will recognize quickly and won’t find offensive. The best icons use familiar visual metaphors that are directly related to the actions they initiate or content they reveal.

인지할 수 있고, 매우 간소화 한 디자인을 만드세요. 너무 디테일한 디자인은 아이콘을 혼란스럽고 알아보기 힘들게 할 수 있습니다. 많은 사람들이 빠르게 인식하고, 불쾌감을 느끼지 않는 간단하고 보편적인 디자인을 위해서 노력하세요. 최고의 아이콘은 사용자가 시작하는 행동과 또는 나타내는 콘텐츠와 직접적으로 관련된 친숙한 시각적인 은유를 사용하는 것입니다.

Design icons as glyphs. A glyph, also known as a template image, is a monochromatic image with transparency, anti-aliasing, and no drop shadow that uses a mask to define its shape. Glyphs automatically receive the appropriate appearance—including coloring, highlighting, and vibrancy—based on the context and user interactions. A variety of standard interface elements support glyphs, including navigation bars, tab bars, toolbars, and Home screen quick actions.

아이콘 기호로 아이콘을 디자인하세요. 템플릿 이미지로도 알려진, 아이콘 기호는 투명하고, anti-aliasing, drop shadow가 적용되지 않은 단색의 이미지로, 마스크를 사용하여 그 모양을 정의합니다. 아이콘 기호는 콘텍스트와 사용자 인터랙션에 따라 coloring, highlighting 및 vibrancy를 포함한 적절한 모양을 자동으로 가져옵니다. Navigation bars, tab bars, toolbars 및 Home screen quick actions 등을 포함하여 기본 인터페이스 요소의 다양한 요소들은 아이콘 기호를 지원합니다.

Prepare glyphs with a scale factor of @2x and save them as PDFs. Because PDF is a vector format that allows for high-resolution scaling, it's typically sufficient to provide a single @2x version in your app and allow it to scale for other resolutions.

@2x의 scale factor 아이콘 기호를 준비하고 PDF로 저장하세요. PDF는 vector 형식으로 고해상도 scaling를 가능하게 하기 때문에, 일반적으로 앱에서 하나의 @2x 버전을 제공하고 다른 해상도에 맞게 확장하는 것으로 충분합니다.

Keep your icons consistent. Whether you use only custom icons or mix custom and system icons, all icons in your app should be the same in terms of level of detail, optical weight, stroke weight, position, and perspective.

아이콘의 일관성을 유지하세요. 커스텀 아이콘만을 사용하든지 또는 커스텀과 시스템 아이콘을 혼용하든지, 앱에 있는 모든 아이콘들은 디테일한 수준, 시각적인 두께, 선의 두께, 위치 및 관점 등의 대해서 같아야 합니다.

Make sure icons are legible. In general, solid icons tend to be clearer than outlined icons. If an icon must includes lines, coordinate the weight with other icons and your app's typography.

아이콘을 읽기 쉽도록 하세요. 일반적으로, 색이 채워진 아이콘이 테두리만 있는 아이콘보다 더 선명한 경향이 있습니다. 아이콘이 선을 포함해야만 한다면, 다른 아이콘 및 앱의 타이포그래피와 비슷한 두께를 맞추세요.

Use color to communicate selected and deselected states. Avoid toggling between two different icon designs, like a solid version and an outlined version.

선택되거나 선택되지 않은 상태를 전달하기 위해 색을 사용하세요. 색이 채워진 버전과 경계선이 있는 버전과 같이, 다른 두 아이콘 디자인 간의 전환은 피하세요.

Avoid including text in an icon. If you need text, display a label beneath the icon and adjust its placement accordingly.

아이콘 내에 텍스트를 포함하는 것은 피하세요. 텍스트가 필요하다면, 아이콘 아래에 label을 보여주고, 적절하게 위치를 조정하세요.

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.

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

Provide alternative text labels for icons. Alternative text labels aren’t visible onscreen, but they let VoiceOver audibly describe what's onscreen, making navigation easier for people with visual impairments.

아이콘으로 대체 텍스트 레이블을 제공하세요. 대체 텍스트 레이블은 시각적으로 화면에 보이는 것은 아니지만, VoiceOver가 청각적으로 화면에 있는 것을 설명하게 하여, 시각 장애가 있는 사용자가 이동하기 쉽게 만들어 줍니다.

Custom Icon Sizes

Above all, your app's icon family should be visually consistent in size. If individual icon designs vary in weight, some icons may need to be slightly larger than others to achieve this effect.

무엇보다, 앱의 아이콘 모음들은 시각적으로 일관된 사이즈를 가져야 합니다. 개별 아이콘들의 디자인 크기가 다르다면, 이러한 효과를 얻기 위해 일부 아이콘들은 다른 아이콘보다 약간 커야 할 수 있습니다.

Home Screen Quick Action Icon Size

A Home screen quick action icon appears next to the title. If you need to create a custom icon for your Home screen quick action, use the following sizes for guidance.

Home screen quick action icon은 제목 옆에 나타납니다. Home screen quick action icon을 커스텀으로 제작하기 위해서는, 다음 가이드의 크기를 참조하세요.

Navigation Bar and Toolbar Icon Size

Use the following sizes for guidance when preparing custom navigation bar and toolbar icons, but adjust as needed to create balance.

Custom navigation bar 및 toolbar icons를 준비할 때 다음 가이드의 크기를 참조하지만, 균형을 맞추기 위해 필요에 따라 조정하세요.

Tab Bar Icon Size

In portrait orientation, tab bar icons appear above tab titles. In landscape orientation, the icons and titles appear side-by-side. Depending on the device and orientation, the system displays either a regular or compact tab bar. Your app should include custom tab bar icons for both sizes.

세로 모드에서, tab bar icons는 tab titles 위에 나타납니다. 가로 모드에서, 아이콘과 제목은 나란히 나타납니다. 기기와 방향에 따라서, 시스템은 regular 또는 compact tab bar를 보여줍니다. 앱은 두 사이즈 모두를 위한 custom tab bar icons를 포함해야 합니다.

Target width and height (circular glyphs)

Target width and height (square glyphs)

Target width (wide glyphs)

Target height (tall glyphs)

---

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

감사합니다!