DynamicTypeSize로 접근성 높이기 (feat. SwiftUI)

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

이번 포스팅에서는 SwiftUI에서 DynamicTypeSize로 접근성을 높이는것에 대해 학습해보겠습니다 🙋🏻

 

우선 DynamicTypeSize이 뭔지 알아야겠죠?

 

---

DynamicTypeSize로 접근성 높이기

SwiftUI에서 제공하는 동적 텍스트 크기 조정 시스템이라고 볼 수 있어요.

사용자의 접근성 설정에 따라 앱의 텍스트 크기를 자동으로 조절할 수 있게 해주죠.

 

iOS 15.0 부터 사용이 가능하며, 정의는 아래와 같아요.

 

enum DynamicTypeSize

 

열거 타입이며 케이스들로는 아래와 같이 type size와 accessibility type size로 구분할 수 있습니다.

 

.xSmall       // 가장 작은 크기
.small        // 작은 크기
.medium       // 중간 크기 (기본)
.large        // 큰 크기
.xLarge       // 매우 큰 크기
.xxLarge      // 더 큰 크기
.xxxLarge     // 매우 더 큰 크기
.accessibility1 // 접근성 크기 1
.accessibility2 // 접근성 크기 2
.accessibility3 // 접근성 크기 3
.accessibility4 // 접근성 크기 4
.accessibility5 // 가장 큰 접근성 크기

 

요렇게 사이즈 별 구분할 수 있으며, xxxLarge보다 테스트 시 accessibility1의 크기가 더 크더라구요!

 

 

이는 Xcode 프리뷰에서 간단히 이 항목을 컨트롤하며 확인할 수 있어요.

그리고 여기 있는 케이스가 바로 DynamicTypeSize의 케이스죠.

 

그럼 어떻게 구현해볼 수 있을까요?

 

Text("Hello, world!")
  .font(.title)
  .dynamicTypeSize(.small...DynamicTypeSize.accessibility5)

 

보통 이렇게 많이 사용합니다.

즉, 해당 폰트를 설정하고 접근성을 통해 다이나믹 사이즈를 변경할때 허용되는 다이나믹 사이즈의 범위를 지정해줄 수 있죠.

(고정 폰트를 주면 조정되지 않아요~)

위 코드는 small부터 accessibility5의 크기까지 지원해주죠.

xsmall은 범위에 없기에 지원하지 않아 크기 변경이 없습니다.

 

최대 크기를 제한하기 위해서는 아래와 같이 사용됩니다.

.dynamicTypeSize(...DynamicTypeSize.large) // large 이하

 

최소 크기 제한은 아래와 같이 사용되구요.

.dynamicTypeSize(DynamicTypeSize.small...) // small 이상

 

쉽죠!?

 

그리고 환경 변수로도 사용할 수가 있어요.

 

import SwiftUI

struct ContentView: View {
  @Environment(\.dynamicTypeSize) var typeSize
  
  var body: some View {
    VStack {
      Text("Current size: \(typeSize)")
      
      Text("Hello, world!")
        .font(.title)
        .dynamicTypeSize(...DynamicTypeSize.large)
    }
    .padding()
  }
}

 

이런식으로 활용한다면

 

 

이렇게 현재 다이나믹 사이즈에 대한 정보를 가져올 수 있습니다.

 

그럼 이런 사용이 실제 어떤 차이를 가지고 쓰일 수 있을까요?

 

예시를 하나 보겠습니다 🙋🏻

 

import SwiftUI

struct ContentView: View {
  var body: some View {
    VStack(spacing: 20) {
      Text("Title")
        .font(.title)
        .dynamicTypeSize(.small...DynamicTypeSize.accessibility5)
      
      Text("Body")
        .font(.body)
        .dynamicTypeSize(.small...DynamicTypeSize.medium)
    }
    .padding()
  }
}

 

이렇게 각기 다른 텍스트에 dynamicTypeSize 모디파이어가 붙어있습니다.

근데 각자 조건이 다르죠.

Title은 small부터 최대까지 지원하지만, Body는 small부터 medium까지만 지원하죠.

 

 

사이즈가 medium까지는 같이 조정이 되지만, medium을 넘어서볼까요?

 

 

Title은 계속 조정되지만, Body는 medium 이상의 값을 가지지 않습니다.

 

이렇게 접근성을 적용할때 각기 다른 범위를 두어 차별화를 줄 수 있어요 😃

 

즉, 접근성을 더욱 사용자에 친화적으로 높여줄 수 있죠 👍

 

이 DynamicTypeSize에도 주의할 점이 있습니다.

 

1️⃣ 레이아웃 고려

 - 텍스트 크기 조정에 따라서 레이아웃이 깨질 수도 있으니 유동적인 레이아웃을 설계해야 합니다.

2️⃣ 접근성 지원

 - 가능한 넓은 범위의 크기를 지원하는걸 권장하며 최소 accessibility2까지 지원하도록 권장됩니다.

3️⃣ 테스트

 - 다양한 디바이스와 모든 지원되는 크기에서 레이아웃 테스를 해봐야 접근성을 확실히 높일 수 있어요.

 

---

마무리

이렇게 간단하게 DynamicTypeSize에 대해 알아봤습니다!

DynamicTypeSize를 통해 접근성을 한층 더 높여보면 좋을것 같아요 😃

 

---

레퍼런스

DynamicTypeSize | Apple Developer Documentation