[HIG] Web views🌐

Human Interface Guidelines에 대한 해석과 주관적인 사례 분석을 추가한 글입니다.

📍Web views

Web view는 HTML이나 웹사이트와 같은 풍부한 웹 컨텐츠를 앱 내에서 직접적으로 불러와 보여줍니다.

예를 들어,

메일에서는 메세지 내의 HTML 컨텐츠를 보여주기 위해 web view를 사용합니다.

 

📍Best practices

Enable forward and back navigation when appropriate

Web view에서는 앞뒤 탐색을 제공하지만, 이 행동은 기본적으로 사용할 수 없습니다.

WKWebView 디폴트 (기본적으로 앞뒤 탐색 가능한 컨트롤X)

사용자가 여러 페이지를 방문하기 위해 웹뷰를 사용한다면, 앞뒤 탐색이 가능하게 하고

이러한 기능을 초기화할 수 있는 컨트롤을 제공해야 합니다.

(왼)인스타그램, (오)지그재그

 

Avoid using a web view to build a web browser

Web view를 사용하여 앱의 흐름에서 벗어나지 않고 사용자가 웹 사이트에 잠시 접근할 수 있도록 하는 것은 좋지만,

사용자가 웹을 검색하는 주요 수단은 Safari입니다.

앱에서 Safari의 기능을 복제하려는 시도는 불필요하고 권장하지 않습니다.

 

📍실전 webView

iOS 에서 웹을 보이는 방법

1. WebView를 사용하여 앱 내부에 표시
2. 앱에서 safari를 호출하여 해당 URL 열기
3. SFSafariViewController로 앱 안에서 SafariView로 열기

아래 예시는 1번 방법인 WKWebView를 사용하는 예제이고, 나머지 두 방법은 깃허브 링크를 참고해주세요

 

1️⃣ 기본 그냥 web view

1. http 접근 허용

xcode에서는 자체적으로 http를 막고 https 사용을 허용하기 때문에,

http를 사용하기 위해선 따로 info.plist에서 설정해줘야 합니다.

Info.plist → Information Property List → App Transport Security Settings → Allow Arbitrary Loads

기본 설정은 NO

YES로 바꿔주세욜

2. WKWebView 생성

import WebKit

...

private let webView = WKWebView() // 레이아웃은 Snapkit을 사용하여 별도로 만들어줬습니다.

...

private func setLayout() {
        self.view.addSubview(webView)
//        self.view.addSubview(toolBar)
        
//        toolBar.snp.makeConstraints { make in
//            make.leading.trailing.equalToSuperview()
//            make.bottom.equalTo(self.view.safeAreaLayoutGuide)
//            make.height.equalTo(44)
//        }
        
        webView.snp.makeConstraints { make in
						make.edges.equalToSuperview()
//            make.top.leading.trailing.equalToSuperview()
//            make.bottom.equalTo(toolBar.snp.top)
        }
    }

 

3. URL 생성 후 load

private func setWebView() {
//        self.view = webView // view 자체를 webView로 덮고 싶은 경우
        let url = URL(string: "<https://nosy-repair-8a6.notion.site/Web-views-b0673c13e9564ecfbe880481ab74454b>")
        let request = URLRequest(url: url!)
        webView.load(request)
    }

 

---

요기까지 진행하면 아래와 같이 별다른 컨트롤이 없는 webView를 보일 수 있습니다.

(이전 뷰에서 present로 띄운 뷰에 Web view를 올려줬습니다.)

WKWebView 디폴트

2️⃣ tool bar를 통해 컨트롤 추가하기

HIG의 안내에 따라 앞뒤를 탐색할 수 있는 버튼을 포함한 tool bar를 생성해보겠습니다

private let toolBar = UIToolbar()

...

private func setToolBar() {
        self.toolBar.backgroundColor = .white
        
        let backButtonItem = UIBarButtonItem(title: "뒤로 가기", style: .plain, target: self, action: #selector(backToView))
        let forwardButtonItem = UIBarButtonItem(title: "앞으로 가기", style: .plain, target: self, action: #selector(forwardToView))
        let refreshButtonItem = UIBarButtonItem(title: "새로 고침", style: .plain, target: self, action: #selector(refreshView))
        
        let items = [backButtonItem, forwardButtonItem, refreshButtonItem]
        self.toolBar.setItems(items, animated: true)
    }
    
    private func setLayout() {
        self.view.addSubview(webView)
        self.view.addSubview(toolBar)
        
        toolBar.snp.makeConstraints { make in
            make.leading.trailing.equalToSuperview()
            make.bottom.equalTo(self.view.safeAreaLayoutGuide)
            make.height.equalTo(44)
        }
        
        webView.snp.makeConstraints { make in
            make.top.leading.trailing.equalToSuperview()
            make.bottom.equalTo(toolBar.snp.top)
        }
    }
    
    @objc
    private func backToView() {
        if webView.canGoBack {
            webView.goBack()
        } else {
            print("뒤로 못감")
        }
    }
    
    @objc
    private func forwardToView() {
        if webView.canGoForward {
            webView.goForward()
        } else {
            print("앞으로 갈게 없음")
        }
    }
    
    @objc
    private func refreshView() {
        webView.reload()
    }

결과