본문 바로가기

SwiftUI에서 SF Symbols 사용하기

기술적인 이야기/애플 플랫폼 개발 2020. 11. 18.
반응형

SF Symbols가 뭔지 어떻게 사용하는지 간단하게 알아봅시다. 워낙 간단하기 때문에 굳이 글로 적는 게 의미가 있나 싶을 정도로 쉬운 내용입니다. 다만 이 글 작성의 기준은 iOS 13 이상, Xcode 12 이상, macOS 앱이나 멀티플랫폼 앱의 경우 Big Sur 이상이 요구될 수도 있습니다.

SF Symbols는 애플에서 제공하는 이미지 아이콘 모음입니다. 어려울 것 없이 'SF Symbols.app' 앱을 찾아서 실행시켜 보면 바로 알 수 있지요.

SF Symbols.app의 실행 모습

SF Symbols 앱의 모습을 보면 이 아이콘들은 폰트 기반 제공되는 것으로 유추됩니다.

만약 시스템에서 SF Symbols.app을 찾을 수 없다면 별도로 다운로드해서 설치할 수 있습니다.

 

SF Symbols - Apple Developer

With over 2,400 configurable symbols, SF Symbols is designed to integrate seamlessly with San Francisco, the system font for Apple platforms.

developer.apple.com

SwiftUI에서 이 아이콘을 사용하려면 아래와 같은 코드를 작성할 수 있습니다.

Image(systemName: "pencil")

"pencil"이라 쓴 부분이 바로 SF Symbols에서 볼 수 있는 각 아이콘의 이름입니다.

이미지이긴 한데, 앞서 폰트 기반이라고 했기 때문에 폰트 프로퍼티를 이용할 수 있습니다.

Image(systemName: "pencil")
    .font(.title)

Image 인스턴스에 폰트라니 좀 기괴하기도 합니다만 뭐 나름 괜찮네요.

물론 그래서 Image 인스턴스에 맞게 이미지와 관련된 프로퍼티도 사용할 수 있습니다.

Image(systemName: "pencil")
    .imageScale(.large)

이런 식으로 활용할 수 있습니다.

텍스트이자 이미지라는 특이한 모습

필요하다면 NSImageUIImage 등에서도 그대로 활용할 수도 있으니 참고합시다.

UIImage(systemName: "pencil")

관련된 글들

 

SF Symbols - SF Symbols - Human Interface Guidelines - Apple Developer

SF Symbols SF Symbols provides a set of over 2,400 consistent, highly configurable symbols you can use in your app. Apple designed SF Symbols to integrate seamlessly with the San Francisco system font, so the symbols automatically ensure optical vertical a

developer.apple.com

728x90
반응형

댓글