🎨 [Design] 연결 과정 UI Dynamic Type 대응

[b0tab0ra]

Original Issue Title

🎨 [Design] 연결모드 UI 깨짐

개요

손쉬운 사용> 디스플레이 및 텍스트 크기> 더 큰 텍스크를 설정한 경우, 연결 과정에서의 UI가 깨지는 현상 발견

영역

other

TO-BE

피그마 참고

AS-IS

작업계획

• 작업 1
• 작업 2
• 작업 3

작업기한

No response

노션링크

없음

비고

없음

참조자

cc. @Jeongin-c (PM) - 문제발견
cc. @0tak2 (Tech)

[0tak2]

• Dynamic Type 대응 문제
• 디자인 파트에서 괜찮다고 하면 medium으로 문제가 생기는 Text 뷰에 대해 고정 가능
• 다만 HIG를 준수하는 결정은 아님
• 참고
  • https://developer.apple.com/kr/videos/play/wwdc2024/10074
  • https://developer.apple.com/documentation/swiftui/view/dynamictypesize(_:)

[0tak2]

분석

의문: 왜 어디는 Dynamic Type이 먹히고, 어디는 크기가 그대로지?

현재 다이나믹 타입에 따라 폰트 크기가 달라지는 경우는 아래와 같이 타이포그라피 적용된 경우

• .font() 모디파이어 그대로 사용
• 타이포 시스템 정착 전 넣어두었던 코드가 수정되지 않아서 남아있거나, 디자인 스펙 상 줄간격이 없어서 이렇게 지정된 경우

폰트 크기가 달라지지 않는 경우는 아래와 같이 커스텀 모디파이어로 타이포그라피 적용된 경우

• UIKit의 UIFont를 Font로 래핑중
• UIFont는 기본적으로 Dynamic Font에 따라 크기가 스케일링되지 않는다... 폰트 사이즈 대신 텍스트 스타일을 지정하거나, UIFontMetrics를 통해서 명시적으로 스케일링하는 방식은 가능 (참고)
• UIFont를 써야 하는 이유
  • line height을 맞추기 위해!!
  • SwiftUI의 Font는 line height을 제공하지 않는다... 그래서 굳이굳이 UIFont로 타이포 시스템을 정의하고 Font로 래핑해서 쓰고 있는 것

선택 가능한 방법

방법 1. 모두 Dynamic Type에 맞게 스케일링

• typo 모디파이어를 다음과 같이 수정하면 아래와 같이 모두 스케일링된다.
  

방법 2. Dynamic Type 대응하지 않음

• 스케일링 되지 않도록 명시할 수 있다.
• HIG에는 위배된다. Dynamic Type은 중요한 접근성 관련 기능이기 때문에 독립된 섹션까지 존재한다. (HIG)
• DynamicTypeSize 모디파이어: https://developer.apple.com/documentation/swiftui/dynamictypesize
  

결정

• 우선 UI 중 레이아웃이 깨지는 부분에 대해 Dynamic Type 대응을 하지 않는다. 일단은 medium 스케일로 강제 고정.
• 가까운 시일 안에 기획, 디자인 파트와 협의해서 스케일링 관련해 방향을 픽스하고 부분적으로/전체적으로 적용 필요

cc. @Jeongin-c @umtaehyung @jell1237