커스텀 SF Symbols: 가변 템플릿과 필요한 3가지 소스

Apple은 6,900개가 넘는 SF Symbols를 제공하고 SF Symbols 앱도 무료예요. 그래도 대부분의 앱은 결국 Apple이 제공하지 않는 아이콘이 필요해져요. 브랜드 마크, 특정 도메인에 맞춘 글리프, 시스템 어휘로는 표현하기 어려운 커스텀 동작 같은 것들이죠. 이때 정적인 SVG를 넣기보다 커스텀 SF Symbol을 만드는 편이 맞아요. 커스텀 SF Symbols는 시스템의 작동 방식을 그대로 물려받기 때문이에요. Dynamic Type에 맞춰 크기가 바뀌고, Symbol Effects 애니메이션에 참여하며, 4가지 렌더링 모드로 렌더링되고, SF Pro 타이포그래피와 정렬되며, 앱마다 별도 코드를 쓰지 않아도 접근성 설정을 따라요. 정적인 SVG는 이 중 어느 것도 함께하지 못해요.

이 글은 WWDC 2021에서 SF Symbols 3와 함께 도입된 SF Symbols 앱의 가변 템플릿을 기준으로 작업 흐름을 설명해요¹. 핵심 질문은 “필요한 3개의 원본 디자인이 무엇이고 왜 필요한가”예요. 템플릿 형식은 이 작업 흐름에서 가장 중요한 기반인데, 디자이너와 엔지니어가 처음에는 가장 자주 놓치는 지점이기도 해요. 이후 SF Symbols 4, 5, 6, 7은 가변 색상, Magic Replace 전환, 그라디언트 지원, 애니메이션 효과로 템플릿 형식을 확장했지만, 가변 템플릿의 핵심인 3개 소스 구조는 SF Symbols 3 이후 안정적으로 유지되어 왔어요.

요약

• 커스텀 SF Symbols는 SF Symbols 앱에서 내보낸 템플릿에서 시작해요(File > Export Template, 또는 ⌘E)². 이 템플릿은 크기 조정을 위한 시스템 정의 가이드와 교체할 자리 표시자 Symbol 디자인이 들어 있는 SVG예요.
• 가변 템플릿에는 3개의 원본 디자인만 필요해요. Ultralight-Small, Regular-Small, Black-Small이에요. SF Symbols 앱은 나머지 24가지 변형(3개 스케일 × 9개 굵기)을 자동으로 보간해요³.
• 경로 호환성이 가장 중요한 요구사항이에요. 모든 경로는 3개 소스 전체에서 같은 수의 앵커 포인트, 같은 시작점, 같은 방향을 가져야 해요. 그렇지 않으면 보간 결과가 망가진 글리프로 나와요.
• 커스텀 Symbols는 4가지 렌더링 모드(monochrome, hierarchical, palette, multicolor)와 레이어 구조(primary, secondary, tertiary)를 모두 지원해요. Symbol Editor의 렌더링 검사기 패널에서 하위 경로를 레이어에 할당해요.
• 최종 전달은 Xcode의 애셋 카탈로그에 Symbol Image Set으로 Symbol 파일을 추가하는 방식이에요. SwiftUI에서는 Symbol 이름으로 Image(_:)를 호출하고, 나머지는 시스템이 처리해요.

가변 템플릿

SF Symbols 3(WWDC 2021)는 가변 템플릿을 도입했어요³. 하나의 SVG 파일 안에 3개의 원본 디자인을 담고, SF Symbols 앱은 여기서 전체 27가지 변형 격자를 생성해요. 3개의 소스는 다음과 같아요.

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

앱은 이 3가지를 사용해 나머지 24개 셀(Ultralight-Medium, Regular-Medium, Black-Medium, Ultralight-Large, Regular-Large, Black-Large, 그리고 각 스케일의 중간 굵기들)을 보간해요. 원본 경로가 호환되는 구조를 갖추고 있으면 보간은 자동으로 이루어져요.

SF Symbols 3에서 가변 템플릿이 나오기 전에는 커스텀 Symbols의 27가지 변형을 모두 직접 그려야 했어요. 가변 템플릿은 이 작업을 3개 소스 + 보간으로 줄였고, 그 차이는 감당 가능한 디자인 작업과 프로젝트를 멈추게 만드는 작업의 차이에 가까워요.

호환 데이터 요구사항

경로 보간이 작동하려면 3개의 원본 경로가 같은 순서로 같은 형태를 설명해야 해요².

• 같은 수의 앵커 포인트. Regular 굵기의 사각형이 4개의 앵커를 가진다면, 눈에 보이는 곡률이 달라도 Ultralight와 Black에서도 4개의 앵커를 가져야 해요.
• 같은 시작점. 경로의 첫 번째 앵커는 3개 굵기 전체에서 같은 개념적 위치에 있어야 해요. 예를 들어 항상 왼쪽 위 모서리여야 해요.
• 같은 방향. 3개의 경로는 모두 같은 순서로 형태를 따라가야 해요. 시계 방향이든 반시계 방향이든 일관되어야 해요.

이 중 하나라도 어긋나면 꺾임, 잘못된 겹침, 누락된 획 같은 보간 문제가 생겨요. SF Symbols 앱은 일부 문제를 드러내 줘요. 변형 미리보기에서 보간 결과를 볼 수 있기 때문이에요. 하지만 미묘한 문제는 최종으로 내보낸 애셋에서야 나타나는 경우도 있어요.

실용적인 작업 방식은 Regular-Small을 먼저 디자인한 뒤, 같은 경로 뼈대에서 획 두께를 줄여 Ultralight를 만들고 획 두께를 늘려 Black을 만드는 거예요. 이렇게 파생시키면 앵커 수, 시작점, 방향이 구조적으로 보존돼요. 각 굵기를 독립적으로 디자인하면 호환성 문제가 생기기 쉽고, 이를 디버깅하는 시간은 차라리 구조를 다시 잡는 시간보다 길어질 수 있어요.

작업 흐름

컨셉에서 실제로 작동하는 애셋까지는 5단계예요.

1. 비슷한 기존 Symbol 찾기

SF Symbols 앱 라이브러리에는 6,900개가 넘는 Symbols가 있어요. 만들려는 컨셉과 구조적으로 비슷한 Symbol을 찾으세요. 예를 들어 내용이 들어간 원, 오버레이가 있는 사각형, 장식이 붙은 선처럼요. 템플릿 내보내기 흐름은 기존 Symbol의 기하 구조를 출발점으로 삼아요.

2. 템플릿 내보내기

File > Export Template… 또는 ⌘E를 사용하세요. 템플릿 유형으로 “Variable”을 선택하세요. 결과물은 Symbol의 3개 원본 굵기가 배치된 SVG 파일이에요. 여기에 SF Symbols가 SF Pro 텍스트와 정렬하기 위해 사용하는 캡 높이, 기준선, 시각적 여백을 보여주는 참조 기하 정보도 함께 들어 있어요.

3. 템플릿 경로 교체하기

벡터 편집기(Sketch, Figma, Illustrator, Affinity Designer, Inkscape)에서 SVG를 여세요. 템플릿의 이름 붙은 레이어에는 3개의 원본 디자인이 들어 있어요. 레이어 이름과 캡 높이/기준선 정렬은 유지한 채, 각 디자인을 커스텀 디자인으로 교체하세요.

여기서 경로 호환성 요구사항이 중요해져요. 각 굵기를 같은 경로 뼈대에서 설계하고, 다시 그리는 대신 획 두께나 채움 두께를 바꾸세요. 벡터 도구에서 “복제한 뒤 수정”하는 흐름이 가장 마찰이 적어요.

4. 다시 가져와 검증하기

수정한 SVG를 SF Symbols 앱으로 다시 드래그하세요. 앱은 27가지 변형을 생성하고 변형 격자에 보여줘요. 각 굵기와 스케일 조합을 여러 확대 수준에서 확인하세요. 보간 문제는 한눈에 잘 보이지 않는 중간 굵기에서 자주 나타나요.

여러 시각 요소가 있는 Symbol이라면, 예를 들어 본체와 배지, 원과 내부 형태가 함께 있다면 렌더링 검사기 패널을 열고 하위 경로를 레이어(primary, secondary, tertiary)에 할당하세요. 이 레이어 할당이 hierarchical, palette, multicolor 모드에서 Symbol이 어떻게 렌더링되는지를 결정해요.

5. Xcode에 추가하기

Symbol 파일(SF Symbols에서 내보낸 .svg)을 Xcode의 애셋 카탈로그로 드래그하세요. Xcode는 이를 Symbol Image Set으로 취급해요. 코드에서는 이렇게 참조해요.

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

Image(_:)는 systemName: 매개변수 없이 애셋 카탈로그에서 로드해요. 시스템 Symbols에서 작동하는 동일한 .symbolRenderingMode, .foregroundStyle, .symbolEffect, Dynamic Type 동작은 커스텀 Symbols에서도 작동해요. 단, Symbol이 올바르게 제작되어 있어야 해요.

렌더링 모드와 레이어 구조

SF Symbols가 제공하는 4가지 렌더링 모드는 커스텀 Symbols에서도 시스템 Symbols와 똑같이 작동해요⁴.

• Monochrome. 단일 색상(foregroundStyle)이에요. 가장 단순하고 가장 흔히 쓰는 모드예요.
• Hierarchical. 단일 색상이지만 레이어별로 불투명도가 달라요. 렌더링 검사기 패널에서 정의한 레이어에는 미리 정해진 불투명도가 적용돼요. 개발자는 하나의 틴트만 적용하면 시각적 위계가 자동으로 생겨요.
• Palette. 레이어마다 명시적으로 색상을 지정해요. 개발자는 여러 foregroundStyle 인수를 전달하고, 각 레이어는 고유한 색상을 받아요.
• Multicolor. 레이어마다 Apple이 정의한 고정 색상을 사용해요. 커스텀 Symbols에서는 디자이너가 Symbol Editor의 Multicolor 설정에서 할당한 색상이 사용돼요.

hierarchical, palette, multicolor가 작동하게 만드는 것은 레이어 구조예요. 레이어 할당이 없는 커스텀 Symbol은 모든 경로가 primary 레이어로 합쳐져요. Symbol은 monochrome에서는 여전히 렌더링되지만, 다른 모드에서는 시각적 위계를 만들지 못해요. 깊이감이 필요한 Symbol이라면 몇 분을 들여 렌더링 검사기 패널에서 레이어를 할당하세요.

흔한 실패 사례

커스텀 Symbol 실패 기록에서 자주 보이는 패턴은 3가지예요.

경로 호환성 위반. 가장 흔한 문제예요. “Regular 굵기에서는 괜찮아 보이는” Symbol이 중간 굵기에서 깨진다면 거의 항상 경로 호환성 문제예요. 진단 방법은 SF Symbols 앱의 변형 격자를 열고 중간 굵기 변형을 보는 거예요. 꺾임이 보이거나 예상한 보간과 맞지 않는 획이 보인다면, 3개 원본 경로 중 하나가 호환성을 어긴 거예요.

기준선 또는 캡 높이 정렬 오류. 템플릿의 기준선 가이드를 따르지 않고 디자인한 Symbols는 텍스트 옆에 놓였을 때 어색하게 앉아요. 시각적 증상은 .body 텍스트 스타일의 Text와 인라인으로 배치했을 때 Symbol이 너무 높거나 낮아 보이는 거예요. 해결 방법은 템플릿의 참조 기하 정보를 사용하고, Symbol의 광학 중심을 캡 높이의 중간 지점에 맞추는 거예요.

레이어 할당 없음. 내부 구조가 풍부한 Symbol, 즉 여러 시각 요소가 있는데 레이어 할당이 없으면 monochrome에서만 제대로 렌더링돼요. hierarchical 또는 palette 모드를 선택한 앱에서는 평평한 결과가 보여요. 해결 방법은 렌더링 검사기 패널을 열고 각 하위 경로를 레이어에 할당하는 거예요. 주요 형태는 primary, 강조 요소는 secondary, 세 번째 수준의 세부 요소는 tertiary에 두세요.

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

핵심은 3가지예요.

1. 앱 내부 아이콘에는 원시 SVG가 아니라 커스텀 SF Symbols를 사용하세요. 커스텀 Symbol 작업 흐름은 실제 엔지니어링 작업이지만, 시스템 통합(Dynamic Type, Symbol Effects, 렌더링 모드, 접근성)을 생각하면 UI에 오래 남을 아이콘에는 충분히 그 비용을 들일 만해요. 정적인 SVG는 일회성 마케팅 애셋에는 맞지만 핵심 UI에는 맞지 않아요.

2. 하나의 뼈대에서 디자인하고, 경로 구조가 아니라 획 두께를 바꾸세요. 경로 호환성 위반은 가장 중요한 실패 유형이에요. 방어적인 디자인 과정은 하나의 굵기(Regular-Small)에서 시작해 같은 경로 기하 구조의 획을 줄여 Ultralight를 만들고, 획을 늘려 Black을 만드는 거예요. 이렇게 하면 호환성이 구조적으로 유지돼요.

3. 렌더링 모드의 이점을 받는 Symbol이라면 레이어를 명시적으로 할당하세요. monochrome으로만 렌더링되는 Symbol은 SF Symbols 시스템의 절반을 스스로 포기하는 Symbol이에요. 렌더링 검사기 패널 작업은 몇 분이면 충분해요. 그 결과 시스템 Symbols처럼 hierarchical, palette, multicolor 모드에 참여하는 Symbol을 얻을 수 있어요.

전체 Apple 생태계 묶음은 다음과 같아요. 타입이 있는 App Intents, MCP 서버, 라우팅 문제, Foundation Models, 런타임과 도구용 LLM의 차이, 3가지 표면, 단일 진실 공급원 패턴, 2개의 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 생태계 시리즈에 있어요. AI 에이전트와 함께하는 더 넓은 iOS 맥락은 iOS 에이전트 개발 가이드를 보세요.

FAQ

SF Symbols 앱이 꼭 필요한가요, 아니면 다른 방법으로 커스텀 Symbols를 만들 수 있나요?

SF Symbols 앱은 공식 도구이며, 검증된 App Store 호환 커스텀 Symbols를 만들어내는 유일한 도구예요. 서드파티 도구와 온라인 변환기도 있지만, 템플릿 형식의 요구사항을 만족할 수도 있고 그렇지 않을 수도 있는 SVG를 만들어내요. 프로덕션 앱이라면 SF Symbols 앱을 사용하세요.

Windows에서 커스텀 Symbols를 만들 수 있나요?

SF Symbols 앱은 macOS 전용이에요. 내보낸 SVG 템플릿은 벡터 편집기가 있는 어떤 플랫폼에서도 편집할 수 있지만, 내보내기와 다시 가져오기 단계에는 macOS가 필요해요. 대부분의 팀에는 이 단계를 맡을 수 있는 macOS 사용 디자이너가 최소 1명은 있어요. 원격 팀에서는 SVG 파일을 버전 관리나 공유 저장소를 통해 주고받아요.

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

Symbol 구조가 잘 만들어져 있다면 대부분의 Symbol 효과는 자동으로 작동해요. bounce, pulse, scale 등은 Symbol의 출처와 관계없이 적용돼요. .replace 콘텐츠 전환은 바뀌기 전 Symbol과 바뀐 뒤 Symbol이 호환되는 구조를 가져야 해요. 레이어 수가 비슷하고 전체 형태도 비슷해야 해요. 이 묶음의 Symbol Effects 글에서 효과 어휘를 자세히 다뤄요.

Xcode의 Symbol Image Set과 일반 Image Set은 무엇이 다른가요?

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

커스텀 Symbols는 visionOS와 watchOS에서 어떻게 동작하나요?

시스템 Symbols와 같은 방식으로 동작해요. 플랫폼이 기대하는 크기(watchOS에서는 작게, visionOS에서는 크게)로 렌더링되고, 플랫폼의 접근성 기능에 참여하며, 플랫폼의 색상과 효과 관례를 따라요. 커스텀 Symbol 제작은 한 번만 하면 돼요. 크로스 플랫폼 동작은 자동이에요. 이 묶음의 Apple 플랫폼 매트릭스와 visionOS 공간 패턴 글에서 플랫폼별 고려사항을 다뤄요.

App Store 심사에는 어떤 영향이 있나요?

없어요. 커스텀 SF Symbols는 다른 Asset Catalog 애셋과 동일하게 심사돼요. 시각 스타일 가이드라인, 예를 들어 Apple의 UI 패턴을 사칭하지 말 것, 브랜드 상표를 침해하지 말 것 같은 규칙은 다른 커스텀 아트워크와 마찬가지로 커스텀 Symbols에도 적용돼요. 그 외에는 심사 과정에서 표준 이미지 애셋으로 취급돼요.

참고 자료