[SwiftUI] Custom Font 지정하기 (with Figma)

폰트는 프리텐다드 사용함 (사이트링크)

Pretendard

• 글꼴 다운로드를 눌러서 맥에 저장

• 피그마에서 사용하기 위해 각 항목을 더블 클릭해서 설치

 

Figma

• 텍스트를 추가한 후 폰트, 폰트의 굵기, 자간, 행간을 지정
• 그 후 Text 옆에 점 네개 아이콘 클릭

• 텍스트 스타일 메뉴가 나오면 + 버튼을 눌러 새로운 텍스트 스타일을 등록

• 새로운 텍스트 스타일의 이름을 지정한 뒤 create style을 눌러 저장

• 최종 피그마 디자인은 이런 형태로 개발자에게 전달

 

개발

• 폰트를 넣어 줄 폴더를 생성
• 피그마에서 사용된 폰트를 해당 폴더에 임포트
  • 피그마에서 사용된(디자이너와 이미 이야기 된 폰트만) 넣어줌

• 임포트시에 Copy items if needed 를 체크해서 폴더로 복사해주고 targets도 체크해서 지정

• project > TARGETS > Info 탭으로 가서 "Fonts provided by application" 필드를 생성
  • 특정 필드 위에서 마우스 호버할 때 나타나는 + 버튼을 눌러 필드를 추가해주면 됨
  • 새로운 필드가 나타나면 Fonts provided by application 입력

• 추가해 준 폰트 파일명을 확장자와 함께 그대로 입력함

    private func getFontName() {
        for family in UIFont.familyNames {

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

• ContentView로 이동한 뒤 해당 함수를 작성

    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()
        .onAppear {
            getFontName()
        }
    }

• onAppear modifier를 통해 폰트의 실제 이름을 콘솔에 찍을 수 있음

• info.plist에 폰트 파일을 등록하지 않으면 뜨지 않으므로 info.plist에 정보 등록 후 이름 확인 코드 작성해야 함
• 특정 폰트의 경우 파일 이름과 실제 폰트이름이 다르기 때문에 확인하는 과정이 꼭 필요함
• 한번 이름을 알았으니 해당 코드는 주석 처리해도 무관

enum CustomFontName: String {
    case light = "Pretendard-Light"
    case medium = "Pretendard-Medium"
    case extraBold = "Pretendard-ExtraBold"
}

• 폰트 실제 이름을 대치할 enum 생성

enum CustomFontStyle {
    case header
    case caption
    case content
}

• 피그마에서 넘어온 스타일 가이드 대로 정의

struct CustomFontViewModifier: ViewModifier {
    var style: CustomFontStyle
    
    @ViewBuilder // 여러 viewModifier를 위해서 some View를 반환함
    func body(content: Content) -> some View {
        switch style {
        case .content:
            content
                .font(.custom(CustomFontName.medium.rawValue, size: 16))
                .lineSpacing(25 - 16) // 행간 지정 : 피그마의 행간은 폰트의 크기까지 더해서 계산하고 SwiftUI는 행과 행 사이의 공간을 의미함
                .kerning(16 * 0.05)
        case .caption:
            content
                .font(.custom(CustomFontName.light.rawValue, size: 14))
                .lineSpacing(16)
                .kerning(0)
        case .header:
            content
                .font(.custom(CustomFontName.extraBold.rawValue, size: 36))
                .kerning(36 * 0.07)
        }
    }
}

• ViewModifer를 생성하여 각 스타일 가이드 정의대로 정의해 줌
• 행간 지정은 lineSpacing을 사용
  • 피그마에서는 폰트의 크기 + 행간
  • Xcode에서는 단순 행간 크기만
  • kerning의 경우 px, % 모두 대응 가능하며 %일 경우 폰트사이즈 * 퍼센트

extension View {
    func customFont(_ style: CustomFontStyle) -> some View {
        self.modifier(CustomFontViewModifier(style: style))
    }
}

• Text에서 modifier를 이용해서 ViewModifier를 넘기지 않고 customFont라는 이름으로 ViewModifier를 사용할 수 잇도록 지정

        VStack(spacing: 0) {
            Group {
                Text("상단 폰트입니다.")
                    .customFont(.header)
                    .padding(.top, 32)
                    .multilineTextAlignment(.center)
                
                Text("캡션은 주로 설명할 때 사용됩니다")
                    .customFont(.caption)
                    .multilineTextAlignment(.center)
                    .padding(.top, 5)
                
                Text("그거 아시나요? 여러줄로 표시되는 폰트를 그릴 때는 주의를 기울여야 합니다. 디자인과 동일하게 그리려면 어떻게 해야 할까요? 
디자이너와 개발자 간에 텍스트 스타일을 정의하고 공유하는 과정이 필요합니다. ")
                    .multilineTextAlignment(.leading)
                    .customFont(.content)
                    .padding(.top, 40)
                
            }
            .frame(maxWidth: .infinity)
            
            Spacer()
        }

• 텍스트에 customFont modifier를 사용해서 피그마에서 지정한 style guide를 지정해줌

• 왼쪽은 SwiftUI 작업 화면, 오른쪽은 피그마 결과
• 피그마에서 텍스트의 영역과 SwiftUI의 Text의 영역이 다름. SwiftUI의 Text는 텍스트에 딱 맞게 나오지만 Figma는 텍스트 영역의 중간에 텍스트가 위치해 있기 때문에 이러한 오프셋을 디자이너와 함께 이야기 해서 지정하는 것이 필요