[iOS 앱개발] 텍스트의 특정 부분만 수정하기 - AttributedString

안녕하세요 Pingu입니다.

 

오늘은 UILabel와 같은 텍스트를 보여주는 뷰에서 특정 글자만 색을 바꾼다던지 폰트를 적용하는 등의 작업을 해보려고 합니다. 보통 텍스트라고 하면 String 자료형을 갖는데요, 수정이 가능한 String의 속성을 나타내는 NSMutableAttributedString이라는 녀석이 있습니다. 얘를 적절히 조작하면 원하는 텍스트만 색을 바꾼다던가 폰트를 바꾼다던가 할 수 있습니다!

 

실제로 NSMutableAttributedString의 정의를 보시면 아래와 같습니다.

"텍스트의 일부에 관련된 속성이 있는 수정 가능한 문자열입니다"

 

즉 얘를 통해 문자열의 일부만 수정할 수 있다는 말이죠. 그럼 바로 특정 문자열의 색을 바꾸는 것을 해보겠습니다.

 

Label 특정 문자만 색 바꾸기

간단하게 위와 같이 label 하나를 만들고 Pingu라는 글자만 빨간색으로 바꿔보겠습니다. 우선 스토리보드에 만든 label을 outlet으로 연결부터 한 뒤 진행하시면 됩니다!

위와 같이 Pingu만 빨간색으로 바뀌었죠? 코드를 자세히 한 번 보겠습니다.

// myLabel의 텍스트를 가지고 옵니다.
guard let text = self.myLabel.text else { return }

// myLabel의 text로 NSMutableAttributedString 인스턴스를 만들어줍니다.
let attributeString = NSMutableAttributedString(string: text)

// NSMutableAttributedString에 속성을 추가합니다.
// 현재 추가한 속성은 "Pingu"만 빨간색으로 바꾼다! 입니다.
attributeString.addAttribute(.foregroundColor, value: UIColor.red, range: (text as NSString).range(of: "Pingu"))

// myLabel에 방금 만든 속성을 적용합니다.
self.myLabel.attributedText = attributeString

여기서 NSMutableAttributedString 인스턴스의 메서드인 addAttribute로 속성들을 추가할 수 있는데요, 첫 번째 매개변수가 어떤 속성인지를 결정하는 key값입니다. 지금은 foregroundColor라는 key를 사용하여 글자색을 바꾼 것 이죠!

각각의 속성들은 아래 링크에서 value값으로 무엇을 받는지와 함께 자세히 나와있습니다.

developer.apple.com/documentation/foundation/nsattributedstring/key/1524865-underlinestyle

 

Label 특정 문자만 크기, 폰트 바꾸기

그럼 이번에는 빨간색 Pingu의 글자크기를 키워보겠습니다.

코드를 한 번 보겠습니다.

// myLabel의 텍스트를 가지고 옵니다.
guard let text = self.myLabel.text else { return }

// myLabel의 text로 NSMutableAttributedString 인스턴스를 만들어줍니다.
let attributeString = NSMutableAttributedString(string: text)

// 적용할 글자 크기와 폰트를 설정합니다.
let font = UIFont.systemFont(ofSize: 60)

// Pingu에만 방금 만든 폰트를 적용합니다.
attributeString.addAttribute(.font, value: font, range: (text as NSString).range(of: "Pingu"))
        
// myLabel에 방금 만든 속성을 적용합니다.
self.myLabel.attributedText = attributeString

여기서 폰트도 다른 걸로 적용하여 바꿀 수 있습니다! 간단하게 한 번 해보겠습니다.

기본으로 다운되어져 있는 폰트인 Bradley Hand라는 글씨체가 멋있어서 한 번 써봤습니다. ^~^

그럼 Key값으로 다른 속성들도 한 번 써보면서 뭐하는 애들인지 알아보겠습니다.

.backgroundColor

글자 그대로 글자의 배경색을 바꿔주는 속성입니다.

attributeString.addAttribute(.backgroundColor, value: UIColor.red, range: (text as NSString).range(of: "Pingu"))

.strokeColor .strokeWidth

attributeString.addAttribute(.strokeColor, value: UIColor.red, range: (text as NSString).range(of: "Pingu"))

attributeString.addAttribute(.strokeWidth, value: 3, range: (text as NSString).range(of: "Pingu"))

strokeColor는 테두리의 색을 적용하는 속성인데요, 기본값이 0이라서 혼자 쓰면 아무런 효과가 없고 테두리의 두께를 나타내는 strokeWidth와 같이 써야 합니다.

.underlineColor .underlineStyle

attributeString.addAttribute(.underlineColor, value: UIColor.red, range: (text as NSString).range(of: "Pingu"))

attributeString.addAttribute(.underlineStyle, value: 1, range: (text as NSString).range(of: "Pingu"))

이름 그대로 밑줄을 긋는 속성입니다. underlineColor 역시 혼자 쓰면 기본값 때문에 효과가 없고 밑줄의 두께를 나타내는 underlineStyle과 함께 써줘야 했습니다.

.strikethroughColor .strikethroughStyle

attributeString.addAttribute(.strikethroughColor, value: UIColor.red, range: (text as NSString).range(of: "Pingu"))

attributeString.addAttribute(.strikethroughStyle, value: 1, range: (text as NSString).range(of: "Pingu"))

strikethroughColor는 글자 중앙에 선을 그을 때 사용할 색을 설정하는 속성입니다. 얘도 기본값 때문에 중간에 긋는 줄의 값을 설정해줘야 보이게 되는데 줄의 두께인 줄 알았는데 다른 뭔가가 있는 것 같습니다. 예를 들어 value값으로 10을 주면 이렇게 나옵니다.

.baselineOffset

attributeString.addAttribute(.baselineOffset, value: 10, range: (text as NSString).range(of: "Pingu"))

이름에서 느껴지듯이 글자의 밑부분에 offset을 주는 속성이었습니다.

 

.kern

attributeString.addAttribute(.kern, value: 15, range: (text as NSString).range(of: "Pingu"))

음 뭔가 글자 사이에 간격을 주는 느낌이긴한데... 어쨌든 위와 같은 효과를 줍니다. 음수로 값을 줘보니까 아래와 같이 글자들이 뭉쳐집니다. ㅋㅎㅎ

 

이렇게 다양한 옵션들로 텍스트를 가지고 놀아봤습니다.

이걸 잘 활용하면 앱에서 텍스트를 사용할 때 좀 더 풍부한 표현을 할 수 있을 것 같아서 유용할 거 같습니다.

 

감사합니다!