SwiftUI - SF Symbols 다루기

안녕하세요 :) 🧀

이번 포스팅에서는 SF Symbols에 대해 공부한 내용을 정리해보려고 합니다!

계기는 사이드 프로젝트에서 버튼의 아이콘과 배경을 간단하면서도 예쁘게 지정하고 싶어서 찾아보니

SymbolRenderingMode의 palette라는 프로퍼티를 알게 되었습니다.

처음 접하는 방식이라 신기했고, 그 밖의 다양한 스타일과 기능들을 적용해보고 싶어서 조금 더 알아보게 되었네요

그럼 시작해 보겠습니다~

---

 

SF Symbols란?

SF Symbols - Apple Developer

공식문서로 보시면 자세한 설명이 있을 텐데, 요약하면

SF Symbols는 Apple이 WWDC 2019에서 iOS 13과 함께 선보인 백터 기반 시스템 아이콘 라이브러리입니다.

또한 Apple의 San Francisco 시스템 폰트와 완벽하게 조화를 이루도록 설계되어 있습니다.

 

설치 및 사용 방법

1. SF Symbols 앱 설치

위의 SF Symbols 문서에서 공식 앱을 설치할 수 있습니다.

 

2. 서드파티 앱 활용

App Store에서 "SF Symbols"같은 키워드로 검색하면, 다양한 서드파티 앱으로 아이콘을 관리하고 활용할 수 있습니다.

 

3. Xcode에서 바로 사용하기

Xcode에서 command + shift + L을 누르면 라이브러리 팝업이 뜨고, 여기서 아이콘을 바로 찾아 사용할 수 있습니다.

 

렌더링 모드(Rendering Modes)

SF Symbols는 다양한 렌더링 모드를 제공합니다.

• hierarchical: 주요 레이어(메인이 되는)만 색상을 적용하고 나머지 레이어는 자동으로 계층적 톤을 사용합니다.
• monochrome: 단색 모드로, 기본 옵션입니다. 나머지 부분은 투명색으로 처리됩니다.
• multicolor: 다중 색상으로 SF Symbols가 미리 정의해 둔 버전을 그대로 렌더링 합니다. (경고는 노란색으로 표시되는 것처럼)
• palette: 최대 세 가지 색상을 직접 지정할 수 있습니다.

Image(systemName: imageName)
	.symbolRenderingMode(.hierarchical)

 

 

색상 및 스타일링

foregroundColor(:)

• 단일 색상으로만 지정합니다.
• 인자로는 Color 타입 하나만 받습니다.

Image(systemName: "star.fill")
  .resizable()
  .aspectRatio(contentMode: .fit)
  .foregroundColor(.yellow)  // 아이콘 전체가 노란색으로 칠해저요

 

foregroundStyle(:)

• 단일 색상보다 더 유연하게 스타일을 입힐 때 사용합니다. (그라데이션, 멀티 컬러, 텍스처 패턴 등)
• 인자로는 ShapeStyle 프로토콜을 채택한 모든 타입을 받을 수 있습니다.

// 단일 컬러도 가능
Image(systemName: "star.fill")
  .resizable()
  .aspectRatio(contentMode: .fit)
  .foregroundStyle(.yellow)

// 그라데이션
let gradient = LinearGradient(
  gradient: Gradient(colors: [.red, .orange, .yellow]),
  startPoint: .top,
  endPoint: .bottom
)

Image(systemName: "star.fill")
  .resizable()
  .aspectRatio(contentMode: .fit)
  .foregroundStyle(gradient)

// 머터리얼 (iOS 15+)
Image(systemName: "star.fill")
  .resizable()
  .aspectRatio(contentMode: .fit)
  .foregroundStyle(.ultraThickMaterial)

 

크기 및 가중치

SF Symbols는 텍스트 폰트와 유사하게 크기와 두께(Weight)를 조절할 수 있고, 아이콘 자체의 변형(Variant) 기능도 제공합니다.

 

폰트 크기 지정

• 아이콘의 기본 크기를 텍스트처럼 .font(.system(size: 30))등으로 지정합니다.
• Dynamic Type 지원을 위해. font(. body) 같은 활용도 가능합니다.

Image(systemName: "star.fill")
  .font(.system(size: 40))

Image(systemName: "star.fill")
  .font(.title)

Image(systemName: "star.fill")
  .font(.largeTitle).foregroundColor(.yellow)

가중치(weight) 설정

.font(.system(size: , weight: ,)) 구문을 사용하여 선 두께를 조절할 수 있습니다.

Image(systemName: "eraser")
  .font(.system(size: 36, weight: .light))
  .foregroundColor(.red)

Image(systemName: "eraser")
  .font(.system(size: 36, weight: .bold))
  .foregroundColor(.red)

스케일 조정

.imageScale(.small)과 같이 아이콘의 상대적 크기를 쉽게 변경할 수 있습니다.

Image(systemName: "magnifyingglass")
  .imageScale(.small)
  
Image(systemName: "magnifyingglass")
  .imageScale(.medium)
  
Image(systemName: "magnifyingglass")
  .imageScale(.large)

 

심볼 변형(Variant)

iOS 15+에서 심볼의 다양한 변형도 가능합니다.

ZStack, .overlay 등과 같은 복잡한 코드 없이 아래와 같이 비교적 간단하게!

이걸 이제 알다니;;

Image(systemName: "heart")
  .symbolVariant(.circle)
  .font(.title)

Image(systemName: "heart")
  .symbolVariant(.fill)
  .font(.title)

Image(systemName: "heart")
  .symbolVariant(.slash)
  .font(.title)

 

애니메이션 적용하기 with symbolEffect

iOS 17에서 새롭게 도입된 SymbolEffect API를 사용하면

SF Symbols에 그림자, 스트로크, 컬러 변환부터 애니메이션까지 다양한 시각 효과를 손쉽게 적용할 수 있습니다.

각 효과들은 아래 공식 문서에서 확인 가능해요 :)

SymbolEffect | Apple Developer Documentation

 

그럼 간단하게 샘플들을 만들어보면서 어떤 기능인지 알아보겠습니다.

Image(systemName: "heart.fill")
  .font(.system(size: 60))
  .symbolEffect(.bounce, value: trigger)
  .foregroundStyle(.red)

Image(systemName: "heart.fill")
  .font(.system(size: 60))
  .symbolEffect(.pulse, value: trigger)
  .foregroundStyle(.red)

Image(systemName: "heart.fill")
  .font(.system(size: 60))
  .symbolEffect(.variableColor, value: trigger)
  .foregroundStyle(.red)
  
Stepper("실행: \(trigger)", value: $trigger)

 

 

먼저, symbolEffect(_:options:value:)를 활용해서 SwiftUI뷰에 SF Symbols 전용 애니메이션 효과를 붙여주고

지정한 값이 바뀔 때마다 그 효과를 다시 실행해 줍니다.

nonisolated
func symbolEffect<T, U>(
    _ effect: T,
    options: SymbolEffectOptions = .default,
    value: U
) -> some View where T : DiscreteSymbolEffect, T : SymbolEffect, U : Equatable

 

메서드 선언부를 보시면 Equatable을 채택하는 타입을 value로 전달하고, 그 value가 변경되면 애니메이션의 트리거가 됩니다.

 

다음은 두 번째 예제를 확인해 볼게요!

@State private var isActive = false

Image(systemName: "antenna.radiowaves.left.and.right")
  .font(.system(size: 60))
  .symbolEffect(.variableColor.iterative.reversing, isActive: isActive)

Image(systemName: "bell.fill")
  .font(.system(size: 60))
  .symbolEffect(.pulse, isActive: isActive)

Toggle("isActive", isOn: $isActive)
  .padding(.top, 20)

 

위에서 value를 전달했던 방식과 달리 Bool 타입을 통해 효과를 켜고 끌 수 있으며

켜진 동안은 반복 혹은 지속 상태로 유지됩니다.

nonisolated public func symbolEffect<T>(
  _ effect: T, options: SymbolEffectOptions = .default,
  isActive: Bool = true
) -> some View where T : IndefiniteSymbolEffect, T : SymbolEffect

 

파라미터로 Bool 타입이 선언되어 있죠?

이외에도 아이콘 토글 애니메이션 효과, 삽입, 제거 효과등 다양한 효과들을 추가할 수 있습니다!

---

마치며

SF Symbols는 Apple 플랫폼 전반에 걸쳐 직관적이고 일관된 디자인을 제공하는

강력한 시스템 아이콘 라이브러리입니다!

회사 업무에서는 주로 디자이너분이 작업해 주신 리소스를 활용해 왔는데요.

사이드 프로젝트를 진행하면서 SF Symbols를 적극적으로 사용하게 되었고

이번 기회에 알아보게 되어서 재밌었네요 ㅎㅎ

감사합니다🙇‍♂️