[iOS] Xcode에서 Variable Font 적용하기

파일을 정리하다가 우연히 폰트 파일을 열었는데 생각보다 폰트 하나당 파일 크기가 크다는 것을 알게 되었습니다. 줄일 수 있는 방법을 찾아보다가 단일 파일로 사용할 수 있다는 것을 알게 되어 적용해보았습다.

제가 자주 쓰는 Pretendard로 예로 들자면, 위의 사진에서 9개의 폰트가 각각 1.6MB씩 총 14.4MB이고 바로 아래 사진의 PretendardVariable은 하나의 파일로 6.7MB의 크기로 훨씬 적다는 것을 알 수 있습니다.

Variable Font란?

Variable Font(가변 폰트)는 한 개의 폰트 파일에서 다양한 스타일(굵기, 너비, 기울기 등)을 조정할 수 있도록 만든 폰트 형식이라고 할 수 있습니다. 일반적으로 사용되는 static font(정적 폰트)와 달리, variable font는 한 파일 내에 여러 폰트의 스타일 데이터를 포함하며, 사용자가 원하는 대로 특정 스타일을 조정할 수 있다는 특징이 있습니다.

Xcode에서 Variable Font 적용하기

이제 Xcode에서 자주 사용하는 폰트 중 하나인 Pretendard를 사용해서 적용해보려고 합니다.

1. 폰트 다운로드하기

Pretendard에서 최신 버전 다운로드를 눌러 Pretendard-1.3.9.zip을 다운로드 했습니다.

다운로드 한 이후, 압축해제 후 파일을 열면 public > variable > PretendardVariable.ttf을 선택하면 됩니다.

2. Xcode에 폰트 저장하기

Xcode에서 왼쪽 창에 끌어다 놓으면 이렇게 창이 뜹니다. 꼭 Targets을 현재 프로젝트에 체크표시가 되어 있는지 확인을 하고 Finish를 눌러야 합니다.

그 다음 Info.plist를 수정할 건데, Fonts provided by application > Item 0에 PretendardVariable.ttf와 같이 본인이 사용할 폰트를 추가해줍니다.
만약 여기서 폰트가 여러개였다면 모두 다 추가해주어야 하는 번거로움이 있습니다.

폰트를 클릭한 후 오른쪽 창에도 마찬가지로 Target Membership에 있는지 확인합니다.

3. 적용하기

enum FontName: String {
    case thin = "PretendardVariable-Thin"
    case extraLight = "PretendardVariable-ExtraLight"
    case light = "PretendardVariable-Light"
    case regular = "PretendardVariable-Regular"
    case medium = "PretendardVariable-Medium"
    case semiBold = "PretendardVariable-SemiBold"
    case bold = "PretendardVariable-Bold"
    case extraBold = "PretendardVariable-ExtraBold"
    case black = "PretendardVariable-Black"
}

extension UIFont {
    static func font(_ style: FontName, ofSize size: CGFloat) -> UIFont {
        return UIFont(name: style.rawValue, size: size) ?? UIFont.systemFont(ofSize: size)
    }
}

편하게 사용하기 위해서 UIFont를 확장하여 enum을 이용해 variableFont에 내장 되어 있는 9가지 폰트를 사용하려고 합니다.

만약, 폰트 이름이 정확하지 않다면

for family in UIFont.familyNames {
	print("Font family: \(family)")
    for font in UIFont.fontNames(forFamilyName: family) {
    	print("Font name: \(font)")
   	}
}

이 코드를 사용하여 내장되어 있는 폰트 이름을 알아내면 됩니다.

사용예시

 private let thinLabel: UILabel = {
        let label = UILabel()
        label.text = "Pretendard 프리텐다드"
        label.font = UIFont.font(.thin, ofSize: 30)
        label.textAlignment = .center
        return label
 }()

위의 코드는 UILabel로 사용할 때 예시입니다.

하나의 폰트 파일로 9개의 폰트를 표현해보았습니다.

마무리

Variable Font는 모든 OS나 브라우저에서 지원되지 않을 수 있다는 점이 있습니다. 예를 들어 iOS 13 이하에서는 Variable Font를 사용할 수 없습니다.
그리고, 자료를 제대로 못 찾은 것일 수도 있지만 pretendard font는 아직은 기울기나 다른 것을 바꿀 수 없었던 것 같아서 하나의 단일 파일로 이렇게 여러 글꼴을 표현할 수 있는 것 밖에 하지 못해서 아쉬웠습니다. 다음에는 다른 폰트로 기울기와 굵기 모두 표현하여 variable font의 장점을 살려보고 싶습니다.

참고자료
Pretendard