SwiftUI에서 Typography 설정하기 (feat. Tuist)

 

안녕하세요. 린다입니다.

오늘은 Tuist와 Swift를 함께 사용할 때 어떻게 Typography를 

구현하면 좋은지... 에 대해서 글을 작성해보려고 해요.

 

사실 저번에도 Tuist에서 custom font 사용하기에 대한 주제로 글을 올린적이 있는데요.

단순하게 enum으로 폰트를 정의하고 Extension View로 빼서 사용하면

적용은 잘 되지만, 핸드폰 시스템의 텍스트 크기 변경에 따라서 앱 내부 폰트 사이즈도 변경되더라구요.

그래서, 이번에는 어떻게 Typography를 구현하면 좋은지를 주제로 더 정확하게 작성하기로 했습니다.

맨 왼쪽이 정석 ❘ 오른쪽 > 시스템 텍스트 크기 변경이 같이 변경되는 경우

 

 

다들 아시겠지만, Tuist + Custom Font 하면 해당 모듈에 이런 FontFamily가 생성되요.

 

 

그리고 다른 모듈에서 해당 Font를 사용하기 위해서는 

AppDelegate에서 register를 해야합니다.

 

제대로 import 됐는지는 주석 처리된 for문을 돌려보면 알 수 있어요.

for family in UIFont.familyNames {
    let sName: String = family as String
    print("Font family: \(sName)")

    for name in UIFont.fontNames(forFamilyName: sName) {
        print("Font name: \(name as String)")
    }
}

 

 

 

 

다시 돌아와서 

보통 디자이너분께서 제공해주시는 Typography는 이렇죠?

 

 

 

먼저 정의를 위해서는

 

이렇게 enum으로 Typography으로 제공해주신 폰트들을 정의합니다.

 

 

그리고 추가적으로 설정해주신 weight, size를 설정해볼게요.

switch self를 통해서 각각의 size, weight 정의

 

 

 

그리고 

 

 

저렇게  Line height를 지정해주는 경우는 padding을 통해 vertical로

설정을 해주어야 정확한 타이포그라피를 완성할 수 있어요.

(https://sy-catbutler.tistory.com/64) > 해당 글을 참고해주세요!

 

저번 글과 다르게 이번 디자이너분께서는 %로 설정해주셔서

수식만 %로 바꿔서 동일하게 적용하였습니다.

이 외에도 행간(line spacing)이 있어서 설정했어요.

 

 

그리고 Extension Font를 통해서 사용할 폰트들을 정의하고

Custom Font 정의에서 해당 extension을 통해 값을 넣을 수 있는 변수를 선언했어요.

 

 

이렇게 정의해놓은 폰트들은 쉽게 modifier로 사용할 수 있도록 만들면

제가 사용하는 Typography 방식은 끝입니다.

근데 전 참고로, 오른쪽 구조체 단위로 한번 더 만들어서 사용하곤 해요.

그렇게 해야 코드가 깔끔하더라구요.

 

 

전체코드는 좀 길어서 깃허브 링크 걸어놓을게요.

참고가 되셨다면 좋겠습니다!

만약 더 좋은 방법이 있다면 피드백 부탁드려요!

 

전체코드

https://github.com/zerosome-dev/zerosome-ios/blob/dev/Projects/DesignSystem/Sources/Font/Font.swift