[니카내카] 디자인시스템 (Font 편)

왜요. 제가 폰트 모듈화 못시켜서 디자인시스템으로 만든 사람처럼 보이세요?

맞습니다.

제발 알려종.

 

폰트를 디자인시스템화 시킨다?

어차피 폰트를 코드로 접근하면 그게 끝 아닌가?

... 라고 생각할 수 있지만 여기서 말하는 디자인시스템은 단순히 .otf / .ttf 파일을 코드로 접근하는 것으로 끝나지 않는다.

 

디자인측에서 넘겨주는 디자인시스템 중에는 폰트도 포함되어 있다.

단순히 Pretendard의 medium 스타일, 18 사이즈 뿐만 아니라 자간/행간까지 적용되어서 Title0 ~ .. Body1 ~ .. 이렇게 정리되어 있다.

 

그렇기 때문에 이것까지 고려해서 개발을 해야 한다. 이런 것들을 매번 텍스트마다 적용하면 비효율적이고, 디자인시스템으로 만들게 되면 수정 시에도 한번에 수정할 수 있고 디자인측과 소통할 때도 더 용이하기 때문에 폰트도 시스템화 하는 것이 좋다.

 

 

어떻게 만드는데?!

먼저 폰트 파일을 추가한다.

폰트 파일 추가할 때 주의할 점은 project target 설정이 잘 되어 있는지 확인하는 것이다.

잘 되어 있으면 이렇게 폰트 파일을 선택하고 우측 인스펙터에 Target Membership이 체크 표시 된 것을 볼 수 있다.

 

 

그리고 Info.plist로 가서 파일을 등록한다.

.otf / .ttf 까지 (확장자까지) 잘 작성해야한다. (= 오타가 나지 않도록 복붙 추천)

 

---

여기까지 커스텀 폰트를 위해서 등록하는 과정과 같다.

 

이후의 과정은 코드로 폰트 파일에 접근하고,

각 폰트 스타일과 사이즈 + 자간을 설정하는 과정이 필요하다.

 

 

import UIKit

extension UIFont {
    enum FontType: String {
        case bold = "Pretendard-Bold"
        case medium = "Pretendard-Medium"
        case regular = "Pretendard-Regular"
        case semibold = "Pretendard-Semibold"
        
        var name: String {
            return self.rawValue
        }
        
        static func font(_ type: FontType, ofsize size: CGFloat) -> UIFont {
            return UIFont(name: type.rawValue, size: size)!
        }
    }
}

등록한 폰트 파일을 UIFont를 확장해서 위와 같이 접근하고

 

 

import UIKit

public struct FontProperty {
    let font: UIFont.FontType
    let size: CGFloat
    let kern: CGFloat
    let lineHeight: CGFloat?
}

public enum NiCarNaeCarFont {
    case title0
    case title1
    case title2
    case title3
    
    case body1
    case body2
    case body3
    case body4
    case body5
    case body6
    case body7
    
    public var fontProperty: FontProperty {
        switch self {
        case .title0:
            return FontProperty(font: .semibold, size: 90, kern: -0.3, lineHeight: 100)
        case .title1:
            return FontProperty(font: .semibold, size: 24, kern: -0.3, lineHeight: 34)
        case .title2:
            return FontProperty(font: .semibold, size: 20, kern: -0.3, lineHeight: nil)
        case .title3:
            return FontProperty(font: .medium, size: 20, kern: -0.3, lineHeight: 28)
        case .body1:
            return FontProperty(font: .semibold, size: 18, kern: -0.3, lineHeight: nil)
        case .body2:
            return FontProperty(font: .medium, size: 18, kern: -0.3, lineHeight: 34)
        case .body3:
            return FontProperty(font: .regular, size: 18, kern: -0.3, lineHeight: 28)
        case .body4:
            return FontProperty(font: .medium, size: 16, kern: -0.3, lineHeight: nil)
        case .body5:
            return FontProperty(font: .regular, size: 16, kern: -0.3, lineHeight: 20)
        case .body6:
            return FontProperty(font: .medium, size: 14, kern: -0.3, lineHeight: nil)
        case .body7:
            return FontProperty(font: .regular, size: 14, kern: -0.3, lineHeight: nil)
        }
    }
}

public extension NiCarNaeCarFont {
    var font: UIFont {
        guard let font = UIFont(name: fontProperty.font.name, size: fontProperty.size) else {
            return UIFont()
        }
        return font
    }
}

위와 같이 NiCarNaeCarFont를 만들어주면 된다.

 

 

이렇게 설정한 니카내카 폰트를 위와 같이 원하는 스타일로 지정하면 끝 !!

 

 

---

 

디자인시스템이라는 것 자체가 초반에는 조금 귀찮은 작업들이 많지만 

✅ 디자인 파트와의 소통이 잘 된다는 점과

✅ 이후에 수정, 추가, 삭제가 되었을 때 한번에 업데이트 할 수 있다는 점이 장점이라고 생각한다.