[WWDC 2023] SF Symbols 5 주요기능 및 사용방법 안내

안녕하세요🐾

이번 WWDC 2023에서 무려 애니메이션이 추가된 SF Symbols 5에 대한 소개가 있었습니다.

관련 영상을 보고 정리한 SF Symbols 5의 주요기능과 사용방법을 공유합니다!

 

---

 

 

1. 설치

아래의 링크로 들어가 SF Symbols5 Beta를 다운 받을 수 있습니다.

SF Symbols - Apple Developer

 

2. 주요 기능 소개

2.1 애니메이션

애니메이션 기능 지원은 이번 SF Symbols 5에 추가된 기능 중 가장 큰 변화점 입니다.

설치된 앱을 실행하신 뒤 아무 아이콘이나 눌러보시면, 아래의 화면과 같이 애니메이션 탭이 추가되어 있는걸 확인할 수 있습니다.

 

애니메이션 항목을 하나씩 살펴볼까요?

 

Appear / Disappear

Apper 애니메이션은 심볼이 UI에 나타날때 점점 선명해지며 시야에 나타나는 효과입니다.

Disappear는 이와 반대 개념으로 사용합니다.

 

Bounce

심볼이 탄력적이게 튀는 효과를 줍니다. 예를 들어 심볼 아이콘과의 상호작용이 성공했거나 작업이 발생시 이에 대한 피드백으로 활용할 수 있다고 설명하네요.

 

Scale

심볼의 크기를 늘리거나 줄이는 효과입니다.

 

참고한 소개 영상에서는 스케일과 바운스는 유사해 보이는데 바운스와 스케일을 어떤 기준으로 사용하는 것이 좋은가?에 대한 질문에 대해아래와 같이 기준을 정리해주었네요.

 

바운스 - 작업이 발생했거나 작업을 수행해야 하는 상태 표현시

스케일 - 항목이 선택되었을 때나 상태 저장시

 

Variable Color

시간에 따라 변하는 상태 효과를 나타냅니다.

이에 가장 잘맞는 심볼은 아무래도 신호 강도를 나타내는 Wi-Fi아이콘과 같은 심볼일 것 같네요!

Varicable Color는 누적형과 반복형이 있습니다.

 

[반복형]

 

[누적형]

 

Pulse

불투명도를 조절하여 나타내는 효과입니다.

예를 들어, 채팅 앱에서 나의 대화상대가 타이핑을 하고 있을 때 입력중이라는 문구와 함께 아래와 같은 심볼에 펄스 효과를 주게되면 사용자에게 상대가 타이핑 중이라는 의미를 잘 전달해 줄 수 있겠죠?

 

Replace

대체되기 전 심볼과 대체 할 심볼을 지정하여 교체하는 효과를 줍니다.

심볼 상태의 변경 사항을 전달하는데 사용됩니다.

 

위와 같은 애니메이션 옵션들에는 아래와 같이 애니메이션 방향(Direction) 등을 설정할 수 있는 옵션들도 각각 존재하니 같이 이용해 보시기 바랍니다 😎

 

2.2 애니메이션 레이어

Animate 항목에 전체 기호와 레이어별로 옵션이 나뉘어져 있는걸 보실 수 있습니다.

 

SF Symbols 5에는 애니메이션 레이어라는 개념이 있습니다.

아래와 같은 심볼 아이콘이 있다고 가정해볼까요?

 

이 심볼의 레이어 영역을 표시하면 아래와 같다고 합니다.

즉, Animate 옵션을 전체 기호로 선택하면 모든 레이어가 동시에 애니메이션 효과를 나타내고

레이어별 옵션을 선택하면 레이어들이 시간차를 두고 애니메이션 효과를 나타냅니다.

해당 심볼이 가진 레이어 예시

 

위 심볼의 애니메이션 효과를 바운스로 준다고 가정하였을 때 Animate 옵션에 따라 보이는 효과를 비교해볼까요?

 

[전체 기호]

 

[레이어별]

 

이처럼 레이어별 애니메이션 효과가 들어가는 심볼들이 있으니 이를 고려하여 옵션을 설정해 주시면 됩니다!

 

 

3. 사용 방법

사용을 위한 코드를 간략하게 작성해 보았습니다.

먼저 사용하려는 심볼의 이름을 확인 합니다.

 

Swift에서는 사용하려는 심볼의 이름을 확인 한 뒤 아래와 같이 코드로 사용합니다.

button.setImage(UIImage(systemName: "square.and.arrow.up.fill"), for: .normal)

 

SwiftUI는 아래와 같겠군용

VStack {
    Button {
        print("action")
    } label: {
        Image(systemName: "square.and.arrow.up.fill")
    }
}

 

 

하지만 이 심볼에 바운스 애니메이션 효과도 넣으려면 어떻게 해야될까요?

SF Symbols 5 앱에서 아래와 같이 Configuration을 복사할 수 있습니다.

붙여넣어보면 .bounce.down.byLayer가 보이네요.

이 부분을 systemName의 뒤에 같이 넣어주면 됩니다.

 

Swift에서는 이렇게 해보고,

import UIKit
import SnapKit

class ViewController: UIViewController {
    
    let symbolButton: UIButton = {
        let button = UIButton()
        button.setImage(UIImage(systemName: "square.and.arrow.up.fill.bounce.down.byLayer"), for: .normal)
        return button
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(symbolButton)
        symbolButton.snp.makeConstraints {
            $0.center.equalToSuperview()
            $0.width.height.equalTo(200)
        }
    }
}

 

 

SwiftUI에서 이런식으로도 해 볼 수 있습니다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Button {
                print("action")
            } label: {
                Image(systemName: "square.and.arrow.up.fill")
                    .imageScale(.large)
                    .font(.largeTitle)
                    .symbolEffect(.bounce, value: false)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

 

심볼의 애니메이션 기능은 iOS 17 이상에서만 볼 수 있다는 점이 흠이지만 꼭 애니메이션이 아니더라도 SF Symbols 5 에는 5,000개 이상의 심볼이 있다고하니 아이콘에 관심이 있으신 분이라면 꼭 설치하셔서 사용해 보시면 좋을 것 같습니다. 

 

저도 배워가는 입장이기 때문에 틀린 부분이 있다면 꼬옥 알려주세요 😭 감사합니다!

 

4. 참고

• https://developer.apple.com/videos/play/wwdc2023/10197/
• https://developer.apple.com/videos/play/wwdc2023/10258/?time=132