[SwiftUI] Line Height 설정하기

SwiftUI로 개발하다 보면 불편한 점.. Text의 Line Height를 바로 설정할 수 없다는 점이다. 커스텀 된 디자인에서는 분명 디자이너가 글자의 높이까지 고려해서 디자인을 했을 텐데, 종종 그냥 넘어간 경우도 있었다. (하하 비밀..) 하지만 위젯 개발을 하면서 폰트의 높이가 중요하게 작용하고 있어서, SwiftUI로 Font 높이 설정하는 방법을 찾아봤다.

 

오늘의 결론.

struct ContentView: View {
    private let height = UIFont(name: "SpoqaHanSansNeo-Bold", size: 40)?.lineHeight ?? 50
    
    var body: some View {
        VStack {
            Text("Hello, world! Hello, world! Hello, world!")
                .font(Font.custom("SpoqaHanSansNeo-Bold", size: 40))
                .lineSpacing(80 - height)
                .padding(.vertical, (80 - height) / 2)
        }
        .padding()
    }
}

 

 

위 코드에서는 테스트해 보기 위해 냅다 폰트 이름도 쓰고 있고, View 안에 height 값을 넣어놨다. 하지만, 실제 사용할 때는 FontExtension이나 프로젝트 내에서 사용하는 방법이 있다면, 그 안에서 잘 적용해서 사용하면 좋을 것 같다. 그리고 ViewModifier로 만들어도 좋을 것 같고! 아무튼 이 코드가 동작하는 방식을 하나씩 알아보자.

 

동작 방식.

요구 사항이 다음과 같다고 가정하자. 하나씩 천천히 생각해 보자.

<Font size: 40, height: 80>

 

line height를 적용할 땐, 높이를 차지하는 공간에서 실제 글자는 가운데에 놓여있어야 한다.

그렇기 때문에 디자인에서 요구한 폰트의 높이에서 실제 폰트의 높이만큼 빼고 2로 나눈 값만큼 위아래 공간을 추가해 주면 된다.

(한 줄일때 설명 이미지)

 

(두 줄 이상일때 설명 이미지)

두 줄 이상일 때

 

(부족한 표현 실력 ㅎㅎ..) 하나씩 적용해 보자.

 

 

1. 폰트를 적용한다.

Text("Hello, world!")
    .font(Font.custom("SpoqaHanSansNeo-Bold", size: 40))
    .background(Color.yellow)

 

먼저 Text에 Font를 적용해서 size를 맞춰준다. 뒤에 노란 배경이 잘 나타난다.

 

 

2. 폰트 높이를 계산한다.

private let height = UIFont(name: "SpoqaHanSansNeo-Bold", size: 40)?.lineHeight ?? 50

SwiftUI Font는 lineHeight를 직접 알아낼 방법이 없었다..

대신 UIFont의 폰트 크기를 확인해서 아래 계산에서 활용하기로 했다.

UIFont의 lineHeight는 Optional 값인데, 기본값으로 실제 출력해 보고 값을 넣어두어도 좋을 것 같다.

 

 

3. lineSpacing을 적용해 줄과 줄 사이의 공백을 만들어준다.

Text("Hello, world!")
    .font(Font.custom("SpoqaHanSansNeo-Bold", size: 40))
    .background(Color.yellow) // 폰트 사이즈 적용
    .lineSpacing(80 - height)
    .background(Color.green) // line spacing 적용

 

이제 SwiftUI의 .lineSpacing을 주고, 초록색 배경을 넣어주지만, 아무런 변화가 없다.

왜냐하면 lineSpacing은 여러 줄일 때부터 적용되기 때문이다.

그렇다면 한 줄일 때는 어떻게 높이를 설정해줘야 할까?

 

 

4. Text의 가장 상단과 하단에도 여백을 만들어준다.

Text("Hello, world!")
    .font(Font.custom("SpoqaHanSansNeo-Bold", size: 40))
    .background(Color.yellow) // 폰트 사이즈 적용
    .lineSpacing(80 - height)
    .background(Color.green) // line spacing 적용
    .padding(.vertical, (80 - height) / 2)
    .background(Color.blue) // 위 아래 여백을 적용

 

그러면 파란색 배경을 적용한 padding까지 잘 나타나게 된다. 여러 줄을 작성해도 잘 적용된다.

 

참고

* 원하는 폰트를 사용하는 방법

iOS 프로젝트에서 Custom Font 사용하기

 

iOS Line Spacing, Line Height

How to set line height for a single line text in SwiftUI?