[IDLE-450] Foundation수정 및 사이드 이펙트 해결

[J0onYEong]

변경된 점

• 변경된 폰트 Foundation적용
• 변경된 폰트로인한 UI변동 문제 해결

UIFont 중앙배치 문제 해결

폰트의 크기및 lineHeight값에 상관없이 항상 폰트를 중앙에 위치시키는 작업이 필요했다.
예를들어 아래 영상을 보면, 버튼이 Focus된 경우 폰트가 바뀐다, 그런데 잘못된 로직으로인해 폰트가 중앙을 유지하지 못하는 문제가 발생했다.

default.mp4

의도치 않게 글자가 요동치는 것을 확인할 수 있다.

UIFont분석

UIFont의 경우 베이스라인으로부터 위로 가장 멀리떨어진 문자의 길이를 ascender라는 변수에 저장한다.
베이스라인으로 부터 가장 아래에 떨어진 길이를(ex 알파벳p) descender에 보통 음수로 저장한다.

LineHeight이란 다행 문자열에 대해 베이스라인 사이의 간격을 의미하며 아래 식을 만족한다.
※ leading은 추가적인 여백을 의미한다.

lineHeight = ascender + descender + leading

해당 프로젝트의 모든 UILabel에는 NSAttributedString이 삽입된다.
아래코드는 Label에 지정된 타이포그래피가 가지는 속성을 반환한다.

let paragraphStyle = NSMutableParagraphStyle()
var baseLineOffset: CGFloat = 0.0
if let lineHeight {
    paragraphStyle.minimumLineHeight = lineHeight
    paragraphStyle.maximumLineHeight = lineHeight
    
    let wordMinHeight = font.ascender + abs(font.descender)
    
    baseLineOffset = (lineHeight-wordMinHeight)/2
}
return [
    .font: font!,
    .foregroundColor: color,
    .kern: letterSpacing,
    .paragraphStyle : paragraphStyle,
    .baselineOffset : baseLineOffset
]

베이스라인을 정확한 수치만큼 이동시켜 문제를 해결할 수 있었다.

default.mp4