SF Symbols provides thousands of consistent, highly configurable symbols that integrate seamlessly with the San Francisco system font, automatically aligning with text in all weights and sizes.
SF 심볼은 샌프란시스코 시스템 폰트와 잘 어울리는 일관성 있고 여러 설정이 가능한 수천 개의 심볼을 제공하며, 모든 두께와 크기의 텍스트와 자동으로 정렬됩니다.
You can use a symbol to convey an object or concept wherever interface icons can appear, such as in navigation bars, toolbars, tab bars, context menus, and within text.
네비게이션 바, 툴바, 탭바, 컨텍스트 메뉴 및 텍스트와 같은 인터페이스 아이콘이 나타날 수 있는 모든 곳에서 심볼 사용하여 개체나 개념을 전달할 수 있습니다.
→ 인터페이스 아이콘이 나타날 수 있는 곳이면 모두 사용 가능합니다.
역자 첨언
Availability of individual symbols and features varies based on the version of the system you’re targeting. For example, if you add to your app bundle a symbol introduced in SF Symbols 3, you can use the symbol when your app runs in earlier platforms — such as iOS 13, Mac Catalyst 13, tvOS 13, or watchOS 6 — but without the benefit of SF Symbols 3 features like Hierarchical or Palette color rendering.
개별 심볼과 기능의 사용 가능 여부는 여러분이 타겟하는 시스템의 버전에 따라 다릅니다. 예를 들어, SF Symbols 3에서 소개된 심볼을 앱 번들에 추가하면 iOS 13, Mac Catalyst 13, tvOS 13 또는 watchOS 6과 같은 이전 플랫폼에서 앱을 실행할 때 해당 심볼을 사용할 수 있지만, Hierarchical 또는 Palette 색상 렌더링과 같은 SF Symbols 3의 기능은 제공되지 않습니다.
→ 낮은 버전의 시스템을 사용한다면 심볼은 사용할 수 있지만, Hierachical 또는 팔레트 색상 렌더링 같은 기능은 사용할 수 없습니다.
Visit SF Symbols to download the app and browse the full set of symbols. Be sure to understand the terms and conditions for using SF Symbols, including the prohibition against using symbols — or images that are confusingly similar — in app icons, logos, or any other trademarked use. For developer guidance, see Configuring and displaying symbol images in your UI.
SF Symbols에서 앱을 다운로드하면 전체 심볼 세트를 찾아볼 수 있습니다. SF Symbol이나 굉장히 비슷한 이미지를 앱 아이콘, 로고 또는 기타 상표로 사용하는 것을 금지하는 조항을 포함한 SF Symbol 사용에 대한 이용 약관을 이해해야 합니다. 개발자 지침은 Configuring and displaying symbol images in your UI를 참조하세요.
SF Symbols 3 and later provide four rendering modes — monochrome, hierarchical, palette, and multicolor — that give you multiple options when applying color to symbols. For example, you might want to use multiple opacities of your app’s accent color to give symbols depth and emphasis, or specify a palette of contrasting colors to display symbols that coordinate with various color schemes.
SF Symbols 3 이후 버전에서는 단색(monochrome), 계층적(hierarchical), 팔레트(palette), 다중색(multicolor)의 네 가지 렌더링 모드를 제공하여 심볼에 색상을 적용할 때 여러 가지 옵션을 제공합니다. 예를 들어, 심볼에 깊이와 강조를 부여하기 위해 앱의 강조 색상을 다양한 투명도로 사용하거나, 다양한 색상 구성과 조화를 이루는 심볼을 표시하기 위해 대비되는 색상으로 구성된 팔레트를 지정할 수 있습니다.
To support the rendering modes, SF Symbols organizes a symbol’s paths into distinct layers. For example, the cloud.sun.rain.fill symbol consists of three layers: the primary layer contains the cloud paths, the secondary layer contains the paths that define the sun and its rays, and the tertiary layer contains the raindrop paths.
렌더링 모드를 지원하기 위해, SF Symbols는 심볼의 외곽선(path)을 구분된 레이어로 구성합니다. 예를 들어, cloud.sun.rain.fill 심볼은 세 개의 레이어로 구성됩니다. 주요 레이어에는 구름 외곽선이 포함되어 있고, 보조 레이어에는 태양과 태양 광선을 정의하는 외곽선이 포함되고, 제 3레이어에는 비 물방울 외곽선이 포함됩니다.
→ 심볼을 레이어로 구분해 둠으로써 각자 색상을 적용할 수 있습니다.
Primary
Secondary
Tertiary
Depending on the rendering mode you choose, a symbol can produce various appearances. For example, Hierarchical rendering mode assigns a different opacity of a single color to each layer, creating a visual hierarchy that gives depth to the symbol.
선택하는 렌더링 모드에 따라 심볼은 다양한 외관을 가질 수 있습니다. 예를 들어, 계층적 렌더링 모드는 단색을 서로 다른 투명도를 할당해 각 레이어에 사용함으로써 시각적인 계층 구조를 만들어 심볼에 깊이감을 부여합니다.
→ 계층적 렌더링 모드는 단색의 투명도를 조절해 깊이감을 만들어 냅니다.
To learn more about supporting rendering modes in custom symbols, see Custom symbols. SF Symbols supports the following rendering modes.
역자 첨언
Monochrome — Applies one color to all layers in a symbol. Within a symbol, paths render in the color you specify or as a transparent shape within a color-filled path.
단색 — 하나의 색상을 심볼의 모든 레이어에 적용합니다. 심볼 내에서 외곽선은 지정한 색상 또는 색상으로 채워진 투명한 모양으로 나타납니다.
Hierarchical — Applies one color to all layers in a symbol, varying the color’s opacity according to each layer’s hierarchical level.
계층적 — 단색을 모든 레이어에 적용하는데, 각 레이어의 계층 레벨에 따라 색상의 투명도를 조절해 적용합니다.
Palette — Applies two or more colors to a symbol, using one color per layer. Specifying only two colors for a symbol that defines three levels of hierarchy means the secondary and tertiary layers use the same color.
팔레트 — 레이어 당 하나의 색상을 사용해 심볼에 두 개 이상의 색상을 적용합니다. 3개의 계층 구조를 가진 심볼에 두 개의 색상만 지정한다면, 보조 레이어와 제 3레이어에 같은 색상을 적용하게 됩니다.
Multicolor — Applies intrinsic colors to some symbols to enhance meaning. For example, the leaf symbol uses green to reflect the appearance of leaves in the physical world, whereas the trash.slash symbol uses red to signal data loss. Some multicolor symbols include layers that can receive other colors.
다중색 — 의미를 강화하기 위해 일부 기호에 고유한 색상을 적용합니다. 예를 들어, leaf 심볼은 물리적 세계에서 잎의 모양을 반영하기 위해 녹색을 사용하는 반면, trash.slash 심볼은 데이터 손실을 알리기 위해 빨간색을 사용합니다. 일부 다중색 심볼은 다른 색상을 사용할 수 있는 레이어를 포함합니다.
Regardless of rendering mode, using system-provided colors ensures that symbols automatically adapt to accessibility accommodations and appearance modes like vibrancy and Dark Mode. For developer guidance, see renderingMode(_:).
렌더링 모드에 상관없이, 시스템 제공 색상을 사용하면 심볼이 활기(vibrancy)와 다크 모드와 같은 접근성 조절 및 화면 모드에 따라 자동으로 조정됩니다. 개발자 지침은 renderingMode(_:)를 참조하세요.
→ 시스템에 내장된 색상을 사용하면 심볼의 색상이 자동 조정됩니다.
Confirm that a symbol’s rendering mode works well in every context. Depending on factors like the size of a symbol and its contrast with the current background color, different rendering modes can affect how well people can discern the symbol’s details. In SF Symbols 4 and later, you can use the automatic setting to get a symbol’s preferred rendering mode, but it’s still a good idea to check the results for places where a different rendering mode might improve a symbol’s legibility.
심볼의 렌더링 모드가 모든 상황에서 잘 적용되는지 확인하세요. 심볼의 크기나 현재 배경색과의 대비 같은 요인에 따라 다른 렌더링 모드들은 사람들이 심볼의 디테일들을 식별하는 데 영향을 줄 수 있습니다. SF Symbols 4 이상에서는 자동 설정을 사용하여 심볼의 선호 렌더링 모드를 선택할 수 있지만, 심볼의 가독성을 향상시킬 수 있는 다른 렌더링 모드가 있는지 확인하는 것이 좋습니다.
→ 하나의 렌더링 모드에서 잘 보여도 다른 렌더링 모드에서는 아닐 수 있기에 모든 모드를 확인해보세요.
With variable color, SF Symbols 4 introduces a way to represent a characteristic that can change over time — like capacity or strength — regardless of rendering mode. To visually communicate such a change, variable color applies color to different layers of a symbol as a value reaches different thresholds between zero and 100 percent.
SF Symbols 4에서는 렌더링 모드에 상관없이 가변 색상을 사용하여 용량이나 세기 등 변화를 나타내기 위한 기능을 제공합니다. 변경 사항을 시각적으로 나타내기 위해, 가변 색상은 0~100% 사이의 다양한 임계값에 도달할 때 심볼의 레이어마다 적용됩니다.
→ 가변 색상을 사용하면 값의 변화에 따라 심볼의 레이어 색상을 바꿀 수 있습니다.
For example, you could use variable color with the speaker.wave.3 symbol to communicate three different ranges of sound — plus the state where there’s no sound — by mapping the layers that represent the curved wave paths to different ranges of decibel values. In the case of no sound, no wave layers get color. In all other cases, a wave layer receives color when the sound reaches a threshold the system defines based on the number of nonzero states you want to represent.
예를 들어, speaker.wave.3과 함께 가변 색상을 사용해 데시벨 값에 따른 범위들로 나눈 파형 외곽선을 레이어로 할당해 세 가지의 소리 범위를 나타낼 수 있습니다(무음 상태도 함께). 무음이라면 모든 파형 레이어에 색상을 제거합니다. 이후 소리가 커지면 그 단계에 기반해 음량이 임계점에 도달할 때 파형 레이어의 색상을 변화시킵니다.
Sometimes, it can make sense for some of a symbol’s layers to opt out of variable color. For example, in the speaker.wave.3 symbol shown above, the layer that contains the speaker path doesn’t receive variable color because a speaker doesn’t change as the sound level changes. A symbol can support variable color in any number of layers.
가끔은 심볼의 일부 레이어가 가변 색상을 사용하지 않는 것이 좋을 수 있습니다. 예를 들어, 위에서 나타난 speaker.wave.3 심볼의 경우 스피커 외곽선을 포함하는 레이어는 가변 색상을 받지 않습니다. 음량이 변경될 때 스피커 자체는 변하지 않기 때문입니다. 심볼은 임의의 레이어들에게 가변 색상을 지정할 수 있습니다.
Use variable color to communicate change — don’t use it to communicate depth. To convey depth and visual hierarchy, use Hierarchical rendering mode to elevate certain layers and distinguish foreground and background elements in a symbol.
변화를 전달할 때 가변 색상을 사용하되, 깊이를 전달하기 위해 사용하지 마세요. 깊이와 시각적 계층을 나타내려면 계층적 렌더링 모드를 사용해 특정 레이어를 돋보이게 하고, 심볼의 foreground와 배경 요소를 구별하세요.
→ 가변 색상은 변화를 전달할 때만 사용하세요.
SF Symbols provides symbols in a wide range of weights and scales to help you create adaptable designs.
SF Symbols는 다양한 두께와 크기의 심볼을 제공하여 적응형 디자인을 가능하게 합니다.
Each of the nine symbol weights — from ultralight to black — corresponds to a weight of the San Francisco system font, helping you achieve precise weight matching between symbols and adjacent text, while supporting flexibility for different sizes and contexts.
ultralight부터 black까지 9가지의 심볼 두께는 샌프란시스코 시스템 폰트의 두께와 일치하며, 심볼과 인접한 텍스트와의 두께를 일치시킴과 동시에 다른 사이즈나 문맥에 대한 유연성을 제공합니다.
→ SF Symbols는 샌프란시스코 시스템 폰트의 두께 단계와 일치하는 두께 단계를 가지고 있습니다.
Each symbol is also available in three scales: small, medium (the default), and large. The scales are defined relative to the cap height of the San Francisco system font.
각 심볼은 세 가지 스케일 설정(small, medium-기본설정, large)도 가능합니다. 각 크기들은 샌프란시스코 시스템 폰트의 대문자 높이에 의해 정의되었습니다.
Specifying a scale lets you adjust a symbol’s emphasis compared to adjacent text, without disrupting the weight matching with text that uses the same point size. For developer guidance, see imageScale(_:) (SwiftUI), UIImage.SymbolScale (UIKit), and NSImage.SymbolConfiguration (AppKit).
스케일을 지정하면 동일한 포인트 사이즈를 사용하는 텍스트와의 두께 일치감을 방해하지 않으면서 인접 텍스트와 비교해 심볼의 강조를 조절할 수 있습니다. 개발자 지침은 imageScale(_:)(SwiftUI), UIImage.SymbolScale (UIKit), NSImage.SymbolConfiguration (AppKit)을 참조하세요.
→ 스케일을 사용하면 텍스트와의 조화를 깨지 않고 적당히 심볼을 강조할 수 있습니다.
역자 첨언
SF Symbols defines several design variants — such as fill, slash, and enclosed — that can help you communicate precise states and actions while maintaining visual consistency and simplicity in your UI. For example, you could use the slash variant of a symbol to show that an item or action is unavailable, or use the fill variant to indicate selection.
SF Symbols는 fill, slash, enclosed와 같은 여러 가지의 디자인 변형을 정의해 UI의 시각적 일관성과 단순성을 유지하며 특정 상태와 동작을 전달하는 데 도움을 줍니다. 예를 들어, 심볼의 slash 변형을 사용해 항목이나 액션을 사용할 수 없다는 것을 나타내거나 fill 변형을 사용해 선택됨을 나타낼 수 있습니다.
→ SF Symbols는 여러 가지 변형을 통해 특정 목적을 달성합니다.
역자 첨언
Outline is the most common variant in SF Symbols. An outlined symbol has no solid areas, resembling the appearance of text. Most symbols are also available in a fill variant, in which the areas within some shapes are solid.
SF Symbols에서 가장 일반적인 변형은 아웃라인(Outline)입니다. 아웃라인된 심볼은 색상이 채워져 있지 않고, 텍스트의 모습과 비슷합니다. 대부분의 심볼은 fill 변형도 가능하며, 이 경우에는 모양 내부가 단색으로 채워집니다.
→ SF Symbols는 일반적으로 아웃라인 변형으로 사용합니다.
In addition to outline and fill, SF Symbols also defines variants that include a slash or enclose a symbol within a shape like a circle, square, or rectangle. In many cases, enclosed and slash variants can combine with outline or fill variants.
outline과 fill 외에도 SF Symbols는 slash와 원, 사각형, 직사각형 같은 모양 내부에 심볼을 포함하는 변형도 제공합니다. enclosed와 slash 변형은 대부분 outline과 fill 변형과 함께 사용됩니다.
→ circle, square 등의 변형도 있습니다.
SF Symbols 3 and later provides many variants for specific languages and writing systems, including Latin, Arabic, Hebrew, Hindi, Thai, Chinese, Japanese, and Korean. Language- and script-specific variants adapt automatically when the device language changes. For guidance, see Images.
SF Symbols 3 이후부터는 라틴어, 아랍어, 히브리어, 힌디어, 태국어, 중국어, 일본어, 한국어를 포함한 다양한 언어와 필기 시스템에 대한 많은 변형들을 제공합니다. 언어 및 스크립트별 변형은 기기 언어가 변경될 때 자동으로 적용됩니다. Images에서 지침을 참조하세요.
→ 기기 언어 설정에 따라 심볼에도 변형이 적용됩니다.
Symbol variants support a range of design goals. For example:
심볼 변형들은 다양한 디자인 목표를 지원합니다. 예를 들어:
•
The outline variant works well in toolbars, navigation bars, lists, and other places where you display a symbol alongside text.
•
아웃라인 변형은 심볼과 텍스트를 함께 배치하는 툴바, 네비게이션바, 리스트 등에 효과적입니다.
•
Symbols that use an enclosing shape — like a square or circle — can improve legibility at small sizes.
•
사각형이나 원 등의 닫힌 모양의 심볼들은 작은 사이즈에서 가독성이 향상될 수 있습니다.
•
The solid areas in a fill variant tend to give a symbol more visual emphasis, making it a good choice for iOS tab bars and swipe actions and places where you use an accent color to communicate selection.
•
fill 변형의 단색 영역은 심볼을 시각적으로 강조하는 경향이 있어, iOS 탭 바와 스와이프 액션 등 악센트 색상을 사용하여 선택됐음을 나타내는 장소에 사용하면 효과적입니다.
In many cases, the view that displays a symbol determines whether to use outline or fill, so you don’t have to specify a variant. For example, an iOS tab bar prefers the fill variant, whereas a navigation bar takes the outline variant.
대부분 심볼이 나타나는 뷰에 outline을 사용할지, fill을 사용할지 지정되어 있기 때문에 특정 변형을 지정할 필요가 없습니다. 예를 들어, iOS 탭바는 fill 변형을 선호하고, 네비게이션 바는 outline 변형을 선호합니다.
SF Symbols provides a collection of expressive, configurable animations that enhance your interface and add vitality to your app. Symbol animations help communicate ideas, provide feedback in response to people’s actions, and signal changes in status or ongoing activities.
SF Symbols은 사용자 인터페이스를 향상시키고 앱에 활력을 더해줄 풍부하고 변경할 수 있는 애니메이션 모음을 제공합니다. 심볼 애니메이션은 아이디어를 전달하고 사람들의 작업에 대한 피드백을 제공하며 상태 변경이나 계속 진행 중인 활동을 나타내는 데 도움이 됩니다.
Animations work on all SF Symbols in the library, in all rendering modes, weights, and scales, and on custom symbols. For considerations when animating custom symbols, see Custom symbols. You can control the playback of an animation, whether you want the animation to run from start to finish, or run indefinitely, repeating its effect until a condition is met. You can customize behaviors, like changing the playback speed of an animation or determining whether to reverse an animation before repeating it. For developer guidance, see Symbols and SymbolEffect.
애니메이션은 라이브러리의 모든 SF Symbols에 모든 렌더링 모드, 무게 및 스케일, 커스텀 심볼에서 작동합니다. 커스텀 심볼을 애니메이팅할 때는 Custom symbols을 참조하세요. 애니메이션의 재생을 제어하고 애니메이션을 처음부터 끝까지 실행할지 또는 특정 조건이 충족될 때까지 계속 반복할지 등을 선택할 수 있습니다. 애니메이션 재생 속도를 변경하거나 애니메이션을 반복하기 전에 되감을지에 대한 여부와 같은 동작을 커스텀할 수 있습니다. 개발자 지침은 Symbols와 SymbolEffect에서 확인할 수 있습니다.
SF Symbols 5 and later supports the following animations.
SF Symbols 5 이상에서 지원하는 애니메이션은 다음과 같습니다.
Appear — Causes a symbol to gradually emerge into view.
Appear — 심볼이 서서히 나타나도록 합니다.
Disappear — Causes a symbol to gradually recede out of view.
Disappear — 심볼이 서서히 사라지도록 합니다.
Bounce — Briefly scales a symbol with an elastic-like movement that goes either up or down and then returns to the symbol’s initial state. The bounce animation plays once by default and can help communicate that an action occurred or needs to take place.
Bounce — 심볼을 탄력있는 움직임으로 축소하거나 확대하고 나서 초기 상태로 돌아가도록 합니다. 바운스 애니메이션은 기본적으로 한 번 재생되며 특정 작업이 발생했거나 발생해야 한다는 것을 전달하는 데 도움이 될 수 있습니다.
Scale — Changes the size of a symbol, increasing or decreasing its scale. Unlike the bounce animation, which returns the symbol to its original state, the scale animation persists until you set a new scale or remove the effect. You might use the scale animation to draw people’s attention to a selected item or as feedback when people choose a symbol.
Scale — 심볼의 크기를 변경하여 크기를 키우거나 줄입니다. 바운스 애니메이션과 달리 심볼을 원래 상태로 되돌리지 않고 크기 애니메이션이 새로운 크기를 설정하거나 효과를 제거할 때까지 유지됩니다. 이 애니메이션은 선택한 항목에 사람들의 주의를 끌거나 사용자가 심볼을 선택했을 때의 피드백으로 사용할 수 있습니다.
Pulse — Varies the opacity of a symbol over time. This animation automatically pulses only the layers within a symbol that are annotated to pulse, and optionally can pulse all layers within a symbol. You might use the pulse animation to communicate ongoing activity, playing it continuously until a condition is met.
Pulse — 시간에 따라 심볼의 투명도를 변화시킵니다. 이 애니메이션은 기본적으로 심볼 내에서 펄스를 달성하도록 주석이 달린 레이어만 자동으로 펄스되며 선택적으로 심볼 내의 모든 레이어를 펄스할 수 있습니다. 펄스 애니메이션은 조건이 충족될 때까지 지속적으로 플레이되어 진행 중인 활동이라는 것을 전달할 수 있습니다.
Variable color — Incrementally varies the opacity of layers within a symbol. This animation can be cumulative or iterative. When cumulative, color changes persist for each layer until the animation cycle is complete. When iterative, color changes occur one layer at a time. You might use variable color to communicate progress or ongoing activity, such as playback, connecting, or broadcasting. You can customize the animation to autoreverse — meaning reverse the animation to the starting point and replay the sequence — as well as hide inactive layers rather than reduce their opacity.
Variable color — 심볼 내 레이어의 투명도를 점진적으로 변화시킵니다. 이 애니메이션은 누적 또는 반복적일 수 있습니다. 누적일 때 애니메이션 주기가 완료될 때까지 각 레이어에 대해 색상 변화가 지속됩니다. 반복일 때는 한 번에 한 레이어씩 색상이 변경됩니다. 가변 색상은 재생, 연결 또는 브로드캐스팅과 같은 진행 중인 활동을 나타내거나 전달하기 위해 사용될 수 있습니다. 애니메이션을 자동으로 되돌리거나 레이어의 투명도를 줄이지 않고 비활성 레이어를 숨길지에 대한 여부를 커스텀할 수 있습니다.
Replace — Replaces one symbol with another. The replace animation works between arbitrary symbols and across all weights and rendering modes. This animation features three configurations:
Replace — 한 심볼을 다른 심볼로 교체합니다. Replace 애니메이션은 임의의 심볼 간 및 모든 가중치 및 렌더링 모드에서 작동합니다. 이 애니메이션에는 세 가지 구성이 있습니다.
•
Down-up, where the outgoing symbol scales down and the incoming symbol scales up, communicating a change in state.
•
Down-up, 나가는 심볼이 축소되고 들어오는 심볼이 확대되어 상태 변경을 전달합니다.
•
Up-up, where both the outgoing and incoming symbols scale up. This configuration communicates a change in state that includes a sense of forward progression.
•
Up-up, 나가는 심볼과 들어오는 심볼 모두 확대됩니다. 이 구성은 전진 진행 감각을 포함한 상태 변경을 전달합니다.
•
Off-up, where the outgoing symbol hides immediately and the incoming symbol scales up. This configuration communicates a state change that emphasizes the next available state or action.
•
Off-up, 나가는 심볼이 즉시 숨겨지고 들어오는 심볼이 확대됩니다. 이 구성은 다음 사용 가능한 상태 또는 작업을 강조하는 상태 변경을 전달합니다.
From left to right: down-up, up-up, off-up
Apply symbol animations judiciously. While there’s no limit to how many animations you can add to a view, too many animations can overwhelm an interface and distract people.
심볼 애니메이션을 신중하게 적용하세요. 뷰에 추가할 수 있는 애니메이션 수에는 제한이 없지만 너무 많은 애니메이션은 인터페이스를 압도하고 사람들의 주의를 산만하게 할 수 있습니다.
Make sure that animations serve a clear purpose in communicating a symbol’s intent. Each type of animation has a discrete movement that communicates a certain type of action or elicits a certain response. Consider how people might interpret an animated symbol and whether the animation, or combination of animations, might be confusing.
애니메이션이 심볼의 의도를 명확하게 전달하도록 확인하세요. 각 종류의 애니메이션에는 특정 유형의 작업을 전달하거나 특정 응답을 유도하는 독특한 움직임이 있습니다. 애니메이션된 심볼을 어떻게 해석할지와 애니메이션 또는 여러 애니메이션의 혼동 여부를 고려해야 합니다.
Use symbol animations to communicate information more efficiently. Animations provide visual feedback, reinforcing that something happened in your interface. You can use animations to present complex information in a simple way and without taking up a lot of visual space.
심볼 애니메이션을 사용하여 정보를 효율적으로 전달하세요. 애니메이션은 시각적 피드백을 제공하여 인터페이스에 무언가가 발생했음을 강조합니다. 애니메이션을 사용하여 복잡한 정보를 간단하게 제시하고 시각적 공간을 많이 차지하지 않고 표시할 수 있습니다.
Consider your app’s tone when adding animations. When animating a symbol, think about what the animation can convey and how that might align with your brand identity and your app’s overall style and tone. For guidance, see Branding.
애니메이션을 추가할 때 앱의 톤을 고려하세요. 심볼을 애니메이션화할 때는 애니메이션이 무엇을 전달하는지, 이것이 브랜드 정체성과 앱의 전반적인 스타일 및 톤에 어떻게 부합할 수 있는지 고려하세요. 지침은 Branding을 참조하세요.
If you need a symbol that SF Symbols doesn’t provide, you can create your own. To create a custom symbol, first export the template for a symbol that’s similar to the design you want, then use a vector-editing tool like Sketch or Illustrator to modify it. For developer guidance, see Creating custom symbol images for your app.
SF Symbols에 없는 심볼이 필요할 때, 직접 만들 수 있습니다. 커스텀 심볼을 만들려면 원하는 디자인과 유사한 심볼의 템플릿을 내보내기한 다음, Sketch나 Illustrator같은 벡터 변집 툴을 사용해 편집하세요. 개발자 지침은 Creating custom symbol images for your app 을 참조하세요.
→ 벡터 편집 툴로 커스텀 심볼을 만들 수 있습니다.
Important
SF Symbols includes copyrighted symbols that depict Apple products and features. You can display these symbols in your app, but you can’t customize them. To help you identify a noncustomizable symbol, the SF Symbols app badges it with an Info icon; to help you use the symbol correctly, the inspector pane describes its usage restrictions.
SF Symbols는 애플 제품과 기능들을 묘사하는 저작권이 걸린 심볼들을 포함합니다. 앱에서 이 심볼들을 사용하는 것은 상관없지만, 커스텀은 불가능합니다. SF Symbols 앱에서는 이러한 심볼들을 식별하기 위해 Info icon으로 표시해 둡니다. 또한 심볼을 올바르게 사용할 수 있도록 inspector 창에서 사용 주의사항을 설명합니다.
Using a process called annotating, you can assign a specific color — or a specific hierarchical level, such as primary, secondary, or tertiary — to each layer in a custom symbol. Depending on the rendering modes you support, you can use a different mode in each instance of the symbol in your app.
annotating이라는 방법을 사용하여 커스텀 심볼의 각 레이어에 특정 색상 또는 1차, 2차 또는 3차와 같은 특정 계층 수준을 할당할 수 있습니다. 지원하는 렌더링 모드에 따라, 앱의 기호의 각 인스턴스에서 다른 모드를 사용할 수 있습니다.
→ 커스텀 심볼도 레이어를 나눠 사용할 수 있습니다.
Use the template as a guide. Create a custom symbol that’s consistent with the ones the system provides in level of detail, optical weight, alignment, position, and perspective. Strive to design a symbol that is:
템플릿을 가이드로 활용하세요. 디테일, 광학적 무게, 정렬, 위치 및 관점의 수준에서 시스템이 제공하는 것과 일치하는 커스텀 심볼을 만드세요. 다음과 같은 심볼을 디자인하기 위해 노력하세요:
•
Simple
•
Recognizable
•
Inclusive
•
Directly related to the action or content it represents
•
간단하고
•
식별이 쉽고
•
포괄적이고
•
액션 또는 표현하고자 하는 내용과 직접적으로 관련이 있는.
Assign negative side margins to your custom symbol if necessary. SF Symbols supports negative side margins to aid optical horizontal alignment when a symbol contains a badge or other elements that increase its width. For example, negative side margins can help you horizontally align a stack of folder symbols, some of which include a badge. Beginning in SF Symbols 3, the name of each margin includes the relevant configuration — such as “left-margin-Regular-M” — so be sure to use this naming pattern if you add margins to your custom symbols.
필요한 경우 커스텀 심볼에 음수 측면 여백을 추가하세요. SF Symbols는 뱃지같은 심볼의 너비를 늘리는 요소가 포함되어 있을 때 시각적 수평 정렬을 위해 측면에 음수 여백을 사용하기도 합니다. 예를 들어, 음수 측면 여백은 폴더들이 겹쳐 있는 심볼을 수평정렬할 때 사용됩니다. SF Symbols 3부터 각 여백의 이름은 “left-margin-Regular-M”처럼 명명되어 있으므로, 커스텀 심볼에 여백을 추가하는 경우 이러한 네이밍 패턴을 사용하세요.
Provide alternative text labels for custom symbols. Alternative text labels — or accessibility descriptions — aren’t visible, but they let VoiceOver describe what’s on screen, making navigation easier for people with visual disabilities. For guidance, see VoiceOver.
커스텀 심볼에 대체 텍스트 라벨을 포함하세요. 대체 텍스트 라벨 또는 접근성 설명은 시각 장애인들에게 VoiceOver가 화면을 읽어줄 때 사용됩니다. 지침은 VoiceOver를 참조하세요.
Don’t design replicas of Apple products. Apple products are copyrighted and you can’t reproduce them in your custom symbols. Also, you can’t customize a symbol that SF Symbols identifies as representing an Apple feature or product.
애플 제품을 따라 디자인하지 마세요. 애플 제품들은 저작권이 걸려 있고, 커스텀 심볼로 복제하면 안 됩니다. 또한 SF Symbols에 포함된 심볼 중 애플 제품이나 기능을 나타내는 것으로 간주되는 것들을 커스텀하면 안 됩니다.
No additional considerations for iOS, iPadOS, macOS, tvOS, visionOS, or watchOS.
Related
Change log
작성 날짜 | 작성자 | 수정사항 |
2023/6/7 | 디온 | 초기 번역 |
2023/12/15 | 디온 | 추가된 아이콘 및 애니메이션 내용 추가 |