[SwiftUI] SF Symbol에서 계층, 팔레트, 여러 가지 색상 사용하기

SF Symbols는 iOS 등의 앱을 개발할 때 사용할 수 있도록 애플에서 제공하는 이미지 모음입니다. 

애플에서 개발자 및 디자이너들이 검색해서 사용할 수 있도록 SF Symbols 라는 프로그램을 제공합니다. SF Symbols 탐색기를 보면 단색 외에 계층, 팔레트, 여러 가지 색상 및 애니메이션이라는 메뉴가 있는 것을 볼 수 있습니다.

SF Symbol

계층(hierarchical), 팔레트(palette), 멀티컬러(multicolor)는 아이콘을 “한 색이 아니라 여러 레이어로 나눠 색을 표현하는 방식”입니다. 

이것을 SwiftUI 및 UIKit 에서 프로그래밍적 방식으로 사용할 수 있습니다. 이 포스트에서는 SwiftUI를 중점으로 살펴보며, UIKit은 마지막에 간단하게 요약 정리하겠습니다.

 

사전 작업 - 이용 가능한 버전인지 확인

iOS 버전에 따라 지원하지 않는 경우가 있으므로 먼저 버전 지원 여부를 확인합니다.

버전 확인

오른쪽 패널에서 [정보] 탭을 누르면 (첫 화면으로 표시됨) 사용 가능한 버전을 확인할 수 있습니다. 만약 위에 목록이 없다면 지원하지 않는 형태라는 의미입니다. 위에서는 '여러 가지 색상' 이 없으므로 그것을 적용한다 하더라도 단색과 동일하게 표시됩니다.

 

렌더링 종류

단색 (monochrome)

아이콘 색상이 한 가지이며, 별도의 옵션을 지정하지 않은 경우 모두 단색으로 표시됩니다.

 

계층 (Hierarchical)

person.3.fill 계층

하나의 색을 기반으로 명도 차이로 레이어를 표현합니다.

• 색: 1개
• 밝기/투명도로 깊이 표현

 

SwiftUI에서는 다음과 같이 사용할 수 있습니다.

Image(systemName: "person.3.fill")
  .symbolRenderingMode(.hierarchical)
  .foregroundStyle(.blue)

 

 

팔레트 (Palette)

person.3.sequence.fill 팔레트

여러 색을 직접 지정해서 레이어별로 적용합니다.

• 색: 여러 개 직접 지정
• 레이어 순서대로 색이 적용됨
  • 첫 번째 색: 메인
  • 두 번째, 세 번째: 내부 레이어

Image(systemName: "person.3.sequence.fill")
  .symbolRenderingMode(.palette)
  .foregroundStyle(.blue, .green, .orange)

 

색 적용시 주의할 점

색상은 레이어 개수는 이미지마다 다를 수 있습니다.

person.3.fill 팔레트

person.3.fill 팔레트의 경우 2개의 레이어가 있으며, 색상 파라미터 중 노란색은 무시됩니다.

 

xmark.square.fill 팔레트

색상 순서는 일관적이지 않기 때문에 xmark.square.fill 이라는 이미지에서는 민트색이 나오지 않습니다. 이미지마다 다르니 SwiftUI 코드에서 실제로 색상을 입력해보고 순서에 맞게 조정해야 합니다.

 

 

여러 가지 색상 - 멀티컬러 (Multicolor)

xmark.circle.fill 여러 가지 색상

애플이 정의한 기본 색상을 그대로 사용합니다. 색상을 커스터마이징 할 수 없으며 제공된 대로 사용해야 합니다. 이 옵션이 없는 경우도 있으며 이 경우 기본 옵션(단색)이 적용됩니다. 위의 예제의 경우 색상을 갈색으로 지정했지만 애플에서 제공하는 값이 빨간색이므로 빨간색으로마만 표시됩니다.

• 색: 시스템에서 정해진 값

Image(systemName: "xmark.circle.fill")
  .symbolRenderingMode(.multicolor)

 

 

UIKit에서 사용하는 방법

SwiftUI처럼 modifier가 아니라 UIImage.SymbolConfiguration을 사용합니다.

 

계층 (Hierarchical)

let config = UIImage.SymbolConfiguration(hierarchicalColor: .systemBlue)

let image = UIImage(
  systemName: "person.3.fill",
  withConfiguration: config
)

imageView.image = image

→ 한 색 기반 + 명도 차이로 레이어 표현

 

팔레트 (Palette)

let config = UIImage.SymbolConfiguration(
  paletteColors: [.systemBlue, .systemGreen, .systemOrange]
)

let image = UIImage(
  systemName: "person.3.fill",
  withConfiguration: config
)

imageView.image = image

→ 여러 색을 레이어별로 적용

 

여러 가지 색상 - 멀티컬러 (Multicolor)

let config = UIImage.SymbolConfiguration.preferringMulticolor()

let image = UIImage(
  systemName: "folder.badge.person.crop.fill",
  withConfiguration: config
)

imageView.image = image

→ 애플 기본 색 그대로

 

기본 단색

imageView.image = UIImage(systemName: "person.3.fill")
imageView.tintColor = .systemBlue

 

 

SwiftUI ↔ UIKit 대응

SwiftUI	UIKit
.symbolRenderingMode(.hierarchical)	hierarchicalColor:
.symbolRenderingMode(.palette)	paletteColors:
.symbolRenderingMode(.multicolor)	.preferringMulticolor()