[HIG] SF Symbols
애플의 수많은 SF 심벌들
본 문서는 Apple의 Human Interface Guideline(이하 HIG) 문서를 한글로 번역한 것입니다. iOS 생태계 내에서 HIG를 읽으시는 분들이 번역본이 없어 불편함을 겪는 것을 알게 되었고, 이에 한글로 번역을 하게 되었습니다. iOS 커뮤니티 Async Swift에서 자율적으로 모인 9명이 함께 번역했으며, 일체의 상업적인 목적을 띄지 않습니다. 이 문서를 학습에 적극적으로 이용해 주시돼, 상업적인 용도로 이용하시는 것은 지양해 주시기 바랍니다. 감사합니다.
Introduction
SF Symbols는 San Franciso 시스템 글꼴과 자연스럽게 통합되어 모든 텍스트의 두께 및 크기에 맞춰서 자동으로 적용되는 수천 개의 사용 가능한 심벌들을 제공합니다.
역자설명 : SF Symbols 4를 기준으로 4,491개의 심벌을 제공합니다. 애플의 San Franciso의 시스템 글꼴과 완벽히 통합되며, 모든 weight와 size의 text와 광학 수직 정렬을 자동으로 보장합니다. 따라서 앱에서 꼭 필요한 경우가 아니라면 SF Symbols를 사용하는 것이 개발, 디자인 측면에서 좋습니다.
내비게이션 바, 툴바, 탭바, 컨택스트 메뉴 그리고 텍스트와 같이 인터페이스 아이콘이 나타날 수 있는 모든 위치에 심벌을 사용해 개체 또는 개념을 사용자에게 쉽게 전달할 수 있습니다.
개별 심벌 및 기능들의 사용 가능 여부는 시스템의 버전에 따라 달라집니다. 예를 들어 SF Symbols 3에 도입된 심벌을 앱 번들에 추가하면 iOS 13, Mac Catalyst 13, tvOS 13, 혹은 watchOS 6와 같은 이전 플랫폼에서 심벌을 사용할 수 있습니다. 하지만 계층(Hierarchical) 또는 팔레트(Palette color) 렌더링 모드는 사용할 수 없습니다.
SF Symbols에서 앱을 다운로드하여 심벌 템플릿을 사용하세요. 심벌과 혼동될 수 있는 유사한 이미지를 앱 아이콘, 로고, 혹은 다른 상표에 사용하는 것을 금지하는 SF Symbols 사용에 대한 이용 약관을 반드시 읽어보셔야 합니다. 개발자 가이드라인은 Configuring and displaying symbol images in your UI를 참고하세요.
Rendering modes
SF Symbols 3와 그 이후 버전은 커스텀 심벌에 여러 색상을 사용할 수 있는 네 가지 렌더링 모드 -단색(monochrome), 계층(hierarchical), 팔레트(palette), 여러 가지 색상(multicolor)-를 제공합니다. 예를 들어 앱의 강조색(accent color)에 다양한 불투명도를 사용하여 깊이감 있고 강조되는 심벌을 생성하거나 대비되는 색의 팔레트를 지정해 다양한 색 구성과 어울리는 심벌을 생성할 수 있습니다.
렌더링 모드를 위해 SF Symbols는 심벌의 외곽선(path)을 다른 레이어들로 구성합니다. 예를 들어 cloud.sun.rain.fill 심벌은 3개의 레이어로 이루어져 있습니다. 1차(primary) 레이어는 구름 외곽선, 2차(secondary) 레이어는 태양과 그 빛을 정의하는 외곽선, 3차(tertiary) 레이어는 빗방울 외곽선을 나타냅니다.
선택한 렌더링 모드에 따라 심벌은 다양한 모양을 생성할 수 있습니다. 예를 들어 계층 렌더링 모드는 각 레이어에 단일 색상의 다른 불투명도를 주어 심벌에 깊이감을 주는 시각적 계층 구조를 만듭니다.
커스텀 심벌에서 렌더링 모드를 지원하는 방법을 배우기 위해서는 Custom Symbols를 참고하세요.
SF Symbols는 다음과 같은 렌더링 모드를 지원합니다.
단색(Monochrome) - 심벌의 모든 레이어에 한 가지 색상을 적용합니다. 심벌 내에서 외곽선은 사용자가 지정한 색상으로 렌더링 되거나 색상이 채워진 윤곽선 안에서 투명한 모습으로 렌더링 됩니다.
계층(Hierarchical) - 심벌의 모든 계층에 한 가지 색상을 적용하고, 각 계층 수준에 따라 색상의 불투명도를 변경합니다.
팔레트(Palette) - 레이어 당 한 가지 색상을 사용하여 두 개 이상의 색상을 심벌에 적용합니다. 세 가지 레이어를 가지는 심벌에 대해 두 가지 색상만 지정하면 2차 및 3차 레이어가 동일한 색상이 적용됩니다.
여러 가지 색상(Multicolor) - 의미를 강조하기 위해 일부 심벌에 고유 색상을 적용합니다. 예를 들어, leaf 심벌은 녹색을 사용하여 실제 세계의 잎 모양을 표현하는 반면, trash.slash 심벌은 빨간색을 사용하여 데이터 손실을 나타냅니다. 일부 다중 색상 심벌에는 다른 색상을 받을 수 있는 레이어가 있습니다.
렌더링 모드와 관계없이 시스템에서 제공하는 색상을 사용하면 심벌이 접근성 및 라이트모드, 다크 모드와 같은 스타일에 자동으로 적절한 색을 적용됩니다. 개발자 가이드라인은 renderingMode(_:)를 참고하세요.
심벌의 렌더링 모드가 모든 사용자 맥락에서 적절한지 확인하세요. 심벌의 크기와 현재 배경색과의 대비등에 따라서 사람들이 심벌의 세부 정보를 얼마나 잘 식별할 수 있는지에 영향을 미칠 수 있습니다. SF Symbols 4 이상에서는 자동 설정을 사용해서 추천하는 렌더링 모드를 가져올 수 있지만 항상 해당 렌더링 모드가 기호의 가독성을 향상할 수 있는 적절한 위치인지 확인해야 합니다.
Variable color
가변 색상(variable color)의 SF Symbols 4는 렌더링 모드에 관계없이 용량이나 세기 등 변화를 표현할 수 있습니다. 이러한 변화를 시각적으로 전달하기 위해 가변 색상(variable color)은 변하는 값이 0%에서 100% 사이의 여러 값들에 도달할 때 심벌의 다른 레이어에 색상을 적용합니다.
예를 들어 speaker.wave.3 심벌과 함께 가변 색상(variable color)을 사용하여 곡선의 파형을 나타내는 레이어를 서로 다른 데시벨 값에 매핑해 세 가지 다른 소리 범위(소리가 없는 상태 포함)를 사용자에게 전달할 수 있습니다. 소리가 나지 않는 경우 파형 레이어에 색상이 지정되지 않습니다. 이후 소리가 커짐에 따라 파형 레이어의 색상 레이어가 변화되며 세기를 표현합니다.
심벌의 일부는 가변 색상(variable color)을 사용하지 않는 것이 좋을 수 있습니다. 예를 들어 위에 표시된 speaker.wave.3 심벌에서 스피커 모양 레이어는 소리의 수준이 변하더라도 스피커는 변경되지 않기 때문에 가변 색상(variable color)을 사용하지 않습니다. 심벌은 임의의 수의 레이어들에서 가변 색상(variable color)을 지정할 수 있습니다.
변화를 표현하기 위해 가변 색상(variable color)을 사용하고, 깊이감 전달에는 사용하지 마세요. 깊이와 시각적 계층을 전달하기 위해서는 계층 렌더링 모드를 사용해 특정 레이어를 강조하고 심벌에서 전경 및 배경 요소를 구분하는 것이 좋습니다.
Weights and Scales
SF Symbols는 다양한 범위의 두께와 크기를 제공해 상황에 맞는 디자인을 할 수 있도록 돕습니다.
Ultralight부터 Black까지 9개의 심벌 두께 각각은 San Francisco 시스템 폰트의 두께에 맞춰지기 때문에 심벌과 인접한 텍스트 간의 두께를 일치시키며, 동시에 다양한 크기와 맥락을 유연하게 지원할 수 있습니다.
또한 각 심벌은 소형(small), 중형(medium)(기본값), 대형(large)의 세 가지 크기로 사용할 수 있습니다. 크기는 San Francisco 시스템 폰트의 상단(cap) 높이를 기준으로 정의됩니다.
크기를 지정하면 동일한 포인트 크기를 사용하는 텍스트와의 두께 일치를 방해하지 않고 인접한 텍스트와 비교해 심벌의 강조를 조정할 수 있습니다. 개발자 가이드라인은 imageScale(SwiftUI), SymbolScale(UIKit), and SymbolConfiguration(AppKit)를 참고하세요.
Design variants
SF Symbols는 채우기(fill), 슬래시(slash), 닫힌 것(enclosed)과 같은 디자인의 변형(design variants)을 제공하며, UI에서 시각적 일관성과 단순성을 유지하면서 정확한 상태와 동작을 전달할 수 있습니다. 예를 들어 심벌의 슬래시 변형(slash variants)을 사용해 항목이나 작업의 사용 불가를 나타내거나 채우기(fill)를 사용해 사용자가 해당 심벌을 선택한 것을 나타낼 수 있습니다.
윤곽선(outline)은 SF Symbols에서 가장 일반적인 변형(variants)입니다. 윤곽선 심벌에는 텍스트 모양과 유사한 솔리드 영역이 없습니다. 대부분의 심벌은 일부 형태 안의 영역이 솔리드인 채우기 변형(fill variants)으로도 사용될 수 있습니다.
윤곽선과 채우기 외에도 SF Symbols는 슬래시, 원, 정사각형 또는 직사각형과 같은 모양 안에 심벌을 포함시키는 변형(variants)을 제공합니다. 닫힌 변형(enclosed variants)과 슬래시 변형(slash variants)은 윤곽선 또는 채우기 변형(fill variants)과 결합될 수 있습니다.
SF Symbols 3와 그 이후 버전에서는 라틴어, 아랍어, 히브리어, 힌디어, 태국어, 중국어, 일본어, 한국어를 포함한 특정 언어 및 문자에 대한 다양한 변형(variants)을 제공합니다. 언어 및 스크립트별 변형(variants)은 디바이스의 언어가 변경되면 자동으로 적용됩니다. 가이드라인은 Images를 참고하세요.
심벌의 변형(variants)은 다양한 디자인 목표를 지원합니다.
윤곽선 변형(outline variant)은 툴바, 내비게이션 바, 리스트 그리고 텍스트와 함께 심벌을 표시하는 위치에 적용하는 것이 좋습니다.
정사각형이나 원과 같은 모양을 사용하는 심벌은 작은 크기에서도 가독성이 좋습니다.
채우기 변형(fill variant)의 솔리드 영역은 심벌을 사용해 시각적으로 더 강조할 수 있으며, iOS 탭 바와 스와이프 동작 및 강조 색상을 사용해 활성화 상태를 전달하데 사용하는 것이 좋습니다.
대부분의 경우 심벌을 사용하는 뷰는 윤곽선 변형(outline variant)을 사용할지 채우기 변형(fill variant)을 사용하는지 지정되어 있기 때문에 따로 지정할 필요가 없습니다. 예를 들어 iOS 탭바는 채우기 변형을 사용하는 반면 내비게이션 바는 윤곽선 변형을 사용합니다.
Custom symbols
SF Symbols가 제공하지 않는 심벌이 필요한 경우 직접 심벌을 제작할 수 있습니다. 사용자 정의 심벌을 제작하려면 먼저 원하는 것과 유사한 심벌을 내보낸 다음 스케치 혹은 일러스트레이터와 같은 벡터 편집 도구를 사용해 편집합니다. 개발자 가이드라인은 Creating custom symbol images for your app을 참고하세요.
역자설명 : SF Symbols 앱에서 원하는 심벌을 내보내기(export)하고 해당 심벌을 벡터 편집 도구에서 편집합니다. 이후 Xcode의 Assets에 심벌을 등록하면 SF Symbols와 동일하게 사용이 가능합니다.
IMPORTANT : SF Symbols에는 Apple 제품 및 기능을 나타내는 저작권이 있는 심벌이 포함되어 있습니다. 이러한 심벌을 앱에 사용할 수는 있지만 커스텀할 수는 없습니다. 커스텀할 수 없는 심벌을 쉽게 식별할 수 있도록 SF Symbols 앱은 정보에서 알려줍니다. 심벌을 올바르게 사용할 수 있도록 인스펙터(inspector) 창에 사용 제한 사항이 설명되어 있습니다.
어노테이팅(annotating)이라는 방법을 사용해 사용자 정의 심벌의 각 레이어에 특정 색상 또는 특정 레이어 수준(1차, 2차 또는 3차)을 할당할 수 있습니다. 개발자가 지원하는 렌더링 모드에 따라 앱에서 각 인스턴스에 다른 모드를 사용할 수 있습니다.
템플릿을 가이드로 사용하세요. 시스템이 제공하는 심벌과 세부 수준, 시각적 두께, 정렬, 위치 및 원근감이 일치하는 사용자 지정 심벌을 만듭니다. 다음과 같은 심벌을 디자인하기 위해 노력하세요.
간단한(Simple) 심벌
인식이 쉬운(Recognizable) 심벌
함축적인(inclusive) 심벌
그것이 나타내는 액션 혹은 콘텐츠와 직접 연관된 심벌
가이드라인은 Icons를 참고하세요.
필요한 경우 사용자 정의 심벌에 음수(negative) 측면 여백을 할당하세요. SF Symbols는 심벌에 배지 혹은 너비를 늘리는 기타 요소가 포함되어 있는 경우 시각적 수평 정렬을 돕기 위해 음수 측면 여백(negative side margins)을 지원합니다. 예를 들어 음수 여백(negative margins)은 기호 스택을 수평 정렬하는 데 도움이 될 수 있으며 그중에 배지가 포함됩니다. SF Symbols 3와 그 이후 버전에서는 각 여백의 이름에 "left-margin-Regular-M"과 같은 관련 구성이 제공되므로 사용자 지정 심벌에 여백을 추가하는 경우 이러한 지정 패턴을 사용해야 합니다.
역자설명 : 음수 마진(negative margins)은 마진을 반대로 사용하는 개념입니다. 브라우저에게 기준점을 속이는 원리로 동작하며 방법은 마진값을 음수로 주는 것입니다. 위 글에서는 측면 여백을 음수로 지정하는 것을 말합니다.
사용자 지정 심벌에 대한 대체 텍스트 레이블을 제공하세요. 대체 텍스트 레이블(또는 접근성 설명, accessibility descriptions) 은 보이지 않지만 VoiceOver가 화면에 표시되는 내용을 음성으로 설명하므로 시각장애인이 쉽게 정보를 탐색할 수 있도록 만들어줍니다. 가이드라인은 VoiceOver를 참고하세요.
Apple 제품을 따라서 만들지 마세요. 애플 제품은 저작권을 가지고 있으며 사용자 지정 심벌로 복제할 수 없습니다. 또한 Apple의 기능 혹은 제품을 나타내는 SF Symbols는 사용자 정의할 수 없습니다.
Platform considerations
No additional considerations for iOS, iPadOS, macOS, tvOS, or watchOS.
Resources
Related
Developer documentation
Configuring and displaying symbol images in your app
Creating custom symbol images for your app
Videos
What's new in SF Symbols 4 WWDC22
Adopt Variable Color in SF Symbols WWDC22
What’s new in SF Symbols WWDC21
Changelog
September 14, 2022 Added a new section on variable color. Removed instructions on creating custom symbol paths, exporting templates, and layering paths, deferring to developer articles that cover these topics.
