[WWDC22] Adopt Variable Color in SF Symbols

링크: https://developer.apple.com/videos/play/wwdc2022/10158/

Adopt Variable Color in SF Symbols - WWDC22 - Videos - Apple Developer

 

 

1. Variable Color란

 

 

 

Variable Color는 퍼센트 값으로 심볼의 외관에 영향을 끼치게 해주는 새로운 기능입니다.

신호 강도 또는 진행률처럼 시간이 지남에 따라 변경될 수 있습니다.

 

 

 

올해 SF Symbol 앱에서는 Rendering Mode를 한눈에 볼 수 있는 Rendering Inspector가 추가되었습니다.

 

 

또한 왼쪽에 Variable Color를 지원하는 Variable이라는 카테고리가 새로 생겼습니다.

이 카테고리에서 심볼을 하나 선택한 후 슬라이더를 조정하면 퍼센트에 따라 이미지가 바뀌는 것을 볼 수 있습니다.

 

 

 

Variable Color는 모든 단일 렌더링 모드와 함께 사용할 수 있습니다.

 

 

또한 여러 레이어를 가질 수 있습니다. 하지만 퍼센트를 통해 조절되기 때문에 걱정할 필요는 없습니다.

 

 

 

Variable Color는 0퍼센트일때만 시각적으로 비어보이게 나타나고 그 외에는 아래처럼 정해진 값의 레이어에 따라 정해집니다.

만약에 레이어가 총 3종류라면 어떻게 될까요? 레이어 간의 임계값이 33.333333이 될 수 있겠죠. 이때는 반올림을 해서 34로 사용하니 걱정하지 마세요.

 

 

 

 

2. Custom symbol에 Variable Color 적용하기

 

 

 

우선 시스템에서 제공하는 SF Symbol들은 9가지의 다른 무게(weight)를 지원하고 각 무게마다 3가지의 스케일(1x, 2x, 3x)을 지원합니다.

 

 

 

이 27개의 변수들 각각은 Variable Color가 있거나 없는 4가지 렌더링 모드에서 사용 가능합니다.

이것은 총 216가지의 설정입니다.

 

 

 

다행히 Custom Symbol을 만들 때에는 216가지의 설정이 필요하진 않습니다.

오직 3개만 그리면 시스템에서 24개를 자동으로 생성할 수 있습니다. 

 

 

 

커스텀 심볼을 그린 후, 주석 단계를 통해 다른 렌더링 모드를 적용할 수 있습니다.

작년에는 계층과 팔레트 렌더링 모드를 적용하려면 커스텀 심볼을 다른 레이어로 나누고 각 계층 레벨을 할당했습니다.

다중 색상 렌더링 모드를 적용하려면 커스텀 심볼을 다시 다른 레이어로 나누고 각 레이어에 색상을 할당했습니다.

 

 

 

올해에는 통합 주석을 사용하여 워크플로우를 간소화하고 있습니다.

통합 주석은 심볼에 대한 단일 레이어 구조를 사용하고 모든 렌더링 모드에서 해당 구조를 공유합니다.

 

 

 

큐브 예제입니다.

 

 

 

윗 부분을 Layers 패널로 드래그 앤 드랍하니 레이어가 생기고 회색으로 표시됩니다.

드래그

드랍

 

 

옆부분도 레이어에 넣은 모습입니다.

 

 

한 렌더링 모드에서의 레이어 구조에 대한 변경 사항은 다른 모든 모드에도 적용됩니다.

따라서 다중 색상 모드도 쉽게 지원할 수 있습니다.

 

 

 

Variable Color를 지원하기 위해 앞면의 9개로 나뉘어진 조각들을 각각의 레이어로 분리하고 있습니다.

 

 

 

Layers 패널에 있는 9개의 모든 레이어를 클릭한 후 Variable Color를 허용하는 버튼을 클릭합니다.

 

 

 

이제 Variable Color 슬라이더를 움직이면 잘 반영되는 것을 볼 수 있습니다.

이때 모든 렌더링 모드에서 반영되는 것을 볼 수 있습니다.

 

 

 

좀 더 복잡한 심볼을 보겠습니다.

 

 

 

이 심볼의 현재 문제는 흑백 모드에서 제대로 표시되지 않는 점입니다.

 

 

 

 

심볼의 모든 패쓰가 하나의 레이어에 있을 때 큐브 패쓰는 원형 패쓰에 구멍을 만들어 흑백에서 잘 보였습니다.

 

 

 

하지만 이제 원을 자체 레이어로 이동했기 때문에 큐브 패쓰가 더 이상 구멍을 만들지 않습니다.

 

 

대신 솔리드 원 위에 솔리드 큐브를 만들어 잘 보이지 않게 됩니다.

 

 

 

이럴 때에는 큐브 레이어들을 선택하여 레이어 설정을 Draw에서 Erase로 바꾸면 됩니다.

 

 

이후엔 통합 주석에 대한 설명입니다.

 

 

새 템플릿 버전에 대한 설명입니다.

 

 

 

심볼은 언어와 텍스트를 초월한 방식으로 아이디어를 전달할 수 있습니다.

그리고 시스템에서 제공하는 심볼, 커스텀 심볼, Variable Color는 진행 상황, 신호 강도 및 시간과 같은 개념에 대한 표현력을 훨씬 더 많이 제공합니다.이 모든 것이 세 개의 레이어와 하나의 통합된 주석으로 이루어집니다. :)