[ShowPot회고] lineHeight, letterSpacing적용하면서 겪은 이슈

ShowPot에서 사용하는 폰트

• 다음 프로젝트에서는 영어, 한글에 따라 서로 다른 폰트를 적용
• 한글은 Pretendard, 영어는 Oswald를 사용
• 부가적으로 각각 폰트에 따라 다른 lineHeight, letterSpacing을 적용

그럼 lineHeight, letterSpacing을 어떻게 적용하는거야 ?

let attributes: [NSAttributedString.Key: Any] = [
            .kern: letterSpacingPercent
]
        
let mutableAttributedString = NSMutableAttributedString(attributedString: self)
mutableAttributedString.addAttributes(attributes, range: NSRange(location: 0, length: self.length))

• 일반적으로 UILabel의 attributedText에 attribute를 적용시킨 NSAttributedString을 삽입하는 방식으로 진행

어떻게 attribute를 적용하는 공통함수를 만들 수 있을까 ?

• attribute와 관련된 부분은 한 화면뿐만 아니라 이후 프로젝트에 사용되는 모든 텍스트에 적용되야하므로 공통함수를 만들어야했음

func setLineHeight(lineHeightMultiple: CGFloat) -> NSAttributedString {
        let paragraphStyle = NSMutableParagraphStyle()
        paragraphStyle.lineHeightMultiple = lineHeightMultiple

        let attributes: [NSAttributedString.Key: Any] = [
            .paragraphStyle: paragraphStyle
        ]

        let mutableAttributedString = NSMutableAttributedString(attributedString: self)
        mutableAttributedString.addAttributes(attributes, range: NSRange(location: 0, length: self.length))
        return NSAttributedString(attributedString: mutableAttributedString)
}
    
func setLetterSpacing(letterSpacingPercent: CGFloat) -> NSAttributedString {
        let attributes: [NSAttributedString.Key: Any] = [
            .kern: letterSpacingPercent
        ]
        
        let mutableAttributedString = NSMutableAttributedString(attributedString: self)
        mutableAttributedString.addAttributes(attributes, range: NSRange(location: 0, length: self.length))
        return NSAttributedString(attributedString: mutableAttributedString)
}

• 위처럼 각각 자간, 줄높이에 해당하는 attribute를 적용하는 함수로 구분지어 UILabel+Extension을 통해 적용해주었음

자간, 줄높이를 적용한 이후 문제점 발생

• 기존 가운데에 정렬이 올바르게 된 텍스트가 아래로 밀려나는 이슈가 발생

잘못된 레이아웃 문제?

• 처음엔 라벨의 textAlignment가 .center가 아닌것인가 의심하였지만 해결X
• 위 사진에 보이는것처럼 라벨의 크기가 텍스트를 딱 맞게 덮지않아서 생긴문제라 여겨 sizeToFit을 통해서 가운데정렬을 하면 되지않을까했지만 해결X

어떻게 해결했는데 ?

• 여러 레퍼런스를 뒤져보다가 나와 같은 문제를 겪은 블로그를 발견

• 기존 아무런 lineHeight를 적용하지않은 텍스트같은 경우는 딱 달라붙지만 lineHeight를 적용하면 밑단에 딱붙은 상태로 높이가 커지게 됨

  아하 그렇다면 baselineOffset값을 이용하여 밑단에 떨어진 정도를 올려 가운데에 정렬되게끔 하면 되겠구나 !!

• 참고링크: https://sujinnaljin.medium.com/swift-label%EC%9D%98-line-height-%EC%84%A4%EC%A0%95-%EB%B0%8F-%EA%B0%80%EC%9A%B4%EB%8D%B0-%EC%A0%95%EB%A0%AC-962f7c6e7512

baselineOffset을 적용하며 깨닫게 된 점

paragraphStyle.lineHeightMultiple = lineHeightMultiple

1. 기존에 lineHeight를 배율로 받았기때문에 lineHeightMultiple로 넣었지만 baselineOffset를 이용하면서 max, min lineHeight값을 넣어야할 일이 생겨 self.font.lineHeight * font.lineHeightMultiple 공식을 통해 lineHeight를 구할 수 있음을 암

2. 단순히 attribute를 적용하는것에 그치지않고 어떻게하면 잘게 쪼개어 팀원과 쓸 수 있는지를 고민해야함을 뼈저리게 느낌...
   

• baseline은 텍스트의 가장 밑단을 나타내는것이 아니라 밑단에서 descent + leading값보다 떨어진 부분을 의미