SwiftUI, Line Height 명확하게 설정하기 (feat, linespacing)

안녕하세요. 린다입니다.

 

프로젝트를 하면서 피그마를 사용하면 디자이너들은 Line Height를 지정해주는데요..

SwiftUI에는 LineSpacing 이 있는데.. 막 적용했을 때 Line Height랑 다르게 보여지더라구요.

 

그래서 Line Height는 무엇인지, 그리고 어떻게 적용해야 하는지를 찾아보았습니다.

 

 

 

중간 글씨들의 Line Height는 20이라고 명시되어 있습니다.

그래서 SwiftUI의 Line spacing에 20을 적용하면

 

 

 

이상하게 나오는데요. 당연합니다. 왜냐면 Linespacing은...

 

*Linespacing 이란? (from. docs)

뷰의 텍스트 요소에 대해 한 줄의 아래쪽에서 다른 줄의 위쪽까지의 간격을 설정하는 값

즉, 한줄부터 다음줄 사이의 거리를 의미합니다. (그냥 단어 그대로의 의미임)

 

그러면 이제는 Line Height가 무엇인지 알아봅시다.

https://brunch.co.kr/@eddwardpark/6

피그마 텍스트, 그리고 라인 높이

아주 잘 정리되어 있는 브런치에요! 읽고 오시는걸 추천합니다.

 

그치만 정리하자면,

00 사이즈의 폰트(글자)가 있을 때 상하 여백을 합친 길이가 Line Height라고 합니다.

 

 

 

다시 피그마로 돌아와서

그렇다면, 글자 사이즈 14, line heigh가 20인 경우에는 어떻게 작성해야 할까?

 

Height에서 글자 사이즈를 빼고 / 2를 하면 그게 위, 아래의 값이 되기 때문에

Line spacing에 3을 주고 비교를 해봤어요.

보기에는 얼추 비슷하지만.. 피그마랑 겹쳐서 확인해보면...

 

 

 

linespacing = 3 일 때

 

 

먼가 이상한 것을 볼 수 있는데... 이유는 linespacing 때문입니다.

왜냐면 linespacing은 한줄부터 다음줄까지의 간격을 의미하기 때문에

 

 

 

 

 

이렇게 여러줄인 경우의 사이에만 적용되기 때문이에요.

그렇다면 맨 위에와 마지막에 padding으로 상하/2인 값인 3을 주면 어떻게 될까?

 

 

 

짠. 이렇게 딱 맞아 떨어지는 것을 볼 수 있습니다.

 

 

정리하자면, 글자 사이즈가 14이면서 Line Height가 20일 때는

Text(desc)
    .font(.medium(14))
    .lineSpacing(3)
    .padding(.vertical, 3)
    .multilineTextAlignment(.center)

 

Line Height - size / 2 한 값을 padding, linespacing에 적용시켜야 합니다.

 

 

 

끝!