IOS 디자인 가이드라인 : 아이콘
Human Interface Guideline 한글 번역
Icons
효과적인 아이콘은 사람들이 즉각적으로 이해할 수 있는 하나의 컨셉을 보여주는 그래픽 에셋입니다.
앱과 게임은 다양한 아이콘을 통해 아이템이나 액션, 고를 수 있는 모드 등을 이해할 수 있게 합니다. 앱 아이콘과는 다르게, 쉐딩, 질감, 하이라이팅 등의 비주얼 디테일을 활용해서 앱의 특징을 강화할 수 있어요. 인터페이스 아이콘은 대게 곡선의 모양을 갖추고 있고 직접적으로 아이디어를 전달할 수 있는 컬러를 사용합니다.
인터페이스 아이콘(글리프나 템플릿 이미지라고도 불립니다)을 디자인 할 때, SF Symbols app에서 as-is 그대로의 심볼을 선택해도 되고 니즈에 맞게 커스터마이징 해도 됩니다. 인터페이스 아이콘과 심볼 모두 모양을 뚜렷히 보여주는 선명한 컬러와 블랙을 사용합니다. 각 아이콘 이미지에서 보여지는 블랙 색상은 다른 색으로 바꿀 수도 있습니다. 자세한 사항은 SF Symbols을 참고하세요.
Best practices
알아보기 쉽고 단순화된 디자인의 아이콘을 만드세요. 너무 많은 디테일이 있는 아이콘은 사용자들에게 혼란을 주고 바로 알아차리기 힘듦니다. 심플하고 공통적으로 인지가 가능한 디자인을 추구하세요. 일반적으로 아이콘이 행하는 액션이나 나타내는 의미 등을 직접적으로 떠올릴 수 있는 비주얼 메타포를 이용할 때 가장 잘 활용될 수 있습니다.
앱에서 사용되는 모든 인터페이스 아이콘에 일관적인 비주얼을 유지하세요. 커스텀 아이콘만을 사용하건, 시스템 아이콘과 커스텀 아이콘을 섞어 사용하던, 모든 인터페이스 아이콘은 일관적인 사이즈와 비슷한 수준의 디테일, 라인 두께, 원근감을 유지해야 합니다. 아이콘의 비주얼적인 두께에 따라, 다른 아이콘들과 비주얼적으로 동일해보일 수 있도록 크기를 조절할 필요가 있습니다.
비주얼 일관성을 위해 개별 아이콘의 사이즈를 줄이기가 필요하며
모든 아이콘에 같은 두께의 스트로크 라인(stroke)을 사용하세요.
일반적으로, 아이콘과 아이콘에 함께 사용된 텍스트 간의 두께를 맞추세요. 아이콘 혹은 텍스트를 강조하고 싶다고 하더라도, 동일한 두께를 사용하는 것이 일관성을 줄 수 있습니다.
필요하다면, 패딩을 추가해서 시각적인 정렬을 향상시키세요. 어떤 아이콘들은 (특히나 비대칭인 아이콘들은) 기하학적으로는 가운데 정렬 되어 있는데 보기에는 불균형해 보일 수 있습니다. 예로써, 아래 다운로드 아이콘을 보면 위 여백 보다 아래에 여백을 많이 줬는데 이런 경우 수치상 가운데라 할지라도 아래로 치우쳐 보입니다.
비대칭 아이콘은 실제로 그렇지 않은데도 중앙정렬이 안된 것 같이 보일 수도 있습니다. 이런 경우에는, 시각적으로 중앙 정렬이 되어 보일 수 있도록 살짝 위치를 조정해줄 수 있습니다. 아래 처럼, 아이콘 에셋 중 조정가능한 영역에 패딩이 함께 포함되어 있으면 해당 에셋을 수치적으로 중앙정렬 해도 시각적으로 중앙에 오게 할 수 있습니다.
아이콘을 몇 픽셀 더 높게 이동하면 시각적으로 중심에 오게 됩니다. 패딩에 픽셀을 함게 포함하는 경우에 정렬을 더 쉽게 할 수 있습니다. 대게 이런 시각적인 중앙 정렬은 사소하지만 앱 비주얼에 큰 영향을 줍니다.
(좌) 시각적으로 중앙정렬이 안된 모습 / (우) 아이콘 에셋이 중앙에 정렬된 모습
필요한 경우에 아이콘 선택 시 보여지는 인터페이스 아이콘을 제공하세요. 자동으로 선택됨을 보여주는 경우에는 따로 선택, 미선택 비주얼을 만들 필요는 없습니다. 예로써, 사이드바(sidebars), iOS 탭바 (tab bars), 맥OS 툴바 (macOS toolbars)의 경우, 아이콘 선택 시의 상태를 액센트 컬러를 적용하거나 바탕 색을 적용시키는 것을 통해 보여줍니다.
iOS에서는 선택된 탭바 아이콘은 액센트 컬러로 보여집니다.
맥OS에서는 선택 된 툴바 아이콘은 더 진한 선과 배경색으로 보여집니다.
반대로, iOS 툴바와 네비게이션 바에서는 선택에 따른 비주얼을 제공하지 않기 때문에, 이 영역에 대한 인터페이스 아이콘을 만들 때는 채워 진 것과 채워지지 않은 아이콘 두 개 모두 작업해야 합니다.
포괄적인 디자인을 만드세요. 사람을 나타낼 때는 특정 성별을 나타내는 부가적인 특징들을 더하지 않는 것을 선호합니다. 모든 사람들이 환영하고 이해하기 쉬운 아이콘을 만들 수 있도록 하세요.
의미 전달이 꼭 필요할 때에만 텍스트를 포함하세요. 예로써, 문자 형식을 나타내기 위해서는 인터페이스 아이콘에 글자를 포함하는게 가장 직접적인 방법이 될 수 있다. 개별 글자를 아이콘으로 보여주고자 한다면, 반드시 로컬화를 고려해야 합니다. 한 달락의 텍스트를 보여줘야 할 경우, 대략적인 모습을 디자인하고 우-좌 방향향으로 읽기를 선택했을 때를 고려해서 뒤집어진 버전의 아이콘도 제공해야 합니다. 자세한 사항은 Right to left에서 확인 가능.
각 문자를 형상화하는 아이콘을 생성하세요.
읽기 방향을 제안하는 아이콘의 반전된 버전을 만드세요.
아이콘을 만들 때는 PDF 혹은 SVG 형태의 벡터 포맷을 사용하세요. 벡터 베이스의 아이콘은 고해상도 디스플레이에서 시스템 상 자동적으로 사이즈를 늘릴 수 있기 때문에 일부러 고해상도 버전의 아이콘을 만들지 않아도 됩니다. 반대로, PNG(앱 아이콘에서 활용됨. 쉐딩, 질감, 하이라이팅 등을 포함)는 자동 스케일링을 지원하지 않기 때문에 PNG로 인터페이스 아이콘을 만든다면 아이콘을 다양한 버전에 따라 여러 개 만들어야 합니다. 대안으로는, SF Symbol을 커스텀화 하고 아이콘 주변의 텍스트와 조화되도록 스케일을 구체화 할 수도 있습니다.
커스텀 인터페이스 아이콘에 대체 텍스트 레이블을 제공하세요. 대체 텍스트 레이블 (Alternative text labels 혹은 accessibility descriptions) 혹은 접근성 설명이라고 불리는 이 레이블은 보이지는 않습니다. 그렇지만 보이스오버(VoiceOver) 기능을 사용 할때 청각적으로 스크린에 무엇이 있는지 설명하고 시각적으로 인지하는데 어려움이 있는 사람들을 위해 앱 사용을 도와줄 수 있습니다.
애플 하드웨어를 본따 만들지 마세요. 하드웨어 디자인은 자주 바뀌기도 하고 인터페이스 아이콘과 콘텐츠가 옛날 것처럼 보이게 만들 수 있습니다. 애플 하드웨어를 표시해야 하는 경우, Apple Design Resources 또는 다양한 Apple 제품을 나타내는 SF 기호에서 사용할 수 있는 이미지만 사용하십시오.
Platform considerations
iOS, iPadOS, tvOS, or watchOS에는 해당 사항 없음
macOS
Document icons
맥 OS앱에서 커스텀 가능한 문서 타입을 사용할 수 있다면, 문서 아이콘을 만들어 보여줄 수 있습니다. 전통적으로는 문서 아이콘은 오른쪽 위쪽 코너가 접혀 있는 한 장의 종이처럼 만들어졌습니다. 차별적인 디자인을 통해서 사람들은 앱의 문서나 다른 콘텐츠의 문서들을 아이콘 사이즈가 작아도 구분할 수 있도록 합니다.
문서 아이콘이 따로 제정되어 있지 않으면, macOS는 응용 프로그램 아이콘과 파일 확장자를 캔버스에 합성해서 문서 아이콘을 만듭니다. 예를 들어, 미리 보기는 시스템에서 생성한 문서 아이콘을 사용하여 JPG 파일을 나타냅니다.
어떤 경우에는 앱에서 사용되는 타입의 문서 범위를 보여주는 아이콘을 사용하는게 좋을 때도 있습니다. 예를 들어, Xcode는 AR objects인지, Swfit 코드 파일인지 구분할 수 있도록 문서 아이콘을 보여줍니다.
커스텀한 문서 아이콘을 생성할 때는 배경 색과 중앙 이미지, 텍스트 등을 활용해 자유롭게 구성할 수 있습니다. MacOS 11부터, 시스템은 필요에 따라 이러한 요소들을 레이어화, 배치, 마스크화하여 우리에게 친숙한 접힌 모서리 아이콘 모양으로 합성합니다.
자동 합성 결과 MacOS 11은 각 요소들을 합성해서 커스텀화 된 문서 아이콘을 제공합니다. Apple Design Resources 에서 문서 아이콘을 위한 배경, 중간 이미지 관련 템플릿을 제공합니다. 이 탬플릿을 활용할 때, 아래의 가이드라인을 참고하세요.
단순한 이미지를 사용해서 해당 파일이 문서라는 것을 알려줄 수 있도록 하세요. 배경 색을 채우건 중앙에 이미지를 더하건, 복잡하지 않은 도형들과 절제된 컬러를 사용하는 것이 좋습니다. 문서 아이콘은 16x16만큼 작은 사이즈로도 보여질 수도 있으므로, 모든 사이즈에서 잘 알아볼 수 있는 디자인을 해주세요.
하나의 표현형 이미지로 배경을 채우는 방식은 해당 파일이 문서라는 것을 인식하는데 도움이 됩니다. 예를 들어, Xcode와 TextEdit는 모두 중앙 이미지를 포함하지 않는 풍부한 배경 이미지를 사용합니다.
작은 환경에서 사용 되는 문서 아이콘에 복잡성을 줄여주세요. 큰 버전에서는 선명하게 보이는 디테일들이 작은 버전에서는 인식하기가 어려울 수도 있습니다. 예를 들어, 사이즈를 조정하더라도 아이콘의 그리드 라인이 선명하게 남을 수 있도록 해야 합니다. 이를 위해서는 라인을 적게 사용하되 굵게 만들어서 축소된 픽셀 그리드에 맞출 수 있습니다. 16x16px 크기의 경우 라인을 모두 제거할 수 있습니다.
문서 아이콘의 배경을 채우는 작업을 할 때, 오른쪽 상단 모서리에 중요한 내용을 배치하지 마세요. 시스템은 문서 아이콘 모양에 맞게 이미지를 자동으로 마스킹하고 채우기 위에 흰색으로 모서리를 접습니다. 아래 나열된 크기로 배경 이미지 세트를 만드세요.
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
익숙한 개체가 문서 유형이나 앱 연결을 연상시키는 경우, 해당 개체를 중앙 이미지로 배치하는 걸 고려해 보세요. 모든 사이즈에서 인식이 가능한 선명하고 단순하며 모호하지 않은 이미지를 디자인하세요. 중앙 이미지는 전체 문서 아이콘 캔버스의 절반 크기로 만듭니다. 예를 들어 32x32px 문서 아이콘에 대한 중앙 이미지를 생성하려면 16x16px를 측정하는 이미지 캔버스를 사용합니다. 중앙 영상을 다음 크기로 제공할 수 있습니다.
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 캔버스에 중앙 정렬한 이미지 대부분이 205x205px 크기 캔버스에 들어가면 됩니다.
문서 타입을 이해하는데 도움이 될 경우에, 간결한 용어를 구체적으로 보여주세요. 기본적으로, 시스템은 문서 아이콘의 아래쪽 가장자리에 문서의 확장명을 표시하지만, 확장명이 익숙하지 않은 경우 설명을 위한 용어를 제공할 수 있습니다. 예를 들어, SceneKit 장면 파일의 문서 아이콘은 파일 확장자 scn 대신 장면이라는 용어를 사용합니다. 시스템은 문서 아이콘에 맞게 확장자 텍스트 크기를 자동으로 조정하므로 작은 크기에서도 읽을 수 있을 정도로 짧은 용어를 사용해야 합니다. 기본적으로 시스템은 텍스트의 모든 문자를 대문자로 표시합니다.
IOS Human Interface Guidelines 중 가장 기본적인 아이콘에 대해 번역한 글입니다.
https://developer.apple.com/design/human-interface-guidelines/foundations/icons
