[SwiftUI] LineHeight, LineSpace

🔧 문제 상황

바야흐로.. 때는... 디자이너가 font system을 만들어줬던... 그 어느날....

 

 

사실 Cherish는 빠른 MVP를 위해서 LineHeight를 100%로 해달라고 디자이너한테... 부탁했었는데, 이번 프로젝트때는 이미 많은 디자인이 완료된 후에 아.. 맞다...라는 생각이 들었고...

 

그렇게 Line height라는 녀석을 이제는 피할 수 없게 되었다.

 

⚠️ Cherish의 경우에는 한 줄짜리 디자인에서는 100%로 맞추고, 여러 줄의 경우에는 lineSpacing으로 했었음

💬 고민 Point

1️⃣ LineHeight의 개념

 

푸하! 일단 디자이너가 사용하는 lineHeight에 대해 알아보자! 

위 그림과 같이 말 그대로 한 line에 들어가는 font의 height를 나타낸다.

따라서 lineHeight의 %가 증가할 수록 파란 박스가 늘어나는 것을 확인할 수 있다.

 

 

예시를 보면,

lineHeight가 100%인 경우에 비해 lineHeight가 150%인 경우, 높이가 45 -> 90 로 1.5가 늘어난다.

그리고 2줄인 경우에는 그 간격이 15가 되면서 1줄을 2번 쌓아올린 것처럼 된다.

아하! 그림으로 보니까 이해가 되고 쉽죠 ? 헤헤,, 피그마로 열심히 그려봤어요 ~~

 

근데,,, 이게 왜 문제가 되냐면, SwiftUI에서는 LineHeight을 제공해주지 않기 때문이다.

SwiftUI가 가지고 있는 건 오직... LineSpacing 이 녀석 뿐...

 

 

2️⃣ LineSpacing의 개념

그래서 LineSpacing이 뭐냐면요..!

LineSpacing을 통해서 아래와 같이... line이 늘어나게 될 때 윗 줄의 bottom ~ 아랫줄의 top 사이의 공간을 정해줄 수 있게 됩니다.

 

🌟 문제 해결

✅ 알아야 하는 것들 정의

1) 글자 사이사이에 들어가야 하는 높이 구하기

 

그림과 같이 나타내기 위해서 글자 사이사이에 들어가야 하는 높이를 구해서 값을 넣으면 되겠다고 생각했다.

그리고 lineSpacing의 값과 padding 값을 구해서 적용하는 방법으로 문제를 해결하려고 했다.

 

1줄인 경우와 2줄인 경우를 나눠서 정리를 했는데, 보면 알겠지만 lineHeight가 150% 이니까, Text의 높이도 1.5배 증가했다.

2) 글자 사이사이에 들어가야 하는 높이를 구하기 위해서  폰트의 높이 구하기

위와 같은 맥락으로 폰트의 높이를 알게 된다면 이를 그대로 1.5배 했을 때 비례하게 코딩을 할 수 있을 것이라 예상했다.

오키... 폰트 높이.. 딱 대...

 

✅ 해결

1) 폰트 높이

Font에서는 없어서 절망편이었는데,

OMG... 이 사랑스러운 녀석... UIFont 안에 보니까 lineHeight를 발견했다 !!

 

⚠️ 사실 실제로 값을 print 해보니까, 피그마에서 font 높이를 쟀던 거랑 1-2px 정도 차이가 나긴 했는데, 어쨌든 똑같은 배수로 늘여주면 된다는 생각에 keep going 했다. -> 이에 대해서 잘 아시는 분 있으면 공유 부탁드립니다...

 

2) 글자 사이사이에 들어가야 하는 높이 

따라서 LineHeight가 150%인 경우, 글자 사이의 높이(7.5)을 구하기 위해서 다음과 같은 식을 세울 수 있게 되었다

글자 사이의 높이 = (font의 lineHeight / 100 * 50) / 4

 

 

3) 쉽게 사용하기 위해서 View extention code 작성

아쉽게도 UIFont에만 lineHeight가 있어서 다음과 같이 구현했다. 분발하자 Font야

 

위의 코드를 통해서 아래와 같이 아주 간편하게 사용할 수 있게 했다.. (엉엉)

 

4) 확인하기

확인을 위해서 다음과 같이 background color를 넣어서 코드 수정하고 앱을 돌렸더니!!

extension View {
    func font(_ font: UIFont) -> some View {
        let fontSpacing = font.lineHeight / 100 * 50 / 4
        return self
            .font(Font(font))
            .background(.red)
            .padding(.vertical, fontSpacing)
            .background(.blue)
            .lineSpacing(fontSpacing * 2)
    }
}

 

 

비교 짤.... 이 미묘한 높이 차이..... 보이시나요 ....?