본문 바로가기

Human Interface Guidelines

애플 휴먼 인터페이스 가이드라인(34) Icons and Images -3 System Icons

System Icons (iOS 12 and Earlier)
iOS 12와 이전 버전의 시스템 아이콘

In iOS 13 or later, prefer using SF Symbols to represent tasks and types of content in your app. If your app is running in iOS 12 or earlier, follow the guidance below.

 

The system provides built-in icons that represent common tasks and types of content in a variety of use cases.

In apps running iOS 12 and earlier, it’s a good idea to use these built-in icons as much as possible because they're familiar to people.

 

iOS 13과 이후 버전의 앱에선 SF Symbol을 사용해 현재 작업과 콘텐츠의 종류를 설명하세요. 앱이 iOS 12나 이전 버전이라면, 아래의 가이드를 따르세요.

시스템은 공통적인 작업과 콘텐츠의 종류를 설명할 수 있는 여러 버전의 내장 아이콘을 제공합니다.

  • 네비게이션 바와 툴바 아이콘
  • 탭바 아이콘
  • 홈스크린 퀵 액션 아이콘

iOS 12나 이전 버전의 앱에선 내장 아이콘을 가능한 많이 사용하는 것이 좋습니다. 이는 사용자들에게 친숙하기 때문입니다.

 

Use system icons as intended. Every system-provided image has a specific, well-known meaning. To avoid confusing users, it’s essential that each image be used in accordance with its meaning and recommended usage.

시스템 아이콘은 계획한 대로 사용하세요. 시스템에서 제공되는 모든 이미지는 구체적이고 잘 알려진 의미를 갖고있습니다. 사용자를 혼란스럽게 하지 않으려면, 각각의 이미지가 그의 이미지와 적절한 사용처에 맞게 사용되어져야 합니다.

 

Provide alternative text labels for icons. Alternative text labels aren’t visible onscreen, but they let VoiceOver audibly describe what's onscreen, making navigation easier for people with visual impairments.

이미지와 아이콘에 대체 텍스트 라벨을 써두세요. 이 라벨이 화면 위에서 보이진 않지만, 보이스오버 기능을 사용해 청각적으로 화면에 무엇이 있는지 설명할 수 있습니다. 시각 장애를 가진 사용자들이 탐색하기 훨씬 쉽겠죠.

 

Design a custom icon if you can’t find a system-provided one that meets your needs. It’s better to design your own than to misuse a system-provided image. See Glyphs.

원하는 아이콘이 시스템에서 제공되지 않는다면, 새로운 아이콘을 직접 디자인하세요. 시스템에서 제공되는 이미지를 오용하는 것보다 자신의 아이콘을 직접 만드는 것이 낫습니다. Glyphs 를 확인하세요.

TIP

You can use text instead of icons to represent items in a navigation bar or toolbar. For example, Calendar uses “Today,” “Calendars,” and “Inbox” in the toolbar. You can also use a fixed space element to provide padding between navigation and toolbar icons.
아이콘 대신 텍스트로 네비게이션 바나 툴바의 아이템을 설명할 수 있습니다. 예를 들어, 캘린더 앱은 "오늘", "달력", "수신함" 이라는 '텍스트' 를 툴바에 사용합니다. 고정된 여백을 사용해 네비게이션과 툴바 아이콘 사이의 간격을 보여줄 수도 있습니다.

 

 

* 아이콘들이 SVG인지, 긁어서는 가져와지지 않아 짚고넘어갈만한 아이콘만 정리했다. 원문에서 훨씬 많은 아이콘을 확인할 수 있다.

 

 

사용처 아이콘 이름
Navigation Bar/ Toolbar
Action (Share) 공유 옵션, 확장 액션, 복사, 즐겨찾기에 추가, 찾기 등 현재 맥락에서 유용한 작업을 포함한 모달 뷰를 보여줍니다.
 
Compose 새 뷰를 '수정 모드'에서 엽니다.
 
Organize 아이템을 폴더와 같은 새로운 목적지로 이동시킵니다.
Tab Bar
Most Viewed 가장 유명한 아이템들을 보여줍니다.
Home Screen Quick Action
Invitation 초대를 의미하거나 보여줍니다
 
Confirmation 액션이 완료되었다는 것을 의미합니다.
 
Task 완료되지 않은 작업을 나타내거나, 완료된 작업으로 표시할 수 있습니다.
 
Task Completed 완료된 작업을 나타내거나, 완료되지 않은 작업으로 표시할 수 있습니다.
 
Update 콘텐츠를 업데이트 합니다.

* confirmation과 Task Completed의 묘한 차이가 재밌다.

반면 most viewed같은 경우 잘 쓰이지 않는다는 것을 느꼈고, 이 때문에 아이콘의 개념에 혼동을 줄 수도 있다는 생각이 들었다.

화살표와 미완성 네모로 이뤄진 아이콘들이 있는데, 이는 각각 매우 다른 뜻을 의미하며 (액션 뷰 열기, 초대 의미, 업데이트, 다운로드 등) 이는 텍스트 없이 사용되기엔 무리가 있다는 생각도 들음. 특히 Home Screen Quick Action의 Invitation은 뜻을 알지 못했다면 다운로드라고 생각했을 듯.

 

 

원문_

 

System Icons - Icons and Images - iOS - Human Interface Guidelines - Apple Developer

System Icons (iOS 12 and Earlier) In iOS 13 or later, prefer using SF Symbols to represent tasks and types of content in your app. If your app is running in iOS 12 or earlier, follow the guidance below. The system provides built-in icons that represent com

developer.apple.com