[Project-Taster] 버전 업 - 폰트 적용 및 중복 이미지 코드화

🤔 문제 상황

우선 앱을 전체적으로 버전 업 하기 전에 예열을 할 겸 간단한 것부터 개선해 보았다.

1. 조금 더 기본적인 폰트의 필요성

현재는 앱에 전체적으로 Gmarket Sans 폰트가 적용되어 있었다. 물론 좋은 폰트이지만 앱에 전체적으로 적용되는 폰트이기 때문에 콘텐츠가 많아진다면 약간은 피로하게 느껴질 수도 있겠다는 생각을 했고, 살짝 옆으로 퍼져있는 폰트이기 때문에 변경이 필요하다고 느꼈다.

현재 앱 화면

2. 이미지 중복 사용

앱의 용량과도 관련이 있었는데, 아래와 같이 똑같은 이미지이지만 색상만 조금씩 바뀌어서 있는 이미지 파일들이 있었고, 이를 코드로 관리하면 용량적인 측면에서도 가벼워지고 조금 더 유지보수가 쉬워 보였다.

똑같은 이미지에 색상만 다른 모습

💡 해결 과정

1. 폰트 선정

아래와 같이 후보군은 기존의 SF Pro, Spoqa Hans Sans, Pretendard와 추가된 Suit폰트까지 총 4개의 폰트를 고려했다. 다 너무너무 좋고 많이 쓰이는 폰트여서 고민이 많이 되었지만 결국 내 맘에 드는 폰트를 고르기로 했다. SF Pro의 경우 한글은 넓은데, 영어는 좁은 느낌? 이 들어서 패스... SUIT의 경우 대문자와 소문자의 크기가 너무 차이나 보여서 패스...

실제 시뮬레이터에서도 테스트를 해봤는데, Spoqa Han Sans보다는 조금더 간격이 좁은 Pretendard가 맘에 들어서 (완전 개인적) Pretendard로 채택했다! 😌

SF Pro, Pretendard, Spoqa Han Sans, SUIT 순서

2. 폰트 코드 개선

기존의 폰트는 아래와 같이 약간은 하드코딩 느낌으로 코딩이 되어있었다.

위의 코드를 개선하여 아래와 같이 .font(.pretendard(.body))처럼 사용하기 직관적으로 바꿔주었다. 그리고 Xcode에서 설정되어 있는 기존 시스템 폰트와 대응하여 동일하게 바꿔주었고 다이내믹 폰트를 적용했다.

 

함수를 호출할때마다 switch문을 사용하면 매번 계산해야 하기 때문에 dictionary로 폰트를 미리 선언해 놓고 사용하기로 했다.

// MARK: - Pretendard 폰트
extension Font {
    private static let pretendardFontNames: [Font.Weight: String] = [
        .black: "Pretendard-Black",
        .heavy: "Pretendard-ExtraBold",
        .bold: "Pretendard-Bold",
        .semibold: "Pretendard-SemiBold",
        .medium: "Pretendard-Medium",
        .regular: "Pretendard-Regular",
        .light: "Pretendard-Light",
        .thin: "Pretendard-ExtraLight",
        .ultraLight: "Pretendard-Thin"
    ]
    
    private static let pretendardFontSizes: [Font.TextStyle: CGFloat] = [
        .largeTitle: 34,
        .title: 28,
        .title2: 22,
        .title3: 20,
        .headline: 17,
        .body: 17,
        .callout: 16,
        .subheadline: 15,
        .footnote: 13,
        .caption: 12,
        .caption2: 11
    ]
    
    static func pretendard(_ textStyle: Font.TextStyle, weight: Font.Weight = .regular) -> Font {
        let name = pretendardFontNames[weight, default: "Pretendard-Regular"]
        let size = pretendardFontSizes[textStyle, default: 17]
        return Font.custom(name, size: size, relativeTo: textStyle)
    }
}

// 사용 예시
Text("Preview")
	.font(.pretendard(.body))

3. 이미지 코드로 변경

아래와 같이 이미지로도 만들고 물이 출렁이는 애니메이션 효과도 주었지만... SwiftData와 앱 구조등 여러개가 얽혀있고, 과연 모든 이미지를 코드화하는 게 맞을까?라는 생각이 들었다.

코드화 한 이미지

이미지들을 코드로 대체한다면 계산해보니 약 100KB의 이득이 있긴 하다. 23MB의 용량을 가지고 있는 앱이라 절대 무시하진 못하겠지만... 우선 SwiftData가 얽혀있어서 제대로 된 마이그레이션 계획을 세우고 변경해야겠다는 생각을 했다. 우선 이렇게 코드화 한다면 위와 같이 애니메이션 효과도 줄 수 있다는 장점도 있다!