[iOS] 웹뷰(WebView) 뽀개기!

안녕하세요, HoonIOS입니다.:)

 

이번에는 카카오톡 메시지로 url링크가 오고 이것을 누르게 되면 웹페이지가 떠 사용자에게 웹 페이지를 보여주게 되는데요 이럴 때 웹뷰 객체를 사용해서 웹페이지를 뜨게 해 줍니다.

 

따라서 이번에는 이 웹페이지를 뜨게 도와주는 웹뷰에 대해 포스팅하려고 합니다. :)

 

 웹뷰란?

 

API를 통해서 받은 URL을 호출을 해보면 들어오는 응답 값은 JSON, XML 같은 데이터 포맷이 아니라 HTML로 웹페이지가 들어오게 됩니다. 만약 이렇게 데이터가 들어오게 되면 파싱을 해줄 수가 없습니다.

 

그래서 이런 HTML데이터를 처리해서 웹페이지로 보여주고 하는 게 웹뷰입니다.

웹브라우저를 구현하는 방법은 4가지가 있습니다.

 

1. 사파리 앱 호출
2. UIWebView
3. WKWebView
4. SFSafariViewController 

위에서부터 하나씩 알아보겠습니다.

 

 사파리 앱 호출

 

이방식은 iOS에서 제공하는 기본적인 앱인 사파리 앱을 통해서 URL을 제공하는 것입니다.

 

어플을 사용하시다가 특정 버튼을 눌렀을 때 사파리로 이동이 돼 웹페이지가 열리는 것을 보실 수 있으셨을 텐데요,

음...... 예를 들어 제가 최근에 느낀 건 잡코리아나 사람인에 있는 링크를 누르게 되면 사파리 앱이 열려서 해당 링크가 보이게 되더라고요 ㅎㅎ

( 요즘 구직광고를 많이 봐서...ㅎㅎ )

 

이 방식의 매우 큰 장점은 구현하기가 간단해서 몇 줄로 뚝딱하면 끝난다고 합니다, 그리고 http를 받아서 해당 앱에서 처리하는 게 아니라 사파리 앱에서 (외부에서) 처리하기 때문에 ATS설정을 해줄 필요가 없다고 합니다.

 

그렇지만 이 방식의 매우 큰 단점은 이 앱을 아예 벗어서 사파리 앱을 호출하기 때문에 그렇게 좋은 방법은 아니라고 하네요

 

그럼 구현 방법을 한번 살펴보겠습니다.

구현 방법

1. let url = URL(string: " " )
   - 불러올 url을 URL객체에 담아 생성해 줍니다.
2. UIApplication.shared.open(url! options: [:] )
   - 위에서 URL 담은 객체를 위 메서드를 통해 호출해줍니다.
   - Open 메서드는 url을 비동기적으로 여는 메서드입니다.

 

그런데 이 방법을 제외하고 나머지 방법은 앱을 나가지 않고 웹페이지를 브라우징 해주는 특징을 가지고 있습니다.

( 여기서 브라우징이란 앱 내부에서 페이지를 보여주는 것을 말합니다. )

 

 UIWebView & WKWebView

 

UIWebView와 WKWebView는 둘 다 WebView를 기반으로 하고 있습니다.

 

UIWebView는 웹뷰 객체를 이용해서 웹페이지를 보여주는 것으로 WKWebView와 비슷하지만 성능에서 차이가 있습니다. UIWebView는 WKWebView보다 좀 느리기도 합니다.

 

웹뷰는 앱 안에서 사용을 할 수 있는 내장형 웹브라우저입니다. 웹에서 브라우저를 열기 위한 뷰로 생각을 하시면 되는데 이 웹뷰는 HTML데이터를 화면에 표시할 수 있게 아주 중요한 역할을 합니다.

 

웹뷰를 사용하는 방법은 뷰 컨트롤러에 WebView객체를 추가해주고 URL객체를 만들어줘 메서드를 호출하기만 하면 됩니다.

 

이렇게 되면 프로젝트 내부에 저장된 웹페이지를 읽어올 수도 있고, 네트워크를 통해 웹페이지를 읽어올 수도 있는데 여기서 네트워크를 통해 웹페이지를 읽어올 때는 반드시 디바이스가 데이터나 와이파이에 연결이 되어 있어야 합니다.

 

이런 UIWebView & WKWebView 같은 웹뷰들을 인앱 브라우저라고 하는데, 인앱 브라우저는 사파리, 크롬 같은 모바일 브라우저와 동일하게 출력이 되지만 뒤로 가기 앞으로 가기 같은 편의 기능들을 직접 구현해줘야 한다는 단점이 있습니다.

 

그냥 완전 ㄹㅇ 쌩 화면에 웹페이지만 보여주는 기능을 합니다.

UIWebView 구현 방법

1. @IBOutlet var webView: UIWebView! // 웹뷰 아울렛 변수 선언
   
   //urlRequest 객체 생성
   let url = URL(string: "" )
   let request = URLRequest(url: url!)
   
   //loadRequest 메서드로 URL 로드
   self.webView.loadRequest(req)

URL 객체를 생성하고 이 객체를 통해 URLRequest객체인 URL 요청하는 객체를 생성하고 요구 객체를 load 해주면 됩니다.

loadRequest()는 웹뷰에서 사용되는 메서드로 URL에 해당하는 값을 로드해서 불러오는 역할을 합니다.

 

UIWebView는 사파리 앱 호출과는 달리 직접 네트워크와 작업을 해야 하기 때문에 즉 해당 앱에서 웹페이지를 호출해야 하기 때문에 ATS설정을 해줘야 합니다.

그렇지만 HTTPS도메인은 설정을 해줄 필요가 없죠!

이 부분은 <REST API 호출 방법 & 구현하기>에 적어놓았습니다.!

 

이제 UIWebView랑 비슷한 WKWebView의 구현 방법에 대해 알아보겠습니다.

WKWebView 구현 방법

이 웹뷰는 UIWebView와 구현 방법이 거의 동일하지만 살짝 다릅니다 ㅎㅎㅎㅎ 비스으으으읏 합니다.!

 

WKWebView에서는 WebKit 프레임워크를 무조건 반입시켜야 합니다.

만약 이 프레임워크를 반입시키지 않으면 WKWebView을 아울렛 변수로 지정해줄 때 에러가 발생을 하게 됩니다.

 

1. //프레임워크 반입
   imprt WebKit
   
   @IBoutlet var webView: WKWebVIew!
   
   let url = URL(string: "" )
   let request = URLRequest(url: url!)
   
   self.webVIew.load(request)
2. 나머지 URL객체를 만들어서 이것을 request객체로 하는 것까지 같고 webView에서 로드하는 메서드 이름이 다른데요,
   여기서. load() 메서드를 사용하여 로드를 하게 됩니다.

 SFSafariViewController

 

이 객체는 사파리 앱을 거의 그대로 지원을 하고 있어 앱 내부에 넣어서 사용할 수 있도록 컨트롤러 객체 형태로 구현이 되어있습니다.

 

앞에서 설명한 webVIew는 일일이 뒤로 가기, 앞으로 가기를 구현해줘야 한다고 했는데요, 이 컨트롤러를 사용하면 앱 내부에서 모든 옵션이 다 있는 브라우저를 구현할 수 있어서 정말 편합니다.

 

이 객체의 장점은 방금 말씀드린 것처럼 webView와는 다르게 UI작업을 해줄 필요가 없습니다. 즉 스토리보드에서 추가해줄 것이 없을 뿐만 아니라 URL을 URLRequest객체로 만들어줄 필요가 없습니다.

 

대신에 사파리 서비스 프레임워크를 임포트 시켜줘야 합니다.

 

그냥 메서드를 호출하는 게 아니라 이미지 피커 컨트롤러나 알림 창 같이 컨트롤러 위에 뷰가 호출되는 방식으로 present메서드를 사용하여 띄어줍니다.

 

SFSafariViewController 구현 방법

1. //프레임워크 반입 
   import SafariServices
   
   let url = URL(string: "" )
   //URLRequest를 만들지 않고 SFSafariViewController객체로 url을 초기화해줍니다.
   let safariViewController = SFSafariViewController(url: url!)
   
   present(safariViewController, animated: true)

 

앱에서 웹페이지를 로딩하는 4가지를 포스팅해봤습니다.

 

이번 포스팅에서 WebView는 일일이 뒤로 가기 등을 구현해줘야 한다고 했는데요

 

그.래.서.!!!!

 

다음 포스팅에는 해당 객체의 메서드에 대해 포스팅을 해보겠습니다.

 

다들 화이팅!!