[WWDC22] What's new in SF Symbols 4

What's new in SF Symbols 4

Explore the latest updates to SF Symbols, Apple's extensive library of iconography designed to integrate seamlessly with San Francisco, the system font for all Apple platforms. Discover the latest additions to the SF Symbols library and new categories in the app. Learn about the new Automatic behavior, which chooses the rendering mode that best highlights what's unique about the symbol's characteristics. See how to use the new Variable Color feature to make a symbol more dynamic. We'll also learn about a more efficient way of annotating symbols with the new unified approach. To get the most out of this session, we recommend first watching “What's new in SF Symbols” from WWDC21.

 

이 시간에는 SF Symbols 4 버전에 업데이트 된 내용을 간단하게 살펴보도록 합니다. 저는 이번에 Rendering Mode에 대해 좀 흥미롭게 보았던 것 같습니다. 이미 SF Symbols 3 버전에도 있는 내용이었지만 이번 시간에서야 조금 제대로 이해하지 않았나 싶네요.

 

들어가며

Symbol = 심볼 = 기호 = 아이콘 = 상징

 

심볼은 그래픽 커뮤니케이션의 가장 효과적인 단일 요소 중 하나입니다. 느낌, 대상, 동작 또는 개념을 표현하고 싶다면 기호를 사용하는 것이 좋습니다. 심볼은 의사 소통을 돕는 훌륭한 방법이기 때문에 인터페이스 디자인의 필수적인 부분이 됩니다.

 

심볼은 또한 상호작용의 수단이 되고 공간 효율적이며 많은 이점을 가져올 수 있습니다. 미적 매력을 높이고 사용자 친화적으로 사용자 경험을 이끌어냅니다.

 

그리고 언어의 장벽을 넘을 수 있고, 공유된 아이디어를 전달하는 데 있어서 사람들을 하나로 묶을 수 있습니다.

나도 동의하는 바이다. 심볼(기호)라는 것은 상호작용, 소통을 하는 데에 있어 정말 강력한 수단인 것 같다. 여러 단어, 문장을 쓰는 것보다 하나의 기호로 얻을 수 있는 장점(위에서 언급됨.)은 너무나도 많다.

Apple은 사용자 인터페이스와 전반적인 경험을 개선하는 데에 관심을 가지고 있고, 심볼은 이를 도와주는 강력한 수단이 될 수 있다.

위와 같은 이유로 Apple은 시스템 글꼴인 San Francisco와 원활하게 통합되도록 설계한 아이콘 라이브러리인 SF Symbols을 만들어냈습니다. SF Symbols는 타이포그래피를 염두에 두고 디자인되었습니다. SF Symbols는 Weights, Scales, Outlined, Filled variants, Encapsulated Shapes, Alignments 등을 조정할 수 있는 멋진 기능이 있습니다.

 

오늘의 이야기

오늘은 어떤 이야기를 해볼까요?

세션에서는 크게 4가지 내용이 언급됩니다.

• New symbols
• Rendering modes
• Variable Color
• Unified annotations

다음의 내용을 하나씩 살펴보도록 하죠.

 

New Symbols

4,000이라는 숫자가 과연 무엇을 의미할까요? 기존의 심볼과 더불어 700개 이상의 새로운 심볼이 추가되면서 SF Symbols는 이제 4,000개 이상의 고유한 기호를 가진 라이브러리가 되었습니다. (와우!! 😲)

이번에 추가된 것들 중에서 크게 5가지의 카테고리에 집중하면 좋을 것 같은데요.

5개의 새로운 카테고리

1. Camera & Photos
2. Accessibility
3. Privacy & Security
4. Home
5. Fitness

아무래도 이렇게 새롭게 추가되는 카테고리를 보면 그 해에 Apple이 어떤 분야에 관심을 가지고 있는지 알 수 있을 것 같습니다.

 

Rendering Mode (렌더링 모드)

이미 4가지의 렌더링 모드는 기존에 소개되었기 때문에 간단하게만 보고 넘어가도록 할게요. (근데 저도 이번에서야 조금 찾아봤어요..ㅎ)

SF Symbol 3에서 소개가 되었던 4가지의 렌더링 모드를 살펴볼게요. SF Symbol 3에서는 렌더링 모드를 지원하기 위해서 심볼의 path를 primary, secondary, tertiary 와 같은 별개의 레이어로 구성합니다. (레이어가 존재한다니 흥미롭죠?)

path라고 함은 선이라고 생각하면 될 것 같은데요. 그러니까 Symbol은 모두 path 또는 나머지 부분(비어 있는 공간)으로 나뉘어지고 있어요.

이어서 기존의 4가지 Mode를 먼저 보고 새롭게 추가된 내용은 무엇인지 보도록 할게요.

1. Monochrome (단색)
2. Hierarchical (계층)
3. Pallete (팔레트)
4. Multicolor (여러 가지 색)

어떻게 차이가 있는지 궁금해서 실습을 진행해봤습니다. 간단하게 Playground에서 SwiftUI를 import 해와서 Live View로 보도록 할게요.

1. Monochrome (단색)

심볼에 한 가지 색상을 지정한다고 보면 됩니다. path를 지정한 색상으로 렌더링 하는 건데요. 그냥 통일된 색상을 적용한다고 생각하면 될 것 같습니다.

struct ContentView: View {
    var body: some View {
        Image(systemName: "thermometer.sun.fill")
            .symbolRenderingMode(.monochrome)
            .foregroundStyle(.red, .yellow, .green)
            .font(.system(size: 150))
            .frame(width: 400, height: 400, alignment: .center)
            .background(Color.gray)
    }
}

PlaygroundPage.current.setLiveView(ContentView())

 

2. Hierarchical (계층)

뭔가 계층이 나뉘어 있을 것 같지 않나요? 위에서 심볼의 path를 별개의 레이어로 구분한다고 했는데 각각 다른 레이어에게 다른 색을 부여하게 됩니다. 정확히 말하면 불투명도(opacity)를 조정해서 계층의 위계를 나타냅니다. 한 가지 색상(첫 번째 지정한 색상)에 따라 어떤 색상으로 렌더링 될 지가 결정됩니다.

struct ContentView: View {
    var body: some View {
        Image(systemName: "thermometer.sun.fill")
            .symbolRenderingMode(.hierarchical)
            .foregroundStyle(.red, .yellow, .green)
            .font(.system(size: 150))
            .frame(width: 400, height: 400, alignment: .center)
            .background(Color.gray)
    }
}

PlaygroundPage.current.setLiveView(ContentView())

 

3. Pallete (팔레트)

Pallete는 용어에서 느껴지듯이 지정한 색상을 모두 적용시켜줄 것 같은데요. 실제로 그렇습니다. 레이어 당 하나의 색상을 사용해서 렌더링을 해주는데요. 만약에 3단계 계층 구조를 가진 심볼에 두 가지 색상만 지정하면 secondary, tertiary 레이어는 동일한 색상을 사용하고, 2단계 계층 구조를 가진 심볼에 세 가지 색상을 지정하면 두 번째 색상까지만 적용됩니다.

struct ContentView: View {
    var body: some View {
        Image(systemName: "thermometer.sun.fill")
            .symbolRenderingMode(.palette)
            .foregroundStyle(.red, .yellow, .green)
            .font(.system(size: 150))
            .frame(width: 400, height: 400, alignment: .center)
            .background(Color.gray)
    }
}

PlaygroundPage.current.setLiveView(ContentView())

4. Multicolor (여러 색상)

마지막 렌더링 모드는 시스템에 의해 정의된 색상이 나온다고 보면 될 것 같습니다. 결국 우리가 할 수 있는 것은 없는데요. 각각의 심볼의 의미에 맞게 적절한 색상을 이미 Apple이 정해놓은 것입니다.

그런데 주의할 점은, 일부 Multicolor Symbols는 다른 색상을 받을 수 있는 레이어가 포함되어 있다고 하네요!

struct ContentView: View {
    var body: some View {
        Image(systemName: "thermometer.sun.fill")
            .symbolRenderingMode(.multicolor)
            .foregroundStyle(.red, .yellow, .green)
            .font(.system(size: 150))
            .frame(width: 400, height: 400, alignment: .center)
            .background(Color.gray)
    }
}

PlaygroundPage.current.setLiveView(ContentView())

Automatic Rendering

자, 그럼 넘어와서 새롭게 추가된 렌더링 모드를 살펴볼까요? 기존에는 렌더링 모드를 지정해주지 않으면 기본적으로 Monochrome이 지정되었습니다. 그러나 올해(SF Symbols4)부터는 각 심볼의 고유한 특성을 가장 잘 강조하는 렌더링 모드를 자동으로 사용할 수 있게 되었습니다.

 

카메라 렌즈 및 필터 심볼

해당 심볼은 자동 렌더링 모드를 설정하면 Monochrome이 아니라 Hierarchical 모드로 설정됩니다.

 

SharePlay

SharePlay 심볼 역시 자동 렌더링 모드를 설정하면 Monochrome이 아니라 Hierarchical 모드로 설정됩니다.

대부분의 경우에는 자동 렌더링 모드가 좋아 보입니다. 그러나 항상 컨텍스트를 잘 따져야 합니다.

AirPods Pro의 기호의 경우 자동 렌더링 모드를 선택하면 Hierarchical 모드로 렌더링을 합니다. 그러나 위의 예시(컨텍스트)에서는 심볼이 매우 작고 배경과 대비가 낮습니다. 그렇기에 이런 특정 컨텍스트에서 균일한 모양을 위해서 렌더링 모드를 명시적으로 지정하는 작업이 필요할 수 있습니다.

항상 가장 적합한 렌더링 모드를 지정해야 합니다.

 

Variable Color

색상은 기본적으로 매우 중요한 요소입니다. 색상에 의존하는 두 가지 상황을 살펴볼까요?

1. 경로 또는 모양이 다양한 수준의 강도를 전달할 때
2. 시간이 지남에 따라 변화하는 상태를 전달할 때

위와 같은 상태를 표현하고 전달하기 위해 색상에 의존합니다.

올해부터는 가변 색상이라는 새로운 기능을 도입하여 색상 사용을 확대하고 있습니다.

심볼의 벡터 경로를 레이어로 정렬하고 해당 레이어를 순차적으로 구성하여 이러한 레이어를 통해 색상을 배포하는 새로운 방법을 만들었습니다. 이를 통해서 다양한 수준의 강도를 전달할 수 있거나 시간이 지남에 따라 시퀀스를 전달할 수 있습니다.

한 가지 중요한 점은 가변 색상에서 일부 심볼에는 시퀀스에 참여하는 모든 경로가 있지만 다른 심볼의 경우 일부 path만 opt-in 할 수 있습니다.

이 심볼의 경우 심볼에 표시된 상태와 동기화 되는 내장 슬라이더와 쌍을 이룹니다. 슬라이더를 제어함으로서 볼륨을 높이거나 낮출 수 있는데요. 이에 따라서 시퀀스가 변화합니다.

낮은 볼륨, 중간 볼륨, 높은 볼륨 이 3가지 path는 레이어로 구성되며 가변 색상 기능을 선택하게 됩니다. 여기서 중요한 점은 가변 색상은 깊이를 만들기 위한 것이 아니라 일련의 단계 또는 단계를 강조 표시하기 위한 것이라는 것입니다.

 

Unified Annotations

*주석 달기라는 용어가 아직 사실 잘 와닿지는 않습니다.

 

사용자 커스터마이즈한 심볼을 더 쉽고 빠르게 만들 수 있도록 통합된 레이어 구조를 만들 수 있도록 합니다. 세션의 예시로는 베이킹, 컵케이크에 관련된 심볼이 예시로 등장합니다. 통합 레이어(Unified Layer) 구조 접근 방식으로 심볼에 주석을 추가하는 방법을 소개하고 있는데요. (주석을 추가한다는 의미가 다른 심볼과 뭔가 합친다는 의미가 아닐까 싶습니다.)

 

본격적으로 주석 달기를 시작하기 전에는 고려해야 할 사항이 몇 가지 있습니다.

 

1.  계층 구조를 고려하여 z순서의 개요를 확인해야 합니다. (z 순서는 z축을 따라 기호에서 경로의 순서를 나타냅니다.)

2. 그리기(Draw), 지우기(Erase) 개념을 알아야 합니다. 이는 레이어가 렌더링되는 방식을 정의하는 데에 사용됩니다.

 

 

자, 이제 컵 케이크 심볼에 주석을 다는 과정을 살펴보겠습니다.

 

 

첫 번째 단계로 경로를 레이어로 구성해야 합니다. 원하는 계층 구조를 생성합니다.

위의 그림을 살펴보면 설탕 프로스팅, 컵케이크 베이스, 배지 그리고 플러스의 모양으로 레이어를 각각 분리했습니다. 레이어에 필요한 만큼 경로를 추가할 수 있습니다. 이 경우 설탕 장식(1 layer)은 세 개의 다른 경로가 있는 레이어로 정의되고 나머지 레이어는 각각 하나의 경로로 정의됩니다. 이러한 방식으로 모양을 구성하면 모든 렌더링 모드에 대해 하나의 구조에 주석을 달 때 더 많은 유연성을 가질 수 있습니다. 이제 필요에 따라 심볼을 커스터마이즈하는데 필요한 모든 정보가 한 곳에 있습니다.

 

이제 모든 렌더링 모드에 주석을 달 수 있는데요.

 

먼저 Multicolor를 살펴보겠습니다. 이미 모양은 설정이 되어 있으므로 색상만 선택하기만 하면 됩니다. 아래와 같이 색상을 설정했다고 생각해볼까요? 플러스 배지의 경우 기존에 정의한 것과 동일한 로직을 따릅니다.

 

Multicolor는 잘 정의했으므로 나머지 Hierarchical, Pallete, Monochrome 모드를 정의하면 됩니다.

다음과 같이 잘 정의할 수 있습니다. 사실 마지막 주제인 Unified Annotation은 아직 이해가 잘 가지 않습니다. 심볼을 정의해가는 과정을 보여주고 있기는 한데 흐름은 이해가 되었으나 내용을 명확하게 정리하기는 조금 어렵네요. 조금 더 정리를 해봐야 할 것 같습니다.