[iOS] SF Symbols — Colors
Monochrome, Hierarchical, Palette, Multicolor 네가지 SymbolRenderingMode 를 알아봅시다
들어가기 전에
오늘은 HIG 에 나와있는 SF Symbols 의 내용 중에 Colors 섹션 내용을 살펴볼겁니다
사실 번역이라고 봐도 무방하니 언제나처럼 원문 읽는걸 추천드림다 (+ 하단에 WWDC 2022 SF Symbols 관련 내용이 추가되었습니다)
그럼 ㄱㄱ
Colors
우선 cloud.sun.rain.fill 이라는 SF Symbol 을 예로 들어봅시다
단일 색상..은 너무 밋밋하니까 symbol 을 아래처럼 예쁘게 색칠하고 싶어! 라고 생각을 할 수 있단 말이져?
고로 SF Symbol 에서는 symbol 에 색상을 적용할 때 사용할 수 있는 4가지 렌더링 모드를 제공합니다
네가지 렌더링 모드가 무엇이 있는지는 조금 이따 살펴보기로 하고요!
SF Symbols 3 에서는 렌더링 모드를 지원하기 위해 심볼의 path를 primary, secondary, tertiary 와 같은 별개의 레이어로 구성합니다
예를 들어, cloud.sun.rain.fill 기호는 세 개의 레이어로 구성됩니다.
primary 레이어에는 구름 경로가 포함되고,
secondary 레이어에는 태양과 광선을 정의하는 경로가 포함되며,
tertiary 레이어에는 빗방울 경로가 포함됩니다
SF Symbols 3 에서는 Monochrome, Hierarchical, Palette, Multicolor 의 렌더링 모드를 지원하는데요, 어떤 렌더링 모드를 선택하느냐에 따라 다양한 appearance을 생성할 수 있습니다
예를 들어 Hierarchical 렌더링 모드는 동일한 색상에 다른 opacity 를 각 레이어에 할당해서 심볼에 깊이를 부여하는 시각적 계층(visual hierarchy)을 생성합니다.
그럼 하나씩 살펴보도록 하죠 ㄱ ㄱ!
Monochrome
심볼에 한 가지 색상을 적용합니다.
path는 지정한 색상으로, path 안의 나머지 부분은 투명색으로 렌더링됩니다.
아래와 같이 foregroundStyle(_:_:_:) modifier 를 통해 첫번째, 두번째, 세번째 색상을 모두 지정해줘도 첫번째 색상을 기준으로 설정 됩니다.
Image(systemName: "cloud.sun.rain.fill")
.symbolRenderingMode(.monochrome)
.foregroundStyle(.red, .yellow, .green)
Hierarchical
심볼에 한가지 색상을 적용하되, 각 레이어의 hierarchical level 에 따라 색상의 불투명도를 변경합니다.
위와 같이 foregroundStyle(_:_:_:) modifier 를 통해 첫번째, 두번째, 세번째 색상을 모두 지정해줘도 첫번째 색상을 기준으로 설정됩니다. 다만 해당 색상을 기준으로 불투명도 또한 설정됩니다.
Image(systemName: "cloud.sun.rain.fill")
.symbolRenderingMode(.hierarchical)
.foregroundStyle(.red, .yellow, .green)
Palette
레이어당 하나의 색상을 사용하여 각 심볼에 두 개 이상의 대조 색상을 적용합니다.
만약 3단계 계층 구조를 가진 심볼에 대해 두 가지 색상만 지정하면 secondary 와 tertiary 레이어는 동일한 색상을 사용합니다.
위와 같이 foregroundStyle(_:_:_:) modifier 를 통해 첫번째, 두번째, 세번째 색상을 모두 지정했을때 모두 지정한대로 설정됩니다.
Image(systemName: "cloud.sun.rain.fill")
.symbolRenderingMode(.palette)
.foregroundStyle(.red, .yellow, .green)
만약 3단계 계층 구조를 가진 cloud.sun.rain.fill 에 두가지 색상만 적용하면 위에서 설명한대로 secondary 와 tertiary 레이어는 동일한 색상을 사용합니다. (해와 빗방울이 노란색)
Image(systemName: "cloud.sun.rain.fill")
.symbolRenderingMode(.palette)
.foregroundStyle(.red, .yellow)
Multicolor
의미를 향상시키기 위해 일부 심볼에 대해 시스템에 정의된 고유 색상을 적용합니다.
예를 들어, 잎(leaf) 심볼은 실제 세계의 잎 모양을 반영하기 위해 녹색을 사용하고, 휴지통 기호는 데이터 손실을 나타내기 위해 빨간색을 사용합니다.
일부 multicolor symbols 들은 다른 색상을 받을 수 있는 레이어가 포함되어 있습니다
위와 같이 foregroundStyle(_:_:_:) modifier 를 통해 첫번째, 두번째, 세번째 색상을 모두 지정했음에도 시스템에서 정의한 색상을 사용합니다.
해는 노란색, 구름은 하얀색, 비는 파란색..! 꽤나 실제 세계와 비슷해보이네요
Image(systemName: "cloud.sun.rain.fill")
.symbolRenderingMode(.multicolor)
.foregroundStyle(.red, .yellow, .green)
.background(Color.brown)
렌더링 모드에 관계없이 시스템에서 제공하는 색상을 사용하면 접근성 및 vibrancy, 다크 모드 등에 최적화 됩니다.
개발 가이드는 renderingMode(_:) 를 참고하세요
