👨🏻💻 Swift - WKWebView
[ WKWebView란 무엇인가? ]
WKWebView는 iOS 앱 내부에서 웹 콘텐츠(HTML, CSS, JS)를 렌더링 하고 표시할 수 있게 해주는 프레임워크 객체이다.
쉽게 말해 앱 내부에서 작은 브라우저를 띄운다고 생각하면 된다.
[ 왜 WKWebView를 써야 할까? ]
① 강력한 성능 (Nitro Engine)
사파리 브라우저와 동일한 Nitro 자바스크립트 엔진을 사용합니다. 덕분에 하이브리드 앱이나 복잡한 웹 페이지도
네이티브에 준하는 빠른 속도로 구동됩니다.
② 멀티 프로세스 구조 (Stability)
가장 중요한 기술적 차이가 있습니다.
WKWebView는 앱의 메인 프로세스가 아닌 별도의 프로세스에서 실행됩니다.
UIWebView : 웹뷰에서 메모리가 터지면 앱 전체가 같이 꺼짐
WKWebView : 웹뷰 프로세스가 비정상 종료되어도 앱은 살아남으며, 델리게이트 메서드로 복구 기회를 얻음
③ 유연한 커스터마이징
단순히 웹을 보여주는 것에 그치지 않고, 네이티브 코드(Swift)와 웹 코드(JavaScript) 사이에서 데이터를 주고
받으며 앱의 기능을 확장할 수 있습니다. (예 : 웹뷰 내의 "결제하기" 버튼을 누르면 아이폰의 "Apple Pay"가 실행되도록 구현 가능)
[ 실무에서 주로 쓰이는 케이스 ]
1. 공지사항 및 이용약관 : 내용이 자주 바뀌는 문서를 서버 점검 없이 즉시 업데이트하고 싶을 때
2. 하이브리드 앱 : 앱의 전체적인 틀은 네이티브로 짜고, 콘텐츠 영역만 웹으로 구성할 때
3. 외부 링크 연결 : 사용자에게 앱을 나가지 않고도 외부 기사나 웹사이트를 보여주고 싶을 때
[ WKWebView에 데이터를 넣는 방법]
1. 로컬 파일 로드 : loadFileURL(_:allowingReadAccessTo: )
앱 번들(Bundle) 안에 포함된 HTML 파일이나, 사용자 도큐먼트 폴더에 저장된 파일을 불러올 때 사용합니다.
- 데이터 타입 : URL (파일 경로)
- 사용 예시 : 오프라인 상태에서도 보여줘야 하는 이용약관이나 가이드 페이지
if let filePath = Bundle.main.path(forResource: "index", ofType: "html") {
let fileURL = URL(fileURLWithPath: filePath)
// allowingReadAccessTo: 이 파일이 참조하는 다른 자원(CSS/이미지)이 있는 상위 폴더 경로
webView.loadFileURL(fileURL, allowingReadAccessTo: fileURL.deletingLastPathComponent())
}
2. 바이너리 데이터 로드 : load(_:mineType:characterEncodingName:baseURL:)
서버에서 HTML 코드를 String이 아닌 Data(바이너리) 형태로 받았거나, PDF/이미지 같은 파일을 직접 웹뷰에 띄울 때
사용합니다.
- 데이터 타입 : Data
- 사용 예시 : 서버로부터 암호화된 HTML 데이터를 받아 복호화한 후 바로 띄워야 할 때
let htmlData = Data(yourHtmlString.utf8)
webView.load(htmlData,
mimeType: "text/html",
characterEncodingName: "utf-8",
baseURL: URL(string: "https://example.com")!)
3. 웹 서버 URL 로드 : load(_:)
가장 흔히 사용하는 방식으로, 실제 웹 사이트 주소(HTTP/HTTPS)를 호출합니다.
- 데이터 타입 : URLRequest
- 사용 예시 : 네이버, 구글 같은 외부 사이트로 연결 또는 우리 회사의 웹 서비스 연결
if let url = URL(string: "https://www.google.com") {
let request = URLRequest(url: url)
webView.load(request)
}
참고 자료
WKWebView | Apple Developer Documentation
An object that displays interactive web content, such as for an in-app browser.
developer.apple.com
import UIKit
import WebKit
class ViewController: UIViewController, WKUIDelegate {
var webView: WKWebView!
override func loadView() {
let webConfiguration = WKWebViewConfiguration()
webView = WKWebView(frame: .zero, configuration: webConfiguration)
webView.uiDelegate = self
view = webView
}
override func viewDidLoad() {
super.viewDidLoad()
let myURL = URL(string:"https://www.apple.com")
let myRequest = URLRequest(url: myURL!)
webView.load(myRequest)
}
}🎯 WKWebView 사용 예시
[ 이용약관을 WKWebView를 사용해서 표시해 보자 ]
공지사항, 이용약관과 같은 내용이 자주 바뀌지만 서버의 점검(재부팅) 없이 즉시 업데이트 하고 싶을 때
WKWebView를 이용한다고 한다.
나는 이용약관을 서버에서 HTML로 받아서 View에서 WKWebView를 이용해서 화면에 표시해 보려고 한다.
// 웹 뷰
private let webView: WKWebView = {
let wv = WKWebView()
wv.backgroundColor = .backgroundWhite
wv.scrollView.showsVerticalScrollIndicator = false
return wv
}()
private func configureUI() {
[webView].forEach {
view.addSubview($0)
}
webView.snp.makeConstraints { make in
make.horizontalEdges.equalToSuperview().inset(16)
make.top.equalToSuperview().offset(16)
make.bottom.equalToSuperview()
}
}먼저 웹뷰를 만들고, 레이아웃을 잡아준다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>서비스 이용약관</title>
</head>
<body>
<h3>제1조(목적)</h3>
<p>본 약관은 소분해요(이하 "회사"라 합니다)가 운영하는 웹사이트 및 모바일 애플리케이션(이하 "서비스"라 합니다)을 이용함에 있어 "회사"와 이용자의 권리, 의무 및 책임사항을 규정함을 목적으로 합니다.</p>
<h3>제2조(용어의 정의)</h3>
<ol>
<li>"서비스"란 회사가 제공하는 재화의 판매 및 용역 제공 등 회사의 업무 범위를 말합니다.</li>
<li>"이용자"란 "서비스"에 접속하여 본 약관에 따라 "회사"가 제공하는 서비스를 받는 회원 및 비회원을 말합니다.</li>
<li>"회원"이란 "서비스"에 개인정보를 제공하여 회원등록을 한 자로서, "서비스"의 정보를 지속적으로 제공받으며 "서비스"를 계속적으로 이용할 수 있는 자를 말합니다.</li>서버에서 받아오는 html 데이터이다.
// HTML 콘텐츠 바인딩
reactor.state.map { $0.content }
.distinctUntilChanged()
.filter { !$0.isEmpty }
.observe(on: MainScheduler.instance)
.subscribe(onNext: { [weak self] content in
guard let self = self else { return }
self.webView.loadHTMLString(content, baseURL: nil)
})
.disposed(by: disposeBag)WKWebView에 데이터를 바인딩하기 위해서는
loadHTMLString 함수를 사용한다.
html 태그로 오는 content를 loadHTMLString 함수에 넣어주면 끝이다.
'iOS > Swift' 카테고리의 다른 글
| iOS) Hit Testing과 Responder Chain (1) | 2026.03.05 |
|---|---|
| 애플 개발자 계정 등록하기 (0) | 2026.02.11 |
| CoreLocation이란 뭘까? (0) | 2025.10.17 |
| KeyChain에 저장하기 (0) | 2025.09.09 |
| 카카오로 간편 로그인하기 (1) | 2025.09.08 |