애니메이션을 품은 애플의 아이콘

애플 SF Symbols 7의 특징과 차이점

Dec 1. 2025

Google의 Mateiral Symbols와 Apple의 SF Symbols Figma 플러그인

아이콘은 이제 단순한 그림을 넘어, 서체처럼 시스템 전반에 녹아드는 ‘심볼’ 시스템으로 자리 잡았습니다. 지난 글에서는 굵기(Weight), 채움(Fill), 굵기 보정값(Grade), 옵티컬 사이즈(Optical Size)라는 네 가지 가변 폰트 축(Axis)을 기반으로 진화하고 있는 Google의 Material Symbols(머터리얼 심볼)을 살펴보았습니다.

16화 UI에 아이콘 잘 적용하는 팁

구글이 아이콘을 사용하는 방법 | 좋은 아이콘을 잘 적용하는 방법 아이콘은 화면 속 복잡한 정보를 작은 형태로 전달하는 핵심 요소이며, UI 전반의 분위기와 사용성을 결정짓는 중요한 언어입

https://brunch.co.kr/@hnjnkm/undefined/@hnjnkm/70

25년 애플이 새롭게 선보인 SF Symbols 7

한편 올 7월, Apple은 SF Symbols 7을 선보이며 draw 애니메이션을 포함한 심볼 표현 방식을 한 단계 더 확장했습니다. Apple 역시 2023년부터 SF Symbols에 다양한 애니메이션 기능을 도입하며, 아이콘을 정적인 요소가 아닌 의미를 전달하는 인터랙티브 요소로 발전시키고 있습니다.

이번 글에서는 SF Symbols 7이 어떤 방향으로 진화해왔는지, 아이콘에 왜 애니메이션을 녹여냈는지 등에 대해 알아보겠습니다.

Apple의 SF Symbols

SF Symbols 란?

SF Symbols는 6,900개 이상의 심볼로 구성된 최신 라이브러리로, 애플의 시스템 폰트인 San Francisco와 완벽하게 호환되도록 설계된 심볼 시스템입니다. 9가지 굵기와 3가지 스케일을 제공하며, 텍스트와 자동 정렬되고 벡터 편집 도구를 통해 쉽게 커스텀 심볼을 제작할 수 있습니다. 그 외 특징들을 먼저 알아보겠습니다.

1️⃣ San Francisco 폰트와 완전 통합된 시스템 심볼

애플의 시스템 폰트인 San Francisco와 같은 기준(굵기, 비율, 옵티컬 정렬)을 공유하여 텍스트처럼 자연스럽게 사용될 수 있는 시스템 심볼입니다. 글자처럼 쓰이는 아이콘이라는 점이 큰 특징입니다.

배리어블 폰트에 따라 크기와 굵기가 조정되는 SF Symbols

2️⃣ 9가지 굵기(Weights)와 3가지 스케일(Scales)

정적 이미지가 아니라 가변적(Variable) 구조를 기반으로 하며, 따라서 텍스트 크기나 굵기에 맞춰 심볼도 자동 조정됩니다.

단색, 위계적 색상, 팔레트 색상, 멀티 컬러, 그라디언트 등의 다양한 렌더링 모드를 지원

3️⃣ 멀티플 렌더링 모드 지원

다양한 렌더링 모드를 제공하여 앱의 톤앤매너에 맞게 시각적으로 조정하기 쉽습니다.

Monochrome

Hierarchical

Palette

Multicolor

Gradient (SF Symbols 7에 추가)

4️⃣ 벡터 편집 및 커스텀 심볼 제작 가능

심볼을 SVG 형태로 내보내 편집한 뒤 다시 가져올 수 있어, 스타일에 어긋나지 않게 확장된 심볼을 제작할 수 있습니다.

아이콘에 다양한 종류의 애니메이션을 적용

5️⃣ 애니메이션 가능한 심볼 (SF Symbols 5에 추가)

SF Symbols 5부터 심볼 자체에 애니메이션을 적용할 수 있도록 지원합니다. bounce, appear, disappear 등 의미 기반의 모션을 제공합니다.

6️⃣ Draw 애니메이션 (SF Symbols 7에 추가)

SF Symbols 7의 대표 기능으로, 필기하듯 선이 그려지는 애니메이션입니다. 심볼의 등장·퇴장을 더욱 표현적으로 만들고, 사용자에게 의미가 담긴 움직임을 전달합니다.

7️⃣ Magic Replace (SF Symbols 5에 추가)

서로 다른 심볼 간 전환을 자연스럽게 연결하는 기능으로, '다운로드' 심볼에서 '체크' 심볼과 같이 변화 표현시 자연스러운 흐름을 제공합니다.

8️⃣ 플랫폼 간 일관성을 강화한 대규모 시스템 심볼 라이브러리

6,900개 이상의 심볼을 제공하며, 다양한 카테고리와 OS 기능을 전체적으로 아우릅니다.

9️⃣ 지역화(Localization) 심볼

텍스트 방향(좌→우, 우→좌)이나 문화적 관습에 맞춰 달라지는 심볼을 제공합니다.

� SwiftUI와의 깊은 통합

코드로 심볼 스타일, 색상, 렌더링 모드, 애니메이션을 쉽게 컨트롤할 수 있어, 개발자 입장에서 유지보수·일관성 확보가 용이합니다.

그렇다면 이제 가변 구조, 다중 렌더링 모드, 애니메이션, Magic Replace 등의 기능에 더해, 7월 경 공개된 SF Symbols 7에서 새롭게 추가되거나 강화된 기능들을 살펴보겠습니다.

자연스러운 드로잉 흐름을 시각적으로 표현하는 Draw 애니메이션

1. Draw 애니메이션

SF Symbols 7의 가장 큰 변화는 Draw On과 Draw Off 애니메이션입니다. 손글씨의 필기 동작에서 영감을 받은 이 기능은 심볼이 화면에 등장하고 사라지는 과정을 보다 표현적으로 보여줍니다.

심볼의 레이어 구조와 새롭게 도입된 애노테이션 시스템을 활용해 자연스러운 드로잉 흐름을 만들 수 있으며, 레이어 전체를 한 번에 드로우하거나, 레이어별로 시차를 두어 더 역동적인 효과를 내거나, 레이어를 하나씩 순차적으로 드러내는 방식 등 다양한 재생 방식이 제공됩니다.

Draw 애니메이션의 굵기를 직접 조정할 수 있는 애노테이션

2. 새로운 애노테이션 툴

Draw 애니메이션을 커스텀 심볼에도 쉽게 적용할 수 있도록 애노테이션 툴이 새롭게 강화되었습니다. 여기서 말하는 애노테이션이란, 심볼이 어떻게 그려지고, 어떤 순서로 움직이고, 어떤 방식으로 변하는지를 지정하는 ‘메타 정보’라고 이해하면 될 것 같습니다.

레이어 위에 가이드 포인트를 배치하는 것만으로 선의 시작과 끝이 자동으로 정의되며, 굵기(울트라라이트부터 블랙까지) 전반에서 동일한 흐름을 유지하도록 자동 변환이 적용됩니다. 또한 양방향 드로우, draw attachment, adaptive end caps 등의 옵션을 통해 복잡한 움직임도 정밀하게 제어할 수 있게 되었습니다.

심볼의 진행도를 조절할 수 있는 Variable Draw

3. Variable Draw

Variable Draw는 기존 Variable Color의 확장된 형태로, Draw 기반 심볼에서 진행도나 강도 변화를 보다 정교하게 표현할 수 있는 기능입니다. 레이어가 점진적으로 그려지거나 지워지는 방식으로 상태나 변화를 보여줄 수 있어, 진행 상황 표시 등 동적 정보 전달에 적합합니다.

자연스럽게 심볼 간의 전환을 돕는 Magic Replace

4. 향상된 Magic Replace

심볼 간 전환을 더 자연스럽게 만들어주는 Magic Replace 기능도 크게 개선되었습니다. 두 심볼이 공통된 외곽 형태를 가지고 있다면, 그 외곽은 유지한 채 내부 요소만 부드럽게 변형되도록 처리되었습니다. Draw 기능이 적용된 심볼의 경우에는 Magic Replace 과정에서 자동으로 Draw Off와 Draw On이 함께 적용되면서 더욱 일관성 있는 전환 흐름을 제공합니다.

색상을 지정하면 자연스러운 그라디언트를 적용

5. 자동 Gradient 렌더링

하나의 색상만 지정해도 심볼에 자연스러운 선형 그라디언트를 자동으로 생성해 주는 기능이 도입되었습니다. 이는 시스템 색상뿐 아니라 커스텀 색상에서도 모두 작동하며, 모든 렌더링 모드에서 사용할 수 있게 설계되었습니다. 심볼에 깊이와 시각적 완성도를 더해, 보다 풍부한 표현이 가능해졌습니다.

한국어 등을 포함한 지역화가 반영된 새로운 심볼

6. 새로운 심볼과 확대된 지역화

수백 개의 신규 심볼이 추가되었으며, 기존 심볼들도 애플의 새로운 보편적 디자인 언어에 맞춰 업데이트되었습니다. 특히 라틴, 그리스, 키릴, 히브리, 아랍, 중국어, 일본어, 한국어, 태국어, 데바나가리 등 다양한 문자권을 반영한 지역화 심볼이 제공됩니다. 이들 신규 심볼은 iOS 26, macOS 26 등 2025년 이후의 주요 OS에서 사용할 수 있습니다.

Google의 Material Symbols와 Apple의 SF Symbols

구글과 애플의 심볼 차이

Google의 Material Symbols와 Apple의 SF Symbols는 무엇이 다를까요? 시각적인 가장 큰 차이점은 애니메이션의 유무로 보이지만, 거시적으로 중요한 건 심볼을 텍스트처럼 취급하는 Apple의 철학일지도 모릅니다.

1️⃣ 철학의 차이

Material Symbols는 아이콘을 기능을 전달하는 UI 요소로 바라보며, 다양한 플랫폼에서 동일하게 사용할 수 있도록 범용성과 중립성을 강조하고 있습니다. 안드로이드뿐 아니라 웹, 크롬OS, iOS 등 여러 환경에서 호환될 수 있도록 설계되었기 때문에, 디자인 시스템의 일부로 자연스럽게 이어지는 구조를 갖추고 있습니다.

반면 SF Symbols는 아이콘을 텍스트처럼 다루는 ‘심볼’ 시스템으로 접근합니다. San Francisco 폰트와 동일한 비율과 규칙을 공유하며, 애플 생태계 안에서 가장 자연스럽게 동작하는 시각 구조와 모션, 의미 전달을 목표로 합니다. 즉, 아이콘을 독립된 그림이 아니라 타이포그래피 시스템의 확장으로 보는 관점이 특징입니다.

스타일 구조뿐 아니라, 목적과 철학에 있어 차이를 보이는 두 심볼 시스템

2️⃣ 스타일 구조 차이

Material Symbols는 Outlined, Rounded, Sharp의 세 가지 기본 스타일을 중심으로 구성되며, Weight·Fill·Grade·Optical Size라는 네 가지 가변 축을 통해 상황에 따라 다양한 형태를 만들어낼 수 있습니다. 이러한 구조 덕분에 UI 스타일에 맞춰 아이콘 자체의 톤을 쉽게 바꿔가며 사용할 수 있다는 점이 강점입니다.

반면 SF Symbols는 9가지 굵기와 3가지 스케일을 기반으로 하며, Monochrome · Multicolor · Hierarchical · Variable Color · Gradient 등 렌더링 모드를 중심으로 표현이 이루어집니다. 이는 시스템 폰트와의 일관성을 유지하기 위한 구조로, 애플 플랫폼 내부에서 동일한 시각적 흐름을 만드는 데 최적화되어 있습니다.

3️⃣ 애니메이션 접근 방식 차이

Material Symbols는 기본적으로 정적인 아이콘 시스템이며, 애니메이션이 필요할 경우 Lottie나 Animated Vector Drawable처럼 별도의 리소스를 제작해야 합니다. 즉, 아이콘 자체가 움직임을 포함하고 있지 않고, 모션은 개발 단계에서 추가적으로 구현해야 하는 영역입니다.

이에 비해 SF Symbols는 시스템 내부에 애니메이션이 포함된 구조로 발전해 왔습니다. v5에서 Appear·Disappear·Bounce 같은 기본 모션을 지원하기 시작했고, v7에서는 선이 그려지듯 나타나는 Draw 애니메이션과 심볼 간 전환을 자연스럽게 이어주는 Magic Replace가 추가되었습니다. 아이콘 자체가 의미를 담은 모션 언어를 가지고 있다는 점이 큰 차이입니다.

4️⃣ 플랫폼 통합

Material Symbols는 Android, Web, Flutter 등 다양한 플랫폼에서 동일한 심볼을 사용할 수 있도록 설계된 크로스 플랫폼 중심의 시스템입니다. 여러 환경에서 일관된 스타일을 유지하는 것이 목적이기 때문에, 어디에서나 같은 아이콘을 사용하는 경험을 만드는 데 적합합니다.

반면 SF Symbols는 iOS, macOS, watchOS, visionOS 등 애플 생태계에 최적화되어 있으며, 각 플랫폼의 레이아웃 규칙과 모션, 타이포그래피와 밀접하게 통합되어 있습니다. 이러한 구조는 각 애플 플랫폼에서 가장 자연스러운 ‘네이티브 경험’을 만드는 데 중점을 둔 선택입니다.

애플이 아이콘에 애니메이션을 품은 이유

애플이 아이콘에 애니메이션을 도입한 배경에는 단순한 시각적 장식 이상의 목적이 있습니다. 애플은 아이콘을 하나의 작은 그림이 아니라, 인터페이스의 의미와 흐름을 전달하는 “정보 단위”로 바라보고 있습니다. 정적인 형태만으로는 사용자가 변화 상황을 즉각적으로 파악하기 어려운 경우가 많기 때문에, 애플은 아이콘에 움직임을 부여해 그 사이의 과정과 의미를 자연스럽게 드러내고자 했습니다.

사용자 경험 뿐 아니라, 시스템 레벨의 일관성을 확보하기 위한 전략으로써의 심볼

사용자는 화면에서 나타나는 작은 변화만으로도 앱의 상태를 판단하는데, 애니메이션은 이 판단을 돕는 중요한 단서가 됩니다. 예를 들어 아이콘이 그려지듯 등장하는 동작은 어떤 기능이 활성화되었거나 완료되었음을 직관적으로 전달해 줍니다. ‘무엇이 일어났는지’뿐 아니라 ‘어떻게 일어났는지’를 보여줌으로써 인지적 부담을 줄이고, 앱의 기능 흐름을 더 쉽게 이해하도록 만드는 방식입니다.

애니메이션은 또한 인터페이스 전반의 일관성을 유지하는 데 중요한 역할을 합니다. 앱마다 개발자가 개별적으로 애니메이션을 구현한다면, 플랫폼 전체에서 모션의 품질과 스타일이 달라질 수밖에 없습니다. 그러나 심볼 자체가 시스템 차원에서 정의된 움직임을 포함하고 있다면, 앱 간 경험의 차이가 줄어들고 애플 플랫폼 전체가 하나의 통일된 리듬을 갖게 됩니다. 애플이 SF Symbols에 모션을 내장한 것은 이러한 시스템 레벨의 일관성을 확보하기 위한 전략이기도 합니다.

또한 애플은 visionOS를 통해 공간적 인터페이스를 적극적으로 확장하고 있습니다. 공간 안에서 나타나고 사라지는 요소들은 단순한 변화 이상의 감각을 요구합니다. 선이 그려지는 과정, 모양이 변하는 단계적 흐름은 공간적 경험과 잘 어울리며, 사용자가 ‘변화의 방향성’을 느끼도록 만드는 데 효과적입니다. 심볼의 애니메이션은 이러한 새로운 인터페이스 환경과 연결되는 핵심 요소로 작동합니다.

상태 변화를 명확하게 전달하고 플랫폼 전체의 경험을 통합하는 SF Symbols 7

결국 애플이 아이콘에 애니메이션을 적용한 이유는 화면을 더 화려하게 만들기 위함이 아니라, 상태 변화의 의미를 명확하게 전달하고, 플랫폼 전체의 경험을 통합하며, 새로운 인터페이스 환경에 필요한 모션 언어를 구축하기 위한 선택이라고 할 수 있습니다.

텍스트와 같이 의미를 전달하는 심볼로 기능하고 있는 아이콘

마치며

아이콘은 더 이상 작은 그림에 머물지 않고, 텍스트처럼 의미를 전달하는 ‘심볼’로 기능하기 시작했습니다. 빠르게 변하는 화면 속에서 정보를 명확하게 전달해야 하는 요구가 커지면서 아이콘은 크기, 굵기, 맥락에 따라 달라지는 표현 요소로 확장되었습니다. Google의 Material Symbols와 Apple의 SF Symbols는 이러한 흐름 속에서 탄생한 시스템으로, 아이콘을 UI 구조의 일부로 다루기 위한 기반을 마련해 왔습니다.

Google은 가변 폰트 기술을 적용해 굵기와 채움, 옵티컬 사이즈를 조절할 수 있는 범용적 심볼 시스템을 만들었고, 서로 다른 플랫폼에서도 일관된 스타일을 유지하는 데 초점을 맞추고 있습니다. 반면 Apple은 심볼을 San Francisco 폰트의 연장선으로 바라보며 플랫폼 안에서 자연스럽게 작동하는 정교한 시스템을 구축해 왔습니다. 특히 SF Symbols 7에서는 Draw 애니메이션, Magic Replace, 자동 그라데이션 등 심볼이 등장하고 전환되는 방식을 보다 명확하게 보여주는 기능들이 추가되어 인터페이스의 흐름을 한층 더 자연스럽게 표현할 수 있게 되었습니다.