아이콘

효과적인 아이콘은 사람들이 즉시 이해하는 방식으로 단일 개념을 표현하는 그래픽 자산이다.

앱과 게임은 다양한 간단한 아이콘을 사용하여 사람들이 선택할 수 있는 항목, 행동 및 모드를 이해할 수 있도록 도와줍니다. 음영, 텍스처링 및 강조 표시와 같은 풍부한 시각적 디테일을 사용하여 앱의 개성을 불러일으킬 수 있는 앱 아이콘과 달리, 인터페이스 아이콘은 일반적으로 간소화된 모양과 색상 터치를 사용하여 간단한 아이디어를 전달합니다.

glyphs 또는 템플릿 이미지라고도 하는 인터페이스 아이콘을 디자인하거나 SF Symbols 앱에서 기호를 선택하여 그대로 사용하거나 필요에 맞게 사용자 정의할 수 있습니다. 인터페이스 아이콘과 기호 모두 검은색과 선명한 색상을 사용하여 모양을 정의합니다. 시스템은 각 이미지의 검은색 영역에 다른 색상을 적용할 수 있습니다. 지침은 SF Symbols를 참조하십시오.

모범 사례

인식 가능하고 매우 단순화된 디자인을 만드세요. 너무 많은 세부 사항은 인터페이스 아이콘을 혼란스럽거나 읽을 수 없게 만들 수 있습니다. 대부분의 사람들이 빠르게 인식할 수 있는 간단하고 보편적인 디자인을 위해 노력하세요. 일반적으로 아이콘은 시작하는 작업이나 표현하는 콘텐츠와 직접 관련된 친숙한 시각적 은유를 사용할 때 가장 잘 작동합니다.

앱의 모든 인터페이스 아이콘에서 시각적 일관성을 유지하세요. 사용자 지정 아이콘만 사용하거나 사용자 지정 아이콘과 시스템에서 제공하는 아이콘을 혼합하든, 앱의 모든 인터페이스 아이콘은 일관된 크기, 디테일 수준, 스트로크 두께(또는 무게) 및 관점을 사용해야 합니다. 아이콘의 시각적 무게에 따라 다른 아이콘과 시각적으로 일치하도록 크기를 조정해야 할 수도 있습니다.

시각적 일관성을 달성하기 위해, 필요에 따라 개별 아이콘 크기를 조정하세요...

...그리고 모든 아이콘에 동일한 스트로크 무게를 사용하세요.

일반적으로 인터페이스 아이콘과 인접한 텍스트의 가중치를 일치시키세요. 아이콘이나 텍스트를 강조하고 싶지 않다면, 둘 다에 동일한 가중치를 사용하면 콘텐츠에 일관된 모양과 강조 수준을 제공합니다.

필요한 경우, 광학 정렬을 달성하기 위해 사용자 지정 인터페이스 아이콘에 패딩을 추가하세요. 일부 아이콘, 특히 비대칭 아이콘은 광학이 아닌 기하학적으로 중앙에 있을 때 불균형하게 보일 수 있습니다. 예를 들어, 아래에 표시된 다운로드 아이콘은 상단보다 하단에 시각적 무게가 더 많기 때문에 기하학적으로 중앙에 있으면 너무 낮게 보일 수 있습니다.

비대칭 아이콘은 그렇지 않더라도 중앙을 볼 수 있다.

이러한 경우, 광학 중앙에 있을 때까지 아이콘의 위치를 약간 조정할 수 있습니다. 인터페이스 아이콘 주위에 패딩으로 조정이 포함된 자산을 만들 때(오른쪽 아래 그림과 같이), 자산을 기하학적으로 중앙에 배치하여 아이콘을 광학적으로 중앙에 배치할 수 있습니다.

아이콘을 몇 픽셀 더 높게 움직이면 광학적으로 중앙에 있습니다; 패딩의 픽셀을 포함하면 중앙 집중이 단순화됩니다.

광학 센터링의 조정은 일반적으로 매우 작지만, 앱의 외관에 큰 영향을 미칠 수 있습니다.

광학 센터링 전(왼쪽)과 광학 센터링 후(오른쪽).

필요한 경우에만 인터페이스 아이콘의 선택된 상태 버전을 제공하십시오. 자동으로 선택을 나타내는 컨트롤과 영역에서 사용되는 아이콘에 대해 선택 및 선택되지 않은 모습을 제공할 필요가 없습니다. 예를 들어 사이드바, iOS 탭 막대 및 macOS 도구 모음은 앱의 악센트 색상을 적용하거나 배경 모양을 추가하여 선택 상태를 전달할 수 있습니다.

iOS에서 선택한 탭 막대 아이콘이 앱의 악센트 색상을 수신합니다.

macOS에서 선택한 도구 모음 아이콘은 더 어두운 스트로크와 배경 모양을 수신합니다.

대조적으로, iOS 도구 모음과 탐색 모음은 선택 모양을 제공하지 않으므로, 이러한 영역에 대해 제공하는 각 인터페이스 아이콘의 채워진 버전과 채워지지 않은 버전을 모두 만들어야 합니다.

포용적인 디자인을 만드세요. 특정 성별에 대한 불필요한 언급 없이 인간의 인물을 묘사하는 것을 선호하며, 당신의 아이콘이 모든 사람을 환영하고 이해할 수 있는지 확인하십시오. 지침은 Inclusion을 참조하십시오.

의미를 전달하는 데 필수적인 경우에만 디자인에 텍스트를 포함하세요. 예를 들어, 텍스트 포맷을 나타내는 인터페이스 아이콘에서 문자를 사용하는 것이 개념을 전달하는 가장 직접적인 방법일 수 있습니다. 아이콘에 개별 문자를 표시해야 하는 경우 해당 문자를 현지화해야 합니다. 텍스트의 구절을 제안해야 하는 경우, 추상적인 표현을 디자인하고, 컨텍스트가 오른쪽에서 왼쪽으로 있을 때 사용할 아이콘의 뒤집힌 버전을 포함하십시오. 지침은 Right to left을 참조하십시오.

개별 문자를 표시하는 아이콘의 현지화된 버전을 만드세요.

읽기 방향을 제안하는 아이콘의 뒤집힌 버전을 만드세요.

사용자 지정 인터페이스 아이콘을 만드는 경우, PDF 또는 SVG와 같은 벡터 형식을 사용하세요. 이 시스템은 고해상도 디스플레이를 위한 벡터 기반 인터페이스 아이콘을 자동으로 확장하므로 고해상도 버전을 제공할 필요가 없습니다. 대조적으로, 음영, 텍스처 및 강조 표시와 같은 효과를 포함하는 앱 아이콘 및 기타 이미지에 사용되는 PNG는 스케일링을 지원하지 않으므로 각 PNG 기반 인터페이스 아이콘에 대해 여러 버전을 제공해야 합니다. 또는 사용자 지정 SF Symbols를 만들고 기호의 강조가 인접한 텍스트와 일치하도록 스케일을 지정할 수 있습니다. 지침은 SF Symbols를 참조하십시오.

사용자 지정 인터페이스 아이콘에 대한 대체 텍스트 라벨을 제공하세요. 대체 텍스트 라벨 또는 손쉬운 사용 설명은 보이지 않지만 VoiceOver가 화면에 있는 내용을 청각으로 설명하여 시각 장애가 있는 사람들의 탐색을 단순화합니다. 지침은 Content descriptions을 참조하십시오.

Apple 하드웨어 제품의 복제본을 사용하지 마세요. 하드웨어 디자인은 자주 바뀌는 경향이 있으며 인터페이스 아이콘과 기타 콘텐츠를 날짜로 표시할 수 있습니다. Apple 하드웨어를 표시해야 하는 경우, Apple Design Resources에서 사용할 수 있는 이미지 또는 다양한 Apple 제품을 나타내는 SF Symbols만 사용하십시오.

플랫폼 고려사항

iOS, iPadOS, tvOS 또는 watchOS에 대한 추가 고려 사항은 없습니다.

macOS

문서 아이콘

macOS 앱이 사용자 지정 문서 유형을 사용할 수 있다면, 이를 나타내는 문서 아이콘을 만들 수 있습니다. 전통적으로, 문서 아이콘은 오른쪽 상단 모서리가 접힌 종이처럼 보입니다. 이 독특한 외관은 아이콘 크기가 작더라도 사람들이 앱과 다른 콘텐츠와 문서를 구별하는 데 도움을 줍니다.

지원하는 파일 형식에 대한 문서 아이콘을 제공하지 않으면 macOS는 앱 아이콘과 파일 확장자를 캔버스에 컴파일하여 하나를 만듭니다. 예를 들어, 미리보기는 시스템에서 생성된 문서 아이콘을 사용하여 JPG 파일을 나타냅니다.

N 경우에 따라, 앱이 처리하는 다양한 파일 형식을 나타내기 위해 문서 아이콘 세트를 만드는 것이 합리적일 수 있습니다. 예를 들어, Xcode는 사용자 지정 문서 아이콘을 사용하여 사람들이 프로젝트, AR 개체 및 Swift 코드 파일을 구별할 수 있도록 도와줍니다.

사용자 지정 문서 아이콘을 만들려면 배경 채우기, 중앙 이미지 및 텍스트의 조합을 제공할 수 있습니다. macOS 11부터 시스템 레이어, 위치 및 마스크는 필요에 따라 이러한 요소를 친숙한 접힌 모서리 아이콘 모양에 합성합니다.

Background fill

Center image

Text

macOS 11은 사용자 지정 문서 아이콘을 생성하기 위해 제공하는 요소를 합성합니다.

Apple Design Resources는 문서 아이콘의 사용자 지정 배경 채우기 및 중앙 이미지를 만드는 데 사용할 수 있는 템플릿을 제공합니다. 이 템플릿을 사용할 때, 아래 지침을 따르세요.

문서 유형을 명확하게 전달하는 간단한 이미지를 디자인하세요. 배경 채우기, 중앙 이미지 또는 둘 다를 사용하든, 복잡하지 않은 모양과 뚜렷한 색상의 축소된 팔레트를 선호합니다. 문서 아이콘은 16x16 px만큼 작게 표시될 수 있으므로 모든 크기에서 인식할 수 있는 디자인을 만들고 싶습니다.

배경 채우기를 위한 하나의 표현력이 풍부한 이미지를 디자인하는 것은 사람들이 문서 유형을 이해하고 인식하는 데 도움이 되는 좋은 방법이 될 수 있다. 예를 들어, Xcode와 TextEdit은 모두 중앙 이미지를 포함하지 않는 풍부한 배경 이미지를 사용합니다.

문서 아이콘의 작은 버전의 복잡성을 줄이는 것을 고려해 보세요. 큰 버전에서 명확한 아이콘 디테일은 흐릿해 보이고 작은 버전에서는 인식하기 어려울 수 있습니다. 예를 들어, 사용자 지정 하트 문서 아이콘의 격자선이 중간 크기로 선명하게 유지되도록 하려면, 더 적은 선을 사용하고 감소된 픽셀 그리드에 정렬하여 두껍게 할 수 있습니다. 16x16 px 크기에서는 선을 완전히 제거할 수 있습니다.

32x32 px 아이콘은 격자선이 적고 EKG 라인이 더 두껍다.

16x16 px @2x 아이콘은 EKG 라인을 유지하지만 그리드 라인이 없습니다.

16x16 px @1x 아이콘에는 EKG 라인과 그리드 라인이 없습니다.

배경 채우기의 오른쪽 상단 모서리에 중요한 콘텐츠를 배치하지 마세요. 시스템은 문서 아이콘 모양에 맞게 이미지를 자동으로 가리고 채우기 위에 흰색 접힌 모서리를 그립니다. 아래 나열된 크기로 배경 이미지 세트를 만드세요.

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

이미지 캔버스의 약 10%를 측정하는 여백을 정의하고 대부분의 이미지를 그 안에 보관하세요. 이미지의 일부는 광학 정렬을 위해 이 여백으로 확장될 수 있지만, 이미지가 이미지 캔버스의 약 80%를 차지할 때 가장 좋습니다. 예를 들어, 256x256 px 캔버스의 대부분의 중앙 이미지는 205x205 px를 측정하는 영역에 맞을 것이다.

사람들이 당신의 문서 유형을 이해하는 데 도움이 된다면 간결한 용어를 지정하세요. 기본적으로 시스템은 문서 아이콘의 하단 가장자리에 문서의 확장 프로그램을 표시하지만, 확장자가 익숙하지 않은 경우 더 설명적인 용어를 제공할 수 있습니다. 예를 들어, SceneKit 장면 파일의 문서 아이콘은 파일 확장자 scn 대신 장면이라는 용어를 사용합니다. 시스템은 문서 아이콘에 맞게 확장 텍스트를 자동으로 조정하므로, 작은 크기로 읽을 수 있을 만큼 짧은 용어를 사용해야 합니다. 기본적으로, 시스템은 텍스트의 모든 문자를 대문자로 변환합니다.