[iOS] Dynamic Type

WWDC 2017 - Building Apps with Dynamic Type 를 본 기록 ✏️

(여기서 Text만 기록했는데 tableview랑 image도 뒤에 설명해주신답니다,,) 

 

[1] Dynamic Type

 

With Dynamic Type, people choose their preferred text size and iOS switches fonts automatically as needed.

 

Dynamic Type을 지원하는 전화 앱인데요, 

 

 

저시력자가 볼 때는 이렇게 보이기 때문에

Dynamic Type을 지원하는게 얼마나 중요한 지 보여주십니다. 

 

 

텍스트 사이즈는 

설정 > 디스플레이 및 밝기 > 텍스트 크기에서 바꿀 수 있고 

 

 

더 큰 사이즈를 원한다면, 

설정 > 손쉬운 사용 > 디스플레이 및 텍스트 크기 > 더 큰 텍스트 로 들어가서 설정하시면 됩니다. 

 

 

 

 

[2] Dynamic Type 지원하기 > 기본 폰트

 

Dynamic Type을 지원하려면 어떻게 해야할까요?!

HIG > Typography 를 보면 iOS는 총 12개의 사이즈를 제공해주고 있습니다. (xSmall 부터 AX5 까지)

 

설정 > 디스플레이 에서 제공하는 텍스트 사이즈

 

설정 > 손쉬운 사용 에서 제공하는 더 큰 텍스트 사이즈 

 

 

이 사이즈표를 보고 특정 Label에 적절한 폰트를 설정해준 후, 

 

 

이 옵션을 켜주면 됩니다. 

 

 

코드로 하고 싶다면 이렇게 두줄 되겠습니다. 

 

[3] Dynamic Type 지원하기 > 커스텀 폰트

 

그럼 만약 기본 폰트말고 커스텀 폰트를 쓰면서 Dynamic Type을 지원하려면 어떻게 해야할까요?

iOS11부터 이렇게 해주면 됩니다

이렇게 하면 디플트로 기본 폰트 중 body의 옵션을 따르게 된다고 합니다. (예를들어 xxLarge에서 body가 21 사이즈가 되니까 너의 텍스트도 21 사이즈가 된다는 뜻)

 

 

body말고 다른 스타일의 scale에 맞추고 싶다면 textstyle을 지정해줄 수 도 있습니다. 

 

 

WWDC 2019 - Visual Design and Accessibility 에도 Dynamic Type 설명이 나오는데요, 
이런 customFontDictionary를 만들어서 사용하신다고 하네요. 

 

 

[4] Dynamic Type 지원하기 > 웹뷰 

 

그럼 웹뷰는 어떻게 Dynamic Type을 지원할까요? 

CSS에 이렇게 해주면 된다고 합니다. 

 

 

 

[5] 고려해야할 것

 

우리의 목표는 3가지 입니다.

 

 

몇가지 예를 보여주시는데요,,

 

# Example 1

 

흰색박스가 사용자가 볼수있는 스크린 사이즈라고 해봅시다. 

 

 

폰트를 키우면 이렇게 박스를 벗어나서 글자가 짤리게 되고 

 

 

말줄임옵션을 해준다고 해도 텍스트를 다 읽을 수 없습니다. 

 

 

 

이때는 multiple lines로 감싸줘야합니다. 

 

 

multiple lines를 해주고 싶다면 이렇게 lines 0 해주면 됩니다. 

 

 

 

# Example 2 

 

첫번째 라벨과 두번째 라벨의 간격이 이 정도 인데,

폰트사이즈를 키우니까 겹치게 됩니다..! 

 

 

이럴때는 오토레이아웃을 이렇게 잡아주라고 하네요

 

 

만약에 오토레이아웃을 안쓰고 이런식으로 쓰고 있었다면

 

 

이렇게 바꾸면 됩니다!

 

 

 

 

# Example 3

 

노란색이 사용자가 보는 스크린이라고 해봅시다. 

 

 

폰트를 키우면 이렇게 됩니다.

 

 

우리의 목표인 fully visible에 안맞으니까 

multiple lines로 해줍니다. 

 

 

하지만 이렇게 vertical하게 배치하는 것을 더 추천한다고 합니다.

(우리의 목표중 아름답게 보이게 한다도 있었으니까 ㅎ_ㅎ)

 

 

 

 

[6] 폰트 사이즈 구하기 

 

preferredContentSizeCategory 로 사용자의 폰트 사이즈를 구할 수 있습니다. 

 

 

설정 > 디스플레이에서 설정한 사이즈는 이런 값으로 나오고 

 

 

설정 > Accessibility에서 설정한 사이즈는 앞에 accessibiliy 프리픽스가 붙어있다고 합니다. 

 

 

 

이 정보를 가지고 이런 식의 분기를 해줄 수 있겠습니다..! 

 

 

 

[7] Dynamic Type 쉽게 테스트하기 

 

이 내용은 WWDC 2019 - Visual Design and Accessibility 에서 가져온 내용입니다 :-) 

 

 

 

Accessibility Inspector 에서 Font Size를 바꿔줄 수 도 있지만

 

 

더 편하게 XCode의 Environmnet Overrides에서 Size를 바꿔줄 수 도 있습니다 (감동,,)