[HIG] Icons 아이콘

 🗣 06. H.I.G에서 읽어본 Icons

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

1) 아이콘

효과적인 아이콘이란 하나의 개념을 사람들이 즉시 이해하는 방식으로 표현하는 그래픽 자산이다.
앱과 게임은 다양한 종류의 간단한 아이콘을 활용하여 아이템, 행동, 모드 등 사용자가 원하는 것을 선택하도록 도울 수 있다. 앱 아이콘과 달리 그림자 효과, 감도 효과 그리고 밝기와 관련된 시각적으로 상세한 요소는 앱의 성격을 강화해 준다.
인터페이스 아이콘은 일반적으로 단순한 정보를 전달하기 위해 간결한 모양과 간단한 아이콘을 사용한다.
윤곽선(글리프) 혹은 템플릿 이미지라고 불리는 인터페이스 아이콘을 디자인하거나 SF Symbols에서 기호를 선택하여 필요에 맞게 디자인할 수 있다. 인터페이스 아이콘과 기호는 검은색 그리고 투명색을 사용하여 모양을 정의한다. 이러한 시스템은 각 이미지의 검은색 영역에서 다른 색상을 적용할 수 있다.

Icons

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.

 
 

2) 좋은 예시

쉽게 알아볼 수 있고 간단한 디자인을 하라. 너무 많은 디테일은 인터페이스 아이콘을 혼란스럽고 읽기 어렵게 만들 수 있다. 간단하고 보편적인 디자인을 통해 많은 사람들이 빠르게 알아볼 수 있도록 하는 것이 좋다. 일반적으로 아이콘은 익숙한 시각적 효과를 보여줄 때 빛을 발휘하는데, 아이콘의 내용은 사람들의 행동과 직접적인 관련이 있다.
일관된 아이콘을 활용하여 화면의 모든 요소에서 유지하라. 오직 커스텀 된 아이콘만 사용하거나 섞어서 사용하는 경우, 시스템 아이콘만 사용하는 경우. 모든 경우에서 아이콘은 일관된 크기, 세부 특징, 두께를 사용해야 한다. 아이콘의 시각적인 무게에 따라 다른 아이콘과 시각적으로 일치하는지 확인하기 위해 크기를 조정해야 할 수도 있다.

Best practices

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 need to 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.

이러한 경우 시각적으로 중심이 잡힐 때까지 아이콘의 위치를 약간 조정할 수 있다. 패딩을 포함한 에셋을 만드는 경우, 기하학적으로 에셋 자체의 중심을 기준으로 시각적으로 중심에 배치할 수 있다.

기하학을 활용해 조정하는 것은 작지만 앱 전체의 외관에 큰 영향을 미칠 수 있다.

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.

Adjustments for optical centering are typically very small, but they can have a big impact on your app’s appearance.

 

필요한 경우, 두 가지 버전의 인터페이스 아이콘을 제공하여 고를 수 있도록 하라. 자동으로 선택을 표시하는 아이콘에 안 해서는 아이콘에 대해 선택된 경우와 선택되지 않은 경우. 2가지를 모두 제공할 필요는 없다. 예를 들어 visionOS와 iOS의 사이드 바와 탭바 그리고 macOS의 툴바는 강조 색상 또는 배경 상태를 통해 선택된 상태를 보여준다.
비록 iOS와 visionOS의 툴바를 사용할 때에 선택된 아이콘과 선택되지 않은 아이콘 모두를 제공하고 싶을 수 있지만,
상태에 따라 배경의 모양을 변경하는 버튼을 사용하는 것이 더 일반적이다.
포괄적인 디자인을 만들어라. 특정 성별에 대한 불필요한 언급 없이 인간의 모습을 묘사하는 것을 선호하라. 또한 아이콘이 모든 사람들에게 환영받고 이해될 수 있도록 해야 한다.
의미를 전달해야 하는 경우에 한해서 디자인에 글을 포함시켜라. 예를 들어 텍스트 형식의 아이콘을 사용하여 전달하는 것이 개념을 전달하는데 가장 직접적인 방법이다. 아이콘을 활용할 때 개별적인 문자를 표시해야 하는 경우는 로컬화 해야 한다. 텍스트의 한 구절을 표시하는 경우 오른쪽에서 왼쪽으로 이동할 경우를 대비하여 플립 버전을 포함해야 한다.

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.

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.

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.

 

만약 사용자 지정 인터페이스 아이콘을 만든다면 PDF와 SVG와 같은 벡터 형식을 사용한다. 시스템은 고해상도를 위해 벡터 기반의 인터페이스를 자동으로 확장하므로 고해상도 버전을 제공할 필요가 없다. 대조적으로 PNG의 경우 그림자 효과, 질감 효과, 그리고 밝기 효과를 지원하기에 다양한 버전의 PNG 파일을 제공해야 한다. 또한 SF Symbol을 만들고 인접한 텍스트와 일치하도록 설정할 수도 있다.
커스텀 인터페이스 아이콘에 대한 대체 텍스트를 제공하라. 설명에 관한 대체 텍스트는 보이지는 않지만, 보이스 오버 기능을 사용할 때 사용된다. 시각적 장애가 있는 경우 설명을 통해 아이콘을 이해할 수 있다.
애플의 하드웨어를 복제하지 마라. 하드웨어 디자인은 자주 바뀌는 경향이 있으며 아이콘 및 콘텐츠가 예전의 정보인 것처럼 보이게 만들 수 있다. 따라서 Apple Design Resources 또는 다양한 Apple 제품을 나타내는 SF Symbol에서 사용 가능한 이미지만 사용하면 된다.

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.

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.

 
 

3) 플랫폼 고려사항

iOS, iPadOS, tvOS, visionOS, watchOS 는 추가적으로 고려할 사항이 없다.
macOS
만약 macOS 앱에서 사용자 정의 문서 유형을 사용하는 경우 이를 나타내는 문서 아이콘을 만들 수 있다. 전통적으로 문서 아이콘은 오른쪽 위 모서리가 접힌 종이처럼 보인다. 이런 독특한 모양은 아이콘 크기가 작더라도 문서를 다른 앱 혹은 콘텐츠와 구별하는 데 도움이 된다.
지원하는 파일 형식이 문서 아이콘을 제공하지 않는 경우에 macOS는 앱 아이콘과 파일 확장자를 캔버스에 합성해서 사용자를 위해 문서 아이콘을 만든다.

Platform considerations

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.

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.

 

예를 들어, 시스템에서 제공하는 미리 보기 기능을 jpg 파일로 제공한다. 몇몇 경우에서 앱에서 처리하는 다양한 파일 유형을 나타내는 문서 아이콘을 세트로 만드는 것이 합리적일 수 있다. 예를 들어 Xcode는 커스텀 된 문서 아이콘을 사용하여 사람들이 프로젝트, AR Object, 그리고 Swift 코드를 구별할 수 있게 도와준다.
 

커스텀 문서 아이콘을 만들기 위해, 배경색과 가운데 채울 사진, 그리고 글을 준비해야 한다. macOS11부터는 시스템 계층, 위치 및 필요에 따라 이러한 요소를 마스킹하고 접힌 모서리 아이콘 모양에 합성한다.

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. 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.

 

애플 디자인 리소스는 이러한 템플릿을 제공하여 사용자로 하여금 배경색을 채우고 이미지를 넣고 문서 아이콘을 만들게 해 준다. 템플릿을 사용할 때는 아래의 지침을 따르면 된다.
간단하게 디자인하여 문서 유형을 명확하게 전달하라. 배경을 채우거나 이미지를 중앙에 배치하거나 둘 다 사용하는 경우에는 복잡하지 않은 모양과 적은 색상을 사용해라. 문서 아이콘은 16x16 픽셀로 보일 수 있어야 하며, 모든 크기에서 인식될 수 있어야 한다.
간단하고 표현이 잘 되는 이미지를 배경으로 활용하는 것은 사람들이 쉽게 문서를 이해하고 인지할 수 있도록 도와줄 것이다. 예를 들어 Xcode 그리고 TextEdit는 모두 중심 이미지가 포함되지 않은 배경 이미지를 사용한다.

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.

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.

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.

 

복잡성을 줄여 낮은 버전에서도 아이콘이 잘 보이도록 하라. 아이콘의 디테일은 큰 버전에서 잘 보이지만 작은 버전에서는 흐리게 보일 수 있다. 예를 들어 하트 아이콘의 경우에서 선명하게 유지될 수 있도록 하기 위해 줄을 줄이고 줄을 줄인 픽셀 그리드에 맞추어 선을 두껍게 만들 수 있다. 16\x16 픽셀에서는 그리드 라인을 삭제할 수 있다.
 

중요한 정보를 오른쪽 상단에 배치하지 마라. 시스템은 자동적으로 문서 형태의 아이콘을 만들며 오른쪽 모서리 부분을 접은 모양으로 만든다. 배경은 아래의 나열된 크기로 이미지를 만든다.

• 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

 
익숙한 아이콘을 활용하여 문서의 유형이나 앱과의 연결을 잘 표현할 수 있다면, 이를 나타내는 중심 이미지를 작성하라. 디자인은 간단하게, 모호한 이미지는 명확하고 이해하기 쉽게 각각의 크기로 만들어라. 중심 이미지는 전체 문서 아이콘 크기의 절반이 되어야 한다. 예를 들어 32x32 px문서 아이콘의 중앙 이미지는 16x16픽셀 크기의 이미지가 되어야 한다. 중앙 이미지는 아래 크기를 따른다.

• 256x256 px @1x, 512x512 px @2x
• 128x128 px @1x, 256x256 px @2x
• 32x32 px @1x, 64x64 px @2x
• 16x16 px @1x, 32x32 px @2x

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. 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. 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:

 
이미지 캔버스를 기준으로 10% 정도의 여백을 두어 이미지를 만들어야 한다. 비록 이러한 여백이 있다해도 이미지는 해당 여백의 영역을 침범할 수 있지만 이미지는 80%를 차지하는 게 가장 좋다. 예를 들어 대부분의 중앙 이미지는 256x256 픽셀의 배경을 기준으로 205x205픽셀이 적합하다.
 

사용자가 문서 유형을 이해하는데 도움이 되는 간단한 용어를 정하라. 기본적으로 시스템은 문서 아이콘의 하단 가장자리에 문서의 확장자를 표시하지만 확장자가 생소한 경우에는 보다 설명적인 용어를 사용할 수 있다. 예를 들어 SceneKit 장면 파일의 문서 아이콘은 파일 확장자 scn 대신 scene이라는 용어를 사용한다.
시스템은 자동적으로 문서의 아이콘에 맞게 글자의 크기를 조정한다. 따라서 작은 크기로 읽을 수 있을 정도로 짧은 용어를 사용해야 한다. 또한 기본적으로 시스템은 텍스트의 모든 문자를 대문자로 바꾼다.

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. 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.

 
 

+) HIG를 공부하고

다운로드 아이콘과 관련된 설명에서 기하학적 접근과 시각적 접근으로 나누어 아이콘을 바라보는 것이 새로웠다. 보통 다운로드 아이콘을 사용할 때는 SF Symbols에서 가져다 사용만 했는데 이런 눈속임? 이 있을 줄은 상상도 못 했다.

macOS에서 미리 보기 기능을 지원하는 내용이 정말 맥북 선택에 있어 최고의 기능이라고 생각했다. 삼성 노트북을 쓸 땐 불편함을 느끼지 못했지만, 맥북을 쓰다 삼성 노트북을 쓰니 이토록 불편할 수 없었다. 애플 생태계라는 말이 단순히 제품의 디자인 때문에 나온 말이 아니라, 이처럼 한번 애플의 UI에 익숙해지면 다른 기기를 사용했을 때 느껴지는 사소한 불편함 때문이라고 생각한다.
이러한 하나의 문서 아이콘도 단순하게 만들어지는 줄 알았는데, 배경색을 채우고 사진을 넣고 글을 넣고, 접힌 모서리 이미지를 합성한다는 점에서 단 하나의 UI도 단순하게 만드는 게 아니구나 깨달았다.