ch05_iOS가이드라인(2)_아이콘

학습목표 
 Apple의 **Human Interface Guidelines (HIG)**에 기반하며  아이콘에 대한 주요 가이드라인을 알아보고, 앱의 정체성을 효과적으로 전달하고 사용자 경험을 최적화하기 위한 원칙을 알아본다.

---

1.아이콘 디자인의 기본 원칙

 

• 단순성: 아이콘은 복잡하지 않고 이해하기 쉬워야 한다. 불필요한 디테일을 제거하고 명확한 메시지를 전달해야 한다.
• 보편성: 아이콘이 다양한 문화권과 사용 환경에서도 직관적으로 이해될 수 있어야 한다.
• 적절성: 앱의 주요 목적이나 기능을 시각적으로 나타내야 한다.
• 일관성: iOS 플랫폼의 다른 앱들과 조화를 이루면서도 고유성을 유지해야 한다.

---

2. 앱 아이콘 

• 고유하고 기억하기 쉬운 아이콘은 앱 또는 게임의 목적과 성격을 전달하고 App Store 및 기기에서 상품을 한눈에 알아볼 수 있도록  도와준다.
• 실행 아이콘이라 불리는 런처 아이콘을 말한다.
• 사용자의 홈화면에 위치해 응용프로그램 바로가기 역할을 한다.

앱아이콘의 속성

• 아이콘은 여러 디바이스에서 선명하게 보이기 위해 다양한 크기와 해상도로 준비해야 한다.- Retina 디스플레이를 고려하여 고해상도 버전을 포함해야 한다.
• 포맷: 아이콘 파일은 PNG 포맷을 사용해야 한다.
• 색 공간: 아이콘은 sRGB 또는 P3 색 공간을 준수해야 한다.
• 레이어: 아이콘은 투명도가 없는 평면 이미지로 제작되어야 한다.
• 해상도: 기기의 해상도에 맞게 다양한 크기의 이미지를 준비해야 한다.
• 형태: 기본적으로 정사각형 형태를 가지며, 둥근 모서리를 포함하지 않는다. (모서리 처리는 운영체제가 자동으로 적용함)
• 파일명: 반드시 대문자로 시작해야 한다. 크기별로 지정된 파일 이름 규칙을 따라야 한다.
• text : 의미를 전달하는 데 꼭 필요한 경우에만 디자인에 텍스트를 포함
• Apple 하드웨어 제품의 모형을 사용하지 마십시오
• 앱 아이콘 크기:
  • iPhone: 180x180px (@3x), 120x120px (@2x)
  • iPad: 167x167px (@2x)
  • App Store: 1024x1024px

---

3. 스포트라이트, 설정, 알림 아이콘 (Notification Icon)

• 예시: 앱 아이콘에 표시되는 숫자 배지
• 설명: 앱 내 새로운 알림이나 작업 대기 상태를 사용자에게 전달한다.
• 특징:
  • 숫자나 간단한 심볼로 표시
  • 붉은색 원 안에 숫자 형태가 일반적 (예: 메시지 앱의 새 메시지 개수)

---

4. 설정 아이콘 (Settings Icon)

• 예시: 앱 설정 메뉴에서 사용되는 아이콘 (예: 계정, 알림, 프라이버시)
• 설명: 앱 내의 설정 옵션을 나타낸다.
• 특징:
  • 선형 디자인
  • 사용자 인터페이스와 통일된 스타일
  • 앱에서 작업 모드를 나타내는 SF 심벌을 사용하는 것을 선호한다
  • 앱의 모든 아이콘은 세부 사항, 광학 무게, 획 두께, 위치, 원근감 측면에서 동일해야 한다. 이런 경우, 글리프로 아이콘을 디자인할 것을 권장한다.

---

SF Symbols

SF Symbols는 Apple이 제공하는 벡터 기반 기호 아이콘 세트로, iOS 및 관련 Apple 플랫폼에서 UI를 설계할 때 활용할 수 있다. 이 기호들은 일관성과 직관성을 제공하며 다양한 인터페이스 요소에 통합될 수 있다.

1. 활용 범위
   • 탐색 막대: 앱 상단에 위치한 탐색 인터페이스에서 사용.
   • 도구 모음: 앱 하단의 주요 작업 버튼에 사용.
   • 탭 막대: 앱의 주요 기능 섹션을 구분하는 데 사용.
   • 빠른 메뉴: 컨텍스트 메뉴에서 관련 작업을 표시.
   • 내부 텍스트: 텍스트 라벨 옆 또는 내부에 함께 표시.
2. 버전에 따른 차이
   • 새로운 SF Symbols와 기능은 최신 iOS 버전에서만 사용할 수 있다.
   • 이전 운영 체제에서는 최신 기호가 호환되지 않을 수 있으므로 적절한 대체 기호를 고려해야 한다.
3. 디자인 일관성
   • 각 기호는 iOS의 디자인 언어에 맞춰 설계되었다.
   • 동적 크기와 가변 스타일을 제공하여 다양한 디바이스와 환경에 적합하다.
4. 사용 제한
   • SF Symbols는 앱 아이콘, 로고, 또는 상표권 관련 이미지로 사용할 수 없다.
   • Apple의 이용 약관을 반드시 준수해야 한다.
5. 개발자 참고사항
   • Configuring and displaying symbol images in your UI 문서를 참조하여 SF Symbols의 사용법을 학습할 수 있다.
   • 앱의 디자인에 맞게 색상, 크기, 스타일 등을 조정할 수 있다.

https://developer.apple.com/sf-symbols/

SF Symbols - Apple Developer

SF Symbols 활용 방법

1. SF Symbols 앱 다운로드
   • Apple의 공식 앱에서 모든 기호 세트를 탐색하고 사용 가능한 아이콘을 미리 볼 수 있다.
   • 다운로드 링크: SF Symbols
2. 개발 환경에서 사용
   • Xcode를 통해 SF Symbols를 간편하게 UI에 통합.
   • Swift 코드를 통해 동적으로 기호를 호출하거나 구성 가능.
3. 기호의 조정
   • 두께 조정 (Regular, Bold, Heavy 등)
   • 색상 변경 (다크 모드 및 라이트 모드 지원)
   • 크기 및 비율 조정

---

Glyphs(글리프)는 Apple의 SF Symbols에서 사용되는 간단하고 직관적인 아이콘 또는 기호를 의미하며, 다양한 UI 요소에서 개념이나 동작을 시각적으로 전달하는 데 사용된다. 글리프는 탐색 바, 탭 바, 버튼 등에서 자주 사용되며, iOS, iPadOS, watchOS 등 다양한 Apple 플랫폼에서 일관된 디자인 경험을 제공한다.

---

4. 사용자 정의 아이콘

iOS 및 관련 플랫폼에서 일관성 있고 접근성 있는 아이콘 디자인을 위한 중요한 기준을 제시한다.

1. 간단하고 알아보기 쉬운 디자인
   • 지나치게 세부적인 디테일은 피해야 한다.
   • 빠르게 인식 가능하고 직관적인 디자인을 사용해야 한다.
   • 시각적 은유: 아이콘의 동작 또는 콘텐츠와 관련된 친숙한 시각적 은유를 사용한다.
2. 시각적 일관성 : 모든 아이콘에서 동일한:
   • 크기: 아이콘 간 크기가 균일해야 한다.
   • 선 두께: 동일한 두께로 일관된 스타일을 유지한다.
   • 시점: 동일한 시각적 관점에서 제작한다.
   • 무게감: 각 아이콘의 시각적 무게를 균형 있게 조정한다.
3. 기하학적 중앙 정렬과 시각적 중앙 정렬
   • 비대칭 아이콘의 경우: 기하학적으로 중앙 정렬하면 불균형해 보일 수 있으므로, 시각적으로 중앙 정렬될 때까지 위치를 조정해야 한다. 패딩을 추가하여 중앙 정렬 상태를 유지할 수 있다.
4. 선택 상태 아이콘
   • 선택 상태를 나타내기 위해 일반적으로 배경 색상이나 강조 색상을 사용한다.
   • 별도로 선택 및 미선택 상태 아이콘을 제작할 필요는 없다.
5. 포용성 있는 디자인
   • 성별을 불필요하게 나타내지 않는다.
   • 모든 사람이 이해하고 받아들일 수 있는 보편적인 디자인을 선택한다.
6. 현지화된 아이콘
   • 문자를 사용하는 아이콘의 경우:현지화된 버전을 제작하여 다양한 언어와 읽기 방향에 맞게 제공한다.
   • 예: 아랍어, 히브리어 등 오른쪽에서 왼쪽으로 읽는 언어를 고려한 디자인.
7. 벡터 기반 포맷 사용
   • 사용자 설정 인터페이스 아이콘은 PDF 또는 SVG와 같은 벡터 포맷으로 제작한다.
   • PNG 사용 시, 해상도별로 여러 버전을 제공해야 한다.
8. 접근성 강화
   • 대체 텍스트 레이블을 제공하여 VoiceOver와 같은 손쉬운 사용 기능에서 아이콘을 설명할 수 있게 한다.
9. Apple 하드웨어 이미지 사용 제한
   • 하드웨어 모형은 자주 변경되므로 오래된 느낌을 줄 수 있다. Apple 하드웨어를 나타낼 필요가 있을 경우, Apple 디자인 리소스 또는 SF Symbols를 사용한다.
10. SF Symbols 관련 참고 사항
    • SF Symbols 앱을 다운로드하여 전체 기호 세트를 탐색하고 적합한 아이콘을 선택한다.