커스텀 SF Symbols: 가변 템플릿과 세 가지 필수 소스

Apple은 6,000개가 넘는 SF Symbols를 제공하고 SF Symbols 앱은 무료이지만, 대부분의 앱은 결국 Apple이 가지고 있지 않은 아이콘이 필요합니다. 브랜드 마크, 도메인별 글리프, 시스템 어휘에 맞지 않는 커스텀 액션 같은 것들입니다. 올바른 길은 정적 SVG를 가져다 쓰는 대신 커스텀 SF Symbol을 만드는 것입니다. 커스텀 SF Symbols는 시스템의 기능을 무료로 상속받기 때문입니다. Dynamic Type에 맞춰 크기가 조정되고, Symbol Effects 애니메이션에 참여하며, 네 가지 렌더링 모드로 렌더링되고, SF Pro 타이포그래피와 정렬되며, 앱별 코드 없이도 접근성 설정을 따릅니다. 정적 SVG는 이 중 어느 것에도 참여하지 않습니다.

이 글은 WWDC 2021에서 SF Symbols 3와 함께 도입된¹ SF Symbols 앱의 가변 템플릿을 기준으로 워크플로를 살펴봅니다. 프레임은 “필요한 세 가지 소스 디자인이 무엇이며 왜 그런가”입니다. 템플릿 형식은 대부분의 디자이너와 엔지니어가 처음 작업할 때 놓치는, 워크플로의 핵심 부분이기 때문입니다. 이후의 SF Symbols 릴리스(4, 5, 6, 7)는 가변 색상, 매직 리플레이스 전환, 그라디언트 지원, 애니메이션 효과로 템플릿 형식을 확장했지만, 가변 템플릿의 핵심 3-소스 구조는 SF Symbols 3 이후로 안정적으로 유지되어 왔습니다.

TL;DR

• 커스텀 SF Symbols는 SF Symbols 앱에서 내보낸 템플릿(File > Export Template 또는 ⌘E)에서 시작합니다². 템플릿은 크기 조정을 위한 시스템 정의 가이드와 교체할 플레이스홀더 심볼 디자인을 가진 SVG입니다.
• 가변 템플릿은 세 가지 소스 디자인만 필요합니다. Ultralight-Small, Regular-Small, Black-Small입니다. SF Symbols 앱은 나머지 24가지 변형(3개 스케일 × 9개 굵기)을 자동으로 보간합니다³.
• 경로 호환성은 핵심 요구사항입니다. 모든 경로는 세 소스 모두에서 동일한 수의 앵커 포인트, 동일한 시작점, 동일한 방향을 가져야 합니다. 그렇지 않으면 보간이 잘못된 글리프를 생성합니다.
• 커스텀 심볼은 네 가지 렌더링 모드(monochrome, hierarchical, palette, multicolor)와 레이어 구조(primary, secondary, tertiary)를 모두 지원합니다. Symbol Editor의 렌더링 인스펙터 패널에서 하위 경로를 레이어에 할당합니다.
• 최종 전달: Xcode의 에셋 카탈로그에 심볼 파일을 Symbol Image Set으로 추가합니다. SwiftUI는 심볼 이름과 함께 Image(_:)를 통해 이를 참조하며, 나머지는 시스템이 처리합니다.

가변 템플릿

SF Symbols 3 (WWDC 2021)는 가변 템플릿을 도입했습니다³. 이는 세 가지 소스 디자인을 담은 단일 SVG 파일이며, SF Symbols 앱은 이로부터 27가지 변형의 전체 그리드를 생성합니다. 세 가지 소스는 다음과 같습니다.

• Ultralight-Small. 가장 가벼운 굵기, 가장 작은 스케일.
• Regular-Small. 중간 굵기, 가장 작은 스케일.
• Black-Small. 가장 두꺼운 굵기, 가장 작은 스케일.

앱은 이 세 가지를 사용해 나머지 24개 셀(Ultralight-Medium, Regular-Medium, Black-Medium, Ultralight-Large, Regular-Large, Black-Large, 그리고 각 스케일의 중간 굵기)을 보간합니다. 소스 경로가 호환 가능한 구조를 가진다면 보간은 자동으로 이루어집니다.

SF Symbols 3가 가변 템플릿을 도입하기 전에는 커스텀 심볼이 27가지 변형 모두를 수동으로 그려야 했습니다. 가변 템플릿은 이를 3 + 보간으로 줄였고, 이는 관리 가능한 디자인 작업과 프로젝트를 망치는 작업의 차이입니다.

호환 가능한 데이터 요구사항

경로 보간은 세 소스 경로가 동일한 모양을 동일한 순서로 묘사할 것을 요구합니다².

• 동일한 수의 앵커 포인트. Regular 굵기에서 4개의 앵커를 가진 정사각형은, 보이는 곡률이 다르더라도 Ultralight와 Black에서도 4개의 앵커를 가져야 합니다.
• 동일한 시작점. 경로의 첫 번째 앵커는 세 굵기 모두에서 동일한 개념적 위치(예: 항상 좌상단 모서리)에 있어야 합니다.
• 동일한 방향. 세 경로 모두 동일한 순서(시계 방향 또는 반시계 방향)로 모양을 따라가야 합니다.

이 중 하나라도 실패하면 보간 아티팩트가 발생합니다. 꺾임, 잘못된 겹침, 누락된 스트로크 등입니다. SF Symbols 앱은 이 중 일부를 표면화합니다(변형 미리보기가 보간 결과를 보여줍니다). 하지만 미묘한 문제는 최종 내보낸 에셋에서만 나타납니다.

실용적인 워크플로는 Regular-Small을 먼저 디자인한 다음, 동일한 경로 골격에서 스트로크 폭을 줄여 Ultralight를, 늘려 Black을 파생시키는 것입니다. 각 파생은 구조적으로 앵커 수, 시작점, 방향을 보존합니다. 각 굵기를 독립적으로 디자인하면 디버깅에 다시 그리는 것보다 더 오래 걸리는 호환성 문제가 발생합니다.

워크플로

개념에서 작동하는 에셋까지 다섯 단계입니다.

1. 유사한 기존 심볼 찾기

SF Symbols 앱의 라이브러리에는 6,000개 이상의 심볼이 있습니다. 개념과 구조적으로 유사한 것을 찾으세요(원-콘텐츠, 정사각형-오버레이, 선-장식). 템플릿 내보내기 경로는 기존 심볼의 형상을 시작점으로 사용합니다.

2. 템플릿 내보내기

File > Export Template… 또는 ⌘E. 템플릿 유형으로 “Variable”을 선택하세요. 결과는 심볼의 세 가지 소스 굵기가 배치된 SVG 파일이며, SF Symbols가 SF Pro 텍스트와 정렬하기 위해 사용하는 캡 높이, 베이스라인, 시각적 여백을 보여주는 참조 형상도 포함됩니다.

3. 템플릿 경로 교체

벡터 편집기(Sketch, Figma, Illustrator, Affinity Designer, Inkscape)에서 SVG를 엽니다. 템플릿의 명명된 레이어에는 세 가지 소스 디자인이 들어 있습니다. 레이어 이름과 캡 높이/베이스라인 정렬을 보존하면서 각각을 커스텀 디자인으로 교체합니다.

여기서 경로 호환성 요구사항이 중요합니다. 동일한 경로 골격에서 각 굵기를 디자인하고, 다시 그리는 대신 스트로크 폭이나 채우기 굵기를 변경합니다. 벡터 도구의 “복제 후 수정” 워크플로가 가장 저항이 적은 길입니다.

4. 다시 가져오기 및 검증

수정된 SVG를 SF Symbols 앱으로 다시 드래그합니다. 앱은 27가지 변형을 생성하고 변형 그리드에 표시합니다. 여러 줌 수준에서 각 굵기-스케일 조합을 검사하세요. 보간 아티팩트는 즉시 명확하지 않은 중간 굵기에서 자주 나타납니다.

여러 시각적 요소가 있는 심볼(본체와 배지, 원과 내부 모양)의 경우, 렌더링 인스펙터 패널을 열고 하위 경로를 레이어(primary, secondary, tertiary)에 할당합니다. 레이어 할당은 심볼이 hierarchical, palette, multicolor 모드에서 어떻게 렌더링되는지 결정합니다.

5. Xcode에 추가

심볼 파일(SF Symbols에서 내보낸 .svg)을 Xcode의 에셋 카탈로그로 드래그합니다. Xcode는 이를 Symbol Image Set으로 처리합니다. 코드에서 참조하세요.

Image("MyCustomSymbol")
    .symbolRenderingMode(.hierarchical)
    .foregroundStyle(.tint)

Image(_:)(파라미터에 systemName: 없음)는 에셋 카탈로그에서 로드합니다. 시스템 심볼에서 작동하는 동일한 .symbolRenderingMode, .foregroundStyle, .symbolEffect, Dynamic Type 동작이 커스텀 심볼에서도 작동합니다. 단, 심볼이 올바르게 작성되었을 경우입니다.

렌더링 모드와 레이어 구조

SF Symbols가 노출하는 네 가지 렌더링 모드는 시스템 심볼과 동일하게 커스텀 심볼에서 작동합니다⁴.

• Monochrome. 단일 색상(foregroundStyle). 가장 단순한 모드이자 가장 흔한 모드입니다.
• Hierarchical. 단일 색상이지만 레이어별로 불투명도가 다양합니다. 렌더링 인스펙터 패널에 정의된 레이어는 미리 설정된 불투명도를 받습니다. 개발자가 하나의 틴트를 적용하면 자동으로 시각적 계층이 생깁니다.
• Palette. 레이어당 명시적 색상. 개발자가 여러 foregroundStyle 인자를 전달하면 각 레이어가 자체 색상을 받습니다.
• Multicolor. 레이어당 Apple이 정의한 고정 색상. 커스텀 심볼의 경우, 색상은 디자이너가 Symbol Editor의 Multicolor 구성에서 할당한 것입니다.

레이어 구조는 hierarchical, palette, multicolor를 작동하게 만드는 것입니다. 레이어 할당이 없는 커스텀 심볼은 모든 경로를 primary 레이어로 합칩니다. 심볼은 여전히 monochrome으로 렌더링되지만 다른 모드에서는 시각적 계층을 만들지 않습니다. 깊이가 도움이 되는 모든 심볼에 대해 렌더링 인스펙터 패널에서 레이어를 할당하는 시간을 들이세요.

흔한 실패

커스텀 심볼 실패 로그에서 나온 세 가지 패턴입니다.

경로 호환성 위반. 가장 흔한 문제입니다. “Regular 굵기에서는 괜찮아 보이는” 심볼이지만 중간 굵기에서 결함이 있는 변형을 생성하는 경우, 거의 항상 경로 호환성 문제가 있습니다. 진단: SF Symbols 앱의 변형 그리드를 열고 중간 굵기 변형을 보세요. 예상되는 보간과 일치하지 않는 꺾임이나 스트로크가 보이면, 세 소스 경로 중 하나가 호환성을 위반한 것입니다.

베이스라인이나 캡 높이의 정렬 오류. 템플릿의 베이스라인 가이드를 존중하지 않고 디자인된 심볼은 텍스트 옆에 어색하게 자리 잡습니다. 시각적 증상: 심볼이 .body 텍스트 스타일의 Text와 인라인으로 배치될 때 너무 높거나 너무 낮게 보입니다. 해결: 템플릿의 참조 형상을 사용하여 심볼의 광학 중심을 캡 높이의 중간점에 위치시키세요.

레이어 할당 없음. 풍부한 내부 구조(여러 시각적 요소)를 가지고 있지만 레이어 할당이 없는 심볼은 monochrome에서만 올바르게 렌더링됩니다. hierarchical이나 palette 모드를 선택한 앱은 평면적인 출력을 봅니다. 해결: 렌더링 인스펙터 패널을 열고 각 하위 경로를 레이어에 할당하세요(메인 모양은 primary, 강조는 secondary, 3차 디테일은 tertiary).

이 패턴이 iOS 26+ 앱에 의미하는 것

세 가지 시사점입니다.

1. 앱 내 아이콘에는 원시 SVG가 아닌 커스텀 SF Symbols를 사용하세요. 커스텀 심볼 워크플로는 진짜 엔지니어링 작업이지만, 시스템 통합(Dynamic Type, Symbol Effects, 렌더링 모드, 접근성)은 UI에 장기적으로 자리 잡는 모든 아이콘에 대해 그 비용을 가치 있게 만듭니다. 정적 SVG는 일회성 마케팅 에셋에는 적합하지만, 핵심 UI에는 적합하지 않습니다.

2. 단일 골격에서 디자인하고, 경로 구조가 아닌 스트로크 굵기를 변경하세요. 경로 호환성 위반이 핵심 실패 모드입니다. 방어적인 디자인 프로세스는 하나의 굵기(Regular-Small)로 시작하여, 동일한 경로 형상에서 스트로크를 줄여 Ultralight를, 스트로크를 늘려 Black을 파생시키는 것입니다. 호환성은 구조적으로 유지됩니다.

3. 렌더링 모드의 이점을 누리는 모든 심볼에 명시적으로 레이어를 할당하세요. monochrome으로만 렌더링되는 심볼은 SF Symbols 시스템의 절반을 포기하는 심볼입니다. 렌더링 인스펙터 패널은 몇 분이면 됩니다. 결과는 시스템 심볼과 함께 hierarchical, palette, multicolor 모드에 참여하는 심볼입니다.

전체 Apple Ecosystem 클러스터: 타입이 지정된 App Intents; MCP 서버; 라우팅 질문; Foundation Models; 런타임 vs 툴링 LLM 구분; 세 가지 표면; 단일 진실 공급원 패턴; 두 개의 MCP 서버; Apple 개발용 훅; Live Activities; watchOS 런타임; SwiftUI 내부; RealityKit의 공간 멘탈 모델; SwiftData 스키마 규율; Liquid Glass 패턴; 멀티 플랫폼 출시; 플랫폼 매트릭스; Vision 프레임워크; Symbol Effects; Core ML 추론; Writing Tools API; Swift Testing; Privacy Manifest; 플랫폼으로서의 접근성; SF Pro 타이포그래피; visionOS 공간 패턴; Speech 프레임워크; SwiftData 마이그레이션; tvOS 포커스 엔진; @Observable 내부; SwiftUI Layout 프로토콜; 내가 쓰지 않으려는 것. 허브는 Apple Ecosystem Series에 있습니다. AI 에이전트와 함께하는 더 넓은 iOS 컨텍스트는 iOS Agent Development guide를 참조하세요.

FAQ

SF Symbols 앱이 필요한가요, 아니면 다른 방식으로 커스텀 심볼을 만들 수 있나요?

SF Symbols 앱은 공식 도구이며, App Store와 호환되는 검증된 커스텀 심볼을 생성하는 유일한 도구입니다. 서드파티 도구와 온라인 변환기가 존재하지만, 템플릿 형식의 요구사항을 충족할 수도 있고 그렇지 않을 수도 있는 SVG를 생성합니다. 프로덕션 앱에는 SF Symbols 앱을 사용하세요.

Windows에서 커스텀 심볼을 만들 수 있나요?

SF Symbols 앱은 macOS 전용입니다. 벡터 편집기가 있는 어떤 플랫폼에서든 내보낸 SVG 템플릿을 편집할 수 있지만, 내보내기와 다시 가져오기 단계는 macOS가 필요합니다. 대부분의 팀에는 그 단계를 처리할 수 있는 macOS 디자이너가 최소 한 명 있습니다. 원격 팀 워크플로는 버전 관리나 공유 저장소를 통해 SVG 파일을 전달합니다.

커스텀 심볼에서 .symbolEffect를 어떻게 지원하나요?

대부분의 심볼 효과는 심볼의 구조가 잘 형성되어 있다면 자동으로 작동합니다. bounce, pulse, scale 등은 소스에 관계없이 심볼에 적용됩니다. .replace 콘텐츠 전환은 from-symbol과 to-symbol이 호환 가능한 구조(유사한 레이어 수, 유사한 전체 모양)를 가져야 합니다. 클러스터의 Symbol Effects 게시물이 효과 어휘를 자세히 다룹니다.

Xcode에서 Symbol Image Set과 일반 Image Set의 차이는 무엇인가요?

Symbol Image Set은 심볼의 전체 템플릿(27가지 변형 모두)을 가져오고 SF Symbols의 렌더링 파이프라인을 통해 노출합니다. 심볼은 Dynamic Type에 맞춰 크기가 조정되고, 렌더링 모드에 참여하며, .symbolEffect와 함께 작동합니다. 일반 Image Set은 그런 것에 참여하지 않는 정적 래스터 또는 SVG 리소스입니다. 커스텀 SF Symbols에는 Symbol Image Set을 사용하세요.

커스텀 심볼은 visionOS와 watchOS를 어떻게 처리하나요?

시스템 심볼과 동일한 방식입니다. 플랫폼이 예상하는 크기(watchOS는 작게, visionOS는 크게)로 렌더링되고, 플랫폼의 접근성 기능에 참여하며, 플랫폼의 색상과 효과 컨벤션을 따릅니다. 커스텀 심볼 작성은 일회성이며, 크로스 플랫폼 동작은 자동입니다. 클러스터의 Apple Platform Matrix와 visionOS spatial patterns 게시물이 플랫폼별 고려사항을 다룹니다.

App Store 심사에 미치는 영향은 무엇인가요?

없습니다. 커스텀 SF Symbols는 다른 에셋 카탈로그 에셋과 동일하게 심사됩니다. 시각적 스타일 가이드라인(Apple의 UI 패턴을 사칭하지 말 것, 브랜드 상표를 위반하지 말 것)은 다른 커스텀 아트워크와 마찬가지로 커스텀 심볼에도 적용됩니다. 그 외에는 심사 프로세스가 이를 표준 이미지 에셋으로 처리합니다.

참고 자료