Apple Human Interface Guidelines (HIG) - 아이콘

김다영·2025년 2월 12일

HIG

목록 보기
4/7

1. 아이콘의 역할

  • 앱과 게임은 사용자가 선택할 수 있는 항목과 동작을 이해하도록 돕기 위해 간단한 아이콘을 사용함.

  • 앱 아이콘은 음영, 텍스처, 하이라이트 등으로 풍부한 시각적 세부사항을 사용하지만, 인터페이스 아이콘은 간소화된 모양과 색상으로 아이디어를 전달함.

2. 인터페이스 아이콘 디자인

  • 인터페이스 아이콘은 SF Symbols앱에서 선택하거나 사용자화할 수 있음.
  • 검은색과 투명색을 사용하여 모양을 정의하며, 시스템은 검은색 영역에 다른 색상을 적용함.

3. 모범 사례

  • 간소화된 디자인: 세부사항이 많으면 이해하기 어려움. 간단하고 친숙한 디자인을 사용해야 함.
  • 시각적 일관성 유지: 모든 아이콘은 일관된 크기, 세부 정보, 선 두께를 가져야 함.
  • 선 굵기 조정: 아이콘과 주변 텍스트의 굵기를 맞추어 일관된 모양을 유지함.

4. 패딩과 정렬

  • 패딩 추가: 사용자 설정 아이콘에 패딩을 추가하여 시각적 정렬을 이루어야 함.
  • 비대칭 아이콘 조정: 비대칭 아이콘은 시각적으로 중앙 정렬되도록 위치를 조정해야 함.

5. 선택 상태 아이콘

  • 선택 상태 버전 제공: 필요한 경우에만 인터페이스 아이콘의 선택 상태 버전을 제공해야 함.
  • iOS와 macOS에서 선택된 아이콘에 강조 색상이나 배경 모양을 적용함.

6. 포용성 있는 디자인

  • 포용성 고려: 특정 성별을 표시하지 않으면서 모든 사람이 이해할 수 있는 아이콘을 디자인해야 함.

7. 텍스트 포함

  • 텍스트 사용 제한: 의미 전달에 꼭 필요한 경우에만 텍스트를 포함해야 함.

8. 벡터 포맷 사용

  • 벡터 포맷 사용: 사용자 설정 인터페이스 아이콘은 PDF 또는 SVG와 같은 벡터 포맷을 사용해야 함.

9. 대체 텍스트 레이블

  • 대체 텍스트 제공: 시각적으로 표시되지 않지만 VoiceOver가 내용을 설명할 수 있도록 대체 텍스트 레이블을 제공해야 함.

10. Apple 하드웨어 사용 금지

  • 하드웨어 모형 사용 금지: Apple 하드웨어 제품의 모형을 사용하지 말아야 함.

11. macOS 문서 아이콘

  • 문서 아이콘 디자인: 사용자 설정 문서 유형을 나타내는 아이콘을 생성할 수 있음.

  • 간단한 이미지 사용: 문서 유형을 명백하게 나타내는 간단한 이미지를 디자인해야 함.

12. 문서 아이콘의 크기

  • 작은 크기에서 복잡성 줄이기: 작은 크기 버전에서 아이콘의 복잡성을 줄여야 함.

13. 여백 정의

  • 여백 정의: 이미지 캔버스의 약 10%에 해당하는 여백을 정의하고, 이미지의 대부분을 여백의 경계 안쪽에 포함해야 함.

14. 문서 유형 설명

  • 간결한 용어 사용: 문서 유형을 파악하는 데 도움이 되는 간결한 용어를 지정해야 함.
profile
돌이켜보니, 난 한번도 멈춰있던 적이 없었다.

0개의 댓글