SwiftUI에서 사용자 지정 글꼴로 굵은 텍스트 지원

접근성을 위해 빌드할 때 염두에 두어야 할 기본 설정이 많이 있습니다! 어떤 사람들에게는 굵은 글씨를 읽으면 이해력이 높아집니다. Bold Text 기본 설정을 입력하십시오. 이 설정은 더 나은 가독성을 보장하기 위해 모든 텍스트의 가중치를 증가시키는 iOS 설정입니다.



사용자가 Bold Text 기본 설정을 활성화하면 사용자 인터페이스의 모든 항목이 가독성을 높이기 위해 더 굵게 표시됩니다. 일반 텍스트는 약간 굵게, 약간 굵은 텍스트는 굵게, 굵은 텍스트는 검은색으로 바뀝니다(예, 굵은 텍스트도 굵게 표시됩니다!). 이것은 이탤릭체와 같은 변형에도 적용됩니다.

UI 엔지니어로서 우리는 인터페이스를 구축할 때 이 기본 설정을 고려해야 합니다. 기본 시스템 글꼴을 사용하는 경우 행운의 날입니다. 이미 Apple에서 이를 처리해 줍니다! 하지만 custom typeface을(를) 사용하고 있다면 이 기사를 발견했기 때문에 운이 좋은 날이기도 합니다!

우리가 목표로 하는 코드는 다음과 같습니다.

Text("Lorem ipsum dolor sit amet.")
    .accessibilityFont(.body)

시작하기 전에 필요에 따라 추가 무게를 구매해야 하므로 팀의 디자이너에게 Bold Text 기본 설정을 알리는 것이 좋습니다.

먼저 액세스 가능한 글꼴 데이터를 저장할 모델을 설정해 보겠습니다. 여기서는 전환할 수 있는 일반 글꼴과 굵은 글꼴을 모두 정의합니다.

struct AccessibleFont {
    var regular: Font
    var bold: Font

    init(_ regular: Font, bold: Font) {
        self.regular = regular
        self.bold = bold
    }

    func value(_ legibilityWeight: LegibilityWeight?) -> Font {
        switch legibilityWeight {
        case .bold:
            return bold
        default:
            return regular
        }
    }
}

이제 글꼴을 정의하는 모델이 있으므로 본문 글꼴에 대한 예제를 만들어 보겠습니다. Bold Text 기본 설정이 활성화되면 사용자 지정 굵은 글꼴을 사용해야 합니다. 그렇지 않으면 일반 글꼴을 사용해야 합니다.

extension AccessibleFont {
    static var body: AccessibleFont {
        AccessibleFont(
            regular: Font.custom("CustomFont-Regular", 17.0),
            bold: Font.custom("CustomFont-Bold", 17.0)
        )
    }
}

다음으로 뷰에서 사용할 수 있는 뷰 수정자(예: .font(_:) )를 정의합니다. legibilityWeight environment value 을 사용하여 사용자의 기본 설정에 따라 실제 글꼴이 무엇인지 결정할 수 있습니다.

struct AccessibilityFontViewModifier: ViewModifier {
    @Environment(\.legibilityWeight) private var legibilityWeight

    var font: AccessibleFont

    func body(content: Content) -> some View {
        content.font(font.value(legibilityWeight))
    }
}

쉽게 참조할 수 있도록 .accessibilityFont(_:) 에 편리한 View 함수도 포함합니다.

extension View {
    func accessibilityFont(_ font: AccessibleFont) -> some View {        
        return self.modifier(AccessibilityFontViewModifier(font: font))
    }
}

이 모든 것을 합치면 원래 예제를 얻을 수 있습니다! 이제 Bold Text 기본 설정이 활성화되면 SwiftUI는 텍스트를 실시간으로 굵게 렌더링합니다.

Text("Lorem ipsum dolor sit amet.")
    .accessibilityFont(.body)

Bold Text는 사용자가 액세스 가능한 환경을 만들기 위해 활성화할 수 있는 기본 설정 중 하나일 뿐입니다. Bold Text 또는 Invert Colors 등 사용자가 무엇을 토글하든 엔지니어는 이를 지원하기 위해 노력해야 합니다!