Starbucks Caramel Frappuccino
본문 바로가기
  • 그래 그렇게 조금씩
UIKit/AutoLayout

14 - Dynamic Type

by Toughie 2023. 4. 1.

https://developer.apple.com/design/human-interface-guidelines/foundations/typography/

 

우리가 텍스트의 글꼴이나 크기 등을 정할 때 위와 같은 종류들을 볼 수 있었다.

그런데 Accessibility(접근성)측면에서 보면 글자의 크기가 항상 고정되어 있으면 문제가 되는 경우도 있다.

 

시력이 안좋은 사람들의 경우 아이폰의 폰트크기 자체를 매우 크게 설정해서 사용하는 경우가 있을 것이다.

글자 크기가 변동되지 않는 것이 기획 의도가 아닌 이상, 사용자 설정에 맞게 컨텐츠의 사이즈도 커지는 것이

접근성 측면에선 옳은 방향이라는 말과 같다.

지난 시간 다이나믹 스크롤뷰에 사용되었던 코드의 일부이다.

여기서 .preferredFont, adjustsFontForContentSizeCategory가 다이나믹 타입 관련 코드이다.

이것이 어떤 역할을 하는지 다음 예시를 통해 알아보자.

 

아래 스택뷰 위에 고정된 사이즈의 레이블을 하나 올려둔 것이다.

그리고 Accessibility inspector를 통해 글자 크기를 확 키우고 비교해 보자.

 

아래와 같이 폰트의 사이즈가 커지는 것을 알 수 있다.

(사이즈가 고정된 "나는 고정이야"레이블만 빼고!)

그럼 "나는 고정이야"도 유동적으로 움직일 수 있게 하려면?

Dynamic Type - Automatically Adjusts Font를 체크해주자
어디서 본 것 같지 않은가..? 위의 func addView() 내부코드와 같은 녀석이다.

잘 확대되는 것을 알 수 있다.

그런데.. 버튼까지 같이 커지니까 좀 이상한 거 같아서 설정을 살펴보니

버튼의 Style이 Plain으로 되어 있을 경우 다이나믹 타입이 적용 되고, Default인 경우 다이나믹 타입이 적용되지 않았다.

(원래는 Style이 Default가 고정이었는데 Xcode가 업데이트 되면서 Plain으로 바꼈다고 들었던 것 같다.)

근데 주로 Default로 설정을 많이 하니.. Default로 수정하고

만약 버튼도 다이나믹하게 사이즈가 바뀌게 하려면 코드로는 어떻게 할 수 있는 지 알아보자.

 

먼저 배열에 버튼들을 담아 아울랫을 연결시켜 주고

그리고

사용자가 시스템 폰트 크기를 변경해주었을 때, 버튼의 타이틀 크기도 변경해 주기 위해

우선 다이나믹 타입의 하나인 Headline으로 버튼의 폰트를 지정해주고

아래 코드를 추가해 준다.

viewDidLoad() 내부에서 알림센터의 옵저버를 추가하는 것

UIContentSizeCatogory의 변화가 생겼을 때 셀렉터가 가리키는 메서드를 실행하겠다.

buttons가 [UIButton!]의 형태이므로, forEach를 통해 각각 버튼의 타이틀 레이블의 

adjustsFontForContentSizeCategory = true 설정해주기.

 

 

평소에 폰트 크기나 사이즈에 대해 디자인적인 고민만 해왔는데..

폰트 사이즈에 따라 실사용에 불편함을 느끼는 사용자가 있을 수도 있다는 생각을 하게 되었다.

 

사용성 좋은 앱 개발을 위해서는

접근성을 고려하는 것도 매우 중요하다는 리마인드도 함께.

 

[학습 소스]

공식문서, 야곰 오토레이아웃 정복하기 강의

https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html

https://yagom.net/courses/autolayout/

'UIKit > AutoLayout' 카테고리의 다른 글

16 - Self-Sizing Table View Cells  (0) 2023.04.03
15 - Login View Layout  (0) 2023.04.03
13 - Dynamic Scroll View  (0) 2023.04.01
12 - Scroll Views  (0) 2023.04.01
11. Safe Area , Layout Margins  (0) 2023.03.27