Swift HTML 코드 로드하기

Swift HTML 코드 로드하기

 

🚨 문제상황 🚨

노션 웹 페이지를 webView를 통해 보여주고 있었는데, 로딩이 오래걸린다는 문제점이 있었음.

 

이를 개선해보고자 했고, 노션 페이지를 내보내기를 통해 HTML, PDF로 바꾸어서 서버에서 내려주는 방식으로 시도해보기로 함.

 

노션 페이지를 PDF로 내보내서, PDFKit을 사용하는 방법에는, 보여주고자 하는 페이지의 특성이랑 PDF로 뚝뚝 끊기는 것이 맞지 않아서 어색했으며, 무엇보다도 mac의 아이콘이 window화 되어서 예쁘지 않다라는 큰 문제점이 있었음

 

결국 직접 notion 주소를 호출하는 것이 아닌 html주소를 호출해보고자 함.

 

 

🌿 결과물 UI 🌿

 

 - 왼쪽: 노션페이지를 webView를 통해 load한 것

✅ 장점: 노션에 구성한 UI를 그대로 보여줄 수 있음.

🚨 단점: 페이지 로딩까지 시간이 오래걸림. 

🐬 특이점: 안드로이드는 웹뷰 처리가 안되다고 들어서 safari나 google로 연결해야함.

 

 - 가운데: webView를 통해 html코드 파일을 loadFileUrl을 통해 파일을 보여준 것

✅ 장점: 노션에서 구성한 UI를 보여줄 수 있으며, 이미지도 서버에서 HTML의 이미지 경로만 수정한다면 보여줄 수 있음. 또한, 속도도 나쁘지 않아서 사용자가 불편하다고 느낄 정도는 아님.

🚨 단점: 노션을 내보내기를 통해 생성된 HTML파일의 이미지 리소스 경로를 직접 수정해서 서버에서 이를 갖고 있어야 하며, 보다시피 폰트 사이즈가 원하는 것 보다 작게나옴.

🐬 특이점: 하이퍼링크 사용 가능

 

 - 오른쪽: webView를 통해 loadHTMLString사용하여 String값을 webView로 보여준 것.

✅ 장점: 노션에서 구성한 UI를 보여줄 수 있으며, 서버에서 String으로 바로 주면 되기에 관리가 수월함. 또한, 속도도 나쁘지 않아서 사용자가 불편하다고 느낄 정도는 아님.

🚨 단점: loadFileUrl과 같은 단점을 가지며 결정적으로 이미지 처리가 사실상 불가능함.

🐬 특이점: 하이퍼링크 사용 가능

 

노션, loadFileURL, loadHTMLString

 

✅ 전체코드 ✅

여기 코드는 로컬에서 파일을 갖고 있어서 테스트 가능하도록 만들었음

만약 서버 통신이 붙는다면, 통신을 통해 받아온 파일을 저장해서 사용하도록 변경해야 함.

 

//
//  HTMLWebViewController.swift
//  RelamStudy
//
//  Created by Hamlit Jason on 2022/10/05.
//

import UIKit
import WebKit
import SnapKit

class HTMLWebViewController: UIViewController, WKUIDelegate, WKNavigationDelegate {
    
    /// HTML 페이지를 로드합니다.
    func loadHTMLpage() {
        webView.uiDelegate = self
        webView.navigationDelegate = self
        
        // 파일이름 ex) blog.html
        let resourceString = "blog"
        guard let url = Bundle.main.url(forResource: resourceString,
                                        withExtension: "html")
        else {
            print("guard문에 걸려버렸어요.")
            return
        }
        
        // 1. 왼쪽
        webView.load(URLRequest(url: URL(string: "{ notion url }")!))
        // 2. 가운데
        webView.loadFileURL(url, allowingReadAccessTo: url)
        // 3. 오른쪽
        webView.loadHTMLString(htmlStringText, baseURL: nil)
        
    }
    
    // MARK: - Life Cycle
    override func viewDidLoad() {
        super.viewDidLoad()
        
        print(#function)
        
        view.addSubview(webView)
        webView.snp.makeConstraints {
            $0.edges.equalToSuperview()
        }
        loadHTMLpage()
    }
    
    private var webView = WKWebView()
}

//
let htmlStringText = """
 { 여기 코드는 보안상의 이유로 제공할 수 없습니다 }.

여기에 노션에서 추출한 HTML코드를 넣어주세요.
1. 노션에서 추출한 파일을 Xcode 프로젝트 안에 넣는다.
2. 그 파일을 클릭하면 코드가 있을탠데 전체를 복붙해서 여기에 넣는다.
"""

 

✅ 결론 ✅

이번에 구현하는 화면이 채팅창과 비슷한 것을 구현하는데, 정적인 화면이라 노션을 가지고 그냥 보여주려고 했음.

결국 이런저런 문제로 native로 전부 구현하기로 결정!

 

 

 

 

(참고)

http://yoonbumtae.com/?p=3922 

Swift(스위프트): 오프라인 웹 페이지 표시하기 (스토리보드) - BGSMM