An effective icon is a graphic asset that expresses a single concept in ways people instantly understand.
효과적인 아이콘은 하나의 개념을 사람들이 바로 이해할 수 있도록 나타내는 그래픽 에셋입니다.
Apps and games use a variety of simple icons to help people understand the items, actions, and modes they can choose. Unlike app icons, which can use rich visual details like shading, texturing, and highlighting to evoke the app’s personality, an interface icon typically uses streamlined shapes and touches of color to communicate a straightforward idea.
앱과 게임들은 다양한 단순 아이콘을 사용해 사람들이 선택할 수 있는 항목, 액션 및 모드를 이해할 수 있도록 도와줍니다. 음영, 질감 표시, 강조 표시와 같은 풍부한 시각적 세부 정보를 사용해 앱의 개성을 나타낼 수 있는 앱 아이콘과 달리, 인터페이스 아이콘은 일반적으로 간소화된 모양과 색상을 사용해 간단한 아이디어를 전달합니다.
→ 인터페이스 아이콘은 앱 아이콘보다는 더 간단한 외형으로 간단한 개념을 전달합니다.
역자 첨언
You can design interface icons — also called glyphs or template images — or you can choose symbols from the SF Symbols app, using them as-is or customizing them to suit your needs. Both interface icons and symbols use black and clear colors to define their shapes; the system can apply other colors to the black areas in each image. For guidance, see SF Symbols.
glyph와 template image라고도 하는 인터페이스 아이콘을 디자인하거나, 또는 SF Symbols에서 심볼을 원하는 대로 커스텀해 사용할 수도 있습니다. 인터페이스 아이콘과 심볼 모두 검은색과 선명한 색상을 사용해 모양을 구성합니다. 시스템은 각 이미지의 검은 영역에 다른 색상을 적용할 수도 있습니다. SF Symbols에서 더 자세한 가이드를 참조하세요.
→ 직접 디자인할 수도 있고, SF Symbols를 커스텀할 수도 있습니다.
역자 첨언
Create a recognizable, highly simplified design. Too many details can make an interface icon confusing or unreadable. Strive for a simple, universal design that most people will recognize quickly. In general, icons work best when they use familiar visual metaphors that are directly related to the actions they initiate or content they represent.
인식하기 쉽고 매우 간소화된 디자인을 추구하세요. 너무 많은 디테일들은 인터페이스 아이콘을 알아볼 수 없거나 혼란스럽게 만듭니다. 대부분의 사람들이 빠르게 인식할 수 있는 간결하고 보편적인 디자인을 추구하세요. 일반적으로, 아이콘은 그것이 시작하는 액션이나 표현하는 내용과 직접적으로 관련된 친숙한 시각적 비유를 사용할 때 가장 효과적입니다.
→ 너무 많은 디테일을 넣지 말고, 직관적이고 단순한 아이콘을 만드세요.
역자 첨언
Maintain visual consistency across all interface icons in your app. Whether you use only custom icons or mix custom and system-provided ones, all interface icons in your app should use a consistent size, level of detail, stroke thickness (or weight), and perspective. Depending on the visual weight of an icon, you may need to adjust its dimensions to ensure that it appears visually consistent with other icons.
앱 내 모든 인터페이스 아이콘에서 시각적 일관성을 유지하세요. 사용자 지정 아이콘만 사용하든 사용자 지정 및 시스템 제공 아이콘을 혼합하든, 앱의 모든 인터페이스 아이콘은 일관된 크기, 세부 수준, 선 굵기(또는 두께) 및 시점을 사용해야 합니다. 아이콘의 시각적 가중치에 따라, 다른 아이콘과 시각적으로 일관돼 보이도록 크기를 조정해야 할 수도 있습니다.
→ 앱 내의 아이콘들이 모두 일관성을 가지도록 디테일을 조정하세요.
역자 첨언
In general, match the weights of interface icons and adjacent text. Unless you want to emphasize either the icons or the text, using the same weight for both gives your content a consistent appearance and level of emphasis.
일반적으로, 인터페이스 아이콘과 인접한 텍스트의 가중치를 일치시키세요. 아이콘이나 텍스트를 강조하고 싶지 않다면, 둘 다에 대해 동일한 가중치를 사용하면 콘텐츠에 일관된 모양과 강조 수준을 제공합니다.
→ 인터페이스 아이콘과 텍스트를 같이 사용할 경우, 비슷한 가중치를 사용하세요.
역자 첨언
If necessary, add padding to a custom interface icon to achieve optical alignment. Some icons — especially asymmetric ones — can look unbalanced when you center them geometrically instead of optically. For example, the download icon shown below has more visual weight on the bottom than on the top, which can make it look too low if it’s geometrically centered.
필요한 경우, 시각적 정렬을 위해 커스텀 인터페이스 아이콘에 내부 여백을 추가하세요. 특히 비대칭적인 아이콘들은 시각적 정렬이 아닌 기하학적으로 정렬하면 균형이 맞지 않아 보일 수도 있습니다. 예를 들어, 아래의 다운로드 아이콘은 위쪽보다 아래쪽에 시각적 가중치가 더 많기 때문에 기하학적으로 중앙에 위치시키면 너무 낮아 보일 수 있습니다.
An asymmetric icon can look off center even thoguh it’s not.
비대칭적인 아이콘은 중앙에서 벗어나 보일 수 있습니다.
In such cases, you can slightly adjust the position of the icon until it’s optically centered. When you create an asset that includes your adjustments as padding around an interface icon (as shown below on the right), you can optically center the icon by geometrically centering the asset.
이러한 경우에는, 아이콘의 위치를 약간 조정해 시각적으로 중앙에 위치시킬 수 있습니다. 아래처럼 인터페이스 아이콘 주위에 패딩같은 조정요소를 포함하는 에셋을 만들면, 에셋을 기하학적으로 중앙에 위치시키면 아이콘을 시각적으로 중앙에 배치할 수 있습니다.
→ 아이콘에 약간의 조정요소(패딩 등)를 포함시켜 두면, 기하학적으로 중앙정렬했을 때 시각적으로도 중앙정렬 되어 보입니다.
Moving the icon a few pixels higher optically centers it; including the pixels in padding simplifies centering.
아이콘을 몇 픽셀만 올리면 시각적으로 정렬돼 보입니다. 패딩의 픽셀을 포함해서 정렬을 단순화시킵니다.
Adjustments for optical centering are typically very small, but they can have a big impact on your app’s appearance.
시각적 정렬을 위한 조정은 일반적으로 매우 사소하지만 앱의 외관에 큰 영향을 미칠 수 있습니다.
Before optical centering (left) and after optical centering (right).
시각적 정렬 전(왼), 후(오)
Provide a selected-state version of an interface icon only if necessary. You don’t need to provide selected and unselected appearances for an icon that’s used in controls and areas that automatically indicate selection. For example, sidebars and tab bars in visionOS and iOS, and macOS toolbars, can convey selection state by applying your app’s accent color or adding a background appearance.
필요한 경우에만 인터페이스 아이콘의 선택된 버전을 제공하세요. 자동으로 선택을 나타내는 컨트롤과 영역에서 사용되는 아이콘에 대해 선택 및 선택되지 않은 모양을 제공할 필요가 없습니다. 예를 들어 iOS와 visionOS의 사이드바 및 탭바와 macOS 도구 모음은 앱의 악센트 색상을 적용하거나 배경을 추가해 선택 상태를 전달할 수 있습니다.
In iOS, a selected tab bar icon receives the app’s accent color.
iOS에서, 탭바의 선택된 아이콘은 앱의 악센트 컬러를 사용합니다.
In macOS, a selected toolbar icon receives a darker stroke and a background appearance.
macOS에서, 탭바의 선택된 아이콘은 선이 더 어두워지고 배경이 생깁니다.
Although you might want to provide selected and unselected icons for use in a toolbar or navigation bar in iOS or visionOS, it’s more common to use a button that changes its background appearance according to its state.
iOS 또는 visionOS의 도구 모음과 네비게이션 바에 사용하는 아이콘은 선택 상태에 따라 배경 색상을 변경하는 버튼을 사용하는 것이 일반적입니다.
Create inclusive designs. Prefer depicting human figures without unnecessary references to specific genders, and be sure that your icons are welcoming and understandable to everyone. For guidance, see Inclusion.
→ 성별에 치우치지 않은 포괄적인 디자인을 만드세요.
역자 첨언
Include text in your design only when it’s essential for conveying meaning.
의미 전달에 필수적인 경우에만 디자인에 텍스트를 포함하세요.
For example, using a character in an interface icon that represents text formatting can be the most direct way to communicate the concept. If you need to display individual characters in your icon, be sure to localize them. If you need to suggest a passage of text, design an abstract representation of it, and include a flipped version of the icon to use when the context is right-to-left. For guidance, see Right to left.
예를 들어, 문자를 인터페이스 아이콘으로 사용하는 것이 해당 개념을 가장 직접적으로 전달하는 방법일 수 있습니다. 아이콘에서 개별 문자를 표시해야하는 경우, 반드시 현지화하세요. 텍스트 단락을 표현하고 싶다면, 추상적인 표현을 디자인하고, 컨텍스트가 오른쪽에서 왼쪽일 때 사용할 뒤집힌 버전의 아이콘을 포함하세요. 자세한 내용은 Right to left를 참조하세요.
→ 아이콘에 텍스트를 넣는 경우 현지화를 지원해야 하고, 텍스트 단락을 나타내고 싶다면 컨텍스트에 따라 방향을 달리 해 줘야 합니다.
*passage of text: 텍스트 단락. 텍스트의 일부 또는 전체를 나타내는 용어입니다.
Create localized versions of an icon that displays individual characters.
글자를 나타내는 아이콘이라면 현지화하세요.
Create a flipped version of an icon that suggests reading direction.
읽는 방향을 나타내는 뒤집힌 버전의 아이콘을 제작하세요.
If you create a custom interface icon, use a vector format like PDF or SVG. The system automatically scales a vector-based interface icon for high-resolution displays, so you don’t need to provide high-resolution versions of it. In contrast, PNG — used for app icons and other images that include effects like shading, textures, and highlighting — doesn’t support scaling, so you have to supply multiple versions for each PNG-based interface icon. Alternatively, you can create a custom SF Symbol and specify a scale that ensures the symbol’s emphasis matches adjacent text. For guidance, see SF Symbols.
사용자 지정 인터페이스 아이콘을 만드는 경우, PDF 또는 SVG와 같은 벡터 형식을 사용하세요. 시스템은 벡터 기반 인터페이스 아이콘을 자동으로 고해상도 디스플레이에 맞게 확대/축소합니다. 따라서 고해상도 버전을 따로 제공할 필요가 없습니다. 반면에, 음영, 텍스처 및 강조 표시와 같은 효과를 포함하는 앱 아이콘 및 기타 이미지에 사용되는 PNG는 스케일링을 지원하지 않으므로 각 PNG 기반 인터페이스 아이콘에 대해 여러 버전을 제공해야 합니다. 또는, 사용자 지정 SF Symbol을 만들고 해당 심볼의 강조가 인접한 텍스트와 일치하도록 하는 축적(scale)을 지정할 수 있습니다. 자세한 내용은 SF Symbols를 참조하세요.
→ PDF, SVG로 만든 벡터 아이콘은 시스템이 자동으로 스케일링을 해 주지만, PNG로 만든 기타 아이콘들은 여러 버전을 제공해야 합니다.
Provide alternative text labels for custom interface icons. Alternative text labels — or accessibility descriptions — aren’t visible, but they let VoiceOver audibly describe what’s onscreen, simplifying navigation for people with visual disabilities. For guidance, see Content descriptions.
사용자 정의 인터페이스 아이콘에 대한 대체 텍스트 라벨을 제공하세요. 대체 텍스트 레이블 또는 접근성 설명은 보이지는 않지만, 시각 장애를 가진 사용자에게 화면에 무엇이 있는지 간단하게 설명하여 탐색을 용이하게 합니다. 자세한 내용은 콘텐츠 설명을 참조하세요.
→ 시각 장애인들을 위한 아이콘 설명(대체 텍스트 라벨)을 제공하세요.
역자 첨언
Avoid using replicas of Apple hardware products. Hardware designs tend to change frequently and can make your interface icons and other content appear dated. If you must display Apple hardware, use only the images available in Apple Design Resources or the SF Symbols that represent various Apple products.
애플 하드웨어 제품의 레플리카 사용을 피하세요. 하드웨어 디자인은 자주 변경되며, 인터페이스 아이콘 및 기타 콘텐츠가 오래된 것으로 보일 수 있습니다. 애플 하드웨어를 표시해야 할 경우, Apple Design Resources에서 사용 가능한 이미지 또는 다양한 애플 제품을 나타내는 SF Symbols만 사용하세요.
→ 애플 제품 그대로 아이콘을 디자인하는 것을 피하세요.
역자 첨언
No additional considerations for iOS, iPadOS, tvOS, visionOS, or watchOS.
macOS
Document icons
If your macOS app can use a custom document type, you can create a document icon to represent it. Traditionally, a document icon looks like a piece of paper with its top-right corner folded down. This distinctive appearance helps people distinguish documents from apps and other content, even when icon sizes are small.
macOS 앱이 커스텀 문서 형식을 사용할 수 있다면, 이를 나타내는 문서 아이콘을 만들 수 있습니다. 전통적으로 문서 아이콘은 오른쪽 상단 모서리가 접힌 종이의 모양입니다. 이 독특한 외관은 아이콘 크기가 작더라도 사람들이 문서와 앱 및 기타 콘텐츠를 구별하는 데 도움을 줍니다.
역자 첨언
If you don’t supply a document icon for a file type you support, macOS creates one for you by compositing your app icon and the file’s extension onto the canvas. For example, Preview uses a system-generated document icon to represent JPG files.
만약 지원하는 파일 유형에 대한 문서 아이콘을 제공하지 않는다면, macOS는 해당 파일의 확장자와 앱 아이콘을 합성하여 자동으로 문서 아이콘을 만듭니다. 예를 들어, Preview는 JPG 파일을 대표하는 시스템 생성 문서 아이콘을 사용합니다.
→ 지원하는 파일 유형의 아이콘을 따로 제공하지 않는다면 macOS가 알아서 아이콘을 만들어 줍니다.
In some cases, it can make sense to create a set of document icons to represent a range of file types your app handles. For example, Xcode uses custom document icons to help people distinguish projects, AR objects, and Swift code files.
경우에 따라서는 앱이 처리하는 다양한 파일 유형을 나타내는 문서 아이콘 세트를 만드는 것이 좋을 수도 있습니다. 예를 들어, Xcode는 커스텀 문서 아이콘을 사용하여 사람들이 프로젝트, AR 개체 및 Swift 코드 파일을 구별할 수 있도록 도와줍니다.
To create a custom document icon, you can supply any combination of background fill, center image, and text. Beginning in macOS 11, the system layers, positions, and masks these elements as needed and composites them onto the familiar folded-corner icon shape.
커스텀 문서 아이콘을 만들려면, 배경, 중앙 이미지 및 텍스트를 원하는 대로 조합할 수 있습니다. macOS 11에서부터 시스템은 이러한 요소들을 필요에 따라 층으로 구성하고 위치시키며 마스킹하여 친숙한 접힌 모서리 아이콘 모양으로 합성합니다.
→ 배경, 이미지, 텍스트(셋 중 하나라도)를 제공하면 macOS가 알아서 문서 아이콘을 만들어 줍니다.
Background fill
center image
text
macOS 11 composites the elements you supply to produce your custom document icon.
macOS 11은 제공한 요소들을 조합해서 커스텀 문서 아이콘을 생성합니다.
Apple Design Resources provides a template you can use to create a custom background fill and center image for a document icon. As you use this template, follow the guidelines below.
Apple Design Resources에서 문서 아이콘에 대한 커스텀 배경과 중앙 이미지를 만들 수 있는 템플릿을 제공합니다. 이 템플릿을 사용할 때는 다음 지침들을 따르세요.
Design simple images that clearly communicate the document type. Whether you use a background fill, a center image, or both, prefer uncomplicated shapes and a reduced palette of distinct colors. Your document icon can display as small as 16x16 px, so you want to create designs that remain recognizable at every size.
문서 유형을 명확하게 전달하는 간단한 이미지를 디자인하세요. 배경을 사용하든, 중앙 이미지를 사용하든, 또는 둘 다를 사용하든 단순한 모양과 축소된 컬러 팔레트를 선호하세요. 문서 아이콘은 16x16 px만큼 작게 표시할 수 있으므로 모든 사이즈에서 인식할 수 있는 디자인을 만들어야 합니다.
→ 아이콘은 아주 작게 표시될 수 있기 때문에 간소하고 인식이 쉬운 디자인을 선호하세요.
Designing a single, expressive image for the background fill can be a great way to help people understand and recognize a document type. For example, Xcode and TextEdit both use rich background images that don’t include a center image.
간단하고 표현적인 이미지를 배경으로 디자인하는 것은 사람들이 문서 유형을 이해하고 인식하는 데 도움이 되는 좋은 방법이 될 수 있습니다. 예를 들어, Xcode와 TextEdit는 모두 중앙 이미지를 포함하지 않는 풍부한 배경 이미지를 사용합니다.
→ 중앙 이미지를 따로 사용하지 않고 배경(background fill)을 디자인하는 것이 효과적일 수도 있습니다.
Consider reducing complexity in the small versions of your document icon. Icon details that are clear in large versions can look blurry and be hard to recognize in small versions. For example, to ensure that the grid lines in the custom heart document icon remain clear in intermediate sizes, you might use fewer lines and thicken them by aligning them to the reduced pixel grid. In the 16x16 px size, you might remove the lines altogether.
작은 버전의 문서 아이콘의 복잡성을 줄이는 것을 고려해 보세요. 큰 버전에서 명확한 아이콘 디테일은 작은 버전에서는 흐릿해 보이고 인식하기 어려울 수 있습니다. 예를 들어, 커스텀 하트 문서 아이콘의 격자 선이 중간 크기로 선명하게 유지되도록 하려면, 픽셀 그리드에 맞추어 라인 수를 줄이고 굵게 만들 수 있습니다. 16x16 px 크기에서는 라인을 제거할 수도 있습니다.
→ 큰 크기의 아이콘에서는 잘 보이던 디테일이 작은 아이콘에서는 인식이 어려워지므로, 디테일을 제거하는 것도 좋은 방법입니다.
The 32x32 px icon has fewer grid lines and a thicker EKG line.
32x32 px 아이콘은 격자 선이 적고 EKG 라인(심전도 라인)이 두껍습니다.
The 16x16 px @2x icon retains the EKG line but has no grid lines.
16x16 px @2x 아이콘은 EKG라인은 유지하되 격자 선이 사라집니다.
The 16x16 px @1x icon has no EKG line and no grid lines.
16x16 px @1x 아이콘은 EKG라인과 격자 선 모두가 사라집니다.
Avoid placing important content in the top-right corner of your background fill. The system automatically masks your image to fit the document icon shape and draws the white folded corner on top of the fill. Create a set of background images in the sizes listed below.
배경의 오른쪽 상단 모서리에 중요한 콘텐츠를 배치하지 마세요. 시스템은 문서 아이콘 모양에 맞게 이미지를 자동으로 마스킹하고 배경 위에 흰색 접힌 모서리를 그립니다. 아래 나열된 크기의 배경 이미지 세트를 만드세요.
•
512x512 px @1x, 1024x1024 px @2x
•
256x256 px @1x, 512x512 px @2x
•
128x128 px @1x, 256x256 px @2x
•
32x32 px @1x, 64x64 px @2x
•
16x16 px @1x, 32x32 px @2x
If a familiar object can convey a document’s type or its connection with your app, consider creating a center image that depicts it. Design a simple, unambiguous image that’s clear and recognizable at every size. The center image measures half the size of the overall document icon canvas. For example, to create a center image for a 32x32 px document icon, use an image canvas that measures 16x16 px. You can provide center images in the following sizes:
친숙한 물체가 문서의 유형이나 앱과의 연결을 전달할 수 있다면, 그것을 묘사하는 중앙 이미지를 만드는 것을 고려해 보세요. 크기에 관계없이 명확하고 인식하기 쉬운 간단하고 명확한 이미지를 디자인하세요. 중앙 이미지는 전체 문서 아이콘 캔버스 크기의 절반을 측정합니다. 예를 들어, 32x32 px 문서 아이콘의 중앙 이미지를 만들려면, 16x16 px를 측정하는 이미지 캔버스를 사용하세요. 다음과 같은 크기의 중앙 이미지를 제공할 수 있습니다.
•
256x256 px @1x, 512x512 px @2x
•
128x128 px @1x, 256x256 px @2x
•
32x32 px @1x, 64x64 px @2x
•
16x16 px @1x, 32x32 px @2x
Define a margin that measures about 10% of the image canvas and keep most of the image within it. Although parts of the image can extend into this margin for optical alignment, it’s best when the image occupies about 80% of the image canvas. For example, most of the center image in a 256x256 px canvas would fit in an area that measures 205x205 px.
이미지 캔버스의 약 10%를 측정하는 여백을 정의하고 대부분의 이미지를 그 안에 보관하세요. 이미지의 일부는 광학 정렬을 위해 이 여백으로 확장될 수 있지만, 이미지가 이미지 캔버스의 약 80%를 차지할 때 가장 좋습니다. 예를 들어, 256x256 px 캔버스의 중심 이미지 대부분은 205x205 px의 영역에 맞습니다.
→ 이미지 캔버스의 10% 정도를 여백으로 남겨두고 이미지를 디자인하세요.
Specify a succinct term if it helps people understand your document type. By default, the system displays a document’s extension at the bottom edge of the document icon, but if the extension is unfamiliar you can supply a more descriptive term. For example, the document icon for a SceneKit scene file uses the term scene instead of the file extension scn. The system automatically scales the extension text to fit in the document icon, so be sure to use a term that’s short enough to be legible at small sizes. By default, the system capitalizes every letter in the text.
사용자가 문서 유형을 이해하는 데 도움이 된다면 간결한 용어를 지정하세요. 기본적으로, 시스템은 문서 아이콘의 하단 가장자리에 문서의 확장자를 표시하지만, 확장자가 익숙하지 않은 경우 더 설명적인 용어를 제공할 수 있습니다. 예를 들어, SceneKit의 scene파일의 문서 아이콘은 파일 확장자 .scn 대신 scene이라는 용어를 사용합니다. 시스템은 문서 아이콘에 맞게 확장자 텍스트를 자동으로 조정하므로, 작은 사이즈에서도 읽을 수 있을 만큼 짧은 용어를 사용해야 합니다. 기본적으로, 시스템은 텍스트의 모든 문자를 대문자로 바꿉니다.
→ 특정 경우에는 해당 확장자보다 더 쉽게 확장자를 이해할 수 있는 텍스트를 제공하는 것이 좋습니다.
Resources
Related
Videos
Change log
작성 날짜 | 작성자 | 수정사항 |
2023/5/2 | 디온 | 초기 번역 |
2023/12/15 | 디온 | visionOS 내용 추가 |
2024/1/1 | 디온 | 배포 |