로고

SwiftUI Attributedstring 2탄: HTML을 WKWebView없이 그려보자

작성일 :

SwiftUI AttributedString 2탄: HTML을 WKWebView없이 그려보자

개요

SwiftUI는 애플의 사용자 인터페이스 프레임워크로, 코드의 간결성과 유연성을 제공합니다. WKWebView는 복잡한 HTML 렌더링을 위해 자주 사용되지만, 때로는 더 가벼운 해결책이 필요합니다. 이 글에서는 SwiftUI 내에서 WKWebView 없이 HTML을 그리는 방법에 대해 알아봅니다.

AttributedString이란?

AttributedString은 문자열에 다양한 속성(예: 폰트, 컬러 등)을 부여할 수 있는 강력한 클래스입니다. iOS 15부터는 SwiftUI에서도 AttributedString을 본격적으로 사용할 수 있게 되었습니다. 이 기능을 사용하여 HTML을 렌더링하는 과정을 살펴보겠습니다.

AttributedString 초기화

기본적인 사용 방법은 다음과 같습니다:

swift
import SwiftUI
import Foundation
import Combine

struct ContentView: View {
    var body: some View {
        Text(attributedString)
    }

    var attributedString: AttributedString {
        var attrStr = AttributedString("Hello, ")
        attrStr.append(AttributedString("world!", attributes: .init([.foregroundColor: UIColor.red])))
        return attrStr
    }
}

이 코드에서 AttributedString은 두 개의 다른 스타일로 구성된 문자열을 생성합니다.

HTML 파싱

이제 본격적으로 HTML 콘텐츠를 AttributedString으로 변환해보겠습니다. 먼저 간단한 HTML 문자열을 준비합니다:

swift
let htmlString = "<html><body><h1>Title</h1><p>This is a <strong>paragraph</strong>.</p></body></html>"

다음으로, 이 HTML 문자열을 AttributedString으로 변환하는 코드를 작성합니다:

swift
import Foundation
import SwiftUI

extension AttributedString {
    init?(html: String) {
        guard let data = html.data(using: .utf8) else { return nil }
        let options: [NSAttributedString.DocumentReadingOptionKey: Any] = [
            .documentType: NSAttributedString.DocumentType.html,
            .characterEncoding: String.Encoding.utf8.rawValue
        ]
        guard let attributedString = try? NSAttributedString(data: data, options: options, documentAttributes: nil) else { return nil }
        self.init(attributedString)
    }
}

이 코드는 HTML 문자열을 NSAttributedString으로 변환한 다음 이를 다시 AttributedString으로 변환합니다.

SwiftUI에서 사용하기

이제 변환한 AttributedString을 SwiftUI의 Text 뷰에서 사용합니다:

swift
struct HTMLTextView: View {
    @State private var attributedString: AttributedString?

    let htmlString = "<html><body><h1>Title</h1><p>This is a <strong>paragraph</strong>.</p></body></html>"

    var body: some View {
        if let attributedString = attributedString {
            Text(attributedString)
                .padding()
        } else {
            Text("Loading...")
                .padding()
                .onAppear {
                    attributedString = AttributedString(html: htmlString)
                }
        }
    }
}

이 뷰는 HTML 문자열을 AttributedString으로 변환하고, 변환된 문자열을 Text 뷰에 표시합니다.

결론

이번 글에서는 SwiftUI와 AttributedString을 사용하여 WKWebView 없이 HTML을 그리는 방법에 대해 알아보았습니다. AttributedString의 강력한 기능을 활용하면 복잡한 HTML 렌더링 작업도 간단하게 처리할 수 있습니다. 이를 통해 성능 최적화와 코드 간소화를 동시에 이루는 것이 가능합니다.