Custom Icons

If your app includes tasks or modes that can’t be represented by a system icon, or if the system icons don’t match your app’s style, you can create your own icons.

앱에 시스템 아이콘으로 표시 할 수 없는 작업이나 모드가 포함되어 있거나 시스템 아이콘이 앱 스타일과 일치하지 않는 경우 자신의 아이콘을 만들 수 있습니다.

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.

글리프로 아이콘을 디자인하십시오. 글리프는 템플릿 이미지 라고도 하며 투명도, 안티 앨리어싱 및 마스크를 그것의 모양응 정의하는 마스트크를 사용하는 그림자가 없는 단색 이미지입니다. 글리프는 컨텍스트 및 사용자 상호 작용을 기반으로 적절한 모양 (예 : 채색, 강조 및 생동감 포함)을 자동으로 수신합니다. 네비게이션바, 탭바, 툴바 및 홈 화면 빠른 동작을 비롯한 다양한 표준 인터페이스 요소가 글리프를 지원합니다.

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 배율로 글리프를 준비하고 PDF로 저장하십시오. PDF는 고해상도의 확장을 허용하는 벡터 형식이므로 일반적으로 앱에 단일 @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.

아이콘에 텍스트를 포함하지 마십시오. 텍스트가 필요한 경우, 아이콘 아래에 레이블을 표시하고 적절하게 배치를 조정하십시오.

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 제품은 저작권이 있으며 아이콘이나 이미지에 복제할 수 없습니다. 일반적으로 하드웨어 설계가 자주 변경되고 아이콘이 오래된 것처럼 보일 수 있으므로 장치의 복제본은 표시하지 않습니다.

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.

무엇보다 앱의 아이콘 모음은 시각적으로 일관성이 있어야합니다. 개별 아이콘 디자인의 무게가 다른 경우 이 효과를 얻으려면 일부 아이콘이 다른 아이콘보다 약간 클 필요가 있습니다.

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.

사용자 지정 네비게이션바 및 툴바 아이콘을 준비할 때는 다음 크기를 지침으로 사용하지만 균형을 만들기 위해 필요에 따라 조정합니다.

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.

세로 방향에서는 탭 제목 위에 탭바 아이콘이 나타납니다. 가로 방향에서는 아이콘과 제목이 나란히 표시됩니다. 장치 및 방향에 따라 시스템에 일반 탭바 또는 소형 탭바가 표시됩니다. 앱에는 두 크기의 맞춤 탭 막대 아이콘이 포함되어야합니다.

Custom Icons - Icons and Images - iOS - Human Interface Guidelines - Apple Developer