SF Symbols

SF Symbols는 애플이 제공하는 라이브러로, 수많은 심볼들을 제공한다.
UI디자인에 사용되며, 샌프란시스코 시스템 폰트와 통합되어 앱 내에서 일관된 디자인과 사용자 경험을 제공할 수 있다.

네비에게이션 바, 툴바, 탭 바, 컨텍스트 메뉴, 텍스트 내부 등 같이 인터페이스 아이콘이 나타날 수 있는 곳 어디에서든 객체나 개념을 전달하는 데 심볼을 사용할 수 있다.

SF Symbols 웹사이트에 방문하면 다양한 심볼을 살펴볼 수 있고 다운로드할 수 있는 앱도 제공한다.
조건과 규정을 준수하여야 하며 앱 아이콘이나 로고에는 사용하지 않아야 한다.

Rendering modes

SF Symbols는 렌더링 모드를 지원하기 위해 SF Symbols는 심볼의 경로를 구분된 레이어로 구성한다.
아래의 clound.sun.rain.fill 심볼은 세 개의 레이어로 구성되어 있다. 주 레이어는 구름 경로, 보조 레이어는 태양과 그 빛, 셋째 레이어는 비의 경로가 있는것을 볼 수 있다.

SF Symbols 3 이상부터 네 가지 렌더링 모드를 제공한다.

단색(monochrome) 모드

: 심볼의 모든 레이어에 하나의 색상을 적용

계층적(hierarchical) 모드

: 하나의 색상을 적용하되, 게층 수순에 따라 색상의 불투명도를 변경

팔레트(palette) 모드

: 각 레이어 당 하나의 색상을 사용

다중색(multicolor) 모드

: 일부 심볼에 내재된 색상을 적용하여 의미 강화.
(ex: 나뭇잎 심볼은 녹색을 사용, 휴지통 슬래시 심볼은 빨간색 사용하여 데이터 손실을 표현)

렌더링 모드와 관계없이 시스템 제공 색상을 사용하면 심볼이 다양한 환경에서 자동으로 적응하여 접근성을 향상시키고 선명함과 다크모드와 같은 다양한 상황에 자동으로 맞춰진다. 그리고 이렇게 사용하는것을 권장한다.

Variable color

SF Symbols 4에서 도입된 기능으로, 렌더링 모드와 상관없이 시간에 따라 변할 수 있는 특성을 나타내는 방법을 제공한다.(용량이나 강도)

아래의 speaker.wave.3 심볼에 가변 색상을 사용하여 소리의 세 가지 범위를 나타낼 수 있다.

단 가변 색상은 변화를 전달하기 위해 사용해야 하며, 깊이를 전달하기 위해서는 계층적 렌더링 모드를 사용해야 한다.

Weights and scales

SF Symbols는 다양한 두계와 크기읨 심볼을 제공하여 적응형 디자인을 가능하게 한다.

두께(weights)

: ultralight에서 blask까지 아홉 가지의 두께를 가짐, 샌프란시스코 시스템폰트의 두께와 대응된다. 심볼과 인접한 텍스트 간에 두께와 크기를 일치시켜 문맥에 맞는 유연성을 지원할 수 있다.

스케일(Scales)

: 각 심볼은 세 가지 크기로 제공되며, 이 크기는 샌프란시스코 시스템 폰트의 대문자 높이를 기준으로 한다.
이는 동일한 크기를 사용하는 텍스트와의 일관성을 유지할 수 있다.

개발자는 ImageScale(_:) (SwiftUI), UIImage.SymbolScale (UIKit), NSImage.SymbolConfiguration (AppKit) 등을 활용하여 심볼의 크기를 조절할 수 있다.

Design variants

SF Symbols은 여러 디자인 변형을 제공하여 시삭적인 일관성을 유지하면서 다양한 상태와 동작을 전달할 수 있도록 한다. (fill, slash, enclosed 등)

• 아웃라인
  : 색상이 채워져 있지 않아 툴바, 내비게이션바 등에서 심볼을 텍스트와 함께 표시하기 좋다.

• enclosed
  : 작은 크기에서 가독성을 향상시킬 수 있다.

• fill
  : 내부를 단색으로 채워서 심볼에 시각적 중점을 더 부여할 수 있다.

• slash
  : 액션을 사용할 수 없음을 나타낸다.

SF Symbols 3 이후에는 특정 언어 및 글쓰기 시스템에 대한 여러 변형이 제공된다. 라틴어, 아랍어, 히브리어, 태국어, 중국어, 일본어 및 한국어가 포함된다. 언어 및 스크립트별 변형은 장치의 언어가 변경될 때 자동으로 변형된다.

Animations

SF Symbols는 앱에 활력을 주는 애니메이션 모음을 제공한다. 심볼 애니메이션은 아이디어를 전달하고, 사용자의 액션에 대한 피드백을 제공하고, 상태 또는 진행 중인 활동을 나타내는데 도움이 된다.

SF Symbols 라이브러리의 모든 심볼, 모든 렌더링 모드, 두께, 스케일, 커스텀 실볼에서 애니메이션을 사용할 수 있다.
애니메이션 재생 제어 가능: 처음부터 끝까지 실행할지, 조건이 충족될 때까지 효과를 반복하여 실행할지 등의 여부를 선택, 애니메이션의 재생속도 변경, 반복 전에 되감을지 등의 동작을 정의할 수 있다.

SF Symbols 5 이상에서 지원하는 애니메이션

Appear

: 심볼이 서서히 나타나게 한다.

Disappear

: 심볼이 서서히 사라지게 한다.

Bounce

: 바운스 효과를 준다. 바운스 애니메이션은 기본적으로 한 번 재생되며, 동작이 발생 했거나 발생해야 한다는 것을 알리는데 도움이 된다.

Scale

: 기호의 크기를 변경하여 배율을 늘리거나 줄인다. 효과를 제거할 때까지 지속된다. 주의를 끌거나 사람들이 심볼을 선택할 때 피드백으로 사용 가능하다.

Pulse

: 심볼의 불투명도를 변경한다. 펄스 주석이 지정된 심볼 내의 특정 레이어만 자동으로 펄스화 한다. 선택적으로 모든 레이어를 펄스화 할 수도 있다. 조건이 충족될 때까지 계속 재생하여 진행중인 활동을 표현할 수 있다.

Varialbe color

: 심볼 내의 레이어의 불투명도를 점진적으로 변경한다. 생방송과 같은 진행 상황이나 진행 중인 활동을 알릴 수 있다.

Replace

: 심볼을 다른 심볼로 바꾼다. 3가지로 구성되어 있다.
- Down-up: 기존 심볼은 축소되고 새로운 심볼은 확대되어 상태 변화를 알림
- Up-up: 기존 심볼과 새로운 심볼 모두 확대된다. 앞으로 나아가는 변화 느낌을 전달한다.
- Off-up: 기존 심볼이 즉시 사라지고 새로운 심볼이 확대된다. 사용 가능한 다음 상태나 동작을 강조하는 상태 변경을 표현한다.

• 심볼 애니메이션은 신중하게 적용한다.
  : 너무 많은 애니메이션은 사람들의 주의를 산만하게 한다.

• 의도를 전달하기 위해 애니메이션이 명확한 목적을 가지고 있는지 확인해라.
  : 애니메이션이 사영자에게 혼동을 주지 않게 적절한 명확한 목적의 애니메이션을 사용해야 한다.

• 애니메이션을 사용하여 효과적으로 정보를 전달해라.
  : 애니메이션을 사용하면 시각적 공간을 많이 차지하지 않고도 복잡한 정보를 간단하게 표현할 수 있다.

• 애니메이션을 추가할 때는 앱의 톤을 고려해라.
  : 브랜드 아이덴티티 및 앱 전반 스타일과 톤에 어울리도록 고려해라

Custom symbols

SF Symbols에서 제공하지 않는 심볼이 필요한 경우 직접 만들 수 잇다.
원하는 디자인과 유사한 심볼의 템플릿을 내보낸 다음 백터 편집도구를 사용하여 수정한다.

important
SF Symbols에는 저작권이 있는 심볼이 포함되어 있다. 이러한 심볼은 앱 내에서 사용할 수 있지만 커스텀은 불가하다.

사용자 정의 심볼을 만들 때, 주석 처리 기능을 통해 각 에이어에 특정 색상이나 계층 수준을 할당할 수 있다.

• 템플릿을 가이드로 활용해라.
  : 시스템이 제공하는 심볼과 동일한 수준의 디테일, 무게, 정렬, 위치 및 시각점 관점에서 인괄된 커스텀 심볼을 디자인해라.
  다음과 같은 항목을 고려하여 디자인 하려고 노력해라.

  - simple
  - Recognizable
  - Inclusive
  - Directly related to the action or content it represents

• 필요한 경우 심볼에 음수 측면 여백을 추가해라.
  : SF Symbols에서는 사용자 정의 심볼의 너비가 증가할 때(ex: 배지 등의 요소로 인해 너비 증가) 음수 측면 여백을 사용하여 수평 정렬을 보다 쉽게 조정할 수 있도록 지원하며, 이를 위한 네이밍 패턴을 사용해야 한다.

• 커스텀 심볼에 애니메이션을 적용하려면 레이어를 최적화 해라.
  : 레이어를 최적화하고, 주석 처리를 통해 SF Symbols앱에서 각 레이어를 명확하게 표시하고 Z-Order를 활용하여 색상 적용 순서를 결정하며, SF Symbols 5에서는 레이어 그룹을 사용하여 관련된 레이어를 함께 움직일 수 있다.

• 커스텀 심볼의 애니메이션 테스트
  : 커스텀 심볼에 애니메이션을 적용할 때, 모든 애니메이션 프리셋을 테스트하고, 전체 모양으로 심볼을 그리는 것이 중요하며, 이러한 방법은 애니매이션이 예상대로 동작하지 않는 결과를 방지할 수 있다.

• 인클로저나 배지와 같은 일반적인 변형이 포함된 커스텀 심볼을 만들지 말아라.
  : 일반적인 변형을 직접 사용자 정의 심볼에 추가하지 말고 SF Symbols 앱의 컴포넌트 라이브러리를 활용하여 일관된 디자인을 유지하면서 일반적인 변형을 만들어라
  즉, 배지같은 일반적인 변형에 대해서는 커스텀하지 말고 라이브러리를 활용해서 제공해주는 대로 사용하라는 의미인듯

• 커스텀 심볼에 대체 텍스트 레이블을 제공해라
  : 시각 장애를 가진 사용자들을 위해 대체 텍스트 레이블을 제공해야 한다. 이를 통해 VoiceOver를 통한 내비게이션이 향상되어 사용자 경험을 향상시킨다.

• Apple 제품 디자인을 따라하지 말아라.
  : Apple 제품을 모방하거나 복제하면 안된다, Apple 제품은 저작권이 보호되어 있다.

끝!