[UIKit] extension으로UILabel의 행간과 자간을 조절하는 방법

지금 애플 디벨로퍼 아카데미에서 마지막 프로젝트를 진행중이다. 
운이 좋게도, 정말 하고싶은 팀원과 팀을 이룰 수 있게 되었고, 그중에서 가장 같이 개발공부를 해보고싶었던,, 소문난 '갓듀'와 함께할 수 있었다. 개발적인 측면, 그리고 소통하는 방식, 개발철학 등에서 정말 배울게 많았다. 오늘부터 갓듀로부터 배운 것들을 하나씩 정리해나가고, 온전히 나의 것이 될 수 있도록 글을 꾸준히 작성할 것이다.

https://github.com/DeveloperAcademy-POSTECH/MacC-Team-EarthValley80

GitHub - DeveloperAcademy-POSTECH/MacC-Team-EarthValley80: 에듀 테크 문의는 인스타(@earthvalley80) DM 주세요🙏

---

💬 오늘 분석할 코드

개발을 하다보면, extension 을 활용하여 다양한 메서드를 구현해놓고, 편하게 개발하려고 한다. 대표적으로 UIColor를 이름으로 지정할 수 있도록 extension을 만든다거나, 우리 앱의 글꼴을 편하게 적용할 수 있도록 하거나 등등,, 

마지막 프로젝트에서 우리는 '신문 기사 읽기'와 관련된 컨텐츠로 앱개발을 진행한다.
여기서 가장 중요한건, '글의 단락'에 대한 스타일이었다. 디자이너의 의도를 헤치지 않고, text들을 앱으로 잘 표현해내야했다.

그래서 우리 팀원 한 분이 UILabel에 대한 extension을 생성했고, 글자의 자간과 행간을 조절할 수 있는 메서드를 만들어 두셨다. 이 코드에 대해서 분석해보자.

📝 UILabel에 대한 extension 코드는 아래와 같다.

아래 깃허브 링크에서 setLineSpacing 메서드를 보면 된다.

https://github.com/DeveloperAcademy-POSTECH/MacC-Team-EarthValley80/blob/develop/EarthValley80/EarthValley80/Global/Extensions/UILabel%2BExtension.swift

GitHub - DeveloperAcademy-POSTECH/MacC-Team-EarthValley80: 에듀 테크 문의는 인스타(@earthvalley80) DM 주세요🙏

코드는 보기 편하게 접은글로 한번 더 ... 

- UILabel의 자간과 행간을 조절하는 extension

extension UILabel {
    func setLineSpacing(kernValue: Double = 0.0,
                        lineSpacing: CGFloat = 0.0,
                        lineHeightMultiple: CGFloat = 0.0) {
        guard let labelText = self.text else { return }
        
        let paragraphStyle = NSMutableParagraphStyle()
        paragraphStyle.lineSpacing = lineSpacing
        paragraphStyle.lineHeightMultiple = lineHeightMultiple
        
        let attributedString:NSMutableAttributedString
        if let labelattributedText = self.attributedText {
            attributedString = NSMutableAttributedString(attributedString: labelattributedText)
        } else {
            attributedString = NSMutableAttributedString(string: labelText)
        }
        
        attributedString.addAttribute(NSAttributedString.Key.paragraphStyle,
                                      value: paragraphStyle,
                                      range: NSMakeRange(0, attributedString.length))
        attributedString.addAttribute(NSAttributedString.Key.kern,
                                      value: kernValue,
                                      range: NSMakeRange(0, attributedString.length))
        
        self.attributedText = attributedString
    }
}

---

💬 자 이제 궁금한점을 풀어보자

1️⃣ NSMutableParagraphStyle()

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineSpacing = lineSpacing
paragraphStyle.lineHeightMultiple = lineHeightMultiple

setLineSpacing 메서드로부터 lineSpacing과 lineHeightMultiple을 입력받아왔다. 이게 의미하는게 뭘까

 

NSMutableParagraphStyle()

🍎  공식문서

An object for changing the values of the subattributes in a paragraph style attribute.
단락 스타일 속성의 하위 속성 값을 변경하기 위한 개체입니다.

https://developer.apple.com/documentation/uikit/nsmutableparagraphstyle

말 그대로 ‘단락의 스타일을 지정하기 위한 개체’이다. 해당 개체로 단락의 여러가지 스타일을 적용할 수 있다. 예를들어 텍스트 정렬, 자간행간 간격, 들여쓰기, 줄 높이 등에 대한 속성을 적용시킬 수 있다. 어떤 스타일을 적용시킬 수 있는지는 공식문서를 참고하자.

우리는 ‘자간과 행간’을 조절할 것이기 때문에 두가지 메서드를 선택한 것이다.

그게 바로lineSpacing 과 lineHeightMultiple~

 

lineSpacing이란

🍎 공식문서

The distance in points between the bottom of one line fragment and the top of the next.
한 줄 조각의 맨 아래와 다음 조각의 맨 위 사이의 거리(포인트 단위)입니다.

https://developer.apple.com/documentation/uikit/nsmutableparagraphstyle/1528742-linespacing

lineSpacing으로 행간을 조절할 수 있다.

 

lineHeightMultiple이란

🍎 공식문서

The line height multiple. (라인 높이의 배수를 지정할 수 있다.)

https://developer.apple.com/documentation/uikit/nsmutableparagraphstyle/1524596-lineheightmultiple

 

🤔 음??? 무슨말이야;; 라인 높이의 배수라니?

말 그대로 행간은 linespacing이라는 키워드로만 충분히 커버 가능하지만, line 높이의 배수만큼 띄워주기 위해서 lineHeightMultiple도 사용하기도 한다고 한다!!

아래는 lineSpacing과 lineHeightMultiple의 차이를 묻는 내 질문에 대답해주신 우리 팀원 갓듀의 설명

---

2️⃣ NSAttributedString()

attributedString.addAttribute(NSAttributedString.Key.paragraphStyle,
                              value: paragraphStyle,
                              range: NSMakeRange(0, attributedString.length))

attributedString.addAttribute(NSAttributedString.Key.kern,
                              value: kernValue,
                              range: NSMakeRange(0, attributedString.length))

 

NSAttributedString이란

🍎 공식문서

A string with associated attributes (such as visual style, hyperlinks, or accessibility data) for portions of its text.텍스트 부분에 대한 관련 속성(예: 비주얼 스타일, 하이퍼링크 또는 접근성 데이터)이 있는 문자열입니다.

https://developer.apple.com/documentation/foundation/nsattributedstring

그렇다. NSMutableParagraphStyle 로는 단락의 스타일을 조절하고, NSAttributedString으로는 텍스트의 스타일을 조절할 수 있었다. 위에서 단락의 스타일을 지정해주었다. 이것을 텍스트에 적용해야하지 않을까?!😉

그래서 NSAttributedString.Key.paragraphStyle에 접근해서 적용해주는것이다.

 

그래서 이렇게 텍스트에 스타일을 적용하는 방법은?

내장 addAttribute메서드와 NSAttributedString.Key 를 활용하자

✔️ NSAttributedString.Key 이란? 
속성이 있는 문자열의 텍스트에 적용할 수 있는 속성입니다.
      → Key에는 다양한 속성이 있다. (글꼴, 색상, 백그라운드, 하이퍼링크, 취소선, 굵기 등! 공식문서참고)
      https://developer.apple.com/documentation/foundation/nsattributedstring/key

 

✔️ func addAgttribute()
Adds an attribute with the given name and value to the characters in the specified range.
지정된 범위의 문자에 지정된 이름과 값을 가진 속성을 추가합니다.

👏 이렇게 생겼지롱

📝 매개변수로는 뭘받지? (매개변수 설명!)
- name: 속성 이름을 지정하는 문자열입니다. 속성 키는 다른 프레임워크에서 제공하거나 사용자가 정의한 사용자 정의 키일 수 있다.
- value: The attribute value associated with name.위에서 정의한 Key에 적용될 스타일을 넣어주자. 우리 같은 경우에는, 우리가 지정한 단락 pargraphStyle을 넣어주었다.
- range: 지정된 스타일을 어디에다가 적용할건지 문자의 범위를 지정해줬다..

< 공식문서 >
https://developer.apple.com/documentation/foundation/nsmutableattributedstring/1417080-addattribute

 

---

3️⃣ Kern이란?

자간이라고 생각하면 편하다. 애플 공식문서에서는 ‘문자의 커닝’ 이라고 하는데 도대체 무슨말이니!

세상의 모든 정보가 담겨있는 나무위키에서 명확하게 알려주었다.

문자의 커닝이란, 시각적으로 만족스러운 결과를 얻기 위해 비례 글꼴로 문자사이의 간격을 조정하는 프로세스이다.

무슨 프로세스,,화… 해놓은 무언가를 말하는것 같은데, 어쨋든 자간을 조절하는 키워드가 kern 이구나!

출처: 나무위키

 

---

💬 마무리

오늘 이렇게 팀원의 코드를 보면서 하나하나 자세하게 알아보았다. 이렇게 알아보는 시간을 따로 가지니까 더 이해가 쏙쏙 되고, 이제 남이 만들어둔 extension을 잘 활용할 수 있을 것 같다. 

이전 프로젝트를 진행하면서, 남이 만들어 둔 extension을 잘 활용하지 못했었다. 이렇게 분석해보고 하나하나 파헤치면 다 되는구나! 뿌듯한 하루다 👻🎃