SF Symbols에 가변 색상 도입

♪

안녕하세요 저는 Paul입니다 SF Symbols를 만들고 있죠 오늘 다룰 내용은 SF Symbols의 새 기능인 Variable Color입니다 Variable Color 기호를 프로젝트에 적용하는 방법과 SF Symbols 앱을 어떻게 활용할 수 있는지 차근차근 알아보겠습니다 우선 시스템이 제공하는 SF Symbols의 Variable Color를 살펴보겠습니다 어떻게 작동하고 언제 사용하는지 알아보죠 그리고 사용자 정의 기호에 Variable Color를 적용하는 방법을 살펴보겠습니다 시작하기에 앞서 오늘 SF Symbols를 처음 접하시거나 복습을 원하신다면 작년 세션을 다시 보시는 걸 추천합니다 'SF Symbols 3 탐색'에서 프로젝트에 기호를 구성하는 법을 배워 보세요 아직 못 보셨다면 탈리아의 세션인 'SF Symbols 4 변경점'에서 오늘 보여 드릴 SF Symbols의 시각 디자인과 다양한 렌더링 모드의 개요를 확인하십시오 Variable Color 이야기를 시작해 보죠 Variable Color는 SF Symbols의 새 기능으로 기호의 모양을 백분율 값으로 변경할 수 있습니다 백분율 값을 변경하면 시간에 따라 변경되는 값을 반영하는 기호를 쉽게 만들 수 있습니다 신호 강도나 진행률처럼요 Variable Color가 작동하는 방식을 보려면 SF Symbols 앱으로 넘어가서 직접 살펴보는 게 좋겠군요 올해 SF Symbols 앱에서는 새로운 미리보기 영역을 렌더링 인스펙터에 추가했습니다 모든 렌더링 모드의 기호를 한눈에 볼 수 있죠 그리고 각각의 아이콘을 클릭해서 렌더링 모드를 전환할 수도 있습니다 새로운 자동 옵션도 선택기에 들어왔습니다 이 옵션을 사용하면 각 기호에 맞는 렌더링 모드를 선택할 수 있습니다 미리보기 영역에서 선택한 것을 볼 수 있죠 예를 들어 'square.and.arrow.up' 기호는 Monochrome이 어울립니다 반면 iPhone 기호는 Hierarchical이 선호되죠 색상 컨트롤 아래에서 Variable Color를 위한 새로운 제어 세트를 찾아볼 수 있습니다 Variable Color를 지원하는 기호를 위해 새로운 카테고리가 생겼죠 실험을 시작하기에 좋은 장소네요 스피커 기호를 선택하고 Multicolor로 전환한 다음 갤러리 보기로 전환해서 자세히 살펴보겠습니다 이 버튼을 클릭해서 Variable Color를 켜고 슬라이더를 아래로 당겨서 사용 중인 백분율을 줄이겠습니다 백분율 값이 감소할수록 기호의 일부분이 흐려지는 게 보일 겁니다 슬라이더를 다시 위로 당기면 기호의 해당 부분이 색을 되찾습니다 미리보기 영역을 잘 보면 네 가지 렌더링 모드 모두 이런 현상이 발생합니다 그리드 보기로 돌아가면 Variable 카테고리의 모든 기호가 변경점에 반응하는 것을 볼 수 있습니다 Variable Color에 대해 무엇을 배웠나요? 첫째, Variable Color는 SF Symbols의 모든 단일 렌더링 모드와 함께 사용할 수 있습니다 Variable Color를 지원하는 모든 시스템 기호인 Monochrome Hierarchical, Palette 및 Multicolor 모드를 지원합니다 둘째, Variable Color로 바뀌는 기호의 부속 개수에 정해진 규칙이 없습니다 어떤 기호는 한 레이어만 영향을 받고 어떤 기호는 수십 개죠 그럼에도 Variable Color는 백분율로 제어되기 때문에 걱정할 필요가 없습니다 원하는 백분율만 입력하세요 그렇다면 시스템이 백분율을 어떻게 해석할까요? 언제 특정 레이어에 Variable Color를 적용해야 하는지 판단할까요? 나머지 SF Symbols와 마찬가지로 Apple 플랫폼과 앱이 잘 어울리도록 Variable Color를 설계했습니다 그 말은 시스템 레벨 표시기의 움직임에서 영감을 얻었다는 뜻이죠 아마 익숙하실 겁니다 이 마이크 기호를 예로 들어 보겠습니다 마이크 왼쪽에 있는 네 개의 점은 각각 별도의 레이어로 Variable Color가 적용됩니다 백분율 값이 특정 임곗값을 넘어설 때 각 점이 활성화되죠 이 임곗값은 0%부터 100% 사이에 균일한 간격으로 지정됩니다 0%는 활성 레이어가 없는 특별한 상태입니다 값이 0%보다 크면 첫 번째 점이 활성화되죠 26%보다 크면 두 번째 점도 활성화됩니다 51%보다 크면 세 번째 점이 활성화되고 76%에서 100% 사이에 네 점이 모두 활성화되죠 따라서 Variable Color 기호는 정확히 0%일 때만 시각적으로 비어 보입니다 이런 동작은 Wi-Fi 강도나 배터리 용량 등 시스템 레벨 표시기에서 볼 수 있습니다 Variable Color 기호는 100%보다 적은 값에서 시각적으로 가득 차 보이기 시작합니다 밝기나 볼륨과 같은 시스템 레벨 표시기에서 이런 동작을 볼 수 있죠 다음 기호는 세 개의 레이어가 Variable Color를 사용합니다 33.3333%와 66.6667%처럼 레이어 사이 임곗값이 어색하게 떨어질 때도 있습니다 기호가 반올림 오류 때문에 이상하게 표시되거나 코드에 유효 자릿수를 몇으로 설정했는지 걱정하는 상황은 피하고 싶었습니다 따라서 레이어 사이 임곗값은 가장 가까운 백분율로 반올림됩니다 다음 레이어가 활성화되려면 반올림된 값보다 1% 더 높아져야 하죠 첫 번째 임곗값에서 33.3%를 반올림하면 33%가 됩니다 따라서 두 번째 레이어는 1% 더 높은 34%에서 활성화되죠 마지막 임곗값은 66.7%에서 67%로 반올림되므로 마지막 레이어는 그보다 1% 더 높은 68%에서 활성화됩니다 물론 시스템이 제공하는 기호는 전체의 절반밖에 되지 않습니다 SF Symbols 앱을 쓰면 나만의 기호와 주석을 만들 수 있고 거기에서 그치지 않고 시스템이 제공하는 기호처럼 유연하고 강력한 사용자 지정 기호도 만들 수 있습니다 유연하고 강력하다는 게 무슨 의미일까요? 시스템이 제공하는 SF Symbols는 아홉 가지 가중치로 사용되며 각각의 가중치는 세 가지 다른 스케일로 사용할 수 있습니다 27가지 변종 하나하나가 네 가지 렌더링 모드를 가지며 Variable Color를 적용하거나 해제할 수 있죠 가능한 조합 수가 216개에 달합니다 물론 사용자 지정 기호를 216번 그려야 하는 건 아닙니다 기호를 그리는 과정을 간소화하려고 작년에 가변 템플릿을 도입했습니다 이런 템플릿을 사용하면 27가지 가중치와 스케일을 조합해서 그리는 대신 세 개만 그리면 됩니다 나머지 24개는 시스템이 자동으로 생성해 주죠 사용자 정의 기호를 그린 후 '주석'이라는 과정을 통해 각종 렌더링 모드를 채택할 수 있습니다 작년까지 기호에 Hierarchical이나 Palette 렌더링 모드를 도입하고 싶었다면 사용자 정의 기호를 여러 레이어로 나누고 hierarchy 레벨을 레이어마다 할당해야 했습니다 Multicolor 렌더링 모드를 기호에 채택하려면 여러분의 사용자 정의 기호를 다시 여러 레이어로 나누고 레이어마다 색을 할당해야 했죠 사용 가능한 렌더링 모드를 모두 지원하려면 두 개의 레이어를 따로 관리해야 했습니다 올해는 통합 주석을 사용하여 작업 흐름을 정리하고 있습니다 통합 주석은 기호에 단일 레이어 구조를 사용합니다 그리고 모든 렌더링 모드에서 그 구조를 공유하죠 따라서 여러 차례에 걸쳐 기호를 레이어로 나누는 대신 한 번만 수행하면 됩니다 이제 Monochrome 모드에서도 기호의 표시 방식을 제어할 수 있습니다 이전에는 Hierarchical과 Palette 및 Multicolor 모드에서만 가능했죠 물론 통합 주석을 사용하면 기호에 Variable Color를 추가할 수 있습니다 사용자 지정 기호에 주석을 달면서 통합 주석을 배워 보겠습니다 작년에 저는 가족끼리 카드 게임을 하는 앱을 만들었습니다 서로 떨어져 있더라도요 그리고 몇 달 후 새로운 것에 집착하게 됐죠 퍼즐 큐브입니다 올해 만들고 싶은 앱은 큐브 풀기 연습을 돕는 앱입니다 제가 만든 퍼즐 큐브 기호를 데스크톱 바탕 화면에 띄웠습니다 아이콘을 앱에 드래그해서 사용자 지정 기호를 만들어 보죠 시스템이 제공하는 큐브 기호를 기반으로 썼는데 퍼즐 큐브의 디테일한 요소가 많이 생략됐죠 이렇게 하면 크기가 작고 가중치가 달라도 기호가 눈에 잘 들어옵니다 이 미리보기 영역이 기억나시나요? 사용자 지정 기호에 주석을 달 때 특히 편리합니다 여기서 주석을 수정하면 다른 렌더링 모드에서 이 기호가 어떻게 보이는지 쉽게 파악할 수 있죠 여기를 클릭해서 렌더링 모드를 전환하거나 선택기에서 다른 옵션을 고르면 목록의 주석 제어가 함께 수정됩니다 Monochrome도 깔끔하지만 Hierarchical 모드에 깊이를 추가해 보죠 모드를 전환하고 윗면을 끌어오고 측면도 가져와서 새 레이어를 만들겠습니다 보시다시피 새 레이어가 자동으로 눈에 덜 띄는 2차와 3차 레벨로 전환됐습니다 기호에 깊이와 함께 시각적 흥미를 더해 주죠 여기서 중요한 건 이 Hierarchical 주석이 Palette 렌더링 모드의 지원에도 활용된다는 점입니다 렌더링 모드를 하나 만드는 수고로 두 개를 얻었죠 Multicolor로 전환해서 색상을 지정해 보겠습니다 Multicolor 모드로 전환해도 Hierarchical에서 분리한 것처럼 레이어가 계속 표시됩니다 통합 주석에서 명심하실 것은 한 렌더링 모드에서 수정한 레이어 구조가 다른 렌더링 모드에 모두 적용된다는 점입니다 앞면은 빨간색, 윗면은 파란색 측면은 노란색으로 만들어 보죠 좋습니다, 예쁘네요 그러나 퍼즐 큐브 풀기를 배울 때 가장 중요한 것은 연습과 연습 그리고 더 많은 연습입니다 저는 이 큐브 기호를 타이머로 사용하면서 연습하는 시간이 길어질수록 색을 채우고 싶습니다 그 해결책이 바로 Variable Color죠 여러 조각으로 나뉜 앞면이 색상을 추가해서 타이머로 활용하기에 적합해 보이네요 앞면의 조각들을 분리해서 각각 레이어를 만들어 보죠 레이어 목록에서 제가 정렬하는 순서를 잘 확인하세요 먼저 채우고 싶은 레이어를 맨 아래로 보내고 마지막에 채우고 싶은 레이어는 맨 위에 놓습니다 모든 레이어를 선택하고 이 버튼을 클릭하면 Variable Color가 모든 레이어에서 활성화되죠 됐습니다 Variable Color 슬라이더를 움직여서 어떻게 되는지 보시죠 미리보기를 통해서 렌더링 모드마다 뭐가 달라지는지 살펴보세요 보시다시피 Variable Color에 사용된 백분율을 변경하면 모든 렌더링 모드에서 앞면 색상이 조정됩니다 이것이 통합 주석의 힘입니다 렌더링 모드를 하나만 편집해도 나머지 렌더링 모드로 이어지죠 많은 경우 한두 번만 수정해 주면 네 가지 렌더링 모드에서 모두 멋진 결과물이 나옵니다 그리고 조금 더 까다로운 상황에서도 SF Symbols 앱은 해결책을 제시하죠 더 복잡한 기호를 살펴보겠습니다 또 제 큐브 기호지만 이번에는 원 안에 자리 잡고 있습니다 시스템 라이브러리에 흔한 .circle.fill 기호 느낌이죠 이미 이 기호에 주석을 달기 시작했습니다 보시다시피 원과 큐브의 여러 조각을 다른 레이어로 분리했습니다 Multicolor와 Hierarchical 모드에서는 기호가 예쁘게 나오지만 Monochrome 모드에서는 큐브가 그 뒤의 원과 구분되지 않습니다 기호의 모든 경로를 레이어 하나에 넣었을 때는 큐브 경로가 원형 경로에 구멍을 만들어서 Monochrome에서도 멋져 보였습니다 하지만 별개의 레이어로 원을 옮기자 큐브의 경로가 구멍을 만들지 않습니다 대신 솔리드 원 위에 솔리드 큐브를 만들죠 그래서 잘 안 보이는 겁니다 다행히도 통합 주석의 새로운 기능이 유용하게 쓰일 겁니다 지우기를 선택해서 레이어 너머 레이어에 구멍을 만들 수 있습니다 훨씬 낫네요 Variable Color를 다시 추가해 보죠 이번에는 앞면의 조각을 전부 선택합니다

컨텍스트 메뉴에서 새 레이어로 나누기를 클릭하세요 그리고 Variable Color를 다시 켭니다 다 됐네요 그런데 여기서 경로는 기호 템플릿의 순서에 따라 분할됩니다 따라서 기호 경로의 순서에 주의를 기울여야 나중에 다시 고칠 일이 없죠 이것이 바로 통합 주석의 기본입니다 사용자 기호에 주석을 추가하는 빠르고 강력한 방법입니다 레이어 구조를 하나 만들면 모든 렌더링 모드에 적용할 수 있고 Monochrome 렌더링 모드에서도 기호의 모양을 제어할 수 있죠 기호의 개별 레이어에 Variable Color를 추가할 수 있습니다 레이어의 Z-Order는 백분율 값이 증가함에 따라 채울 순서를 결정하며 각 레이어에서 사용하는 임곗값은 0%부터 100%까지 균등한 간격을 갖습니다 그리고 주석이 레이어 구조의 일부이기 때문에 레이어 하나에 Variable Color를 넣으면 모든 렌더링 모드에서 설정이 공유됩니다 그리고 새 공유 레이어 구조를 다루기 쉽도록 두 가지 레이어 옵션이 추가됐습니다 레이어를 '지우기'로 설정하면 그 레이어의 형태로 뒤쪽 레이어가 지워집니다 Monochrome이나 Hierarchical 모드 기호에 더하기나 빼기 부호처럼 지워야 할 형태가 있는 경우 유용하게 활용할 수 있죠 마지막으로 레이어를 '숨김'으로 설정하면 특정 렌더링 모드에서 제외됩니다 사정상 여러 렌더링 모드 중 하나를 쓸 수 없다면 이 옵션을 사용해서 그 레이어를 특정 모드에만 적용하세요 이러한 새 기능들은 새로운 템플릿 포맷인 4.0에서 지원됩니다 SF Symbols 앱에서 Xcode로 기호를 내보낼 때는 꼭 4.0 템플릿을 이용해서 Monochrome 렌더링을 제어하고 Variable Color를 사용하세요 작년에 주석을 추가한 사용자 제작 기호가 있다면 통합 주석을 사용하도록 자동으로 업데이트됩니다 Hierarchical과 Multicolor 주석을 추가 작업 없이 가져올 수 있습니다 이전 플랫폼을 계속 지원해야 한다면 3.0 및 2.0 형식도 계속 사용할 수 있습니다 마무리에 앞서 하나만 더 말씀드리죠 저는 퍼즐 큐브 풀기를 배우면서 즐거웠지만 지금까지 가장 좋았던 건 제가 푸는 것을 보고 제 딸도 배우려 했다는 겁니다 제 아이도 연습할 때 이 앱을 활용하면 더 좋을 것 같네요 이번 가을 유치원에 들어갈 테니까 조금 천천히 시작할 생각입니다 여기서 Variable Color를 적용한 기호가 진가를 발휘하죠 타이머 UI를 이렇게 디자인해도 됩니다 문자와 숫자는 설명적이고 유용하지만 아직 글을 읽지 못하거나 배우고 있는 아이는 글자를 보고 겁을 먹을지 모릅니다 하지만 손에 들고 있는 것과 똑같은 큐브가 뜨고 시간이 지남에 따라 색이 채워지는 타이머라면 친근하고 직관적이죠 타이머 코드를 변경할 필요도 없습니다 그저 현재 사용 중인 기호의 이름을 바꾸고 제가 사용하고 있는 큰 큐브의 백분율 값을 그대로 옮기면 됩니다 나머지는 SF Symbols가 알아서 해 주죠 이것이 기호의 힘입니다 언어와 문자를 초월해서 아이디어를 전달할 수 있죠 더욱 포괄적인 앱을 만들게 해 줍니다 그리고 시스템 제공 기호와 사용자 지정 기호에서 Variable Color를 사용하면 진행 상황, 신호 강도 및 시간 같은 개념에 더욱 강력한 표현력을 줍니다 이 모든 것이 세 장의 그림과 하나의 통합 주석으로 이뤄지죠 정말 굉장한 일입니다 솔직히 퍼즐 큐브를 푸는 것보다 훨씬 쉽기도 하고요 ♪