What's new in SF Symbols 4

♪ ♪

안녕하세요 제 이름은 Thalia입니다 오늘은 SF Symbols의 새로운 기능에 대해 알아보겠습니다 심벌은 그래픽 커뮤니케이션의 가장 효과적인 단일 요소 중 하나입니다 느낌, 대상, 동작 또는 개념을 표현하고 싶다면 심벌을 사용하는 것이 좋습니다 심벌은 자주 그리고 일관되게 사용되어 이제 우리 삶의 일부가 되었습니다 심벌 없이는 주변을 탐색하는 것이 매우 어렵다는 것을 알게 될 것입니다 결과적으로 심벌은 의사 소통을 돕는 훌륭한 방법이기 때문에 인터페이스 디자인의 필수적인 부분이 됩니다 심벌은 또한 상호작용의 수단이 되고, 공간 효율적이고, 미적 매력을 향상시키고, 사용자 친화적으로 우리를 끌어들이는 많은 이점을 가져다 줍니다 심벌은 수많은 언어를 초월할 수 있다는 점에서 뛰어납니다 그들은 보편적일 수 있습니다 결과적으로, 심벌은 공유된 아이디어를 전달할 때 사람들을 하나로 묶을 수 있으며, 말로만 하는 것보다 더 깊게 다른 사람들과 소통하는 데 도움이 됩니다 Apple은 사용자 인터페이스와 전반적인 경험을 개선하는 데 심혈을 기울이고 있습니다 이것이 바로 시스템 글꼴인 San Francisco와 원활하게 통합되도록 설계된 광범위한 아이콘 라이브러리인 SF Symbols를 만든 이유이며 이는 모든 Apple 플랫폼에서 경험을 생성할 수 있는 강력하고 유연한 디자인 리소스를 제공합니다 SF Symbols는 타이포그래피를 염두에 두고 디자인되었습니다 다양한 가중치, 스케일, 윤곽선 및 채워진 변형, 캡슐화된 모양 및 정렬과 같은 멋진 기능이 있습니다 이러한 기능과 이를 언제 사용하는 것이 가장 좋은지 알아보려면 WWDC의 작년 영상을 확인하여 최신 정보를 얻으십시오 오늘은 "New symbols"에서 새 레퍼토리와 새 범주를 살펴보겠습니다 "렌더링 모드"에서 심벌에 색상을 추가할 때의 이점을 검토하고 심벌의 동작을 자동으로 만들어 주는 새로운 구성이 있습니다 "가변 색상"이라는 새로운 흥미로운 기능이 있습니다 여기서는 색상을 사용하여 심벌을 보다 역동적으로 만드는 방법을 살펴보겠습니다 마지막으로 심벌에 주석을 추가하는 보다 효율적인 방법이 있습니다 "통합 주석"에서 이에 대해 자세히 알아볼 것입니다 그럼 시작해 보죠 SF Symbols 라이브러리에는 새로운 범주가 계속 추가되고 선택할 수 있는 심벌의 양이 매년 증가하고 있습니다 조명, 블라인드, 창문 및 문을 포함하여 홈에 대한 몇 가지 훌륭한 추가 사항이 있습니다 전등 스위치와 콘센트도 있습니다 새 가구와 가전 제품이 있습니다 그리고 새로운 건강 심벌도요 그리고 올해에는 피트니스 심벌도 사용할 수 있습니다 라이브러리의 화폐 심벌도 확장했습니다 선택할 수 있는 새로운 개체가 많습니다 그리고 물론, 여러 스크립트와 오른쪽에서 왼쪽 쓰기 시스템을 다루는 새로운 심벌로 현지화된 심벌을 계속 확장하고 있습니다 700개 이상의 새로운 심벌을 보유한 SF Symbols는 4,000개 이상의 고유한 심벌을 보유한 라이브러리입니다 놀랍죠 이 모든 새로운 추가 기능과 함께 SF Symbols 앱의 모든 심벌을 탐색하는 데 도움이 되는 매우 유용한 5개의 카테고리가 새롭게 추가되었습니다 카메라 & 사진, 접근성, 개인정보 및 보안 홈과 피트니스 그리고 앱에서 필요한 심벌을 선택해 언제든지 자신만의 컬렉션을 만들 수 있다는 점을 잊지 마세요 이제 다양한 렌더링 모드에 대해 간단히 알려드리겠습니다 아시다시피 SF Symbols에는 선택할 4가지 렌더링 모드가 있으며 각 모드는 색상이 심벌에 적용되는 방식을 더욱 잘 제어할 수 있습니다 모노크롬은 모든 렌더링 모드 중에서 가장 중립적입니다 균일하고 일관된 모양을 제공하며 SF Symbols의 타이포그래피 특성을 가장 잘 반영하는 렌더링 모드입니다 Hierarchical은 단일 색상 색조가 전체 미학을 주도하면서 미묘한 강조를 제공하는 렌더링 모드입니다 심벌의 가장 중요한 모양을 강조하여 깊이를 적용하거나 전경과 배경 요소를 구분할 수 있습니다 그런 식으로 심벌의 필수 부분을 강조하여 시각적 계층 구조를 만듭니다 팔레트는 두 가지 이상의 대비되는 색상을 사용하여 심벌의 요소를 보다 두드러지게 하며 다용성을 부여하여 심벌이 환경의 색상 팔레트와 통합되도록 사용자 정의가 가능합니다 팔레트는 심벌이 전체적인 미학을 해치지 않으면서 대조되고 독특한 모양을 갖도록 도와줍니다 그리고 Multicolor는 심벌의 고유 또는 기본 색상을 나타내는 렌더링 모드입니다 이 렌더링 모드는 물리적 세계에서 물체의 모양을 설명하기 위해 심벌에 적용할 수 있는 다양한 색상을 사용하거나 색상을 사용하여 심벌이 전달하려는 의미를 강조할 수 있습니다 Multicolour는 심벌 형태와 관련된 색상 내러티브를 만드는 데 도움이 되므로 UI에서 심벌이 매우 눈에 띄는 경우 사용할 수 있습니다 지금까지는 렌더링 모드를 명시적으로 지정하지 않으면 기본적으로 Monochrome이 표시됩니다 그러나 올해에는 각 심벌의 고유한 특성을 가장 잘 강조하는 렌더링 모드에서 심벌을 더 쉽게 표시할 수 있게 되었습니다 이제 심벌에는 각 심벌마다 상이할 수 있는 기본 렌더링 모드가 있습니다 이는 자동 렌더링이라고 부릅니다 선택하면 수동으로 지정할 필요 없이 각 심벌에 필요한 기본 렌더링 모드 구성을 제공합니다 예를 들어 자동이 선택되면 카메라 필터 심벌은 Hierarchical을 선택합니다 실제 카메라 렌즈 및 필터의 반투명도를 참조하는 불투명도를 강조 표시하여 보다 정확한 시각적 표현을 전달하는 렌더링 모드이기 때문입니다 여기 또 다른 예가 있습니다 자동을 선택하면 SharePlay 심벌은 계층적 렌더링 모드에 참여합니다 이 동작을 사용하면 파도가 배경에서 부차적인 역할을 하는 동안 사람의 모양이 전경에서 눈에 띄게 됩니다 SharePlay 기능은 주로 친구 및 가족과 공유하고 연결하는 방법이기 때문에 이것은 심벌의 개념을 강조합니다 대부분의 경우 자동이 가장 좋은 방법입니다 그러나 항상 컨텍스트를 인식해야 합니다 예를 들어 자동을 선택하면 AirPods Pro 심벌이 계층 구조로 렌더링됩니다 그러나 이 컨텍스트에서 심벌은 이 배경에 표시될 때 매우 작고 두드러지지 않습니다 특정 컨텍스트의 심벌 전체에 균일한 모양을 위해 렌더링 모드를 명시적으로 지정할 수 있음을 기억하세요 따라서 이 경우 모노크롬이 더 읽기 쉽고 작은 크기에서 세부 사항이 적기 때문에 최상의 선택이 될 것입니다 따라서 항상 가장 적합한 렌더링 모드 구성을 지정해야 합니다 다양한 렌더링 모드는 심벌에 색상을 적용하여 다양한 상황에 대한 시각적 솔루션을 제시합니다 색상은 강력한 도구이며 더 자세히 살펴볼 수 있습니다 일부 심벌은 본질적으로 더 역동적입니다 시각적 표현을 분석하면 두 가지 주요 특성을 확인할 수 있습니다 첫 번째는 경로 또는 모양이 다양한 수준의 강도를 전달하고 두 번째는 시간이 지남에 따라 변화하는 상태를 전달하기 위해 색상에 의존한다는 것입니다 올해에는 가변 색상이라는 새로운 기능을 도입하여 색상 사용을 확대하고 있습니다 심벌의 벡터 경로를 레이어로 정렬하고 해당 레이어를 순차적으로 구성하여 이러한 레이어를 통해 색상을 배포하는 새로운 방법을 만들었습니다 이를 통해 다양한 수준의 강도를 전달하거나 시간이 지남에 따라 시퀀스를 전달할 수 있으며 이는 심벌 디자인의 특성에 따라 결정됩니다 한 가지 중요한 점은 가변 색상에서 일부 심벌에는 시퀀스에 참여하는 모든 경로가 있지만 다른 심벌의 경우 일부 경로만 옵트인할 수 있다는 것입니다 몇 가지 예를 살펴보겠습니다 가변 색상을 이용하여 iPhone을 나타내는 경로가 가변 시퀀스를 옵트아웃하도록 하고 전파를 나타내는 경로를 강조 표시하려고 합니다 이것은 전화기의 무선 신호 강도 수준을 설명하는 단계를 구별하는 데 도움이 됩니다 경로의 그룹화 방법이 정의된다는 걸 아는 것이 중요합니다 예를 들어 이 경우 왼쪽에서 오른쪽으로 파동을 강조 표시하는 것은 의미가 없습니다 따라서 대신 무선 신호 강도를 가장 잘 전달하는 시퀀스를 따라 경로를 그룹화할 수 있습니다 한 레이어에 두 개의 작은 파동이 있고 다른 레이어에 두 개의 더 큰 파동이 있습니다 그리고 언급했듯이 전화기는 가변 시퀀스에 참여하지 않습니다 이번에는 우리에게 매우 친숙한 심벌을 살펴보죠 대부분의 경우 이 심벌은 이에 표시된 상태와 동기화되는 내장 슬라이더와 한 쌍을 이룹니다 웨이브는 슬라이더를 제어하는 ​ ​사용자가 지시한 순서에 따라 볼륨 수준을 높이거나 낮춥니다 iPhone의 예에서와 같이 스피커를 나타내는 모양인 시퀀스에 참여하지 않는 경로가 있고 볼륨의 강도를 정의하는 세 가지 파동인 낮은 볼륨, 중간 볼륨, 높은 볼륨 시퀀스에 참여하는 경로가 있습니다 이 경로는 레이어로 구성되며 선택한 레이어는 가변 색상 기능을 선택합니다 우리는 백분율 값으로 강도를 나타냅니다 0%는 완전히 꺼져 있고 0%를 초과하면 심벌의 일부가 강조 표시되고 값이 100%에 가까워지면 전체 심벌이 완전히 강조 표시됩니다 한 가지 중요한 사실은 가변 색상이 깊이를 만들기 위한 것이 아니라는 것입니다 대신 심벌이 나타낼 수 있는 일련의 단계 또는 단계를 강조 표시하기 위한 것입니다 예를 들어, 방 안에 있는 사람들의 수를 나타내는 심벌이 필요하다고 가정해 봅시다 이 심벌이 잘 어울리는군요 좀 더 자세히 살펴보겠습니다 우리는 심벌의 한 부분만을 강조하고 싶지 않습니다 대신 심벌을 시퀀스 또는 범위로 생각할 필요가 있습니다 여기서 목표는 다양한 상태를 모두 다루는 것입니다 방이 비어 있고, 사람이 거의 없고, 절반이 찼고, 방이 가득 찼습니다. 이제 가변 색상을 선택하면 전달하려는 다양한 상태의 그래픽 표현을 쉽게 볼 수 있습니다 그리고 기능을 선택할 수 있는 경로의 수에는 제한이 없습니다 하나 또는 여러 개일 수 있습니다 자신의 요구사항에 가장 적합한 설계 전략이 무엇인지 결정하면 됩니다 웨이브, 광선, 타원 및 레이어와 같이 시퀀스를 따르는 모양의 강도 수준을 나타내려면 가변 색상을 사용하면 됩니다 가변 색상은 불투명도 기반이며 모든 렌더링 모드에서 사용할 수 있습니다

올해 우리는 모든 렌더링 모드에서 통합 레이어 구조를 생성하여 사용자 지정 심벌에 대한 주석을 더 빠르고 쉽게 사용할 수 있도록 만들었습니다 저는 베이킹을 좋아하고 컵케이크 전용 레시피로 앱을 디자인할 생각을 하고 있었습니다 저만의 맞춤 심벌을 만들고 싶었기 때문에 요구 사항을 충족할 세트를 디자인했습니다 통합 레이어 구조 접근 방식으로 심벌에 주석을 추가하는 방법과 가변 색상에 참여하는 심벌에 주석을 추가하는 방법을 보여줄 수 있는 좋은 기회가 될 것입니다 이 두 가지를 예로 들어 보겠습니다 주석 달기를 시작하기 전에 고려해야 할 몇 가지 사항이 있습니다 계층 구조를 염두에 두고 z 순서의 개요를 확인해야 합니다 z-order는 z-축을 ​​따라 심벌에서 경로의 순서를 나타냅니다 또한 두 가지 새로운 개념인 그리기와 지우기에 대해서도 알아야 합니다 이는 레이어가 렌더링되는 방식을 정의하는 데 사용됩니다 예를 들어, 여기에 원과 겹치는 정사각형을 나타내는 심벌의 경로가 있습니다 사각형이 포함된 레이어를 선택할 때 그리기 옵션을 선택하면 레이어는 해당 레이어에 포함된 경로를 그립니다 지우기 옵션을 선택하면 레이어가 레이어를 포함하는 경로를 지워 심벌이 렌더링되는 방식에 영향을 줍니다 이제 컵케익에 주석을 달기 시작하겠습니다 첫 번째 단계로 경로를 레이어로 구성하여 원하는 계층 구조를 생성해야 합니다 자세히 분석하면 네 가지 주요 모양인 설탕 프로스팅, 컵케이크 베이스, 배지 및 플러스를 볼 수 있습니다 레이어에 필요한 만큼 경로를 추가할 수 있습니다 따라서 이 경우 프로스팅은 세 개의 다른 경로가 있는 레이어로 정의되고 나머지 레이어는 각각 하나의 경로로 정의됩니다 이러한 방식으로 모양을 구성하면 모든 렌더링 모드에 대해 하나의 구조에 주석을 달 때 더 많은 유연성이 생깁니다 이제 필요에 따라 심벌을 사용자 정의하는 데 필요한 모든 정보가 한 곳에 있습니다 이제 모든 렌더링 모드에 주석을 달 수 있습니다 먼저 Multicolor를 살펴보겠습니다 이미 모양이 설정되어 있으므로 올바른 색상을 선택하기만 하면 됩니다 제가 가장 좋아하는 Red Velvet에 프로스팅에는 흰색을, 컵케이크 베이스에는 빨간색을 선택하겠습니다 이제 SF Symbols가 Multicolor의 플러스 배지에 정의한 것과 동일한 논리를 따르겠습니다 배지는 녹색, 플러스는 흰색입니다 아주 좋아보이네요 이제 배지에 집중해 보겠습니다 여기에서 통합 주석 접근 방식이 더 분명해집니다 Multicolor가 이미 정의되었으니 이제 계층 및 팔레트를 살펴보겠습니다 이 렌더링 모드에서 계층 구조를 사용하기 때문에 배지가 기본이 될 것으로 예상하고 이 배지는 이와 같이 검정색 배경에 흰색을 렌더링합니다 이제 배지의 일부를 지우려면 더하기 모양이 필요합니다 여기에서 지우기 선택이 도움이 됩니다 레이어가 겹칠 때 모양의 일부를 지우면 원하는대로 배지가 렌더링되는 것을 볼 수 있습니다 마지막으로 Monochrome 주석만 있으면 됩니다 이 렌더링 모드에는 복잡성이 추가되지 않기 때문에 동일한 논리에 따라 더하기 모양이 배지 모양의 일부를 지우도록 합니다 이제 거의 다 됐습니다 몇 가지 추가 세부 정보가 필요합니다 Hierarchical 및 Palette의 경우 나머지 컵케익 모양에 Secondary로 주석을 추가하면 됩니다 팔레트의 경우 약간의 대비를 주기 위해 색상을 선택합니다 모노크롬의 경우 나머지 모양이 그리기로 선택되어 있는지 확인하기만 하면 됩니다

이것만 있으면 됩니다 컵케익은 모든 렌더링 모드를 위해 준비되고 사용자 정의됩니다

이제 주방 타이머를 살펴보겠습니다 경로는 시간의 흐름을 나타내는 시퀀스이기 때문에 가변 색상을 적용하기에 안성맞춤입니다 동일한 전략을 사용하여 이 심벌에 주석을 추가할 수 있지만 타이머 경로를 하나의 레이어로 그룹화하는 대신 자체 레이어에서 각 경로를 분할해야 합니다 이는 심벌의 다양한 상태를 전달하는 데 도움이 되는 시퀀스를 다시 만들 수 있도록 모양을 구성해야 하기 때문입니다 가변 색상은 모든 렌더링 모드에서 작동한다는 점을 기억하세요 새로운 가변 색상 기능과 SF Symbols 앱에 대해 자세히 알아보려면 Paul의 강연인 "Adopt Variable Color in SF Symbols"를 확인하세요 SF Symbols 앱의 새로운 베타 버전을 만날 수 있습니다 여기에서 새로운 통합 주석 접근 방식을 탐색하고 수백 가지의 새로운 심벌과 새로운 뛰어난 기능에 액세스할 수 있습니다 developer.apple.com/sf-symbols를 확인하세요 자동 렌더링 동작에서 가변 색상 동적 특성에 이르기까지 SF Symbols는 UI에서 심벌을 구현할 때 사용할 수 있는 매우 강력한 도구입니다 그리고 올해 SF Symbols는 표현의 스펙트럼을 정의하는 기능으로 더 강력해졌습니다 오늘 함께해 주셔서 감사합니다 SF Symbols의 새로운 기능에 대해 배운 유익한 시간이었기를 바랍니다