[WWDC] SF Symbols 4
WWDC 2022 What’s new in SF Symbols 4 & Adopt Variable Color in SF Symbols 정리
들어가기 전에
해당 세션에 나오는 모든 내용을 정리한게 아닙니다..!
제가 간단히 기록해놓으면 좋겠다 싶은 내용들을 추려놓은거니 정확한 내용은 WWDC 세션을 보시는걸 추천드립니다 😵
Automatic Rendering
SF Symbols 4 에서는 기존의 Monochrome, Hierarchical, Palette, Multicolor 의 렌더링 모드에 더해 Automatic Rendering 이 생겼습니다
원래 default 는 Monochrome 이었지만, Automatic 렌더링 모드를 통해 각 심볼의 특성에 최적화된 모드로 렌더링 할 수 있습니다.
예를 들어 Share Play 심볼 같은 경우는 Hierarchical 모드로 렌더링 됩니다.
마찬가지로 에어팟 심볼도 Automatic 렌더링 모드에서는 Hierarchical 모드로 렌더링되는데, 만약 해당 심볼이 매우 작거나 백그라운드 색상과 유의미한 대비가 이뤄지지 않을 때는 Monochrome 모드가 오히려 적합할 수 있습니다.
따라서 적합한 렌더링 모드를 context 에 맞게 잘 판단해야합니다.
Variable Color
SF Symbol 4 에서는 Variable Color 도 등장했습니다
Variable Color 도 opacity 의 차이가 기반이 되기 때문에 Hierarchical 모드랑 뭐가 다르지? 라고 생각할 수 있습니다.
Hierarchical 모드는 opacity 를 통해 depth 를 표현한다면, Variable Color 는 심볼이 나타낼 수 있는 일련의 단계를 표현하기 위한 것입니다.
파동, 광선, 타원, 층 등의 심볼을 Variable Color 를 통해 표현할 수 있습니다.
주방 타이머도 sequence 를 나타내기 때문에 Variable Color 를 이용하기에 좋은 예시입니다. 이를 위해서는 모든 path 를 하나의 layer 로 묶는 대신 각각의 layer 로 나눠야합니다.
이렇게 나눠진 레이어에 따라 Variable Color 에 영향을 받는 레이어는 한개일 수도 있고, 여러개일 수도 있습니다.
하지만 Variable Color는 퍼센트에 따라서 조절되기 때문에 레이어의 개수는 우리가 신경 쓰지 않아도 됩니다
만약 네 단계로 레이어가 나눠져있다면, 0% 는 0단계, ~25% 까지는 1단계, ~50% 까지는 2단계, ~75%까지는 3단계, 100% 까지는 4단계를 표시합니다
만약 세 단계로 레이어가 나뉘어져있는 경우에는 경계가 어떻게 나뉘어질까요? 33.333333, 66.6666667 이런 식으로 계산될까요?
그렇지 않습니다. 대신 percentage point 와 가까운 숫자로 반올림 됩니다.
따라서 첫번째 threshold 인 33.3 은 반올림 되어 33이 되고, 그 다음 threshold 인 66.7 은 67 으로 반올림됩니다.
따라서 0 == 0단계 / 0 < 1단계 < 34 / 34 ≤ 2단계 < 68 / 68≤ 3단계 ≤100 으로 레이어가 채워집니다
Variable Color 는 Monochrome, Hierarchical, Palette, Multicolor 의 모든 렌더링 모드에서 적용할 수 있습니다
마무리
모두 덥덥 잘 보고 계신가여? 저는 첫날에 봐야지 북마크 해둔 것들 중에 아래 하트 쳐놓은 것들을 재밌게 본거 같아요 (물론 못본것도 남아있지만여 ◠‿◠ ,,)
특히 Hello Swift Charts 꽤나 흥미로웠어서 관심 있는 분들은 추천드림다
여러분도 재밌게 보신거 있으면 댓글로 추천해주세여! 그럼 20000!
