"Create scalable images that integrate with your app’s text, and adjust the appearance of those images dynamically."
앱 택스트에 통합하는 스케일링 가능한 이미지를 생성하고, 해당 이미지의 모양을 동적으로 조정합니다.
Overview
심볼 이미지는 앱에서 사용하기 위한 아이콘의 일관적인 집합을 제공하며, 해당 아이콘이 다른 크기와 앱의 특정 컨텐트에 적응할 수 있도록 해줍니다. 심볼 이미지는 선명도를 잃지 않으면서 스케일링되는 벡터 기반 모양을 포함합니다. 템플릿 이미지에서 했던 것처럼 앱엣 최종 모양을 생성하기 위해 해당 모양에 틴트 색상을 적용할 수 있습니다. 바 버튼 아이템처럼 간단한 모양 혹은 글리프를 표시하는 곳에서 템플릿 이미지를 사용할 수 있습니다.
심볼 이미지는 이미지이지만 텍스트와 관련이 있는 여러 특성을 지원하기도 합니다. 많은 시스템 심볼 이미지는 컨텐트에 글자, 숫자, 심볼릭 글자를 포함합니다. 예를 들어 시스템은 덧셈, 뺄셈, 곱셈, 나눗셈을 나타내는 수학적 연산자를 위한 심볼 이미지를 제공합니다. 주변 텍스트와 유사하게 보일 수 있도록 심볼 이미지에 텍스트 관련 특성을 적용할 수도 있습니다.
- 스타일에 일관되게 보일 수 있도록 심볼 이미지에 폰트 텍스트 스타일을 적용할 수 있습니다. 폰트 텍스트 스타일은 심볼 이미지가 현재 동적 타입 설정에 일치하도록 스케일링하는 결과를 보일 수 있습니다.
- 심볼 이미지에 thin, heavy, bold와 같은 weight를 적용할 수 있습니다.
- 텍스트에 사용하는 폰트에 일치시키기 위해 심볼 이미지에 스케일링 및 스타일링을 할 수 있습니다.
- 이미지의 베이스라인을 사용해서 주변 텍스트에 심볼 이미지를 정렬할 수 있습니다.
시스템은 폴더를 위한 이미지, 트래시 캔, 즐겨찾기 아이템 등 사용할 수 있는 표준 심볼 이미지의 컬렉션을 제공합니다. 심볼 이미지는 다르게 크기가 조정된 인터페이스에 지원하기 위해 요구되는 작업의 양을 줄여주면서 현재 특성 환경에 자동으로 적응하기도 합니다. 사용 가능한 심볼 이미지를 탐새갛려면 SF Symbols 앱을 사용하시기 바랍니다. developer.apple.com에 있는 디자인 리소스 페이지에서 다운로드할 수 있습니다.
Creating Custom Symbol Images for Your App에서 설명하고 있는 것처럼 앱의 커스텀 아이코노그래피를 위한 심볼 이미지 파일을 생성할 수도 있습니다.
Creating Custom Symbol Images for Your App
https://developer.apple.com/documentation/uikit/uiimage/creating_custom_symbol_images_for_your_app
<>
Load a Symbol Image
심볼 이미지를 로드하려면 심볼 이미지의 이름을 알아야 합니다. 스토리보드 파일에서 이미지 뷰를 설정할 때 특성 인스펙터에서 심볼 이미지 이름의 리스트를 탐색할 수 있습니다. 코드에서 심볼 이미지를 로드하려면 SF Symbols 앱을 사용해서 모든 시스템 심볼 이미지에 대한 이름을 찾아보시기 바랍니다. 커스텀 심볼 이미지의 경우 에셋 카탈로그에서 Symbol Image Set 에셋을 생성하고 이름을 통해 에셋을 로드하시기 바랍니다.
UIKit은 시스템이 이미지를 제공하는지 혹은 직접 제공하는지에 따라 심볼 이미지 로딩을 위한 다른 경로를 제공합니다.
UIImage의init(systemName:),init(systemName:compatibleWith:),init(systemName:withConfiguration:)메소드를 사용해서 시스템 제공 심볼 이미지를 로드할 수 있습니다.UIImage의init(named:),init(named:in:compatibleWith:),init(named:in:with:)메소드를 사용해서 앱의 커스텀 심볼 이미지를 로드할 수 있습니다.
각 메소드는 커스텀 이미지와 시스템 이미지 사이의 네임스페이스 충돌을 피할 수 있도록 선언된 이미지 타입에 대해서만 찾습니다. 아래 예시 코드는 multiply.circle.fill 시스템 심볼 이미지를 로드하고 있습니다.
let image = UIImage(systemName: "multiply.circle.fill")Apply a Specific Appearance to a Symbol Image
init(systemName:), init(named:) 메소드를 사용하는 경우 UIKit은 심볼 이미지 정보와 함께 이미지 객체를 반환합니다. 이미지 뷰에서 해당 심볼 이미지를 표시하면 시스템은 이미지 뷰에 기본값 스타일링을 적용합니다. 기본값 스타일링을 갖는 이미지는 굵은 글씨 텍스트 옆 혹은 헤드라인 텍스트 스타일을 사용하는 텍스트 바깥 쪽에 나타날 것입니다.
심볼 이미지를 나머지 컨텐트와 혼합하려면 어떻게 이미지를 스타일링할지에 대한 정보와 함께 UIImage.SymbolConfiguration 객체를 생성해야 합니다. 주변 레이블 및 텍스트 뷰에서 사용하는 텍스트 스타일로 객체를 설정하거나 뷰에서 사용하는 폰트를 구체화해야 합니다. 심볼 이미지가 얇거나 두꺼운 모양으로 나타날 수 있도록 weight 정보를 추가할 수 있습니다. 이미지를 주변 텍스트보다 조금 더 크게 혹은 작게 나타나도록 할지를 구체화할 수도 있습니다.
심볼 이미지를 포함하고 있는 UIImageView의 preferredSymbolConfiguration 속성에 설정 데이터를 할당해야 합니다. 보통 설정 데이터는 이미지 뷰에만 적용할 거십니다. 시스템 뷰의 다른 타입들의 경우 UIKit은 시스템 요구사항에 기반해 설정 데이터를 제공합니다. 예를 들어 바는 바의 설정에 일치할 수 있도록 바 버튼 아이템에 심볼 이미지를 설정합니다. 설정 데이터를 사용해야 하는 유일한 상황은 이미지를 직접 그릴 때입니다. 이 경우 구체화된 설정 데이터를 포함하는 이미지의 버 생성을 위한 applyingSymbolConfiguration(_:) 메소드를 사용할 수 있습니다.
Align Symbol Images with a Text Label by Using a Baseline
심볼 이미지를 포함하는 이미지 뷰를 레이블 옆으로 위치시키는 경우 뷰의 베이스라인을 사용해서 뷰를 정렬할 수 있습니다. 스토리보드에서 뷰를 정렬하려면 두 뷰를 선택하고 First Baseline 제약을 추가해야 합니다. 코드 작성을 통해 구현하려면 두 뷰가 같도록 두 뷰의 firstBaselineAnchor를 설정해서 제약을 생성할 수 있습니다. 아래 코드 예시와 같습니다.
NSLayoutConstraint.activate([
imageView!.firstBaselineAnchor.constraint(equalTo: label!.firstBaselineAnchor)
])모든 시스템 제공 심볼 이미지는 베이스라인 정보를 포함하며, UIImage는 이미지의 하단으로부터 offset으로 베이스라인 값을 드러냅니다. 보통 심볼 이미지의 베이스라인은 이미지에서 나타나는 모든 텍스트의 하단으로 정렬되지만, 텍스트를 갖지 않는 심볼 이미지도 베이스라인을 갖습니다. 더불어 이미지의 withBaselineOffset(fromBottom:) 메소드를 호출해서 이미지에 베이스라인을 추가할 수 있습니다. 아래 코드 예시는 이미지를 로드하고, 이미지의 하단으로부터 2.0 포인트 위의 베이스라인을 추가하고 있습니다.
let image = UIImage(named: "MyImage")
let baselineImage = image?.withBaselineOffset(fromBottom: 2.0)